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.
- 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.
Click the following images to enlarge them in your browser. Use your browser's back button to return to the topic.
- 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.
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?
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.