See the trees for the forest
2
Posted under: Design
This post is for many of the designers who work on websites - whether exclusively (in the case of web designers) or occasionally (in the case of designers working in communications firms). Most of us are adept at creating good looking design templates. By that I mean a; header, footer, side bar, home page, sub page. These are usually the basics when we go about designing a new website.
However, it shouldn’t end there. More is involved in bringing a design from good, and passable—to the kind you see plastered all over design blogs and awards sites. And if you’re passionate about design, which I assume you are, you’ll notice that there’s something strangely mystic about the really good sites - the ones that are indelibly imprinted in your mind for months. What is it that accomplishes such a feat? It’s usually the amount of time and care that the designer took in polishing the content.
Keep in mind, I am not claiming to be a master at any of these practices. With every new project I’m constantly trying to attain to this higher level of web design. Sometimes I succeed, but not every time. It is, as it should be, an ongoing exercise—after all, there is no such thing as a perfect design.
Here I’ve identified some of the elements of a design that—if given attention—can truly elevate it above most others.
Forms
There are some usability and web design experts that argue passionately that forms should not be styled. They say that it is important for web forms to look consistent regardless of the aesthetic of the overall page.
While I agree that, as one of the most fundamental elements that separate a website from a non-interactive medium like print, a forms’ purpose should be placed over its’ aesthetic, and should never be disguised. However, it makes sense to style a form to the extent that it fits in with the websites’ overall appearance, - even if it’s a simple matter of applying a border color and background to it.
More importantly, thought should be given to an elements’ width, height, and placement among other form elements. Input boxes, text areas, radio buttons and drop down lists should be carefully positioned and labeled in such a way that a user flows from one to the other with ease. This is particularly important in long forms, such as on a registration page.
To take this concept even further, some of the really thoughtful designers have added a sprinkling of Javascript to achieve a highlight effect when the user clicks inside an input box or a text element. This greatly enhances the usability and flow of a form. Just look at this example from Gold Coast Web Design.
Typography
This seems like a given, but in reality, web designers as a whole have yet to match their print-brethren when it comes to typography. While most web designers pay attention to the “template” parts of a design, such as a header which appears on every page, many ignore typography on interior pages and content areas, which are perhaps the most important areas to consider for the user.
Look at the care that the designer(s) of one religious website took to ensure that articles where interesting, even inspiring to look at, and which complement the meaning of the words for their intended users. That, after all is what good typography is about—marrying letter forms to enhance the meaning of the copy.
By the way, if you’re wondering about how to technically implement some of the techniques used here, like drop caps and paragraph indentation, view this post for a web typography tutorial.
Lists
Like forms, lists are often ignored as an inherently ugly web element. And yet, when proper care is taken, a list, unordered or ordered, can break up a content-heavy page and ease the user.
Look at the lists on the Viget Inspire blog, and see how the designers patiently created icons, and background dividers in the footer to make the list of comment entries flow.
Layout variation in sub pages
As previously noted, most designers start with a home page and a sub page, usually consisting of a side bar and content pane, with long copy flowed in place. The downfall of ending it here is that depending on a websites’ content, a simple two column approach may not make sense, or even if it doesn’t, the content may need further styling.
Look at Trale and Poccuo. In each of these two example, the designer has taken care to lay out the content on a case-by-case basis, enhancing the presentation of it dramatically.
Animation
This is may seem like a dirty word to some when it comes to the web. Keep in mind, I’m not talking about Flash intros, or photos in a masthead that fade into each other. I mean animation that actually contributes to the usability and flow of a website, and yet can still function without it.
Two examples I have are Merix Studio and Alex Buga. Notice in the first example, clicking on “Sitemap” slides the menu and the rest of the site down with an eased animation. The same content could have been showed by simply loading a new page. But isn’t this way more fluid and interesting? In the Alex Buga site, you can drag the light, which makes for a nice easter egg.
Process
This is the main point—It can be a real challenge to get your site looking as good when it’s launched as it first did in your finished Photoshop comp.
Many times what happens in the life cycle of a web project is this: the designer creates comps (in Photoshop or Fireworks) and delivers screen-shots to clients for approval. For most straight-forward sites, this is a home page and a sub page option. Then once the client approves the overall template, the designer either hands off the files to a developer, or in some cases, hand-codes the HTML/CSS templates. From there the developer plugs in the back-end with the provided template files.
A crucial component which often gets left out is content implementation. The worst thing you can have happen is send the developer static site copy, and/or get the clients or an in-house editor to write content in the CMS, while the lazy or overworked (or both) designer dusts his hands off and moves on the next project. This is the death of your website. An entire phase should be allocated to having the designer go in and massage copy and images, and to really take the time to get everything outside the template shining. I’m going to go out on a limb and say this: Designing the interface and getting valid XHTML/CSS templates to the back-end developer is half of your design work. The other half should be spent implementing content and photos, massaging the layout, and adding in little touches to lists, paragraphs, forms and javascript touches.
I’m sure some will disagree with me, but I firmly believe is the secret to producing not just passable websites that clients and bosses are happy with, but truly magnificent interactive design.
By Free Gift Box Template
on September 12th, 2008
Nice designs, so sool, and funky, Free Gift Box Template
By aid
on June 12th, 2009
I still wonder if it is possible to learn working with photoshop on my own. I am actually one of such enthusiasts, have read several ebooks already (e.g. http://www.ebook-search-queen.com/ebook/phot/photoshop+basics.all.html ) but still lag behind… Perhaps, I miss something important… Need your help!