Skip to main content
Blackboard Help

Page Design

quotation marks  Strive for clean and simple.

The following list presents ideas for page design, layout, and typography to help make your content effective and increase its readability.

Design Principles

  • Keep pages clean and uncluttered. Use plenty of white space to separate paragraphs, images, and other page elements to avoid overwhelming readers.
  • Align text and headings on the left. Online readers' eyes usually scan down the left side of the page. Centering headings will make your readers work harder to stay focused on the material.
  • Use block-style paragraphs. Leave a space between each paragraph and do not indent the first line.
  • Be consistent. Create predictability by using layouts that repeat design elements from page to page. Use the same fonts, colors, icons, and heading styles on each page to help students feel comfortable and find information faster.
  • Use headings. Chunk information and make your page easier to scan. Choose your color scheme carefully and use colors that maximize readability. When in doubt, use black on white.
  • Use tables for presenting data. Do not use tables when creating your page layout. You can add tags to tables used for data so screen readers can interpret header rows and cell data. If you use tables to define the layout of your page, screen readers will have a more difficult time interpreting the information on the page.
  • Use simple typography. Use no more than three font faces in your entire course. Be consistent with how you use them. For example, use Verdana for body copy text, and use Times New Roman for subheadings. Use fonts that are standard for everyone’s computers and easy to read, such as Arial, Times New Roman, Trebuchet, Georgia, and Verdana.

    To learn more, visit 10 Typography Mistakes for examples of good and bad usage. The website is an excellent example of all the principles listed for good page design.

Layout Examples

Click the following images to enlarge them in your browser. Use your browser's back button to return to the topic.

Easy-to-scan headings

  • Useful, simple icons added to the headings help readers easily determine what they want to read.
  • Color draws attention to elements of the page, such as "Example."
  • Horizontal bars divide the page into manageable chunks.
  • White space improves page layout, and emphasizes and divides the content. It leads a reader’s eye from one element to another.

Image illustrating associated text

Images speak for themselves

Some learners prefer to have information presented visually. Try using a mix of images and text to accommodate for this learning style.

Ask yourself: Can a learner look at an image and understand the concept without reading the text?

Image illustrating associated text

Use icons consistently

To help keep pages short and concise, offer more information in links to other pages. For example, if you want students to view videos, always use the same icon when introducing the link. 

Consistency helps users become comfortable with how to navigate in your course and what to expect.

Image illustrating associated text