SlideShare a Scribd company logo
How to Make Your Website Not Ugly
10 Simple UX Tenets for Non-
Designers
Hilary Stohs-Krause
Ten Forward Consulting in Madison, WI
Twitter: @hilarysk
About me
Former journalist (including newspaper
designer)
Full-stack developer in Madison at Ten
Forward Consulting, Inc.
Primarily work with startups, often not a
big budget for design
@hilarysk
We’ve got a lot to cover.
@hilarysk
WORDS: make speech visible, No. 1 to 4
Breathing room, legible, scannable, simple
IMAGES: use appropriately, No. 5 & 6
DESIGN: think logically, No. 7 to 10
Icons sparingly, photos and graphics integrated
Patterns, progressive disclosure, consistency, functionality
@hilarysk
@hilarysk
You know more than you think you do.
@hilarysk
Why design matters
Usability
Credibility
Interest
@hilarysk
If usability engineers designed a nightclub, it
would be clean, quiet, brightly lit, with lots of
places to sit down, plenty of bartenders, menus
written in 18-point sans-serif, and easy-to-find
bathrooms. But nobody would be there. They
would all be down the street at Coyote Ugly
pouring beer on each other.”
- Joel Spolsky, founder of Trello
“
@hilarysk
No. 1 to 4
WORDS: make speech visual
@hilarysk
WORDS: make speech visual
1. Let your text breathe.
Text-box width: 400 to 800 pixels, or 60 to 100 characters per line
Line-height: At Ten Forward Consulting, our standard is 1.4.
Padding between text-boxes: At least 15px in any direction.
@hilarysk
@hilarysk
WORDS: make speech visual
1. Let your text breathe.
@hilarysk
WORDS: make speech visual
1. Let your text breathe.
WORDS: make speech visual
Contrast: Don’t put yellow text on a white background
Size: Minimum 16px (depending on font)
2. Make your text legible.
@hilarysk
WORDS: make speech visual
2. Make your text legible.
@hilarysk
WORDS: make speech visual
2. Make your text legible.
@hilarysk
WORDS: make speech visual
Highlight key content
Subheads, with lowercase and uppercase letters
Bulleted lists
3. Make your text scannable.
@hilarysk
WORDS: make speech visual
3. Make your text scannable.
@hilarysk
WORDS: make speech visual
3. Make your text scannable.
@hilarysk
WORDS: make speech visual
Limit number of typefaces/fonts (2 or 3)
Limit colors (3 to 5, including grays)
Use more complex fonts for headers, more basic sans-serif for text
4. Keep the decoration to a minimum.
@hilarysk
WORDS: make speech visual
4. Keep the decoration to a minimum.
@hilarysk
WORDS: make speech visual
4. Keep the decoration to a minimum.
@hilarysk
Let’s recap.
@hilarysk
WORDS: make speech visible
Breathing room, legible, scannable, simple
@hilarysk
No. 5 & 6
IMAGES: use appropriately
@hilarysk
IMAGES: use appropriately
99% of the time, should be accompanied by a label
Work best in navigation or menu (like a list of characteristics)
Avoid icons with conflicting meanings
5. Icons
@hilarysk
IMAGES: use appropriately
5. Icons
@hilarysk
via https://bold.pixelapse.com/
IMAGES: use appropriately
Banner blindness
Integrate with content
Be informative and/or relevant
6. Photos and graphics
@hilarysk
IMAGES: use appropriately
6. Photos and graphics
@hilarysk
IMAGES: use appropriately
6. Photos and graphics
@hilarysk
Let’s recap again.
@hilarysk
WORDS: make speech visible
Breathing room, legible, scannable, simple
IMAGES: use appropriately
Icons sparingly, photos and graphics integrated
@hilarysk
No. 7 to 10
DESIGN: think logically
@hilarysk
DESIGN: think logically
Alternate between small, medium and wide
Quality trumps originality (in most cases)
Find something that works, and use it as a model
7. Use patterns
@hilarysk
DESIGN: think logically
7. Use patterns
@hilarysk
DESIGN: think logically
7. Use patterns
@hilarysk
DESIGN: think logically
F-shape reading pattern
Top to bottom = important to less important
Above the fold
Avoid putting key content in traditional ad areas
8. Progressive disclosure
@hilarysk
DESIGN: think logically
8. Progressive disclosure
@hilarysk
DESIGN: think logically
8. Progressive disclosure
@hilarysk
DESIGN: think logically
Links, buttons
Alert messages
Forms
Tables
9. Be consistent
@hilarysk
DESIGN: think logically
9. Be consistent
@hilarysk
DESIGN: think logically
It doesn’t matter if it looks good and is easy to use if it doesn’t work.
Back-end impacts front-end
10. Functionality is part of design
@hilarysk
DESIGN: think logically
10. Functionality is part of design
@hilarysk
Design is where science and art break even.”
- Robin Mathew, design entrepreneur
“
Final recap.
@hilarysk
WORDS: make speech visible
Breathing room, legible, scannable, simple
IMAGES: use appropriately
DESIGN: think logically
Icons sparingly, photos and graphics integrated
Patterns, progressive disclosure, consistency, functionality
@hilarysk
Resources
@hilarysk
Resources
@hilarysk
General
UX Myths
Nielsen Norman Group
Additional
What’s the perfect width for your online content?
How do people evaluate a website’s credibility?
Readability: the Optimal Line Length
Making Your Icons User-Friendly: A Guide to Usability in UI
Design
Share: The Icon No One Agrees On
8 Guidelines For Better Readability On The Web
Color Contrast Checker
Thanks!
@hilarysk

