Web Design Considerations

Written by Brian Ledebur

So now that we know what not to do, and we know most of the technical stuff to consider when designing Websites, what’s left? What should we do when we create our designs? Good question. The following lesson is broken down into two sections: one for design, and the other for planning and conceptualization.

Good Layout and Design

In spite of the inherit differences between print and Web design, there are still many similarities that are universal to all forms of design. Concepts like design principals (unity, proportion, etc.), color theory (the color wheel, appropriate color schemes, mood, etc.) and typography all apply to Web design. Since at this point you no doubt have been exposed to these concepts in previous courses, we won’t go over them again here. Instead we’ll consider those that you may consider to be “unique” to Web Design.

If there’s one thing that design teaches us, however, it’s that rules are made to be broken. Determining when to adhere to and when to violate these rules comes with your maturation and evolution as a designer. You won’t necessarily be deducted for violated the following, as long as it’s appropriate and fits the need, mood, and purpose of the site in question.

Remember “The Fold”

We learned all about that 760x420 space we have to work with, and that vertical scrolling is acceptable (as long as it’s reasonable) but horizontal scrolling generally is not. We don’t need our entire page to fit in that 420 pixel high area, but important elements do need to be located “above the fold”. What are some of these elements?

Group Similar Items in One Place

Whether this is navigation items and buttons, news, features, or any aspect of your site, it makes sense to organize them in groups rather than scatter them throughout a page. Keeping these items together will make your site easier to use and more attractive visually, especially when you wish to portray a clean, professional image with your design.

Be Consistent

Users don’t like to be confronted with a different layout and content structure every time they click on a different page. Often you will see site that have a home page or a “splash” page that differs from the interior sub pages. This is ok – it’s like having a storefront to draw customers in. But once inside they need to easily browse and find what they are looking for. Think of your sub page design as a template, and stick to it when you build out. Keep the header, navigation, side items, and anything else that reoccurs in the same place across all your sub pages. And always provide a link to the home page!

Don’t Be Afraid of White Space

Ok, this one isn’t really unique to the Web, but it bears mention. Often beginning designers will start with their 760x420 blank canvas and try to spread everything out as much as possible, filling all areas of the page. As basic design principles will tell you, white space is your friend. Group similar items, and surround areas you wish to emphasize with white space. This will not only improve the appearance of professionalism and organization in your site, but actually increase emphasis on certain areas.

Remember Your Users

Every marketing tool has – or should have – a target market or demographic. But more so on the Web than print; this applies to not only what will appeal to this demographic, but how easily they can use this marketing tool. If the majority of your target market is older and/or not especially tech savvy, keep things simple and straightforward. This is not the time to dabble in experimental layouts and new forms of navigation. Also, be careful not to make your font sizes too small (text on the Web needs to be larger than text for print). Although light text on a dark background is not necessarily wrong, reserve it for instances that are appropriate, and be sure the text is readable (of sufficient size and properly contrast with the background).

Remember the Tables

This cannot be emphasized enough. Make sure your layouts can be adapted to the table structure. Ensure your design elements and page areas can be divided into squares and rectangles, and these squares and rectangles can be reproduced with tables in HTML. Avoid excessive overlapping and arbitrary positioning that may be difficult or impossible to reproduce.

For More Information:

http://www.usability.gov/guides/index.html