5 Steps to a Successful Web Design (or Re-Design) Part 2

Tweet Today we bring you part two of a four-part series on effective website design.

Step Three - Design Layout.
Designing a layout consists of much more than creating beautiful graphics and adding text to a page. A well designed web page delivers clear communication. Many of the questions asked in the client interview will clearly define what is to be communicated. Each piece of the content must have a purpose or else it should be regarded as clutter and removed. If a user/prospective customer is confused, they will go somewhere else. Less thinking = less confusion. Remember that white-space is a design element and it increases comprehension.

Studies have shown that users don’t read pages, they tend to scan the content. This is referred to as an “F-Shaped” pattern of reading. A web user’s eyes tend to focus on elements within these regions, so use that to your advantage. Put important content in these areas such as a “call to action” or main headlines. Make it quick and easy for visitors to get to the content they want. Another concept of reading gravity is called the “Gutenberg Rule” which splits a page into quadrants. The top-left content is the “primary area” and the bottom-right content is the “terminal area”. The other two sections are the “fallow areas” or areas that get less attention. With this method, buttons should be placed in the “terminal area” since that is where the reader’s eye will rest. This content is important to catching a user’s attention and enticing them to read the rest of your content.

If the 960 grid system is used in the wire framing step, then it is easy to implement a grid-based layout for the design. Grids are used in every type of design and are a way to logically order page elements. In web design a grid-based layout helps to maintain consistency site-wide and aid in another important design element, balance.

The use of color is a great tool in design to focus attention. This is prevalent in many retail sites that put emphasis on shopping carts or software download sites that have a “download” button. Macy’s uses its brand color red, to point out interest areas for the user. The eye moves from the logo to the offer on the right and then to the “checkout” button.

Aviary uses yellow to identify the buttons for each of its programs as well as the “sign up” button. Also, notice that the content is located inside of the “F-shaped” pattern. Legacy Locker’s main page uses a limited palette of blue tones while the “Sign Up Now” button stands out in green. Often, keeping a limited palette is very effective to clear communication and unity on a site. Icons are a quick communication tool used throughout User Interface (UI) design. There are conventions in place that users are familiar with almost universally. A link to a home page may be represented by a house icon. This is commonly know and quickly recognizable. Keep these things in mind as you process the design layout.

Good typography is essential to clear communication in any design. Web typography is no different and many advances have been made in this area.When CSS2 was born in 1998, web type became a little more dynamic allowing linking to fonts via style sheets. With the upcoming implementation of CSS3 and HTML5, a designer is given even more control over typography. Designers have a multitude of typefaces available for desktop publishing, but web designers have long been limited to either using the standard web fonts or making custom type a graphic. There are current “helpers” that web designers can implement such as Scalable Inman Flash Replacement (sIFR) and @font-face in CSS but keeping cross-browser compatibility in mind, some techniques will work and some will not. These replacement tools help the designer to achieve the type style that they could not with standard html. Another key to good web typography is using the correct characters. Using quotes, primes, ampersands, em dashes and en dashes appropriately increases readability of content.

A visually stunning website means nothing to someone who is visually impaired. Accessibility is a very important part of the design process. Much of the implementation of accessibility will be done in the coding step, but it is important to take into account at this stage. There are official sites for accessibility rules and they should be followed. In fact, there are laws regarding web accessibility. The UK has the Disability Discrimination Act (DDA) and, if you design anything related to the U.S. Government, you should be aware of the 508 Act http://www.section508.gov/index.cfm?FuseAction=Content&ID=3. A good guide to follow is the World Wide Web Consortium (W3C) accessibility standards http://www.w3.org/TR/2008/REC-WCAG20-20081211/.

Entire libraries could be written on each of these points. An effective web design comes from experience and a clear understanding of the user base. Be sure to keep elements consistent across a site. Consistency will increase clarity and unite the look and feel of the site. Pay attention to web design trends but do not sacrifice clear communication for fancy techniques.
**********************************************************
Tune in Thursday, April 8 for Part 3 of the series