Upload
joe-arcuri
View
1.924
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
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?