Outline of the presentation. • Expectations of designers. • Web Lingo • 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.

1. Basics of
Web Design
A primer of what you need
to know to design for the web.

2. 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.

3. Feel Free to
Ask Questions

4. Web
Lingo

5. 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.

6. 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.

7. What will be
expected of us?

8. 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.

9. Design
Process

10. 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.

11. 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.

12. Interpreting
Wireframes

14. Text

15. How Are
Wireframes Created?

16. Why Does this
Matter to You?

17. Overview of
Design Comps

22. Factors to Consider
Prior to Design

23. Factors to Consider Prior to Design:
Usability

24. 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.

28. Design 1

29. Design 2

30. Design 3

33. 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.

34. Factors to Consider Prior to Design:
Screen
Resolution

35. 1024x768

36. Set your design to be
940x600

37. Factors to Consider Prior to Design:
Websafe
Fonts

38. Core Web-Friendly Fonts
Times New Roman Arial
Georgia Verdana
Courier Calibri
Trebuchet MS
Lucida Sans
Tahoma

39. Factors to Consider Prior to Designing
Choosing
Color

43. Factors to Consider Prior to Design:
Calls to
Action

47. Examples of
Usability at its Best

54. Examples of
Usability at its Worst

58. What Software
is best to use

59. Vs

61. A few last points to keep in mind
• Ask questions.
• Bookmark sites for referencing later.
• Study the latest design trends.
• Never stop learning.

62. 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!

63. Questions?