More Related Content

Similar to How to Make Your Website Not Ugly: 10 Simple UX Tenets for Non-Designers

News design
News designNews design
News design
Jackie Scott
 
The 17 Graphic Design Tips All Non Designers Need to Know
The 17 Graphic Design Tips All Non Designers Need to KnowThe 17 Graphic Design Tips All Non Designers Need to Know
The 17 Graphic Design Tips All Non Designers Need to Know
Ram Chary Everi
 
Why Infographics Are Important for Your Professional PowerPoint
Why Infographics Are Important for Your Professional PowerPointWhy Infographics Are Important for Your Professional PowerPoint
Why Infographics Are Important for Your Professional PowerPoint
RRGraph Design
 
Top Ten List
Top Ten ListTop Ten List
Top Ten List
Candice Hall
 
Getaway tbc 2013 clickshape
Getaway tbc 2013   clickshapeGetaway tbc 2013   clickshape
Getaway tbc 2013 clickshape
Joseph Lawrence
 
How to Not Go Viral and Grow by 500,000+ Monthly Visits #StateOfSearch
How to Not Go Viral and Grow by 500,000+ Monthly Visits #StateOfSearchHow to Not Go Viral and Grow by 500,000+ Monthly Visits #StateOfSearch
How to Not Go Viral and Grow by 500,000+ Monthly Visits #StateOfSearch
Ross Hudgens
 
Are you looking for a website designer in Australia?
Are you looking for a website designer in Australia?Are you looking for a website designer in Australia?
Are you looking for a website designer in Australia?
A Website Designer
 
25 Ways to Spot a Graphic Designer
25 Ways to Spot a Graphic Designer25 Ways to Spot a Graphic Designer
25 Ways to Spot a Graphic Designer
Logo Design Guru
 
12 Tips to Make Podcast Cover Art That Works.pdf
12 Tips to Make Podcast Cover Art That Works.pdf12 Tips to Make Podcast Cover Art That Works.pdf
12 Tips to Make Podcast Cover Art That Works.pdf
Barevalue
 
How to make the most of your publishing team, a Reedsy presentation
How to make the most of your publishing team, a Reedsy presentationHow to make the most of your publishing team, a Reedsy presentation
How to make the most of your publishing team, a Reedsy presentation
Ricardo Fayet
 
Seven Habits of Highly Effective Designers - IAP 2014
Seven Habits of Highly Effective Designers - IAP 2014Seven Habits of Highly Effective Designers - IAP 2014
Seven Habits of Highly Effective Designers - IAP 2014
DUSPviz
 
Tableau Dashboard Design Best Practices
Tableau Dashboard Design Best Practices Tableau Dashboard Design Best Practices
Tableau Dashboard Design Best Practices
Senturus
 
18 Tips for Creating Beautiful Infographics
18 Tips for Creating Beautiful Infographics18 Tips for Creating Beautiful Infographics
18 Tips for Creating Beautiful Infographics
Edahn Small
 
