Style guide
Design Trends

General design best practices:

  1. Don't make your user think.
  2. Too much choices can confuse and overwhelm the users. Simplify or reduce the number of choices as much as possible. Sometime we need to give the users all available choices and options, but we need to group them consistently. See Redefining Hick's Law
  3. Use good visual hierarchy: Good visual hierarchy isn’t about wild and crazy graphics or the newest photoshop filters, it’s about organizing information in a way that’s usable, accessible, and logical to the everyday site visitor.
  4. Keep it clean and simple. Always fall back on the principles of art and look at how the design uses line, shape, color and spacing. Variations in these things draw the user's attention, while consistency breeds familiarity and easier decision-making.
  5. Give the users reasons to read the web page. People don't really read web sites. Users don't read content until they are motivated and enabled to do so. We need to take titles and headers seriously. Use imagery in the right way. Graphics and images are a huge draw, especially on pages loaded with text. When used correctly, they can make an otherwise heavy page easier to decipher, thus connecting users to the content they care about more quickly. When we view chunks of content as decision-making points, it becomes clear just how much we ask of visitors. Each option is an opportunity to evaluate its importance in the design. Designers who force users to decide between only meaningful and clear options are the ones who deliver an effortless user experience. And when the experience is effortless, everyone wins.
  6. Know your customers: (who your customers are, their age, their gender, the location, their habits, when they use your site, how they use your site, which browser they use, which device they use to access your site, etc)
  7. Know your product: On a site where the end-goal is to get visitors to purchase something, the content should be set up in such a way that it funnels visitors toward that goal. On a site that’s meant to inform, the site content should lead people through the content in a way that one page builds on the last one.
  8. No 'click here'
  9. Keep forms as short as possible.
  10. Indicate which fields are mandatory and which are optional.
  11. Provide alternative contact options, such as address details, telephone number or e-mail addresses, if available.
  12. Once the visitor has completed and sent the form, send him confirmation that his message has been received by the recipient (autoreply).
  13. The visitor should have the option of choosing between languages on every page of the site.
  14. Links for language choice should have a clear and consistent place in the navigation of the site.
  15. Write links to language versions in their corresponding languages.
  16. Use a unique, descriptive title for each page.
  17. Use language that the visitor understands: limit the use of jargon, difficult terms and abbreviations.
  18. Give visitors an 'escape route': possibilities to continue if they get stuck. Escape routes include useful links, being able to use the back button, a search function, and being able to correct input errors immediately.
  19. Don't make visitors guess: provide information on how they can correct errors they have made. Take into account the most common errors.
  20. Eat your own dog food
  21. Create modified error pages for errors such as dead links (404 Not Found) where the visitor is given options for continuing within the site.
  22. In the event of an error message as a result of sending a form, give the visitor the option of correcting the error in the form immediately and don't make him be dependent on the use of the back button.
  23. When implementing a search engine on the website: use 'smart' search technology that takes into account spelling errors, similar search terms, terms in singular or plural form, etc.
  24. Provide a well-organised list of the most relevant search results. If too many search results are provided, it takes visitors too long to find the desired information. Give visitors the option of entering search criteria, or sorting the search results.
  25. Give visitors the option of reporting errors on the site.
  26. Use colours, icons and textual explanations to draw the visitor's attention to an error message and explain the problem.
  27. Give visitors the option of finding information in alternative ways. For example, by providing a sitemap, search functions, or by means of a request by e-mail, letter or telephone.

Why should designers use wireframes and prototypes?

Obviously, these are designer tools. Basic wireframes can do a lot more than just give us an outline of the design layout of a site. It also informs us how content will be arranged, at least on a basic level. Putting content into wireframes and prototypes gives us a good sense of how the content is arranged in relation to other content and how well our information architecture achieves our goals. These tools are also brainstorming tools. It helps designers think about the content of the site and how this content should be structured, positioned, or laid out.

Why should we use a site map?

Site maps are quick and easy ways to visually denote how different pages and content relate to one another. It’s an imperative step that "mocks up" how content will be arranged. These content outlines show how all the pages on your site are grouped, what order they appear in, and the relationships between parent and child pages.

