Website Design Guidelines

 Home page
 Page layout
 Navigation
 Search
 Links
 Graphic and Multimedia
 Text
 Information presentation
 Visual Design
The Homepage
•  Create a positive first impression
•  Answer what, where, when, who, why + how
•  Communicate the site’s value and purpose
•  E.g., Site identity, mission, feature hierarchy, search
•  Space compromise – use no more space than
necessary
•  Limit to one screen
•  Don’t oversell the site
•  Homepage layout may be different than other pages
Page Layout
•  Create a visual hierarchy
•  Header – typically logo/site information, primary navigation, search, log-in status
•  Footer – suggest where to go next, seldom used areas of the site or application
•  Establish conventions - consistent appearance and location of
navigation elements on all pages
•  Use frames when certain functions must remain visible on every
page
•  Avoid clutter – too many items, omit needless text
•  Visually align page elements, either vertically or horizontally
Navigation
•  Page navigation depends on content organization -
information architecture
•  Content navigation – relationships are associative
•  Primary navigation (site page sections) – top preferred over
(left) side unless there are many items
•  Users look top, then left, right
•  Secondary navigation and beyond (three levels max)
•  Top plus left for secondary
•  Primary drop down from primary (“fat navigation”)
Navigation (cont.)
•  Utilities – links to important site elements not part of the
content hierarchy; e.g., “About”, “Help”
•  A way to search – simple search box or link to a search page
•  Page and link names match
•  “You are here” visual highlights of navigation hierarchy (e.g.,
bold)
•  “Breadcrumbs” showing navigation hierarchy from home page
to current location
Navigation (cont.)
•  Always provide navigation options – no dead end pages
•  Use a clickable ‘List of Contents’ on scrollable long
pages
•  E.g., ‘anchor links at the top of the page
•  Keep navigation only pages’ short
•  Provide site maps for sites with many pages
•  Measure of usability design effectiveness:
•  Number of clicks but more importantly, how hard to choose a click
(understandability)
Make Links Obvious
•  Use meaningful link labels
•  Text is preferable to graphics; label graphic links
•  Use color changes to indicate when a link has been visited
•  Distinguish internal and external links
•  Duplicate links to important site content to ensure users can
find it
•  Provide consistent cues to links, avoid misleading cues to
click non-links
•  E.g., underlined blue text, images
Browsing and Searching
•  User wants to find something – browse or search?
•  Browsing
•  Versus the real world – no sense of scale, direction, or location (e.g.,
search in real store)
•  Searching - users are really not that good at forming
effective queries
•  So help the user find the desired page
!  Auto complete
!  Auto suggest to disambiguate
!  Suggest keywords
Search (cont.)
•  Scroll after search
•  Create an effective visual rhythm with white space and typographical
emphasis
•  Page header and footer are boundaries
•  Some pages scroll infinitely as content is added as scrolling proceeds
(e.g., social networking sites)
!  Accessibility issues
•  Touch screens and gestures make scrolling more natural
Graphic and Multimedia
•  Simple background images for page readability
•  Distinguish important images from banner advertisements or
gratuitous decorations
•  Choose images to convey the intended message to users, not just
designer aesthetics
•  Introduce animation/video content but …
•  Have clear and useful reasons for using multimedia to avoid
unnecessarily distracting users
•  Consider download performance
Text Appearance
There are several issues related to text characteristics that can help ensure
a Web site communicates effectively with users:

 Use familiar fonts that are at least 12-points; (Research shows no

reliable differences in reading speed or user preferences for twelve
point Times New Roman or Georgia (serif fonts), or Arial, Helvetica, or
Verdana (sans serif fonts).)
 Use black text on plain, high-contrast backgrounds; and
 Use background colors to help users understand the grouping of
related information.
Text Appearance
 Change the font characteristics to emphasize the importance of a word
or short phrase.
 Do not use two (or more) different ways to highlight the same
information on one page.
 Even though it is important to ensure visual consistency, steps should
be taken to emphasize important text. Commonly used headings
should be formatted consistently, and attention-attracting features,
such as animation, should only be used when appropriate.
Information Presentation
Information must be:

 Useful: Your content should be original and fulfill a need

 Usable: Site must be easy to use
 Desirable: Image, identity, brand, and other design elements are used
to evoke emotion and appreciation
 Findable: Content needs to be navigable and locatable onsite and
offsite
 Accessible: Content needs to be accessible to people with disabilities
 Credible: Users must trust and believe what you tell them
Visual Design
The basic elements that combine to create visual designs include the following:
 Lines connect two points and can be used to help define shapes, make
divisions, and create textures. All lines, if they’re straight, have a length,
width, and direction.
 Shapes are self-contained areas. To define the area, the graphic artist uses
lines, differences in value, color, and/or texture. Every object is composed of
shapes.
 Color palette choices and combinations are used to differentiate items, create
depth, add emphasis, and/or help organize information. Color theory
examines how various choices psychologically impact users.
Visual Design
 Texture refers to how a surface feels or is perceived to feel. By repeating an
element, a texture will be created and a pattern formed. Depending on how a
texture is applied, it may be used strategically to attract or deter attention.
 Typography refers to which fonts are chosen, their size, alignment, color, and
spacing.
 Form applies to three-dimensional objects and describes their volume and
mass. Form may be created by combining two or more shapes and can be
further enhanced by different tones, textures, and colors.
A successful visual design applies the following principles to elements noted
above and effectively brings them together in a way that makes sense.
Visual Design
Applying design principles to the basic elements can seem overwhelming
at first but once you start pulling a page or concept together, it becomes
easier. Below is an example homepage that features some of the
principles in action:
Visual Design
. Color contrast was applied to the logo
making the word “stop” stand out
. Text spacing and size creates a visual
hierarchy
. Featured image in the carousel dominates
over the smaller images below it to create a
focal point
. White space is used around text and
between sections to allow the page to breath
. Textured background to helps the elements
on the page stand out on top of it
. Map showing scale
. Lines to divide sections
. Shapes to create buttons
Example homepage that features some of the principles in action