Mobile ui trends present future – meaningful mobile typography
Mobile ui trends present future  – meaningful mobile typographyMobile ui trends present future  – meaningful mobile typography
Mobile ui trends present future – meaningful mobile typography
Halil Eren Çelik
 
Agile UX Design in Practice: Crafting Great Products
Agile UX Design in Practice: Crafting Great ProductsAgile UX Design in Practice: Crafting Great Products
Agile UX Design in Practice: Crafting Great Products
Ross Popoff-Walker
 
Using datawrapper mirko lorenz
Using datawrapper   mirko lorenzUsing datawrapper   mirko lorenz
Using datawrapper mirko lorenz
DataFest Tbilisi
 
Designing Strong Direct Mail Letters
Designing Strong Direct Mail LettersDesigning Strong Direct Mail Letters
Designing Strong Direct Mail Letters
bobtravpa
 
Design for non-designers: five visual principles to guide you
Design for non-designers: five visual principles to guide youDesign for non-designers: five visual principles to guide you
Design for non-designers: five visual principles to guide you
David Hall
 
#1NLab17 - The Apparent Chaos: Bold Design that Works
#1NLab17 - The Apparent Chaos: Bold Design that Works#1NLab17 - The Apparent Chaos: Bold Design that Works
#1NLab17 - The Apparent Chaos: Bold Design that Works
One North
 
The Top 10 Things I Learned In Pr Pubs Sarah Kemp
The Top 10 Things I Learned In Pr Pubs Sarah KempThe Top 10 Things I Learned In Pr Pubs Sarah Kemp
The Top 10 Things I Learned In Pr Pubs Sarah Kemp
skemp1
 

Similar to How to Make Your Website Not Ugly: 10 Simple UX Tenets for Non-Designers (20)

News design
News designNews design
News design
 
The 17 Graphic Design Tips All Non Designers Need to Know
The 17 Graphic Design Tips All Non Designers Need to KnowThe 17 Graphic Design Tips All Non Designers Need to Know
The 17 Graphic Design Tips All Non Designers Need to Know
 
Why Infographics Are Important for Your Professional PowerPoint
Why Infographics Are Important for Your Professional PowerPointWhy Infographics Are Important for Your Professional PowerPoint
Why Infographics Are Important for Your Professional PowerPoint
 
Top Ten List
Top Ten ListTop Ten List
Top Ten List
 
Getaway tbc 2013 clickshape
Getaway tbc 2013   clickshapeGetaway tbc 2013   clickshape
Getaway tbc 2013 clickshape
 
How to Not Go Viral and Grow by 500,000+ Monthly Visits #StateOfSearch
How to Not Go Viral and Grow by 500,000+ Monthly Visits #StateOfSearchHow to Not Go Viral and Grow by 500,000+ Monthly Visits #StateOfSearch
How to Not Go Viral and Grow by 500,000+ Monthly Visits #StateOfSearch
 
Are you looking for a website designer in Australia?
Are you looking for a website designer in Australia?Are you looking for a website designer in Australia?
Are you looking for a website designer in Australia?
 
25 Ways to Spot a Graphic Designer
25 Ways to Spot a Graphic Designer25 Ways to Spot a Graphic Designer
25 Ways to Spot a Graphic Designer
 
12 Tips to Make Podcast Cover Art That Works.pdf
12 Tips to Make Podcast Cover Art That Works.pdf12 Tips to Make Podcast Cover Art That Works.pdf
12 Tips to Make Podcast Cover Art That Works.pdf
 
How to make the most of your publishing team, a Reedsy presentation
How to make the most of your publishing team, a Reedsy presentationHow to make the most of your publishing team, a Reedsy presentation
How to make the most of your publishing team, a Reedsy presentation
 
Seven Habits of Highly Effective Designers - IAP 2014
Seven Habits of Highly Effective Designers - IAP 2014Seven Habits of Highly Effective Designers - IAP 2014
Seven Habits of Highly Effective Designers - IAP 2014
 
Tableau Dashboard Design Best Practices
Tableau Dashboard Design Best Practices Tableau Dashboard Design Best Practices
Tableau Dashboard Design Best Practices
 
18 Tips for Creating Beautiful Infographics
18 Tips for Creating Beautiful Infographics18 Tips for Creating Beautiful Infographics
18 Tips for Creating Beautiful Infographics
 
