Design Elements

 From Wikitechbook--the student-developed, technology textbook

Design elements of a website are important to consider before adding various components to the website. Some elements can slow the loading process of a website and other elements may be unnecessary or may complicate the page. Below are points that do make usability design better and points that do not make usability in design effective:

Achieving Optimal Usability in Design

1. Points that  make usability design better 
   1. Use ALT tags for all graphics, especially navigation graphics.
   2. Use black text on white background whenever possible for optimal legibility.
   3. Use either plain-color backgrounds or extremely subtle background patterns.
   4. Make sure text is in a printable color (not white).
   5. Place navigation in a consistent location on each page of your website.
   6. Use a familiar location for navigation bars.
   7. Keep the design from scrolling horizontally.
   8. Use one axis of symmetry for centered text on a page.
   9. Encourage scrolling by splitting an image at the fold.
2. Points that do not make usability in design effective:
   1. Allow ALT tags to get clipped (especially an issue for small, fixed width images).
   2. Display static text in blue or underlined.
   3. Use boldface or ALL CAPS for long pieces of text. These slow down reading.
   4. Leave too much white space.  Lots of white space reduces scannability.
   5. Make the user scroll to find critical information, especially transaction buttons and navigation links.
   6. Use horizontal rules to separate chunks of content.
   7. Alternate too frequently between centered text and left-aligned text. Most text should be left-aligned.
   8. Fix pages at larger than 800 x 600 pixels. Larger pages may force users to scroll horizontally.
   9. Make your website flash enabled.  This will allow some to not be able to view the site.

Information provided by Foraker Design on their site Useability First (u1).

Mr. Ben Hunt from Web Design Agency has many ideas about how to develop and design an effective website.  Throughout the webpage, Mr. Hunt emphasizes simplicity and focus.  He notes that you want your visitor to be able to find what they need in a simple format and yet it should be appealing or the webpage will not be usable for the websurfer.  Below are additional ideas to consider when developing your website as written by Mr. Ben Hunt:

Ideas With Simplicity and Focus  

1. Layout
2. Fewer Columns
3. Separate Top Section
4. Solid Areas
5. Navigation
6. Logos
7. Text size
8. Bold Introductions
9. Colors
10. Rich Surfaces
11. Gradients
12. Reflections
13. Icons
14. Star Flashes

This information was obtained from Web design from Scratch.

Designing Elements of a Website with Expression Web

Expression web is a popular software program that allows the user to create a website from the very basics or from generated templates. Below is a video explaining the basic use of Expresssion Web.

Understanding How User's Think

1. Users appreciate quality and credibility

2. Users don't read, they scan

3. Users are impatient and insist on instant gratification

4. Users don't make optimal choices

5. Users follow their intuition

6. Users want to have control

References

• Useability First
• Web Design Group
  • Pinsonnault Creative
• You tube video
• Effective Web Design
• Website Design from Scratch

• Related Resources

• Proper backgrounds, word coloring, pictures, videos, and many other important aspects will make your site interesting.

• All the sources above tell of different things that can be done to better your site and help the users viewing your site get the infomation they were looking for quickly and effectively.

Quiz-yourself Questions

1. The State of Missouri requires e-portfolios of its pre-service teachers. (a) True (b) False
2. The more interesting your website the more people will view it, right? (a) True (b) False

Answers to Quiz

1. a    
2. b          

Developers of this page

Contributors from SBU: Brianna (Fall '08), Philip (Fall '08), Traci (Fall '08), Anna (Winter '09), Alisa (Winter '09), Tiffany (Spring '09), Tavis (Spring '09), Tyler, Trish, Tad and Courtney (Spring '08), Heather (Spring '09), Tony (Fall '09)