What is UX
UX is not UI
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
What does a UX Designer Do?
What does a UX Designer Do?
• Scenario Improve Existing Site
– Restrictive Legacy Process
– Limited Budget
– Limited Scope
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?
What does a UX Designer Do?
• Scenario Redesign Website
– Start with business goals / Client interview
– Content/Asset audit
– Ideation
– Prototype
– Test
– Design
– Build
Google Example
• UX Designer Thinks They’re Helping…
UX Process
Elements of a Webpage
• Brand Header
• Purpose/Benefit of this Product
• Call to Action
• Tokens of Trust
Elements of a Webpage
• Brand Header
Elements of a Webpage
• Purpose/Benefit of this Product
Elements of a Webpage
• Call to Action
Elements of a Webpage
• Tokens of Trust
Tools
• Pen and Paper
• Software with a grid layout
– Illustrator
– Omnigraphal
• Photoshop Layers
• Templates
• Google Keyword Planner
Prototyping
• Drawn
• Paper
• Low fidelity prototype
• Hi-Fi prototype
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
Frameworks
• JQueryUI
• Booststrap
Content Design Psychology
• Maslow’s Hierarchy
Content Design Psychology
• Maslow’s Hierarchy
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

More Related Content

DOCX
Seo sr ux designer
PPT
First amongst equals - can UX be there?
DOCX
Endorsement Nikki Teahan
PDF
Niiu digital - UX is your secret weapon
PPTX
Role of a Web design and development company in India
PPTX
Embedding UX In Any project, AMIS UX Event
PDF
Being lean at the economist
PDF
Opening remarks UX+DEV SUMMIT 2016
Seo sr ux designer
First amongst equals - can UX be there?
Endorsement Nikki Teahan
Niiu digital - UX is your secret weapon
Role of a Web design and development company in India
Embedding UX In Any project, AMIS UX Event
Being lean at the economist
Opening remarks UX+DEV SUMMIT 2016

Viewers also liked (16)

PPTX
Justice for slavko1
PDF
في المغرب المجلس الوطني لحقوق الإنسان، و إشكالية تطبيق البروتوكول الاختياري ...
PDF
stereotype
PPT
губ 12 махов.т.р в.о.в
PPTX
Week5 final
PPT
Week2 - IDX 200 Aesthetic Interactions
PPT
Week3:Personas
PDF
REPORT on the Activities of Core Facilities
PPTX
Justicefor slavko2
PDF
NEWS CEITEC Nano
PDF
Introductory workshop of core facilities CEITEC BUT
PPTX
Week7
PDF
Uvodni workshop CEITEC Nano 5.3.2015
PPT
Week4 : Wireframes and Sketching
PDF
cam-diploma-in-marketing-communications
PPTX
How to Prepare for a Behavioral Interview
Justice for slavko1
في المغرب المجلس الوطني لحقوق الإنسان، و إشكالية تطبيق البروتوكول الاختياري ...
stereotype
губ 12 махов.т.р в.о.в
Week5 final
Week2 - IDX 200 Aesthetic Interactions
Week3:Personas
REPORT on the Activities of Core Facilities
Justicefor slavko2
NEWS CEITEC Nano
Introductory workshop of core facilities CEITEC BUT
Week7
Uvodni workshop CEITEC Nano 5.3.2015
Week4 : Wireframes and Sketching
cam-diploma-in-marketing-communications
How to Prepare for a Behavioral Interview
Ad

Similar to IDX 200 - Week1 (20)

