SlideShare une entreprise Scribd logo
1  sur  18
Télécharger pour lire hors ligne
brought to you by
Click this button to tweet the infor-
mation on each slide
All design decisions should be made with your
goals and audience in mind.
A balance between form and function is vital.
Good use of alignment creates visual lines for your eyes and
establishes order and organization.
White space leads to cleaner design and focus on im-
portant content.
In web and mobile design,
typography can make or break your design.
Big blocks of text should try to stick to a width of 50-60
characters (including spaces).
Space between line-height/leading is usually too tight.
Let your paragraphs breath.
Don’t be afraid of gray. Dark gray or black on a white background
should be the default for extended reading.
Icons save space and help users interact,
but should be used with good judgment and balance.
Contrast increases visual interest, variety, and focus. It breaks up
sections of a website and makes designs visually appealing.
In design, less is more. Strip away anything unnecessary because
“Simplicity is the ultimate sophistication.”
-Leonardo Da Vinci
Design is constantly evolving. Be familiar with current trends, because if a site
or app looks old, it loses credibility.
Be subtle in design. Subtle layer effects
effectively use depth and texture to draw attention,
without drawing too much attention.
“Delight”is equal parts happiness and surprise. Create delight
with a small detail on your website, app, or product and you will
improve user experience.
brought to you by
Learn more about how
we can help your UX design

Contenu connexe

Tendances

The Psychology of Good Web Design
The Psychology of Good Web DesignThe Psychology of Good Web Design
The Psychology of Good Web Design
olindgallet
 
The school’s guide to modern design trends corwin bermudez
The school’s guide to modern design trends   corwin bermudezThe school’s guide to modern design trends   corwin bermudez
The school’s guide to modern design trends corwin bermudez
Blackbaud
 

Tendances (20)

The Psychology of Good Web Design
The Psychology of Good Web DesignThe Psychology of Good Web Design
The Psychology of Good Web Design
 
Designing Great Mobile Apps
Designing Great Mobile AppsDesigning Great Mobile Apps
Designing Great Mobile Apps
 
Tampa UX November 2014 Meetup
Tampa UX November 2014 MeetupTampa UX November 2014 Meetup
Tampa UX November 2014 Meetup
 
UX and Advertising
UX and AdvertisingUX and Advertising
UX and Advertising
 
UX Fundamentals for Startups
UX Fundamentals for StartupsUX Fundamentals for Startups
UX Fundamentals for Startups
 
UX Lesson 4: Task & Feature Analysis
UX Lesson 4: Task & Feature AnalysisUX Lesson 4: Task & Feature Analysis
UX Lesson 4: Task & Feature Analysis
 
[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction
 
UXPA Lean UX Bridging the gap between UX and Developers
UXPA Lean UX Bridging the gap between UX and DevelopersUXPA Lean UX Bridging the gap between UX and Developers
UXPA Lean UX Bridging the gap between UX and Developers
 
The school’s guide to modern design trends corwin bermudez
The school’s guide to modern design trends   corwin bermudezThe school’s guide to modern design trends   corwin bermudez
The school’s guide to modern design trends corwin bermudez
 
Conversion Day 2015 - Usability Best Practices - Johan Verhaegen
Conversion Day 2015 - Usability Best Practices - Johan VerhaegenConversion Day 2015 - Usability Best Practices - Johan Verhaegen
Conversion Day 2015 - Usability Best Practices - Johan Verhaegen
 
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI DesignGood UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
 
What is UX?
What is UX?What is UX?
What is UX?
 
The visual interface is now your brand
The visual interface is now your brandThe visual interface is now your brand
The visual interface is now your brand
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 
Planning your design
Planning your design Planning your design
Planning your design
 
UX techniques
UX techniquesUX techniques
UX techniques
 
Week 3
Week 3Week 3
Week 3
 
UX Process | Collaborating with Engineering
UX Process | Collaborating with EngineeringUX Process | Collaborating with Engineering
UX Process | Collaborating with Engineering
 
Week 5 - Summary - 5
Week 5 - Summary - 5Week 5 - Summary - 5
Week 5 - Summary - 5
 
UX Process
UX ProcessUX Process
UX Process
 

En vedette

En vedette (8)

Neuro Web Design: What makes them click
Neuro Web Design: What makes them clickNeuro Web Design: What makes them click
Neuro Web Design: What makes them click
 
Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)
 
Wireframes for WordPress
Wireframes for WordPressWireframes for WordPress
Wireframes for WordPress
 
The Ultimate Guide to Font Pairing
The Ultimate Guide to Font PairingThe Ultimate Guide to Font Pairing
The Ultimate Guide to Font Pairing
 
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
 
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
 
An introduction to Usability
An introduction to UsabilityAn introduction to Usability
An introduction to Usability
 

Similaire à Designing for a Better User Experience

GE Tutorials Part VI Design Principles
GE Tutorials Part VI   Design PrinciplesGE Tutorials Part VI   Design Principles
GE Tutorials Part VI Design Principles
tcooper66
 

Similaire à Designing for a Better User Experience (20)

