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.
 • H...
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 th...
Lingo used in this presentation:
 • Heat Map - charts that show us where most
    people look when they open a website or ...
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
...
Design
Process
Design Process:
 1. Project goals are established.
 2. Wireframes created by IAS.
 3. IAS reviews wireframes with designer...
Design Process (cont) :
 7. Client edits made.
 8. Sign-off from client on design comps.
 9. Prepare photoshop file for de...
Interpreting
Wireframes
Text
How Are
Wireframes Created?
Why Does this
Matter to You?
Overview of
Design Comps
Factors to Consider
  Prior to Design
Factors to Consider Prior to Design:



Usability
Usability refers to the ease with which
a website’s interface can be used by its
intended audience to achieve defined goal...
Design 1
Design 2
Design 3
Other Usability Tips:
• Know your audience and keep it simple.
• Keep a consistent look and feel throughout.
• Bread crumb...
Factors to Consider Prior to Design:


 Screen
Resolution
1024x768
Set your design to be

940x600
Factors to Consider Prior to Design:


Websafe
 Fonts
Core Web-Friendly Fonts

Times New Roman      Arial
Georgia              Verdana
Courier              Calibri	
  
        ...
Factors to Consider Prior to Designing



Choosing
 Color
Factors to Consider Prior to Design:



   Calls to
   Action
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...
This was a primer for getting yourself
started on web design.


The next step will be training
on Lynda.com


Stay tuned f...
Questions?
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Upcoming SlideShare
Loading in...5
×

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

2,195
-1

Published on

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.

Published in: Design

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

  1. 1. Basics of Web Design A primer of what you need to know to design for the web.
  2. 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. 3. Feel Free to Ask Questions
  4. 4. Web Lingo
  5. 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. 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. 7. What will be expected of us?
  8. 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. 9. Design Process
  10. 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. 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. 12. Interpreting Wireframes
  13. 13. Text
  14. 14. How Are Wireframes Created?
  15. 15. Why Does this Matter to You?
  16. 16. Overview of Design Comps
  17. 17. Factors to Consider Prior to Design
  18. 18. Factors to Consider Prior to Design: Usability
  19. 19. 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.
  20. 20. Design 1
  21. 21. Design 2
  22. 22. Design 3
  23. 23. 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.
  24. 24. Factors to Consider Prior to Design: Screen Resolution
  25. 25. 1024x768
  26. 26. Set your design to be 940x600
  27. 27. Factors to Consider Prior to Design: Websafe Fonts
  28. 28. Core Web-Friendly Fonts Times New Roman Arial Georgia Verdana Courier Calibri   Trebuchet MS Lucida Sans Tahoma
  29. 29. Factors to Consider Prior to Designing Choosing Color
  30. 30. Factors to Consider Prior to Design: Calls to Action
  31. 31. Examples of Usability at its Best
  32. 32. Examples of Usability at its Worst
  33. 33. What Software is best to use
  34. 34. Vs
  35. 35. A few last points to keep in mind • Ask questions. • Bookmark sites for referencing later. • Study the latest design trends. • Never stop learning.
  36. 36. 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!
  37. 37. Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×