ux success - designing for the web
DESCRIPTION
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.TRANSCRIPT
![Page 1: UX Success - Designing for the Web](https://reader034.vdocuments.us/reader034/viewer/2022052523/5559655cd8b42a98708b5258/html5/thumbnails/1.jpg)
UX forthe
DESIGNING
WEB
![Page 3: UX Success - Designing for the Web](https://reader034.vdocuments.us/reader034/viewer/2022052523/5559655cd8b42a98708b5258/html5/thumbnails/3.jpg)
Click this button to tweet the information on each slide
![Page 4: UX Success - Designing for the Web](https://reader034.vdocuments.us/reader034/viewer/2022052523/5559655cd8b42a98708b5258/html5/thumbnails/4.jpg)
Planning
What Are The Goals?• e.g. Sales
• Get emails
• Establish credibility
• Inform
• Cut down on phone time
• Get users to call
![Page 5: UX Success - Designing for the Web](https://reader034.vdocuments.us/reader034/viewer/2022052523/5559655cd8b42a98708b5258/html5/thumbnails/5.jpg)
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
![Page 6: UX Success - Designing for the Web](https://reader034.vdocuments.us/reader034/viewer/2022052523/5559655cd8b42a98708b5258/html5/thumbnails/6.jpg)
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
![Page 7: UX Success - Designing for the Web](https://reader034.vdocuments.us/reader034/viewer/2022052523/5559655cd8b42a98708b5258/html5/thumbnails/7.jpg)
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?
? ??
![Page 8: UX Success - Designing for the Web](https://reader034.vdocuments.us/reader034/viewer/2022052523/5559655cd8b42a98708b5258/html5/thumbnails/8.jpg)
Sitemap• All of the pages
• How pages are linked to each other
• Addresses all use cases
![Page 9: UX Success - Designing for the Web](https://reader034.vdocuments.us/reader034/viewer/2022052523/5559655cd8b42a98708b5258/html5/thumbnails/9.jpg)
Technical Specs• Will it be responsive?
• What browsers should it support?
• Animations?
![Page 10: UX Success - Designing for the Web](https://reader034.vdocuments.us/reader034/viewer/2022052523/5559655cd8b42a98708b5258/html5/thumbnails/10.jpg)
Design Style• What sites do you like?
• What style does your audience like?
• How trendy?
• Color scheme?
![Page 11: UX Success - Designing for the Web](https://reader034.vdocuments.us/reader034/viewer/2022052523/5559655cd8b42a98708b5258/html5/thumbnails/11.jpg)
Finding DesignStyle Inspiration
• Existing sites
• dribbble.com
• webcreme.com (more flashy)
• awwwards.com (more flashy)
• Successful competitors
• Follow designers on Twitter
![Page 12: UX Success - Designing for the Web](https://reader034.vdocuments.us/reader034/viewer/2022052523/5559655cd8b42a98708b5258/html5/thumbnails/12.jpg)
Collect• Bookmark folders
• Dribbble buckets
• Pinterest board
![Page 13: UX Success - Designing for the Web](https://reader034.vdocuments.us/reader034/viewer/2022052523/5559655cd8b42a98708b5258/html5/thumbnails/13.jpg)
Wireframes
Goals of Wireframes• Quickly conceptualize
• Determine layout
• Determine information architecture
![Page 14: UX Success - Designing for the Web](https://reader034.vdocuments.us/reader034/viewer/2022052523/5559655cd8b42a98708b5258/html5/thumbnails/14.jpg)
Full color designs
http://www.teehanlax.com/blog/designing-with-code/
![Page 15: UX Success - Designing for the Web](https://reader034.vdocuments.us/reader034/viewer/2022052523/5559655cd8b42a98708b5258/html5/thumbnails/15.jpg)
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?
![Page 16: UX Success - Designing for the Web](https://reader034.vdocuments.us/reader034/viewer/2022052523/5559655cd8b42a98708b5258/html5/thumbnails/16.jpg)
Balance Feedback• Don’t design by committee
• Trust your experience
• Verify feedback before making drastic changes
![Page 17: UX Success - Designing for the Web](https://reader034.vdocuments.us/reader034/viewer/2022052523/5559655cd8b42a98708b5258/html5/thumbnails/17.jpg)
Handling RevisionsWhen 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.
![Page 18: UX Success - Designing for the Web](https://reader034.vdocuments.us/reader034/viewer/2022052523/5559655cd8b42a98708b5258/html5/thumbnails/18.jpg)
Website Anatomy
Terminology• Header
• Nav/Navigation
• Call to Action
• Hero/Banner
• Container/Wrapper
• Footer
• The fold
![Page 19: UX Success - Designing for the Web](https://reader034.vdocuments.us/reader034/viewer/2022052523/5559655cd8b42a98708b5258/html5/thumbnails/19.jpg)
Responsive Tips• Design in columns
• Design for mobile first
• Collapse your navigation
http://responsive.victorcoulon.fr/
![Page 20: UX Success - Designing for the Web](https://reader034.vdocuments.us/reader034/viewer/2022052523/5559655cd8b42a98708b5258/html5/thumbnails/20.jpg)
Web Site vs. Web App
![Page 21: UX Success - Designing for the Web](https://reader034.vdocuments.us/reader034/viewer/2022052523/5559655cd8b42a98708b5258/html5/thumbnails/21.jpg)
Web Trends
![Page 22: UX Success - Designing for the Web](https://reader034.vdocuments.us/reader034/viewer/2022052523/5559655cd8b42a98708b5258/html5/thumbnails/22.jpg)
Web Trends
http://www.bohemiancoding.com/sketch/http://www.adobe.com/products/photoshop
![Page 23: UX Success - Designing for the Web](https://reader034.vdocuments.us/reader034/viewer/2022052523/5559655cd8b42a98708b5258/html5/thumbnails/23.jpg)
brought to you by
Learn more about how
we can help your web design