1.
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

2.
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

3.
We’ve got a lot to cover.
@hilarysk

4.
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

5.
@hilarysk

6.
You know more than you think you do.
@hilarysk

7.
Why design matters
Usability
Credibility
Interest
@hilarysk

8.
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

9.
No. 1 to 4

10.
WORDS: make speech visual
@hilarysk

11.
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

12.
@hilarysk
WORDS: make speech visual
1. Let your text breathe.

13.
@hilarysk
WORDS: make speech visual
1. Let your text breathe.

14.
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

15.
WORDS: make speech visual
2. Make your text legible.
@hilarysk

16.
WORDS: make speech visual
2. Make your text legible.
@hilarysk

17.
WORDS: make speech visual
Highlight key content
Subheads, with lowercase and uppercase letters
Bulleted lists
3. Make your text scannable.
@hilarysk

18.
WORDS: make speech visual
3. Make your text scannable.
@hilarysk

19.
WORDS: make speech visual
3. Make your text scannable.
@hilarysk

20.
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

21.
WORDS: make speech visual
4. Keep the decoration to a minimum.
@hilarysk

22.
WORDS: make speech visual
4. Keep the decoration to a minimum.
@hilarysk

23.
Let’s recap.
@hilarysk

24.
WORDS: make speech visible
Breathing room, legible, scannable, simple
@hilarysk

25.
No. 5 & 6

26.
IMAGES: use appropriately
@hilarysk

27.
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

28.
IMAGES: use appropriately
5. Icons
@hilarysk
via https://bold.pixelapse.com/

29.
IMAGES: use appropriately
Banner blindness
Integrate with content
Be informative and/or relevant
6. Photos and graphics
@hilarysk

30.
IMAGES: use appropriately
6. Photos and graphics
@hilarysk

31.
IMAGES: use appropriately
6. Photos and graphics
@hilarysk

32.
Let’s recap again.
@hilarysk

33.
WORDS: make speech visible
Breathing room, legible, scannable, simple
IMAGES: use appropriately
Icons sparingly, photos and graphics integrated
@hilarysk

34.
No. 7 to 10

35.
DESIGN: think logically
@hilarysk

36.
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

37.
DESIGN: think logically
7. Use patterns
@hilarysk

38.
DESIGN: think logically
7. Use patterns
@hilarysk

39.
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

40.
DESIGN: think logically
8. Progressive disclosure
@hilarysk

41.
DESIGN: think logically
8. Progressive disclosure
@hilarysk

42.
DESIGN: think logically
Links, buttons
Alert messages
Forms
Tables
9. Be consistent
@hilarysk

43.
DESIGN: think logically
9. Be consistent
@hilarysk

44.
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

45.
DESIGN: think logically
10. Functionality is part of design
@hilarysk
Design is where science and art break even.”
- Robin Mathew, design entrepreneur
“

46.
Final recap.
@hilarysk

47.
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

48.
Resources
@hilarysk

49.
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

50.
Thanks!
@hilarysk