Mobile ui trends present future – meaningful mobile typography
Mobile ui trends present future  – meaningful mobile typographyMobile ui trends present future  – meaningful mobile typography
Mobile ui trends present future – meaningful mobile typography
 
Agile UX Design in Practice: Crafting Great Products
Agile UX Design in Practice: Crafting Great ProductsAgile UX Design in Practice: Crafting Great Products
Agile UX Design in Practice: Crafting Great Products
 
Using datawrapper mirko lorenz
Using datawrapper   mirko lorenzUsing datawrapper   mirko lorenz
Using datawrapper mirko lorenz
 
Designing Strong Direct Mail Letters
Designing Strong Direct Mail LettersDesigning Strong Direct Mail Letters
Designing Strong Direct Mail Letters
 
Design for non-designers: five visual principles to guide you
Design for non-designers: five visual principles to guide youDesign for non-designers: five visual principles to guide you
Design for non-designers: five visual principles to guide you
 
#1NLab17 - The Apparent Chaos: Bold Design that Works
#1NLab17 - The Apparent Chaos: Bold Design that Works#1NLab17 - The Apparent Chaos: Bold Design that Works
#1NLab17 - The Apparent Chaos: Bold Design that Works
 
The Top 10 Things I Learned In Pr Pubs Sarah Kemp
The Top 10 Things I Learned In Pr Pubs Sarah KempThe Top 10 Things I Learned In Pr Pubs Sarah Kemp
The Top 10 Things I Learned In Pr Pubs Sarah Kemp
 

More from Hilary Stohs-Krause

RubyConf 2021: "Why we worry about all the wrong things"
RubyConf 2021: "Why we worry about all the wrong things"RubyConf 2021: "Why we worry about all the wrong things"
RubyConf 2021: "Why we worry about all the wrong things"
Hilary Stohs-Krause
 
Treehouse Festival 2020: "Beer, Bylines & Booleans: Exploring the Secret Supe...
Treehouse Festival 2020: "Beer, Bylines & Booleans: Exploring the Secret Supe...Treehouse Festival 2020: "Beer, Bylines & Booleans: Exploring the Secret Supe...
Treehouse Festival 2020: "Beer, Bylines & Booleans: Exploring the Secret Supe...
Hilary Stohs-Krause
 
RailsConf 2020: Why we worry about all the wrong things
RailsConf 2020: Why we worry about all the wrong thingsRailsConf 2020: Why we worry about all the wrong things
RailsConf 2020: Why we worry about all the wrong things
Hilary Stohs-Krause
 
PHP UK 2020: "What I learned my first year as a full-time programmer"
PHP UK 2020:  "What I learned my first year as a full-time programmer"PHP UK 2020:  "What I learned my first year as a full-time programmer"
PHP UK 2020: "What I learned my first year as a full-time programmer"
Hilary Stohs-Krause
 
Write / Speak / Code 2019: "Why we worry about all the wrong things"
Write / Speak / Code 2019: "Why we worry about all the wrong things"Write / Speak / Code 2019: "Why we worry about all the wrong things"
Write / Speak / Code 2019: "Why we worry about all the wrong things"
Hilary Stohs-Krause
 
That Conference: "Using our powers for good"
That Conference: "Using our powers for good"That Conference: "Using our powers for good"
That Conference: "Using our powers for good"
Hilary Stohs-Krause
 
Longhorn PHP 2019: "Beer, bylines & booleans"
Longhorn PHP 2019: "Beer, bylines & booleans"Longhorn PHP 2019: "Beer, bylines & booleans"
Longhorn PHP 2019: "Beer, bylines & booleans"
Hilary Stohs-Krause
 
RailsConf 2019: What I learned my first year as a full-time programmer
RailsConf 2019: What I learned my first year as a full-time programmerRailsConf 2019: What I learned my first year as a full-time programmer
RailsConf 2019: What I learned my first year as a full-time programmer
Hilary Stohs-Krause
 
Full Stack Toronto 2018: "Beer, bylines and booleans: Exploring the secret su...
Full Stack Toronto 2018: "Beer, bylines and booleans: Exploring the secret su...Full Stack Toronto 2018: "Beer, bylines and booleans: Exploring the secret su...
Full Stack Toronto 2018: "Beer, bylines and booleans: Exploring the secret su...
Hilary Stohs-Krause
 
