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

on

  • 2,254 views

Outline of the presentation. ...

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.

Statistics

Views

Total Views
2,254
Views on SlideShare
2,254
Embed Views
0

Actions

Likes
3
Downloads
115
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    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 Presentation Transcript

    • 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
    • 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 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.
    • 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   Trebuchet MS Lucida Sans Tahoma
    • 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 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?