Skip to Top NavigationSkip to Utility NavigationSkip to SearchSkip to Left NavigationSkip to Content
Mobile Menu

Layout & Design Principles

Remember what the focus of your page is and who the audience is. Content on the page should supports the communication of that goal, to that audience. Show consideration for users, their varying skills and challenges, by your use of links, layout, and content.

Before typing, plan out your site

  • Sketch pages on paper. Include layout features, placement of images, text and links.
  • How many pages do you need? One big page or several small ones?
  • How will this impact printability, download time, scanability, maintainability? 

Weigh content and place it accordingly

  • Our eyes typically are drawn first to the top left of a page. We then scan left to right, top to bottom.

Spelling and grammar are very important

  • Readers will judge a department, product, statement, or argument, based on the style, word choice, and accuracy in both spelling and current information.
  • It may be useful to use a style guide. Strunk & White's The Elements of Style.

Be clear, consistent and brief

  • Pages should provide enough contrast to make them easily readable.
  • Don't vary the position of navigation on pages without good reason.
  • Beyond the quality of content, remember that Internet users are impatient. Few will read far enough to see if you will make sense, or bring a excessive wordiness back to the point.

Design for bolding or italicizing

  • Use text style, graphics, and layout to simplify browsing. 
  • When using a larger blocks of text, don't assume a users will read all content.
  • Try to make a first sentence in each paragraph encapsulate the idea of the paragraph.

Don't overuse emphasis

  • If a entire page is bold, how can a users distinguish what is most important from what is less important?

508 compliance and the Americans with Disabilities Act:

  • Screen readers read pages left to right, top to bottom. Consider where you position content.
  • Contrast is also important, considering certain colors (red/green color blindness).
  • Including Alternate Text for images, ID and Summary information on Tables, and Titles for links, will help with ADA compliance and improve Search Engine Optimization.