Madison PHP 2018: "Using Our Powers for Good: Tech & Social Impact"
Madison PHP 2018: "Using Our Powers for Good: Tech & Social Impact"Madison PHP 2018: "Using Our Powers for Good: Tech & Social Impact"
Madison PHP 2018: "Using Our Powers for Good: Tech & Social Impact"
Hilary Stohs-Krause
 
Cream City Code 2018: "Using Our Powers for Good: Tech & Social Impact"
Cream City Code 2018: "Using Our Powers for Good: Tech & Social Impact"Cream City Code 2018: "Using Our Powers for Good: Tech & Social Impact"
Cream City Code 2018: "Using Our Powers for Good: Tech & Social Impact"
Hilary Stohs-Krause
 
Nerd Nite Madison: The secret history of women and nonbinary folks in tech
Nerd Nite Madison: The secret history of women and nonbinary folks in techNerd Nite Madison: The secret history of women and nonbinary folks in tech
Nerd Nite Madison: The secret history of women and nonbinary folks in tech
Hilary Stohs-Krause
 
Using our powers for good
Using our powers for goodUsing our powers for good
Using our powers for good
Hilary Stohs-Krause
 
Forward Fest 2017 - "How to Make Github Magical"
Forward Fest 2017 - "How to Make Github Magical"Forward Fest 2017 - "How to Make Github Magical"
Forward Fest 2017 - "How to Make Github Magical"
Hilary Stohs-Krause
 
That Conference keynote 2017 - "We've Always Been Here: Women Changemakers in...
That Conference keynote 2017 - "We've Always Been Here: Women Changemakers in...That Conference keynote 2017 - "We've Always Been Here: Women Changemakers in...
That Conference keynote 2017 - "We've Always Been Here: Women Changemakers in...
Hilary Stohs-Krause
 
RailsConf 2017 - "We've always been here: Women changemakers in tech"
RailsConf 2017 - "We've always been here: Women changemakers in tech"RailsConf 2017 - "We've always been here: Women changemakers in tech"
RailsConf 2017 - "We've always been here: Women changemakers in tech"
Hilary Stohs-Krause
 

More from Hilary Stohs-Krause (16)

RubyConf 2021: "Why we worry about all the wrong things"
RubyConf 2021: "Why we worry about all the wrong things"RubyConf 2021: "Why we worry about all the wrong things"
RubyConf 2021: "Why we worry about all the wrong things"
 
Treehouse Festival 2020: "Beer, Bylines & Booleans: Exploring the Secret Supe...
Treehouse Festival 2020: "Beer, Bylines & Booleans: Exploring the Secret Supe...Treehouse Festival 2020: "Beer, Bylines & Booleans: Exploring the Secret Supe...
Treehouse Festival 2020: "Beer, Bylines & Booleans: Exploring the Secret Supe...
 
RailsConf 2020: Why we worry about all the wrong things
RailsConf 2020: Why we worry about all the wrong thingsRailsConf 2020: Why we worry about all the wrong things
RailsConf 2020: Why we worry about all the wrong things
 
PHP UK 2020: "What I learned my first year as a full-time programmer"
PHP UK 2020:  "What I learned my first year as a full-time programmer"PHP UK 2020:  "What I learned my first year as a full-time programmer"
PHP UK 2020: "What I learned my first year as a full-time programmer"
 
Write / Speak / Code 2019: "Why we worry about all the wrong things"
Write / Speak / Code 2019: "Why we worry about all the wrong things"Write / Speak / Code 2019: "Why we worry about all the wrong things"
Write / Speak / Code 2019: "Why we worry about all the wrong things"
 
That Conference: "Using our powers for good"
That Conference: "Using our powers for good"That Conference: "Using our powers for good"
That Conference: "Using our powers for good"
 
Longhorn PHP 2019: "Beer, bylines & booleans"
Longhorn PHP 2019: "Beer, bylines & booleans"Longhorn PHP 2019: "Beer, bylines & booleans"
Longhorn PHP 2019: "Beer, bylines & booleans"
 
RailsConf 2019: What I learned my first year as a full-time programmer
RailsConf 2019: What I learned my first year as a full-time programmerRailsConf 2019: What I learned my first year as a full-time programmer
RailsConf 2019: What I learned my first year as a full-time programmer
 
