Design Tips for Contros
Albert Einstein said “Everything should be as simple as it can be, yet no simpler”. This is a good rule of thumb in anything, including creating web pages.
- Dark text on a light background is generally easier to read than light text on a dark background. If you choose to use light text, consider increasing the size.
- Strive to use as few text styles as possible. This includes the font, text size, color, and the emphasis of font such as bold, or italics. Try to only have two font styles per page. Using bold and italics along with other variations, many different combinations can be made from only two fonts.
- Do not use capital letters to emphasize words or phrases. Emphasis can be achieved using italics or bold text.
- Main body text should always be left aligned. Headlines and small portions of text like captions, sub headings, and etc. can be centered.
- Headlines, captions, and other "specialty” text should be notably different from regular body text.
- Format your content according to a visual hierarchy. Main page headers should be the largest or most noticeable, sub headers second, paragraphs/section headers their, body copy nest, and footers/captions last. Call-outs can be treated differently than regular text, because they are meant to draw attention.
- Sans-serif fonts are much easer to read, and should be the preference for body copy. Headers and sub headers can use Serif fonts, although the same font can be used throughout.
2. Hyperlinks could be obvious.
- Maintain the underlines and choose colors that compliment your design. Hyperlinks are clearly different from regular text. The standard hyperlink colors are blue and purple., other colors can be used as long as the links are notably different than all other text.
- Do not underline non-link text unless it is absolutely necessary.
3. Navigation should be clear and easy.
- It is more important that the users can find information they need quickly and easily. If the website is too flashy or graphical then the users could have trouble finding what they need.
- Users should be able to access any information on your site in 3 clicks or less. Try to avoid hiding certain pieces of information deep in your site structure.
4. Consistency is vital to a successful website.
- All graphics/photos should be similar in size and style. Borders, effects, and placement on the page should be the same through out the site.
- Text sizes, colors, and styles should be consistent, i.e. if the main page header on the home page is Times New Romans, size 5, bold text, then all other main page headers should match.
- Background colors, text alignment, and column structure must be consistent throughout the site. You can use multiple column structures and page layouts, but work toward using them consistently based on the amount or type of content on the page.
5. Avoid using too many graphics, or very large graphics.
- Try to keep the individual page sizes as low as possible. All graphics should be optimized to 72dpi and resized to match the size they will be displayed in.
- All graphics and photos should support the content. Do not use photos just because you like them. Choose photos and graphics that will help the user understand your message or connect to it in an emotional way.
6. Avoid colors that clash. Avoid heavy use of vibrant colors such as bright reds, yellow, or bright green. Do not use blinking images, text or cheesy clipart.
7. Content is king. The most important thing you have to offer is information, make sure that the information is accessible, easy to read, and well written.
- Content (and graphics) should be given plenty of breathing room. Do not crowd the page. Scrolling down on lengthy pages is perfectly acceptable. It is how the web works, and users do not mind.
- Large blocks of content should be kept to around 80 characters per line whenever possible.
|
home