Florida Views: Development and Vision

I just completed a fantastic, but extremely packed semester at USF. It was full of exceptionally useful course material and I was able to translate a final project for my digital library class into a mock-up for a collection I have been working with at the Matheson Museum. I have been scanning a collection of Florida stereoview cards (about 1,200 total) and creating a finding aid for these objects. Working with these images each week has been truly enlightening as I have learned a great deal about Florida history and am constantly reminded about the surprising youth of this state–at least in a modern sense. My digital library is a preliminary sketch, created using Omeka software, for a full scale library that I will work on over the next few months. Check out the first version to see some great images and maps and stay tuned for updates; I will post a detailed account of the design and curation as the project develops. I love it when I am able to translate coursework into a tangible product, and digitizing is one of my favorite endeavors.

Florida Views: Development and Vision digital library:
http://flstereoview.omeka.net/

Advertisements

Technology as a harbinger of doom? Not really. This work is no Nam June Paik…

I came across some interesting artwork this week called Apple Destroyed Products. The work consisted of photographs of iPhones, iPods, iPads, and MacBooks that had been mutilated in various ways by Michael Tompert and Paul Fairchild. The images are stunning in their beauty. However, this beauty is owed in part to the exquisite look of the Apple products in the first place, all of which remain completely identifiable; nothing has been reduced to a pile of goo. The artists, for their part, state rather unprofoundly that the work is an attempt “to make people think about their relationship with these universally beloved gadgets.” Interestingly, this work doesn’t make me me examine the relationship I have with my technology in any real manner, nor do I believe the artists were engaging in this process.

First off, this is not about just any technology since only new Apple products were used. The artists were acutely aware that a smashed Ipad would be more elegant than a mutilated Acer laptop or a Blackberry Curve phone. Apple exhibits a level of design and engineering that is hard to match. The artists have a reverence for this fact, given that none of the mutilation renders the products unrecognizable. They too are in awe, and this work is purely aesthetic. In the absence of the artist statement, I would have been tempted to view the work not as a comment on technology or Apple gadgets, but as an indictment of consumer waste. We discard these products often in favor of the next new thing, which is both the genius of Apple innovation (read: marketing) and the extreme selfishness of consumerism. I love progress, but we throw away functioning pieces without a thought for those who don’t have access to these devices in the first place. We discard these items into stuffed landfills without regard for environmental impacts, all so we can have a newer device with a chrome finish or better apps. I am guilty of this.

This work falls short, however, of making me really examine my relationship with technology, or with Apple. The fact is, the artists benefited from good design here; they also used technology in the form of digital cameras to document the pieces, undoubtedly printed them with dye sub printing technology, and made sure to submit the works to online venues to get the word out about their show. I only discovered the work when a friend posted a link to Facebook. Technology here has made the work, and the artists have not gone far enough to either loathe or even struggle with the relationship. I see no abject hatred of the destroyed pieces. I see a lack of volume sufficient to comment on the true wastefulness of our culture. I’m sure a thousand bucks worth of new electronics seemed like a lot to the artist, but really, let’s multiply that by at least ten-then maybe, maybe, we start to make a point.

I see no personal relationship to the devices evident either. Tompert cites his motivation for the project as watching his sons fight over an iPod Touch because he was too stupid to make sure each boy had the same games installed on his respective device. Big deal. This is not a comment on how Apple products get people worked up into a frenzy, it is a comment on how kids fight over everything. My brother and I fought over games, toys, books, food; we fought over little chocolate eggs my parents laid out as a scavenger hunt every Easter. Kids fight; it’s not profound. An adult smashing an iPod out of anger that his kids are fighting is stupid. Reading that snippet of the artist statement made me realize that this work was not about anything more than the fact that the toxic liquid oozing out of a broken screen is super pretty.

Does this matter? Well, yes. In the absence of this vacuous artist statement I was willing to see a glimmer of something more than aesthetic pleasure. The artists didn’t take the concept anywhere near far enough, but there was the possibility of a complex message that could be teased out. After reading the artists’ drivel, it is clear this is a one-time series bent on gravy-training off Apple beauty while, (wink wink) offering the notion that people should think. This is not enough. All art makes people think something. And right now I think that if artists are not at all articulate, they have a two choices:

1. ask someone smarter to write the statement
2. remain silent

This is a lesson that these two artists, and many others besides, should learn quickly. Meaning isn’t solely derived from intentionality, but a bad artist statement hinders meaning in a serious way. All I can focus on here is what I wish the work was and that is a sign of an idea that needs more attention. I am forced to identify all the reasons the artists are wrong about the meaning of their own work. Good art transcends this and inspires meaningful conversation and debate. Simplicity of content is not the same as inane or childish intentions, and sometime words eclipse potential.

Check out the work here:
http://www.designboom.com/weblog/cat/10/view/12267/destroyed-apple-products.html

Kodachrome

Today seems like a good day for a little nostalgia. New year, looking forward, looking back–you get the idea. I received a BFA in photography in 2000 and an MFA in photography in 2004. That means that I honed my craft in the wake of transitions to digital photography. Those transitions were swift and sometimes difficult for many who had been invested in film photography for the better part of their lives. I shot many roles of film, developed many prints, and spent hours bent over chemical baths. And this process was wonderful. There is indeed something magical about watching an image appear on paper or unrolling that film from the reel. I have spent more time on digital processes, but I can still admit with the most ardent film supporters that something intangible is gone from the process.

In my entire life I have only shot one roll of Kodachrome. It was difficult to have processed because it needed to be mailed to a lab. I am more of an instant turnaround time fan. And yet, the colors truly were superior. I can see why it earned legendary status in the photo world and even in popular culture. It was jarring a few years ago to hear the inevitable announcement that Kodak would no longer produce the film. It was simply sad to hear last week that the last role was processed. The last of the chemicals are gone. It made me think of holding unprocessed rolls. Of people discovering rolls years later and revealing the contents, sometimes after the photographer had died. It made think of the excitement and mystery of stumbling upon something and the anticipation of waiting for the reveal. And it made me sad to think that those undeveloped Kodachrome rolls out there in the world will be lost. We have lost a little slice of something monumental here and it warrants reflection.

Check out the Mashable Magazine article here:   
http://mashable.com/2010/12/30/say-goodbye-to-kodachrome/

Delicious going under? Really?

First I have to admit that I don’t really utilize Delicious to its full potential, so I guess I am part of the problem here. I have two really great thematic lists set up–both of which accompanied library class projects–that I like to point people to from time to time. Beyond that, I have to say that I don’t often think to go to Delicious for my own information gathering needs. But I should.

I was reading an article recently that suggested some ingenious ways to use Delicious, by, say, tracking which users are tagging current and significant content. By identifying a handful of these super-users it is easy to subscribe to the lists that are most likely to remain current and useful. It also offers a window into who is likely to have a fantastic blog. Finding tech resources (in particular) can be a challenge and Delicious really does offer a way to find the best stuff out there.  There are also fantastic thematic lists that teachers can use to weed through all the information out there to find lesson resources. It is a fantastic time saver for a group of professionals with very little extra time to comb the web. 

Beyond individual users, there are many institutiions that really rely on their Delicious links to share information–schools and libraries are among the most diligent users. So this begs an important question: Is the profitability of a service the only thing that matters? Sure, you can argue that Yahoo is expending valuable time and resources on maintaining Delicious, and that the profit potential is not there. Is it costing them money? Definitely. But who cares? Chalk it up to a social service and move on.

Museums and libraries offer free services all the time, often working on severely limited budgets. The point is to increase benefits of some kind to the community, which is a worthwhile endeavor. Yahoo, on the other hand, has tons of money, and is in the business of making more. Good for them. But is it really so hard for a for-profit company to see the benefits of maintaining a service just because it helps other organizations to better do their jobs? It isn’t costing Yahoo much to maintain Delicious in the grand scheme of things.