PDF
What is user experience(ux) & ux designer
PDF
What’s the difference between a UX and UI designer? (Part one)
PDF
Desain Grafis 4 - UI/UX
PDF
What is the difference between UI and UX 2024 Guide Jamtech.pdf
PPTX
What is the difference between UI and UX design_.pptx
PPTX
A Detailed Differentiate Guide on UI and UX Design.pptx
PPTX
UI / UX design services agency | UI UX design companies - ASIT Solutions
PPTX
The difference between ux and ui design
PDF
PDF
Introduction to User experience design for beginner
PPTX
A quick start guide to ux design
PPTX
ux_standards_slides
PDF
Difference Between UI and UX Designer.pdf
PDF
Ui design by mhm
PPTX
Careers In Web Design
PPTX
Get to know about UI/UX designing
PPTX
What is UX?
PDF
UX Designer's Toolkit - to design a better world
PDF
Few Words About User Experience Design
PDF
UI UX in depth
What is user experience(ux) & ux designer
What’s the difference between a UX and UI designer? (Part one)
Desain Grafis 4 - UI/UX
What is the difference between UI and UX 2024 Guide Jamtech.pdf
What is the difference between UI and UX design_.pptx
A Detailed Differentiate Guide on UI and UX Design.pptx
UI / UX design services agency | UI UX design companies - ASIT Solutions
The difference between ux and ui design
Introduction to User experience design for beginner
A quick start guide to ux design
ux_standards_slides
Difference Between UI and UX Designer.pdf
Ui design by mhm
Careers In Web Design
Get to know about UI/UX designing
What is UX?
UX Designer's Toolkit - to design a better world
Few Words About User Experience Design
UI UX in depth
Ad

Recently uploaded (20)

PPTX
436545997-Curriculum-Design.pptxmamissug
PPTX
History.pptxjsjsiisjjsjsidididididididksk
PPTX
F.Y.B.COM-B-ACC25359.pptxFor a job or role? (e.g., Marketing Manager, Chief E...
PPT
1 Introduction Product Design and Development
PPT
Congestive heart failure for undergraduates
PPT
Wheezing1.ppt powerpoint presentation for
PPTX
DAVtryruresytsayryeryyryurtuCPS -STEM.pptx
PPTX
BOMBAY RAYON FASHIONS LIMITED.pp ghggtx
PPT
Sustainable cities- concepts and approaches
PPTX
Fabrication Of Multi directional elevator
PDF
Design and Work Portfolio by Karishma Goradia
PPTX
Rocket-Launched-PowerPoint-Template.pptx
PDF
xử lý ảnh thu nhận và xử lý trên FPGA ứng dụng
PPTX
Respiration. Digestive & Excretory System.pptx
PPT
Adolescent Emergencies for undergraduate
PPTX
Chapter-3-educ-8 Program outcomes & SLOs
PPT
2 Development_Processes_and Organizations.ppt
PDF
Jamil Islam, Diplpma in Electrical Engineer,CV.pdf
PPTX
G4Q2W1 PPT SCIENCE (MATATAG) @Sir Ims.pptx
PDF
Kindly check my updated curriculum Vitae
436545997-Curriculum-Design.pptxmamissug
History.pptxjsjsiisjjsjsidididididididksk
F.Y.B.COM-B-ACC25359.pptxFor a job or role? (e.g., Marketing Manager, Chief E...
1 Introduction Product Design and Development
Congestive heart failure for undergraduates
Wheezing1.ppt powerpoint presentation for
DAVtryruresytsayryeryyryurtuCPS -STEM.pptx
BOMBAY RAYON FASHIONS LIMITED.pp ghggtx
Sustainable cities- concepts and approaches
Fabrication Of Multi directional elevator
Design and Work Portfolio by Karishma Goradia
Rocket-Launched-PowerPoint-Template.pptx
xử lý ảnh thu nhận và xử lý trên FPGA ứng dụng
Respiration. Digestive & Excretory System.pptx
Adolescent Emergencies for undergraduate
Chapter-3-educ-8 Program outcomes & SLOs
2 Development_Processes_and Organizations.ppt
Jamil Islam, Diplpma in Electrical Engineer,CV.pdf
G4Q2W1 PPT SCIENCE (MATATAG) @Sir Ims.pptx
Kindly check my updated curriculum Vitae

IDX 200 - Week1

  • 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…
  • 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
  • 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