Basics of Web Design

A primer of what you need to know to design for the web.

What will be covered:

• Lingo to be used in this presentation.

• Expectations of designers.

• Design comp process.

• How to interpret wireframes for design comp implementation.

• Factors to consider prior to design.

• Good and bad examples of usability.

• Design software to use.

Feel Free to Ask Questions

Web Lingo

Lingo used in this presentation:

• Above the fold - used to describe content visible before having to scroll below the bottom of the browser window.

• Bread Crumbs - navigation aid used within websites. It gives visitors a way to keep track of their locations within a site.

• Developers - Responsible for translating a design comp into a functional website.

Lingo used in this presentation:

• Heat Map - charts that show us where most people look when they open a website or page.

• Pixels - units of measure for web design.

• Usability - The ease with which a website’s interface can be used by its intended audience to achieve defined goals.

• Wireframe - a basic visual guide used in interface design to suggest the structure of a website and relationships between its pages.

What will be expected of us?

We will need to be able to execute and defend design comps that are an accurate representation of the wireframes provided (by IAS), using the proper web design elements of fonts, colors and basic usability principals, and that can be easily picked up by the developers to build.

Design Process

Design Process:

1. Project goals are established.

2. Wireframes created by IAS.

3. IAS reviews wireframes with designer & editor.

4. Designer begins work on comps.

5. Sign-off from internal team on design comp(s).

6. Present design comps to client.

Design Process (cont) :

7. Client edits made.

8. Sign-off from client on design comps.

9. Prepare photoshop file for developers.

10. Hand over photoshop file to developers.

11. Review coded site to ensure design consistency with comps.

12. Roll out site to client.

Interpreting Wireframes

Project Name: CDPHPPage Title: Home

Page No:3

Text

How Are Wireframes Created?

Why Does this Matter to You?

Overview of Design Comps

Project Name: CDPHPPage Title: Home

Page No:3

Factors to Consider Prior to Design

UsabilityFactors to Consider Prior to Design:

Usability refers to the ease with which a website’s interface can be used by its intended audience to achieve defined goals. Usability incorporates design, functionality, structure, information architecture, and more.

Design 1

Design 2

Design 3

Other Usability Tips:

• Know your audience and keep it simple.

• Keep a consistent look and feel throughout.

• Bread crumbs are good to help visitors know where they are.

• Use short paragraphs, bulleted lists, and subheads to aid in scanning the content.

• Always have a consistent link to the home page.

• Make sure that there is enough contrast between text and background.

Screen Resolution

Factors to Consider Prior to Design:

1024x768

940x600Set your design to be

WebsafeFonts

Factors to Consider Prior to Design:

Times New RomanGeorgiaCourier

Arial VerdanaCalibri  Trebuchet MSLucida SansTahoma

Core Web-Friendly Fonts

Choosing Color

Factors to Consider Prior to Designing

Calls to Action

Factors to Consider Prior to Design:

Examples of Usability at its Best

Examples of Usability at its Worst

What Software is best to use

Vs

A few last points to keep in mind

• Ask questions.

• Bookmark sites for referencing later.

• Study the latest design trends.

• Never stop learning.

This was a primer for getting yourself started on web design.

The next step will be training on Lynda.com

Stay tuned for group learning dates!

Questions?