What Yahoo needs to do is shift their attitude towards Delicious. Stop trying to make it into a cash cow–we have enough of that on the web already. Instead, why not publicize what a great public service it is (Target promotes their community giving campaigns all the time). It would be the best type of free advertising–the kind where a Goliath of a corporation does something for the little guys, just because they can. You can’t buy that type of public endearment, and I know I would like Yahoo a lot better if I thought they cared at all about something besides profitability. 

Creating a website: Design and technical issues – Part 4

Future Directions & Continuity:

Now for the last post about the design particulars of Taste the World Online.

Blog:

In order to keep the website current, I created a blog for Anne using Blogger. To date I have written all the contents for the site, blog, and Facebook page, however when her schedule settles down a little she will be able to keep the website updated with content through Blogger. The blog will allow her to add recipes and party ideas directly from the Internet, without having to either modify the website or ask me to make frequent additions. What I will maintain are the box areas that feature announcements (like upcoming events). These areas are small, however, and maintenance will be minimal. The blog, however, will ensure that users can find current content associated with the site, so there should be no sense that the storefront might be abandoned. My other hope is that through blogging Anne can develop a following of users that will discover the store website through that forum.

Check out the blog here:
www.tastetheworldonline.blogspot.com/

Site expansion:
The website is small in scale right now due to a number of factors. First, the store is newly opened, so the number of products available is relatively small and the number of products I was provided for photography purposes was even smaller. Therefore some of the category pages have less products listed and some product pages have alternate views while others (that could) do not. The space on these pages will allow for future growth, as will the addition of additional linked pages in each category.
Second, I have left space for buttons and shopping carts associated with ecommerce. I have researched some options and will likely use Zen Cart, which is an open source program that can be customized to fit the look of your website. I have encouraged Anne to create a PayPal Merchant Account to handle the payment (although to date she has been preoccupied with opening the physical store and is not ready to engage in online ordering). After reading about the pros and cons of the PayPal system, I feel that she would benefit from their small commission fee, recognizable status, and the protections they offer for ecommerce. The payment functions seem easy to set up, and they are compatible with many third-party shopping cart applications, including Zen Cart. Adding this functionality will be the next logical step in expanding this site in the future.

For now, the Taste the World website strikes a balance between informational pages (i.e. how to present cheese, why bother with roasted coffee, etc.) and product pages that give descriptive information and prices. Anyone trying to scope out the physical store prior to actually heading down there should find all the information they need on this website. The design and information on the Web should assure potential customers that the physical location—which they can see pictures of on the site—will live up to their expectations of high-quality products and a pleasant ambiance. The future of the site is exciting, as it is designed to grow at the rate of the business, and areas for expansion are already engineered into the basic design.

Creating a website: Design and technical issues – Part 3

Part three of this four part commentary on Taste the World Online addresses issues and challenges. If you have been following my posts over the past few months you are familiar with the discussion of some sticking points. Below are some of the larger challenges I encountered.

Graphics:
I photographed or drew all the images on the website in order to avoid any copyright infringement issues, with a few notable exceptions. I sent my father to photograph the store location images since the physical location is in Upstate New York, which is inaccessible for me at the moment. I also sent an email to the owners of Blair’s Hot Sauces (a small company) and they were nice enough to send me a number of product shots that I could freely use to sell their products. All other icons, buttons, logo, texture elements, and imagery were completed using a combination of Photoshop, Illustrator, photography, and hand drawing. For the logo and quote on the index page I incorporated the font Zapfino, for which I purchased a commercial license. The other font, Caviar Dreams, which I used for the navigational elements, was available under a Creative Commons license that allowed for commercial use.

All the images were sized in Photoshop and then optimized using the “save for web and devices” option. Whenever possible the images were saved as JPEGs, however it was necessary to save some images as PNG-24 files in order to preserve transparency. While this increased the file sizes, in some cases it was necessary in order create an effective design (such as in the creation of the rollover buttons).

