DESIGNING 
for 
the 
WEB
brought to you by
Click this button to tweet the 
information on each slide
Planning 
What Are The Goals? 
• e.g. Sales 
• Get emails 
• Establish credibility 
• Inform 
• Cut down on phone time 
• ...
Who are your users? 
Personas 
• What do they want? 
• How do they use your site? 
• How tech savvy are they? 
• What brow...
Use Cases 
• e.g. “user signs up” 
• “users logs in” 
• “user searches for a product” 
• “user wants to learn more 
about ...
Content 
• How many pages? 
• What content will be on each page? 
• What functionality will be on each page? 
• Where will...
Sitemap 
• All of the pages 
• How pages are linked to each other 
• Addresses all use cases
Technical Specs 
• Will it be responsive? 
• What browsers should it support? 
• Animations?
Design Style 
• What sites do you like? 
• What style does your 
audience like? 
• How trendy? 
• Color scheme?
Finding Design 
Style Inspiration 
• Existing sites 
• dribbble.com 
• webcreme.com (more flashy) 
• awwwards.com (more fl...
Collect 
• Bookmark folders 
• Dribbble buckets 
• Pinterest board
Wireframes 
Goals of Wireframes 
• Quickly conceptualize 
• Determine layout 
• Determine information 
architecture
Full color designs 
http://www.teehanlax.com/blog/designing-with-code/
User Testing 
• Give them use cases (e.g. 
find X video, add a video to 
your favorites, etc.) 
• What was confusing? 
• W...
Balance Feedback 
• Don’t design by committee 
• Trust your experience 
• Verify feedback before making drastic changes
Handling Revisions 
When a client request a revision you don’t agree with (e.g. 
“make the logo bigger”), make it, show it...
Website Anatomy 
Terminology 
• Header 
• Nav/Navigation 
• Call to Action 
• Hero/Banner 
• Container/Wrapper 
• Footer 
...
Responsive Tips 
• Design in columns 
• Design for mobile first 
• Collapse your navigation 
http://responsive.victorcoulo...
Web Site vs. Web App
Web Trends
Web Trends 
http://www.adobe.com/products/photoshop http://www.bohemiancoding.com/sketch/
brought to you by 
Learn more about how 
we can help your web design
Upcoming SlideShare
Loading in...5
×

UX Success - Designing for the Web

28,863

Published on

Setting yourself up for success on the web is determined by more than just great ux/ui design; It involves setting goals, identifying user personas, and laying out a roadmap. Learn the process in this deck on ux designing for the web.

Published in: Design, Internet
2 Comments
215 Likes
Statistics
Notes
No Downloads
Views
Total Views
28,863
On Slideshare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
563
Comments
2
Likes
215
Embeds 0
No embeds

No notes for slide

UX Success - Designing for the Web

  1. 1. DESIGNING for the WEB
  2. 2. brought to you by
  3. 3. Click this button to tweet the information on each slide
  4. 4. Planning What Are The Goals? • e.g. Sales • Get emails • Establish credibility • Inform • Cut down on phone time • Get users to call
  5. 5. Who are your users? Personas • What do they want? • How do they use your site? • How tech savvy are they? • What browsers do they use? • How much do they use mobile? • What do you want them to do? • Age/general info
  6. 6. Use Cases • e.g. “user signs up” • “users logs in” • “user searches for a product” • “user wants to learn more about your company” • you can have different use cases for different personas
  7. 7. Content • How many pages? • What content will be on each page? • What functionality will be on each page? • Where will the content come from? • How often will the content be updated? • Who will update the content? ? ? ?
  8. 8. Sitemap • All of the pages • How pages are linked to each other • Addresses all use cases
  9. 9. Technical Specs • Will it be responsive? • What browsers should it support? • Animations?
  10. 10. Design Style • What sites do you like? • What style does your audience like? • How trendy? • Color scheme?
  11. 11. Finding Design Style Inspiration • Existing sites • dribbble.com • webcreme.com (more flashy) • awwwards.com (more flashy) • Successful competitors • Follow designers on Twitter
  12. 12. Collect • Bookmark folders • Dribbble buckets • Pinterest board
  13. 13. Wireframes Goals of Wireframes • Quickly conceptualize • Determine layout • Determine information architecture
  14. 14. Full color designs http://www.teehanlax.com/blog/designing-with-code/
  15. 15. User Testing • Give them use cases (e.g. find X video, add a video to your favorites, etc.) • What was confusing? • What would you change? • What was easy?
  16. 16. Balance Feedback • Don’t design by committee • Trust your experience • Verify feedback before making drastic changes
  17. 17. Handling Revisions When a client request a revision you don’t agree with (e.g. “make the logo bigger”), make it, show it to them, and then present your option and make your case.
  18. 18. Website Anatomy Terminology • Header • Nav/Navigation • Call to Action • Hero/Banner • Container/Wrapper • Footer • The fold
  19. 19. Responsive Tips • Design in columns • Design for mobile first • Collapse your navigation http://responsive.victorcoulon.fr/
  20. 20. Web Site vs. Web App
  21. 21. Web Trends
  22. 22. Web Trends http://www.adobe.com/products/photoshop http://www.bohemiancoding.com/sketch/
  23. 23. brought to you by Learn more about how we can help your web design
  1. A particular slide catching your eye?

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

×