Introduction to the course and UX - aesthetic interactions

1. What is UX
UX is not UI

2. How is it Different than UI
• UX Designer is concerned with how a product
feels
• UX Designer works with Creative Director and
Visual Designer
• Involved in every stage of the products
creation
• Ties all aspects of the interactions with the
brand

3. What does a UX Designer Do?

4. What does a UX Designer Do?
• Scenario Improve Existing Site
– Restrictive Legacy Process
– Limited Budget
– Limited Scope

5. What does a UX Designer Do?
• Scenario Improve Existing Site
– IA. Can the pages be reorganized?
– Copy. Can the copy be improved?
– User Flow. Can the process be improved?

6. What does a UX Designer Do?
• Scenario Redesign Website
– Start with business goals / Client interview
– Content/Asset audit
– Ideation
– Prototype
– Test
– Design
– Build

7. Google Example
• UX Designer Thinks They’re Helping…

8. UX Process

9. Elements of a Webpage
• Brand Header
• Purpose/Benefit of this Product
• Call to Action
• Tokens of Trust

10. Elements of a Webpage
• Brand Header

11. Elements of a Webpage
• Purpose/Benefit of this Product

12. Elements of a Webpage
• Call to Action

13. Elements of a Webpage
• Tokens of Trust

14. Tools
• Pen and Paper
• Software with a grid layout
– Illustrator
– Omnigraphal
• Photoshop Layers
• Templates
• Google Keyword Planner

15. Prototyping
• Drawn
• Paper
• Low fidelity prototype
• Hi-Fi prototype

16. Wireframes
• Creates a common language for the design
• Move to digital when
– Many visual elements repeat
– Details begin to emerge
– Consistent size and shapes are needed

17. Frameworks
• JQueryUI
• Booststrap

18. Content Design Psychology
• Maslow’s Hierarchy

19. Content Design Psychology
• Maslow’s Hierarchy

20. Analyzing Structure
• Chunk out the main content areas
• Identify proof of trust
• What is the key offering
• The Call to Action
• What is the consequence of the CTA