I created all the page elements within Photoshop, and then created a CSS file in Dreamweaver that incorporated appropriately placed divs to contain the separate elements. As for the look of the overall page, I incorporated some modern trends to make the page appear sleek. This included the use of rounded corners, which have come to be associated with Web 2.0 design. Far from wanting to invoke that computer feel, however, I balanced transparency, color scheme, and sharp edges with the rounded corners. I made the header fall short of the page edge in order have the background begin to blend with the active area of the page at the top, and added a round corner just at one edge. I had the hand drawn graphic spill over from the header to break up the potential boxiness of the page. I was looking for something sleek and sophisticated that still seemed rich, glamorous, and natural. Similarly, the drop shadows and rounded edges on the transparent boxes were intended to add depth and a stylish edge without screaming out “contemporary.”

Challenges:
Preparing this site from scratch was both interesting and at times frustrating. There was a point when I somehow tweaked the code in a way that caused the website to develop serious issues; I was ultimately unable to recover and after many hours combing the code and reviewing discussion forums in an attempt to discover what I might have done, I simply rebuilt the template. This has made me acutely aware of the fact that I can do simple hand coding and rectify simplistic errors that crop up, but beyond that my skills need serious development. A class will be helpful in refining the basics, as will additional practice.

There were also some elements that proved to be beyond the scope of my knowledge. For instance, I understand that using graphical text poses accessibility and search engine optimization issues. I have read about several alternatives to utilize fancy fonts without creating image files, but decided against incorporating them. First, using SIFR in order to replace fonts seems to be quickly becoming obsolete. Using the CSS rule @fontface is preferable. This method, however, requires that the font carry a web license, which is not necessarily included in a commercial license. My Zapfino font could have been handled in this manner, in particular on the index page where a graphic font occupies a large area in the main content box. This graphic, while it has attached alt text, both bucks accessibility and adds unnecessary size to the page. However, as I read more about the @fontface rule I found a lot of information about it not working in Internet Explorer; the proposed workaround was simply beyond my current skill. I prefer Firefox as a browser, however many people do use IE, so I felt that ignoring such a display issue was problematic. When I have better honed my skills I will definitely rethink the text-graphic issue, but for now it had to suffice.

SEO and promotion:
Since ideally this website will help to attract customers to Anne’s business, I tried to do some things to help with location. For starters, I made sure to include a good, concise Meta description in the code on every page. I also included the Meta keywords, although I remember that the MacDonald text and forums I have seen note that Google mostly ignores keywords because of past abuses. Even so, I added them just in case it will help (and I noticed while combing page sources that most web designers are still including them). I also made sure to include a link to the website from the blog page I created for Anne, as well as from Facebook. I added a link to the page from my own blog as well and put a web link when I created a location for the business on Google Places. I realize that these links fall far short of building a web presence, but it is a start. I attempted to make as much of the page as possible decipherable for web crawlers as well, and despite the exceptions I noted above, made sure heading text was handled in the page as a web-safe font instead of a graphic.

One other challenge I struggled with was the decision about whether to use a pop-up window for the Recipes button. The main issue was that I modified a Blogger blog template to look like the rest of the Taste the World web pages with the intention of using FTP to publish the blog to a page on the main website. Unfortunately I was unaware that Blogger stopped supporting this feature earlier this year. I have been unable, to date, to successfully point the logo on the blog page back to main website, as it defaults to linking to the Blogger page and as far as I can tell they remove the target attribute from the code view within the blogger application. I will eventually rebuild the template from scratch, as I know you can use unique CSS to control the behavior of your own pages, but have not had the time to invest in this project yet. As such, I felt many people would be confused by the similar look of the blog page, yet the lack of functionality of the logo linking back to the index. There is always the back button, but I believe that in not realizing they had left the main website, users might be frustrated by the inability to navigate.

I read a lot of opinions about the frustration a pop-up window causes viewers, but ultimately decided that it was necessary. The users can open the Recipes blog while the main ecommerce site remains open. This seems, for now, to be the best compromise. I also read some heated debates about the controversies between using target= blank or JavaScript to point to a new window. Target= blank is non-compliant with WC3 standards, however it also easy to drop into a site and for now proved to be the best solution… real world design.