What is a top-down architecture?

Top-down architecture starts with a broad overview and understanding of the website’s strategy and goals, and creates a basic structure first. From there, content relationships are refined as the site architecture grows deeper, but it’s all viewed from the overall high-level purpose of the site.

What is a bottom-up architecture?

The bottom-up architecture model looks at the detailed relationships between content first. With this kind of architecture, you might start out with user personas and how those users will be going through the site. From there, you figure out how to tie it all together, rather than looking at how it all relates first. See

How should designer use size?

Objects that are bigger demand more attention. Using size as a hierarchical tool is an effective way of guiding a viewer’s eye to a particular portion of the page. Because size is one of the most powerful forms of organization, it’s important to correlate size with importance in a design. The biggest elements should be the most important in most cases; the smallest elements should be the least important.

How should designer use color?

Color is an interesting tool because it can function as both an organizational tool as well as a personality tool. Bold, contrasting colors on a particular element of a website will demand attention (such as with buttons or error messages or hyperlinks). When used as a personality tool, color can extend beyond into more sophisticated types of hierarchy; Using lush, comforting colors can bring an emotional appeal to a page. Color can affect everything from a websites brand (ie: CocaCola Red) to symbolism (ie: cool, subdued colors). Advanced applications of color can even be used to “classify” information within a hierarchy. The Spectra Viewer site uses colors to represent different news categories, so it’s easy to find a particular type of information based on the color key.

How should designer use contrast?

Contrast shows relative important. Dramatic shifts in text-size or color will impart a message that something is different and requires attention. Changing from a light background color to a dark background color can quickly separate the core content of a page from the footer.

How use designer use alignment?

Alignment creates order between elements. It can be as simple as the difference between a “content column” and a “sidebar column”, but alignment can also take on more complex hierarchical roles. Consider, for instance, the power of information placed in the top-right of a web page. Because users general expect information in that part of the screen to be associated with profiles, accounts, shopping carts, etc., it gives everything places in that area a sense of the “official”. Alignment can also provoke interest if used in unique ways. The Stuff Template uses a unique horizontal alignment system to separate brand and navigation from blog post content.

How should designer use repetition?

Repetition assigns relative meaning to elements; If all “paragraph” text is grey, when a user sees a new block of grey text, he can assume it’s another basic paragraph; when that same user encounters a blue link or a black title, he can safely assume it is different and unique from the grey text.

How should designer use proximity?

Proximity separates elements from each other and creates sub-hierarchies. Within a page there might be widgets that are separated from each other by space; within those widgets there is a new hierarchy of title, subtitle, and content. Proximity is also the quickest way to associate similar content. In the following example, it’s easy to find certain types of content simply based on their proximity with each other. The Tuts+ sites actually do this really well (not to toot our own horn!). The left “content” column is clearly separated in proximity from the sidebar widget space. Furthermore, meta-data within a particular blog post is placed in close proximity of that post and further from other posts, reinforcing a sense of “belonging”.

How should designer use density and whitespace?

Densely packing elements into a space makes it feel “heavy” and cluttered; When elements are spaced out too much, they may lose the relationships to one another. When a page is designed “just right”, the eye will easily recognize when elements are related and when they aren’t. By spacing elements out and keeping plenty of whitespace on the page, this design makes it easier for people to roam around and find the small, densely packed boxes of content.

How should designer use style and texture?

Perhaps the most open-ended tool in the Hierarchists Toolbox, style can be used to impart a form of hierarchy that both embraces and transcends the other tools. For instance: a flat gray background will “feel” different than an asphalt textured background.This style or personality given by the designer will naturally play a role in how different visual relationships are made.

It’s worth mentioning that style is also one of the most dangerous tools that a designer can use. Just like a carpenter cutting his finger off on a band-saw, a designer can easily mislead people by overemphasizing certain elements through style. Imagine a heavily textured, heavily designed site element that demands so much attention that it distracts instead of informing. This same idea extends to typefaces, buttons, tabs, and other elements. Be considerate of the impact on an overall design when you choose to add extra style and polish to an element.

References: - Understanding Visual Hierarchy in Web Design - done reading - Redefining Hick's Law - done reading

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License