Full Stack Toronto 2018: "Beer, bylines and booleans: Exploring the secret su...
Full Stack Toronto 2018: "Beer, bylines and booleans: Exploring the secret su...Full Stack Toronto 2018: "Beer, bylines and booleans: Exploring the secret su...
Full Stack Toronto 2018: "Beer, bylines and booleans: Exploring the secret su...
 
Madison PHP 2018: "Using Our Powers for Good: Tech & Social Impact"
Madison PHP 2018: "Using Our Powers for Good: Tech & Social Impact"Madison PHP 2018: "Using Our Powers for Good: Tech & Social Impact"
Madison PHP 2018: "Using Our Powers for Good: Tech & Social Impact"
 
Cream City Code 2018: "Using Our Powers for Good: Tech & Social Impact"
Cream City Code 2018: "Using Our Powers for Good: Tech & Social Impact"Cream City Code 2018: "Using Our Powers for Good: Tech & Social Impact"
Cream City Code 2018: "Using Our Powers for Good: Tech & Social Impact"
 
Nerd Nite Madison: The secret history of women and nonbinary folks in tech
Nerd Nite Madison: The secret history of women and nonbinary folks in techNerd Nite Madison: The secret history of women and nonbinary folks in tech
Nerd Nite Madison: The secret history of women and nonbinary folks in tech
 
Using our powers for good
Using our powers for goodUsing our powers for good
Using our powers for good
 
Forward Fest 2017 - "How to Make Github Magical"
Forward Fest 2017 - "How to Make Github Magical"Forward Fest 2017 - "How to Make Github Magical"
Forward Fest 2017 - "How to Make Github Magical"
 
That Conference keynote 2017 - "We've Always Been Here: Women Changemakers in...
That Conference keynote 2017 - "We've Always Been Here: Women Changemakers in...That Conference keynote 2017 - "We've Always Been Here: Women Changemakers in...
That Conference keynote 2017 - "We've Always Been Here: Women Changemakers in...
 
RailsConf 2017 - "We've always been here: Women changemakers in tech"
RailsConf 2017 - "We've always been here: Women changemakers in tech"RailsConf 2017 - "We've always been here: Women changemakers in tech"
RailsConf 2017 - "We've always been here: Women changemakers in tech"
 

Recently uploaded

EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
Febless Hernane
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
eloprejohn333
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
DakshGudwani
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
bo44ban1
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
millarj46
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Designforuminternational
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
bagmai
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
Carolina de Bartolo
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NishantRathi18
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 

Recently uploaded (20)

EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 

How to Make Your Website Not Ugly: 10 Simple UX Tenets for Non-Designers