Next up, future directions for the website.

Creating a website: Design and technical issues – Part 2

Design Elements:



Good design helps to communicate a message, rather than obscuring the contents of a website. As such, simplicity is a great design consideration. However, simple, clean design does not mean boring design. The following considerations were part of my process to create a layered and sophisticated look that would reflect the gourmet food theme of the website without adding a lot of clutter.

Functionality:
I created the design for this website with a few functional issues in mind. First, since it is a store website featuring products there are certain elements that users expect to find. I kept in mind that such visitors would be driven away from the site if they had to hunt too hard in order to locate these elements. The information about hours and store location is prominently placed on the contact page. Additionally, the address, phone, number and email address are footer elements that remain consistent on each page. Most importantly, however, I considered the ease of navigation. If users can’t find something quickly, they simply move on; quickly equates to within one or two clicks.

The main navigation is situated on the right-hand side of the page, with clearly labeled categories of About, Shop, Contact, and Recipes appearing horizontally in the header. Simple rollover graphics help to indicate that these are links. There is no Home button, however the logo in the upper left is placed in a typical location and links to the index page from all other pages; this is so common that virtually all users would attempt to click there prior to looking for an actual home button (I certainly do). The addition of a button that actually read Home seemed redundant, and I feel that typical Internet users are past the point of needing such a text-based cue to return to the index page of a website. 

The secondary navigation is located on the right-hand side as well, with the main product categories listed vertically. I had initially planned to have this secondary navigation appear when users clicked the shop page, and remain on all tertiary category and product pages. Upon viewing dozens of ecommerce sites, however, I noted that almost all of the designs kept such product navigation intact on every page, including the home page. I decided that this was likely an ingrained expectation of viewers, and that removing the category buttons on the index, about, and contact pages would be aggravating to users.

I also considered whether cascading menus would be appropriate, since the main categories control navigation to particular products. Many sites do use such stacking features to obscure and reveal increasingly specific categories, but I decided in the end that the selection on Taste the World was too small to justify this feature. In fact, it would probably be aggravating to see stacked menus reveal only 3-4 choices, and would create extra clicking, which is a serious design faux pas. Instead, the shop page contains a descriptive category list, with each subheading linked to the appropriate category page. These links are the same as the navigational links on the right, so users can bypass the shop page altogether if desired, or click from within the main content area on the shop page, if that is what they are used to. They can return to any category page at any point within the site simply by using the secondary navigational menu.

The category pages offer thumbnails of products, as well as brief descriptions of the overall category. Ceramics and Accessories, therefore, contains images that link to individual product pages detailing specific price, use, and imagery of serving pieces. The category pages reflect another trend in ecommerce sites, which is to have a series of images on one or more pages that link to more detailed product pages. It is a logical organizational tool and one that is likely expected by most users. The individual product pages are also designed with typical expectations in mind. They include a sizable product shot, and when available and appropriate, alternate views. The alternate views are located as thumbnails below the main image, and are remote rollover buttons. Eventually, the site will include a functional shopping cart, so an add to cart button will be added to each product page; ample space has been left at the bottom to accommodate this future addition.

Beyond navigation, there are some other functional considerations. I used the color contrast analyzer available at Colors on the Web to check my text/background combinations to make sure they met accessibility standards, which they do. The only contrast area that was flagged as problematic was the dark logo on the red header banner. I could not find a color combination that worked in this case while still fitting within the site color palette, and simply made the assessment that the combination was contrasty enough for the majority of Internet users. I also made sure to label all images with alt text to ensure that text readers could effectively process what is a relatively graphics-heavy website. This includes the rollover buttons, which are an image that utilizes text. Beyond the logo, navigational buttons, and a decorative quote on the index page, all text is written in the Trebuchet font, which is approved for the web. Therefore, all text should render correctly in most browsers. Additionally, I increased the spacing between lines and made sure the smallest text was set to a 12pt size to increase the readability of the website contents. I also made the main content block light in color so I could use darker fonts in that area. I felt that light on dark fonts (which I like the look of) should be reserved for the side boxes where short snippets would be easy to read. I felt that the longer text sections required for the main content area might cause fatigue if viewers were expected to read light text on a dark background for such passages.

