Your SlideShare is downloading. ×
Basics of Web Design: A primer of what you need to know to design for the web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,984

Published on

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.

Published in: Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,984
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
121
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 13. Text
  • 14. How Are Wireframes Created?
  • 15. Why Does this Matter to You?
  • 16. Overview of Design Comps
  • 17. Factors to Consider Prior to Design
  • 18. Factors to Consider Prior to Design: Usability
  • 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. Design 1
  • 21. Design 2
  • 22. Design 3
  • 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. Factors to Consider Prior to Design: Screen Resolution
  • 25. 1024x768
  • 26. Set your design to be 940x600
  • 27. Factors to Consider Prior to Design: Websafe Fonts
  • 28. Core Web-Friendly Fonts Times New Roman Arial Georgia Verdana Courier Calibri   Trebuchet MS Lucida Sans Tahoma
  • 29. Factors to Consider Prior to Designing Choosing Color
  • 30. Factors to Consider Prior to Design: Calls to Action
  • 31. Examples of Usability at its Best
  • 32. Examples of Usability at its Worst
  • 33. What Software is best to use
  • 34. Vs
  • 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. 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. Questions?

×