The document summarizes a presentation on basic design principles for non-designers. It discusses what design is, the importance of good design, and key design concepts like grids, alignment, white space, typography, color, and visual hierarchy. Good design forms an emotional connection with users, establishes trust, and makes websites easy to use. Following basic design principles can help even non-designers create effective and user-friendly designs.

1. Design Basics for
Non-Designers
presented at #wcphilly
@melchoyce choycedesign.com
http://choycedesign.com/2012/10/20/design-for-non-designers/

2. Mel Choyce
• User Interface Designer at Joust.io
• WordPress evangelist
• Former Western MA WordPress
meetup co-coordinator
@melchoyce choycedesign.com
http://choycedesign.com/2012/10/20/design-for-non-designers/

3. Intro to Design

4. What is design?

5. “Design is what links creativity and
innovation. It shapes ideas to become
practical and attractive propositions
for users or customers. Design may
be described as creativity deployed to
a specific end.”
Sir George Cox

6. Design = creative problem solving.

7. Everything around us is designed.

8. What is web design?

9. “Web design is the creation of digital
environments that facilitate and
encourage human activity; reflect or
adapt to individual voices and content;
and change gracefully over time while
always retaining their identity.”
Jeffrey Zeldman

10. We have to adapt our designs alongside
the web as it develops.
source: http://johnpolacek.github.com/scrolldeck.js/decks/responsive/

11. What makes good
design good?

12. “I shall not today attempt further to
define the kinds of material I
understand to be embraced within that
shorthand description; and perhaps I
could never succeed in intelligibly
doing so. But I know it when I see it.”
Supreme Court Justice Potter Stewart

13. Good Design:
• Is Innovative
• Makes a Product Useful
• Is Aesthetic
• Makes A Product Understandable
• Is Unobtrusive
Dieter Rams

14. Good Design (cont):
• Is Honest
• Is Long-lasting
• Is Thorough Down to the Last Detail
• Is Environmentally Friendly
• Is as Little Design as Possible
Dieter Rams

15. Why is good design
important?

16. Good design forms an
emotional connection
to your users.

17. • You don’t just want your users engaged -- you want
them delighted. You want them to take joy in using
your site, your app.
• Emotional experiences actually imprints in our
memories.
“People will forgive shortcomings, follow
your lead, and sing your praises if you
reward them with positive emotion.”
Aarron Walters, Designing for Emotion

18. Good design
establishes trust.
*Hand designed by Pavel Nikandrov from The Noun Project

19. A well-designed site appears much
more trustworthy than a poorly
designed site, especially when you are
trying to sell something to your users.
The more trust your users have in you,
the safer they feel buying from you.

20. Good design makes your
website easy to use.

21. Why Usability is GREAT:
• Users will stay on your site longer instead of
coming in, looking for a few seconds and leaving.
• Task completion times will go down. Users will do
what they want faster and will be less frustrated!
• Task completion will go up. Users will find what
they’re looking for.

22. Design Principles

23. Grid & Alignment

24. • Grids are awesome because they give structure to
your designs. It’s like the frame to your car. They
provide a solid basis for starting projects and allow
you to easily align elements with coherency and
consistency.
• Different grid systems: 960, 1140, etc. It doesn’t
really matter which grid system you use. Find
something you’re comfortable with and really get to
know it. When you feel like you’ve really mastered a
grid, try another. Try using different grids for
different projects.

25. Objects look better when aligned along a grid.
looks good
vs
looks bad

26. Brings order to chaos.
*12col 960gs

27. White Space

28. Guides the eye & creates balance.
Header lorem ipsum
Header 2 lorem ipsum
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur Widget Title
blandit tempus porttitor. Donec id elit non mi porta gravida at eget
Vestibulum id ligula porta felis
metus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis
euismod semper. Nullam id
risus eget urna mollis ornare vel eu leo.
dolor id nibh ultricies vehicula
Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ut id elit. Curabitur blandit
ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Aenean eu tempus porttitor. Aenean eu
leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. leo quam. Pellentesque
Maecenas faucibus mollis interdum. Donec sed odio dui. ornare sem lacinia quam
venenatis vestibulum.
Maecenas faucibus mollis
interdum. Donec sed odio dui.
Header 2 lorem ipsum
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur
blandit tempus porttitor. Donec id elit non mi porta gravida at eget
metus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis
risus eget urna mollis ornare vel eu leo.

29. Typography

30. “Web Design is 95% Typography”
Oliver Reichenstein,
The Web is All About Typography. Period.

31. When choosing an
appropriate typeface...
• Think about tone. Does it fit the mood
of your website?
• Is it easy to read, even at smaller
sizes?
• When all else fails, steal other
people’s font combinations.

33. How do I make it look good?

34. Size
Big is beautiful. 14px+ for body fonts.
* http://www.zeldman.com/

35. Line Height
He lived in a little town called, He lived in a little town called,
Puddleby-on-the-Marsh. All the folks, Puddleby-on-the-Marsh. All the folks,
young and old, knew him well by sight.
And whenever he walked down the young and old, knew him well by sight.
street in his high hat everyone would And whenever he walked down the
say, “There goes the Doctor!—He’s a street in his high hat everyone would
clever man.” And the dogs and the
children would all run up and follow say, “There goes the Doctor!—He’s a
behind him; and even the crows that clever man.” And the dogs and the
lived in the church-tower would caw
children would all run up and follow
and nod their heads.
behind him; and even the crows that
lived in the church-tower would caw
and nod their heads.
1.4 - 1.6x your font size for body text

36. Line Length
The house he lived in, on the edge of the town, was quite small; but his garden was very
large and had a wide lawn and stone seats and weeping-willows hanging over. His sister,
Sarah Dolittle, was housekeeper for him; but the Doctor looked after the garden himself.
The house he lived in, on the edge of the town, was quite
small; but his garden was very large and had a wide lawn
and stone seats and weeping-willows hanging over. His
sister, Sarah Dolittle, was housekeeper for him; but the
Doctor looked after the garden himself.
No more than 50 - 75 characters long

37. Color

38. What’s so important about color?
• Color subtly effects how people perceive
your site and brand.
• Poor color choices can make your site
unviewable by people with visual
impairments.
• Colors mean different things to different
cultures.

39. *http://www.serialcut.com/extrabold

40. How do I make a good color pallette?
• What emotions do you want to evoke in your
users? Make a list of colors that represent
those emotions.
• Draw inspiration (i.e. steal) from other people
using those colors.
• Use a color service to help create a palette:
• https://kuler.adobe.com/
• http://www.colourlovers.com/

41. * http://viens-la.com/

42. Some color tips:
Don’t go too bright. Don’t use black. Less is more.

43. Hierarchy

44. “Good visual hierarchy isn’t about
wild and crazy graphics or the newest
photoshop filters, it’s about
organizing information in a way
that’s usable, accessible, and logical
to the everyday site visitor.”
Brandon Jones,
Understanding Visual Hierarchy in Web Design

45. Hierarchy is defined by previous
concepts we’ve talked about:
• Grids help separate or group elements
• Typography calls out important content
• Color draws attention
• White space guides your eyes

46. Demo
http://choycedesign.com/2012/10/20/design-for-non-designers/

47. Thanks.
Any questions?
@melchoyce choycedesign.com
http://choycedesign.com/2012/10/20/design-for-non-designers/