Balance, texture, and space:

The design is arranged using the rule of thirds, with the main content area occupying two-thirds of the horizontal space, and the navigation and announcement blocks occupy the remaining third. This gives the content area a greater presence on the page, and should pull a viewer’s eye there first. Additionally, the use of burgundy gradients in the header and footer areas creates a sense of balance and unity as the repetition of the colors creates a mirror effect on the page. Additionally, textural elements add interest to the background and help to draw the viewer’s eye across the page. First, the translucent coffee cups in the header bar both mirror the logo design and draw attention across the page towards the navigation bar. The graphic overlaps the background slightly in order to eliminate the boxy feel that might otherwise prevail on the page. The drawings of star anise seeds repeated on the left and right sides of the background help to draw the gaze up an down the page. They also create an asymmetrical balance because the same images are repeated on the left and right, but occupy different spatial areas. The smaller but more numerous left-hand seeds are placed closer to one another, while the larger and more flowing seed drawing on the right is surrounded by more open space. These size and space differences offset one another on the page. Both the coffee cups and spice images reference the store theme and products, and so are not just arbitrary textures.

As for space, some areas have been left open to create an uncluttered feel. There is also room for growth here as there is plenty of space to add a small shopping bag icon and/or search box under the header if the site becomes large enough to warrant such a feature. On the secondary pages there is a lower box in the right-hand column that is intended to contain important information or add graphical interest through images, depending on the page. The separate container box helps to set important sound bites of information or announcements apart from the main content area. As such, the grand opening announcement initially occupied this spot, and has now been replaced by an announcement of a new Bean Club promotion. This important area has been removed on the tertiary product pages, however, in order to make sure the space there remains uncluttered. This is due to the large graphics already in place on those pages; the open area under the navigation bar creates a good balance with the product space, and trying to feature additional content in that smaller box would compete with the main content on those pages.

Color:

Color is perhaps the most important element I considered in this design. I began with the intent of using burgundy because I felt it conveyed a certain richness. Jason Beaird backed up this assumption when he suggested that such deep red conveyed associations with fine living, but that such colors were also associated with power and hunger. This seemed perfect for a gourmet food store. I initially began with the intent of using an analogous color scheme, incorporating other colors that suggested associations with food—namely yellow and orange. After working with these colors, however, I could not find a combination of yellow, orange, and burgundy that appeared sophisticated (no matter how “burnt” the orange color I chose). It simply created a site with a harvest look.
I then decided to use the color palette generator at Colors on the Web to try out different looks. I began with my original burgundy (#80021F) and tried triadic and complementary color schemes. Interestingly, I would never have independently used a complementary color scheme with red and green because it sounds Christmas-like. However, the burgundy was offset by a rather rich green. I then tweaked the green so it was not quite exactly opposite, and ended up with a rich light olive color (#78752C). I then took my new color scheme to Adobe Kuler in order to generate a full palette for my website. There I added tints and shades of the original colors, as well as a rich brown that suggested the idea of coffee to me (an important element of the store). I ended up with a dark, medium, and light version of brown, burgundy, and olive green, and added an ivory color as the lightest tint (in lieu of white). This color palette reminded me of a winery, coffee house, or other sophisticated food topic, and therefore seemed perfect for Taste the World. (I also made my new color palette public, since I love the type of resource sharing that drives the Web.)

The actual website displays all the colors and ranges in the described palette. Every color is repeated somewhere in order to add unity to the elements on the page. The deep brown of the background, for instance, reappears in the hand drawings (which were re-colored in Photoshop to fit the overall palette). The ivory from the main content area is repeated in the main navigational headings, footer text, and rollover graphics. The dark burgundy is repeated in the text heading, and so forth. This all sounds very “matchy,” but it makes for an overall unified look and ensures some weird background element doesn’t suddenly compete with the site contents.

Next up I’ll relay some of the issues and challenges I faced during the design.