Page Design
All Web pages on the UM Libraries' site should be based on one of the Libraries' Templates. This will ensure a consistent look and feel for the site.
Page Layout
- Create a clear visual hierarchy. Use heading and sub-headings in order to show hierarchy; group related items; divide pages into clearly defined areas; use bulleted lists.
- Present text so it can be easily scanned rather than read. Most users do not concentrate on reading a Web page, but jump quickly to the information or links they are looking for.
- Left-justify headings and text, as shown below . It is easier for users to scan and compliments the design of the templates.
Like this:
NOT like this:
- Keep highest priority
information at the top so users do not have to scroll down
to find it. In the example below, Historical
Manuscripts' brief collection descriptions always begin with
the title, dates, and collection size at the top of the page.
Colors and Graphics
- Use colors from the Web Color Palette for the best visual effect. Don't use the bright gold shade (other than gold arrows) as it will distract from the header and footer.
- Use the style sheet (CSS) to change font color. The <font> tag is no longer used in HTML 4.01, so for (optional) red headings:
USE:<h1 class="colorheading1">Main Heading</h1>
NOT:<h1><font color="#990000">Main Heading</font></h1>
- Use the red and gold arrows if you want to
use images for bullet points (optional):
Red arrow. Copy and paste this markup: <img src="/images/redarrow.gif" width="4" height="8" alt=" ">
Gold arrow. Copy and paste this markup:<img src="/images/goldarrow.gif" width="4" height="8" alt=" ">
- No blinking text or
animation. The site will look more professional and also respect Web accessibility standards (see also Accessibility).
- Avoid overusing italics (<em>), as they are difficult to read on a computer screen.
- Use horizontal lines sparingly (graphics or <hr>).
- For information on using photos, see Images.
