|
|
|
|
Web Design Tips |
|
Background Color | Page Colors or Themes | Placement | Eye Scanning | Creating Good Forms Good Navigation - Use clear words for your links. Visitors to your site might not be familiar with how our university is organizationally structured and/or don't know our acronyms . For example, BAC - Bond Academic Center. PBC - Point Break Cafe. Sometimes we refer to this as using "mystery meat navigation." Use names as your link label and not an image or icon. For example, having an image of books linking to something when the user doesn't know if it will be the bookstore or the library.
- Link to services. We understand Student Development, but prospective students might not. For example, call your link Residence Halls and link to the main page of Residential Life.
- Consistent links: Always use the same links, adding more as the user goes deeper into your site (this is sometimes called, leaving a cookie crumb trail for your user). Repeating the same links at the bottom of all of your pages will help the user know what to links to expect on your next page.
- Consistent positioning: Your links should be in the same place on your page throughout your site.
- Clean links: Try to link words, not blank spaces or your separators. If you start a line of hyperlinks with a separator end with a separator, and vice versa. | link | link | or link | link
Background Color Check: - Often we assume that the background color for a page is white. If the background color is set to Automatic, or Default, backgrounds will appear to be whatever color the user has chosen for their Windows background color. In my case, I have it set to light gray. I recommend that web developers set their Windows background to a color other than white ( how do I do this? ), as a reminder to change the background color of web pages.
Good Color Schemes: - Colors display differently in different monitors and browsers. Use the RGB or HEX web safe color guides is preferred.
- Use custom colors wisely. There needs to be enough contrast between the text and the page background color, so that the grayscale equivalent can still be legible. Laptops display colors differently. View samples.
- Check if you are color blind . Read up on color-blindness. No dark backgrounds with light text.
- Use page background images on non-content pages, and use a background page color that matches the background image.
- Take advantage of FrontPage themes. See theme samples and/or meet with the Web Site Coordinator and request own theme.
Good Placement: - Alignment of images: We want users with the smaller desktops to be able to read our information without having to scroll to the right too much. Content should be left aligned and images should be right aligned .
- Bookmarks: When using bookmarks to divide up your page, make sure you put | back to top | under the bookmarked header. If you put the link above the bookmark, the user will not see it.
Eye Scanning - Screen Real Estate: - First Impressions: Users scan a page and stops at the most eye catching place on your page. At Web Design 2000, screen real estate was defined as the area the eye scans first on a page. Most big companies try to maximize the links that appear and charge the most for ads placed in that area. Check out Ebay and Amazon:
Ebay: | Amazon: | - Split Second Decision: We suggest you help users scan your content:
- Use short paragraphs
- Use lists
- Emphasis your content: Center, bold, or use a different color for your paragraph headers
- Use the same emphasis style way down your page.
- Use bookmarks at the top of your page to help users jump to the information they want
Good Forms:
|
|
|
|
|