Editor's Notes

  1. Intro, briefly discuss background; worked as print designer at newspaper, but work primarily as developer
  2. Follow along at http://tinyurl.com/cvcc_slides
  3. Real website from 1996. Who thinks example of well-designed site?
  4. Congratulations! But you might be thinking, plenty of modern sites aren’t that well-designed, either - even popular ones. Why does it matter
  5. Usability: Design - including visual design - informs functionality. How do we know a link is a link? How do we know a button is a button? How do we know what parts of the site are most important and how to get there? Credibility: Study from Stanford University found that, when accessing a site’s credibility, 46% of all participants cited the site’s visual design - including layout, typography, font size, and color schemes - while only 8% cared about the functionality. Obviously functionality is important, but if they never bother trying ot use it in the first place, functionality won’t get you very far. Interest: If someone doesn’t trust your site and doesn’t find it attractive, they won’t be interested, and they won’t stay. NOTE: Always exceptions to these suggestions. For the most part, even when backed by research, they aren’t necessarily hard-and-fast rules. Depends on site purpose, target demographics, etc. But solid general guidelines, especially for sites that don’t require groundbreaking design.
  6. Quote from Trello founder as to why “how it works” isn’t everything.
  7. a major 2008 eye-tracking study found visitors only read 20% of text content. However, applying results of research into how people want to read on the web can result in 124% better usability. Why build something if no one’s going to use it?
  8. Text-box width: Greatly depends on font size and typeface; 50 to 60 characters is what people prefer, but they read fastest at 100 characters, according to various studies. Too wide, and you can’t focus; too short, and it invites the reader to skip lines. Line-height: Occasionally needs tweaking depending on font/size, but generally it holds true. Padding: If text boxes are too close, people might blend them together, or try to read them in the wrong direction (ie: from the left column first sentence to the right column first sentence)
  9. Example of good vs. bad (line-height, no paragraph margins, too wide) - from NYTimes with character count up to 74 per line, 540 px wide. Note use of white space
  10. Example of good vs. bad (line-height, no paragraph margins, too wide) - from NYTimes with character count up to 74 per line, 540 px wide. Note use of white space
  11. Contrast: nothing worse than having than text that blends into background. For accessibility purposes, also want to be careful about colors that are the same tone (ie: if you make it black and white, is it still legible?) If not, certain colors render text unreadable for those with colorblindness. WebAIM, an accessibility resource site, actually has a contrast checker to make sure color combinations are legible: http://webaim.org/resources/contrastchecker/ Size: Especially as the American population ages, important to think of text size. 16px is standard, but especially if not a text-heavy page (or even if is), consider bumping up to 18.
  12. Not enough contrast, too small
  13. Not enough contrast, too small
  14. A major 2008 eye-tracking study found visitors only read 20% of text content; for the most part, people skim, they don’t read. If you don’t give them something to guide them through the page, you stand a good chance of losing them. The difference between lowercase and uppercase letters helps with scanning We’ll talk more about centered text in the last section.
  15. FreshConsulting.com
  16. FreshConsulting.com
  17. Too many fonts or color are distracting, and can make user think content is ads, which they subconsciously ignore. Fancier fonts or fonts with serifs are fine for larger text, but serif text in smaller sizes is harder to read online
  18. Congratulations! But you might be thinking, plenty of modern sites aren’t that well-designed, either - even popular ones. Why does it matter
  19. Study from last year of 190 icons found that for unique labels, only 34% of people correctly guessed what tapping or clicking the icon would do; up to 60% for for more general icons, which is still only about half of people. Jumps to 80% for icons with labels. Can be good way to add visual to text or create shortcut for user’s brain Can save space, especially for mobile. Icons like “play”, “email”, etc. fine to use because universal. Easy to do wrong Ask audience to think of what icon they would use for “share”
  20. These are all icons that have been used to mean “share.” Adding hover text or key just creates extra work for user, and is likely to make them ignore icon or search through menu instead.
  21. Banner blindness refers to people subconsciously ignoring something that appears at first glance to be an advertisment. If your image is clearly a stock photo, in a location usually reserved for adds, or seems ill-suited to the rest of the content, users often ignore it completely. On the other hand, too many graphics or photos can be distracting; Nielsen Group found that most effective draws for users eyes are plain text, followed by faces. Images are best used somewhat sparingly, integrated with content, and have a connection to topic (not just stock photo for the sake of having a stock photo) Let’s see what happens when you follow zero of these rules ...
  22. Congratulations! But you might be thinking, plenty of modern sites aren’t that well-designed, either - even popular ones. Why does it matter
  23. When it comes to web design, there are tried and true conventions. Use them. Especially for projects with little or no budget dedicated to visual design, just go with what works. As one designer puts it, “There are a billion sites out there to use as inspiration.”
  24. F-shape: Connects back to idea of making text scannable in step 3; need to grab attention, because it fades quickly. But only so much attention to be grabbed, hence top to bottom hierarchy Above the fold: 2014 study found 156% more people saw the top content area of a page compared with the bottom content area - ie: the part visible before you have to scroll. Traditional ads: Very top middle, right sidebar
  25. From Nielsen Norman Group - three different patterns for scanning a website, but all follow same general format
  26. From Nielsen Norman Group - three different patterns for scanning a website, but all follow same general format
  27. If your button has a shadow in one place, should have a shadow everywhere. If alerts are red, should be same color of red. If your site has forms, they should have consistent style.
  28. Can’t trust users to make rational decisions - have to make as foolproof as possible. Teach them one pattern, and for the most part, they’ll follow it. So links are always green and underline, or just underlined, or just green.
  29. Even if primarily back-end designer, structure of data models can have direct impact on user-facing implementation. Web design isn’t just fonts and layouts - it encompasses code, visuals and usability, all in one. Keep that in mind before writing any code, and you’ll save time, money and sanity.
  30. Congratulations! But you might be thinking, plenty of modern sites aren’t that well-designed, either - even popular ones. Why does it matter
  31. To reiterate
  32. Congratulations! But you might be thinking, plenty of modern sites aren’t that well-designed, either - even popular ones. Why does it matter