Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creating Visually Appealing Web Sites

998 views

Published on

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.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Creating Visually Appealing Web Sites

  1. 1. Creating Visually Appealing Web Sites Rick Evans Guiseppe Getto
  2. 2. Anatomy of a perfect web site
  3. 3. Anatomy of a perfect web site
  4. 4. Anatomy of a perfect web site
  5. 5. Anatomy of a perfect web site
  6. 6. Anatomy of a perfect web site
  7. 7. Anatomy of a perfect web site
  8. 8. Anatomy of a perfect web site
  9. 9. How do you create such sites?
  10. 10. Some definitions... Information Architecture Create an organized structure for information so customers can easily find things they are looking for
  11. 11. Information Architecture
  12. 12. Information Architecture
  13. 13. Some definitions... Visual Design Use typography, iconography, and color to make the site visually appealing
  14. 14. Visual Design
  15. 15. Visual Design : color themes
  16. 16. Some definitions... Functionality Define the purpose of the site and how you provide value for your customers
  17. 17. Functionality
  18. 18. Some definitions... Usability ● Useful ● Learnable ● Memorable ● Effective ● Efficient ● Desirable ● Delightful
  19. 19. Usability : It is all about teamwork...
  20. 20. Usability : How do you build it...
  21. 21. Usability : User Centered Design
  22. 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. 23. Some definitions... Typography Make language readable and beautiful
  24. 24. Typography font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif
  25. 25. Typography https://www.google.com/fonts/specimen/Raleway https://www.google.com/fonts/specimen/Ovo 2em 2em 30px
  26. 26. Some definitions... User Interface● Input Controls ● Navigation ● Information ● Containers
  27. 27. User Interface Input Controls: Navigation: Information:
  28. 28. User Interface Containers:
  29. 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. 30. Content Strategy
  31. 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. 32. Some definitions... Interaction Design Decide what happens when the customer clicks, taps or swipes
  33. 33. Interaction Design
  34. 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. 35. Questions & Answers Rick Evans rick.evans@rolemodelsoftware.com http://triuxpa.org Guiseppe Getto guiseppegettoatwork@gmail.com http://guiseppegetto.com

×