Creating Visually Appealing Web Sites
•Download as PPTX, PDF•
1 like•1,822 views
This is a presentation with Rick Evans (http://attentive2design.com/) for the Write Now! 2015 Triangle Area Freelancers Annual Writers' Conference (http://triangleareafreelancers.org/WriteNow.html) on how the elements of UX help create visually appealing web sites.
Recommended
Recommended
More Related Content
More from Guiseppe Getto
More from Guiseppe Getto (8)
Recently uploaded
Recently uploaded (20)
Creating Visually Appealing Web Sites
- 1. Creating Visually Appealing Web Sites Rick Evans Guiseppe Getto
- 2. Anatomy of a perfect web site
- 3. Anatomy of a perfect web site
- 4. Anatomy of a perfect web site
- 5. Anatomy of a perfect web site
- 6. Anatomy of a perfect web site
- 7. Anatomy of a perfect web site
- 8. Anatomy of a perfect web site
- 9. How do you create such sites?
- 10. Some definitions... Information Architecture Create an organized structure for information so customers can easily find things they are looking for
- 13. Some definitions... Visual Design Use typography, iconography, and color to make the site visually appealing
- 14. Visual Design
- 15. Visual Design : color themes
- 16. Some definitions... Functionality Define the purpose of the site and how you provide value for your customers
- 17. Functionality
- 18. Some definitions... Usability ● Useful ● Learnable ● Memorable ● Effective ● Efficient ● Desirable ● Delightful
- 19. Usability : It is all about teamwork...
- 20. Usability : How do you build it...
- 21. Usability : User Centered Design
- 22. UCD means usability in practice... ● Effectiveness - Can customers complete tasks and achieve goals? ● Efficiency - How much effort and time do customers require to achieve their goals? ● Satisfaction - What do customers think about the web site? Is it easy to use? Is it delightful?
- 23. Some definitions... Typography Make language readable and beautiful
- 24. Typography font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif
- 26. Some definitions... User Interface● Input Controls ● Navigation ● Information ● Containers
- 29. Some definitions... Content Strategy ● Define web site goals & customer needs ● Communicate in a way customers understand ● Stay up-to-date and factual ● Provide content that is usable and useful
- 30. Content Strategy
- 31. Content Strategy + Design 1. Lead the Way With a Clear Value Proposition 2. User-Focused Design and Copy 3. Intuitive Navigation 4. Effective Calls-to-Action 5. Content Promotion 6. Trust Builders 7. Thoughtful Design
- 32. Some definitions... Interaction Design Decide what happens when the customer clicks, taps or swipes
- 34. Resources to help build your own... Squarespace: http://www.squarespace.com WordPress: https://wordpress.org Twitter Bootstrap: http://getbootstrap.com Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/
- 35. Questions & Answers Rick Evans rick.evans@rolemodelsoftware.com http://triuxpa.org Guiseppe Getto guiseppegettoatwork@gmail.com http://guiseppegetto.com
Editor's Notes
- http://ncartmuseum.org
- http://www.louvre.fr/en
- http://www.jeffbeckofficial.com/biography/
- http://www.mirandastone.com/frames.html
- http://www.nytimes.com
- http://www.nytimes.com/newsgraphics/2014/01/05/poverty-map/
- http://www.nytimes.com/interactive/2014/06/05/upshot/how-the-recession-reshaped-the-economy-in-255-charts.html?abt=0002&abg=0
- http://www.hitreach.co.uk/perfect-web-page
- http://en.wikipedia.org/wiki/Information_architecture
- http://rolemodelsoftware.com/services/
- http://www.louvre.fr/en
- http://www.usability.gov/what-and-why/visual-design.html https://generalassemb.ly/education/visual-design http://www.visualmess.com
- http://rolemodelsoftware.com/services/
- http://www.hitreach.co.uk/blog/how-to-make-your-website-more-interesting-and-linkworthy/ http://colorschemedesigner.com/csd-3.5/
- http://rolemodelsoftware.com http://rolemodelsoftware.com/process/
- Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability by Steve Krug, page 9
- Idea from Jeff Patton’s “User Story Mapping”
- http://www.helloerik.com/treatise-on-user-experience-design-part-1
- http://www.sapdesignguild.org/editions/edition10/ucd_overview.asp
- http://usability.msu.edu/about/philosophy
- http://en.wikipedia.org/wiki/Typography http://www.google.com/fonts
- http://getbootstrap.com/css/#type
- http://www.google.com/fonts
- http://www.usability.gov/what-and-why/user-interface-design.html
- http://getbootstrap.com/
- http://getbootstrap.com/
- http://www.usability.gov/what-and-why/content-strategy.html
- http://www.usability.gov/what-and-why/content-strategy.html
- http://blog.hubspot.com/insiders/anatomy-of-an-effective-website
- Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability by Steve Krug, page 5
- mobile version of RoleModel website