Beaird's last chapter focuses on using imagery in a way that creates a pleasing visual appeal without losing sight of the mission to communicate the site contents. He also goes through a number of options for procuring images, including the real faux pas of imagery theft. In fact, I was amused to learn that the latter has its own special name — Google Ganking. I appreciated his descriptions of using different Photoshop techniques to create interesting effects and thought his suggestions were explained in thorough detail, to the point that an even an amateur could follow his advice. Additionally, his choice of very pedestrian imagery helped to drive home the point that much can be done to elevate the look of graphics for a web page. He did have one slight slip, however, that I think bears some attention here.
In a hypothetical example he shows some creative cropping of an image of some stonework on the Biltmore Mansion. He suggests that the somewhat ordinary image will be tweaked for inclusion with a news article about the estate, and proceeds to crop in a manner that allows the head and arm of a relief carving to break the top and side edges of the picture frame; he also manipulates the background and foreground separately to create an unnatural vividness, and thus a 3-D effect, to the carving portion of the image. This raises some questions for two reasons, both related to his choice of client. Since knowing your client's needs is key (and a point he mentions throughout the book), the image manipulation suggested here is surprising. First, the broken frame is atypical of what a newspaper would ordinarily display. It seems less documentary in nature than a news article would require. Perhaps more importantly, however, is that the obvious digital manipulation would cause some viewers to actively question what other images the news source might be doctoring; this is a question I am certain all news sources would choose to avoid at all costs. Therefore, flaunting creative image altering would be an extremely poor choice.
A news source has to maintain a certain image of objectivity (at least to a point) and despite the widespread public knowledge of digital imaging technology it is still scandalous when an image from a news source is exposed as being obviously doctored. It gets at the heart of truth in imagery; people do not want to think a news source is actively manipulating any further than traditional cropping. (I will save the whole philosophical discussion on the history of image manipulation in all forms for a later post.) Now, you may be thinking I am making a lot of this example; it is, after all, not a huge news story or even a real event. The point here, however, is to highlight how easy it is for "designer" mode to control and eclipse content communication in favor of something that just looks cool. Beaird's image would look great on the Biltmore web site or on an artistic museum website feature page, but for a news website it really eclipses the purpose of the news source, which is to communicate factual information. The overall danger here is in sliding into a "photoshoping" mentality where the lines between acceptable manipulation for different sources become very blurry.
As a matter of fact, another image in this section — a shot of downtown Charleston — is also altered. While Beaird doesn't name a source for where the image might wind up, he does seemingly make an alteration that goes unmentioned in the book and that makes me think that such an image tweak is second nature for him. He describes shifting the focal point by cropping the unsightly edge of the image; this includes cropping out power lines near the steeple of a church. Upon close examination of the source image, however, several of the power lines appear to run horizontally from the image edge to behind the church. In the cropped image that area of the shot displays only clear blue, empty sky. He has certainly cropped most of the power lines out, but he obviously also used the cloning tool to eliminate those that couldn't be cropped (I believe he extended the long cloud area this way as well). He fails to mention this point. Again, this is a common practice and is fine, unless the image goes to a news client. That would create an unrealistic, "better" view of reality. I am simply pointing out that his failure to mention the cloning might suggest he isn't thinking about it.
All of that said, Beaird is very cognizant throughout the book that communication is the true purpose of design and he illustrates that point over and over through his examples. Next, I will take a cue from one of his earlier chapters on employing the rule of thirds and showcase some potential web site layouts that I sketched using his 3" x 3" grid method.
Below are eight sketches for possible layouts for the Taste the World website. In the first two I have tried out an off-center one column layout with a large header and a large static image area. The other is a three column layout. The latter seems a bit too busy, but the first could work. The image on the left would remain constant across the page, and the content boxes would contain news and a welcome on the home page. This area could transition to a solid block on the product pages.
These designs incorporate two column layouts as well. In the first, the header incorporates a search box, and the main navigation is located underneath the bar in order to break out of the box a little. A secondary navigation bar will contain product lists. I also took a cue from a website featured in Beaird's book and tried out a grid of images. I like the additional navigation, but am not crazy about the images section. The second design expands the main navigation bar near the top by including the product categories there. I like this idea because the products can remain the focus of the site by virtue of their visibility. The image here is smaller and allows for some negative space on the page. The angled placement would direct the viewer's eye toward the main content block, which would be effective for highlighting that area. I think this design has real potential.
The bottom image here looks too blocky and is out of the running immediately. The top image employs a two column design and like the example above, incorporates a nice area of negative space. I like the organic shape of the header in this design and the incorporation of the product categories in the main header.
In this last set of sketches I have again used two column designs. These seem to be the best for a web site of this size. In the first image I used the general layout of a free CSS template I saw, with a round image of rice overlapping the navigation bar. I thought perhaps some coffee beans or a pile of spices would look good in that area. I was also drawn to the oversized header and navigation, but think that ultimately a simpler design might be better. The last image is a pretty standard design, but I stuck the content area on the left instead of the right. I remember Beaird suggesting this as a way to add emphasis to a content block and I like the look.
While I will play around with these layouts a bit more, I am leaning towards the organic edge header layout. I think with a subtle right-left gradient and an analogous color scheme that this layout would work well for the contents. The product pages can use the left-hand content area to feature thumbnails of additional products while the main header can incorporate the broader product categories. This should make for easy navigation. Now, on to color swatches and images...
No comments:
Post a Comment