Interface Design Overview

A completed interface (web page) is the goal of this training. Designing and building an effective interface is the key to your new website's success! Whether you are creating a website for yourself or for a customer there are certain rules to follow in order to keep the viewer's interest and make their visit as smooth as possible. In this section we'll train you in the principles of design, page layout and developing top end websites using all the tricks and knowledge we've gained over the past 8 years.

Design Principles
When you start thinking about designing your web site, you need to think about how the colors you choose will affect visitor's perception of the site and how the design layout can help "make the design come together".

Good design is transparent, bad design often screams out loud. But depending on the product or service you offer you may have to be a little loud to get the viewer's attention. If your web site is well designed and the layout of information is easy for the viewer to follow, visitors will return. If you don't think about how the design and color scheme can affect the user experience, visitors may never come back after finding your site difficult to understand and navigate. Another issue to consider in choosing a color scheme is to remember to design for those with color blindness, this might help make your site usable for everyone.

Design Layout
To start designing your web site, the best method is to use a graphics software program such as Macromedia Fireworks (http://www.macromedia.com).

You might want to first, sketch out a couple of ideas on paper. This will give you an idea of where you'd like elements, such as the navigation, before you start getting into the design process.

Choose a palette of colors to base the design on; usually no more than 4 is sufficient. Use varying tones of the same shade to highlight and shade. For example, this web site uses different shades of gray and white.

Decide where you are going to locate the navigation, and fill this with navigation items to mark out sufficient space in your mockup design. Produce several versions of your design to see which you prefer and works best for your project.

1. Design in black and white first. This will let you see how strong the design is without color.
2. Don't use colors that look too contrasting.
3. Try to "line elements up". The content will be easier to read. This stops elements looking like they are simply "floating" independently on the screen.
4. Make sure things line up to the left of the screen but don't touch the edge. (20 pixels is a good distance)
5. Never allow your text to touch images, the sides of your page or other elements on your Web page.
   

1. Overview
2. Using Colors
3. Basic design principles
4. What makes a good website?
5. Naming your files
6. Files size
7. Storyboards
8. Intuitive navigation
9. Using white space
10. Typography
11. Useful content
12. Designing for the audience
13. Search engine optimization
14. Start building your first website