Interactive Design Basics
Interactive Design Basics Interactive Design Basics
Interactive Design Basics
 
Design Crash Course: Mastering Design Essentials – Unveiling Best Practices a...
Design Crash Course: Mastering Design Essentials – Unveiling Best Practices a...Design Crash Course: Mastering Design Essentials – Unveiling Best Practices a...
Design Crash Course: Mastering Design Essentials – Unveiling Best Practices a...
 
Impact of Visual Design on UX
Impact of Visual Design on UXImpact of Visual Design on UX
Impact of Visual Design on UX
 
Web Design Trends 2015 & 2016
Web Design Trends 2015 & 2016Web Design Trends 2015 & 2016
Web Design Trends 2015 & 2016
 
Web Design Book Of Trends 2015 2016
Web Design Book Of Trends 2015 2016Web Design Book Of Trends 2015 2016
Web Design Book Of Trends 2015 2016
 
Web Design Trends e-Book
 Web Design Trends e-Book Web Design Trends e-Book
Web Design Trends e-Book
 
6 Key Principles Of Making A Web Design
6 Key Principles Of Making A Web Design6 Key Principles Of Making A Web Design
6 Key Principles Of Making A Web Design
 
Typography and Colors for GUI Designers
Typography and Colors for GUI DesignersTypography and Colors for GUI Designers
Typography and Colors for GUI Designers
 
GE Tutorials Part VI Design Principles
GE Tutorials Part VI   Design PrinciplesGE Tutorials Part VI   Design Principles
GE Tutorials Part VI Design Principles
 
Kolade Agboola- Basic Visual Design Principles - FS Presentation.pptx
Kolade Agboola- Basic Visual Design Principles - FS Presentation.pptxKolade Agboola- Basic Visual Design Principles - FS Presentation.pptx
Kolade Agboola- Basic Visual Design Principles - FS Presentation.pptx
 
Lecture11 A Image
Lecture11 A ImageLecture11 A Image
Lecture11 A Image
 
Design 101 - a quick start guide
Design 101 - a quick start guideDesign 101 - a quick start guide
Design 101 - a quick start guide
 
Reduce web clutter with flat design in 2014
Reduce web clutter with flat design in 2014Reduce web clutter with flat design in 2014
Reduce web clutter with flat design in 2014
 
The top 10 UI Design Trends for 2016
The top 10 UI Design Trends for 2016The top 10 UI Design Trends for 2016
The top 10 UI Design Trends for 2016
 
interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016
 
Rationale: the importance of good communication in graphic design
Rationale: the importance of good communication in graphic designRationale: the importance of good communication in graphic design
Rationale: the importance of good communication in graphic design
 
Layouting.pptx
Layouting.pptxLayouting.pptx
Layouting.pptx
 
best Graphic Design presentation created by me
best Graphic Design presentation created by mebest Graphic Design presentation created by me
best Graphic Design presentation created by me
 
The building blocks of visual hierarchy
The building blocks of visual hierarchyThe building blocks of visual hierarchy
The building blocks of visual hierarchy
 
Web designing & web development! BATRA COMPUTER CENTRE
Web designing &  web development! BATRA COMPUTER CENTREWeb designing &  web development! BATRA COMPUTER CENTRE
Web designing & web development! BATRA COMPUTER CENTRE
 

Dernier

怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
eeanqy
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
balqisyamutia
 
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
eeanqy
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
wpkuukw
 
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
eeanqy
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
yhavx
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
mark11275
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
eeanqy
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
nirzagarg
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
HyderabadDolls
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
eqaqen
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
ehyxf
 

Dernier (20)

怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
 
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
 
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best ServiceHigh Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
 
The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024
 
Lecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptxLecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptx
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentation
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
 
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
 

Designing for a Better User Experience

  • 1.
  • 3. Click this button to tweet the infor- mation on each slide
  • 4. All design decisions should be made with your goals and audience in mind.
  • 5. A balance between form and function is vital.
  • 6. Good use of alignment creates visual lines for your eyes and establishes order and organization.
  • 7. White space leads to cleaner design and focus on im- portant content.
  • 8. In web and mobile design, typography can make or break your design.
  • 9. Big blocks of text should try to stick to a width of 50-60 characters (including spaces).
  • 10. Space between line-height/leading is usually too tight. Let your paragraphs breath.
  • 11. Don’t be afraid of gray. Dark gray or black on a white background should be the default for extended reading.
  • 12. Icons save space and help users interact, but should be used with good judgment and balance.
  • 13. Contrast increases visual interest, variety, and focus. It breaks up sections of a website and makes designs visually appealing.
  • 14. In design, less is more. Strip away anything unnecessary because “Simplicity is the ultimate sophistication.” -Leonardo Da Vinci
  • 15. Design is constantly evolving. Be familiar with current trends, because if a site or app looks old, it loses credibility.
  • 16. Be subtle in design. Subtle layer effects effectively use depth and texture to draw attention, without drawing too much attention.
  • 17. “Delight”is equal parts happiness and surprise. Create delight with a small detail on your website, app, or product and you will improve user experience.
  • 18. brought to you by Learn more about how we can help your UX design