Page Layout

In addition to meeting NC State Brand guidelines, it is important that your pages are uncluttered and easy to navigate. Efficient page layouts employ active space in the main content areas so that content can be easily scanned by visitors who are likely to be in a hurry. In order to maximize the efficiency of your layouts:

Use headings.

This not only helps organize your information so that users can quickly find what they’re looking for, it also makes your site accessible to those using screen readers and other assistive technology.  Make sure to use headings in order, with larger headings higher up on the page. Try not to skip a heading size as this can confuse assistive devices.

  • Heading 1 (H1): This is usually reserved for page titles. Start your page content headings with H2.
  • Heading 2 (H2): This is the largest size you should use in the main content area. Use it for subject headings.
  • Heading 3 (H3): Use H3 for sub-headings within content sections
  • Heading 4 (H4)
  • and so on…

Break text into small chunks.

Long blocks of text are difficult to read and users may skip over important information. Keep paragraphs short and put space between them.

Use lists and tables.

Converting paragraph content into more visual forms such as lists or tables can be a more appropriate way to display information and helps distill it into an easily readable format. Callout blocks can also be used to break up the monotony of large text blocks.

Manage menus and sidebars.

Keep menu items and drop-down menus to a minimum so they don’t crowd the main page content. Try to include each menu item only once, even if it is relevant to multiple categories. Don’t include the same items in both the navigation menu and the sidebar. If you are trying to target a specific group of users, place links to these pages in main page content as this is generally the first place users will look. Use the nav bar menu for more general navigation purposes. In general, keep menu headings succinct. Long titles in the menu crowd the nav bar, making menu items difficult to read.