0
Design Basics forNon-Designerspresented at #wcphilly@melchoyce                   choycedesign.comhttp://choycedesign.com/2...
Mel Choyce• User Interface Designer at Joust.io• WordPress evangelist• Former Western MA WordPress meetup co-coordinator@m...
Intro to Design
What is design?
“Design is what links creativity andinnovation. It shapes ideas to becomepractical and attractive propositionsfor users or...
Design = creative problem solving.
Everything around us is designed.
What is web design?
“Web design is the creation of digitalenvironments that facilitate andencourage human activity; reflect oradapt to individu...
We have to adapt our designs alongside        the web as it develops.      source: http://johnpolacek.github.com/scrolldec...
What makes good design good?
“I shall not today attempt further todefine the kinds of material Iunderstand to be embraced within thatshorthand descripti...
Good Design:• Is Innovative• Makes a Product Useful• Is Aesthetic• Makes A Product Understandable• Is UnobtrusiveDieter Rams
Good Design (cont):• Is Honest• Is Long-lasting• Is Thorough Down to the Last Detail• Is Environmentally Friendly• Is as L...
Why is good design   important?
Good design forms anemotional connectionto your users.
• You don’t just want your users engaged -- you want  them delighted. You want them to take joy in using  your site, your ...
Good designestablishes trust.*Hand designed by Pavel Nikandrov from The Noun Project
A well-designed site appears muchmore trustworthy than a poorlydesigned site, especially when you aretrying to sell someth...
Good design makes yourwebsite easy to use.
Why Usability is GREAT:• Users will stay on your site longer instead of  coming in, looking for a few seconds and leaving....
Design Principles
Grid & Alignment
• Grids are awesome because they give structure to  your designs. It’s like the frame to your car. They  provide a solid b...
Objects look better when aligned along a grid.                  looks good                    vs                    looks ...
Brings order to chaos.*12col 960gs
White Space
Guides the eye & creates balance.          Header lorem ipsum          Header 2 lorem ipsum          Cras justo odio, dapi...
Typography
“Web Design is 95% Typography”Oliver Reichenstein,The Web is All About Typography. Period.
When choosing an appropriate typeface...• Think about tone. Does it fit the mood  of your website?• Is it easy to read, eve...
How do I make it look good?
Size             Big is beautiful. 14px+ for body fonts.* http://www.zeldman.com/
Line HeightHe lived in a little town called,        He lived in a little town called,Puddleby-on-the-Marsh. All the folks,...
Line LengthThe house he lived in, on the edge of the town, was quite small; but his garden was verylarge and had a wide la...
Color
What’s so important about color?• Color subtly effects how people perceive  your site and brand.• Poor color choices can ma...
*http://www.serialcut.com/extrabold
How do I make a good color pallette?• What emotions do you want to evoke in your  users? Make a list of colors that repres...
* http://viens-la.com/
Some color tips:Don’t go too bright. Don’t use black. Less is more.
Hierarchy
“Good visual hierarchy isn’t aboutwild and crazy graphics or the newestphotoshop filters, it’s aboutorganizing information ...
Hierarchy is defined by previous concepts we’ve talked about:• Grids help separate or group elements• Typography calls out ...
Demohttp://choycedesign.com/2012/10/20/design-for-non-designers/
Thanks.Any questions?@melchoyce                   choycedesign.comhttp://choycedesign.com/2012/10/20/design-for-non-design...
Design Basics for Non-Designers
Upcoming SlideShare
Loading in...5
×

Design Basics for Non-Designers

5,554

Published on

To non-designers, design can seem like a mysterious realm inhabited by natural artists — inscrutable beings whose heads are constantly in the clouds as they hunker down in Photoshop, desperately trying to get every last pixel aligned perfectly (Okay, maybe there’s a *bit* of truth to that). Realistically, design is just a series of informed decisions based on a set of principles guided by best practice. By learning the basics of design, you can make your WordPress sites and applications more usable and compelling. This session is meant for anyone new to design.

Published in: Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,554
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
166
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "Design Basics for Non-Designers"

  1. 1. Design Basics forNon-Designerspresented at #wcphilly@melchoyce choycedesign.comhttp://choycedesign.com/2012/10/20/design-for-non-designers/
  2. 2. Mel Choyce• User Interface Designer at Joust.io• WordPress evangelist• Former Western MA WordPress meetup co-coordinator@melchoyce choycedesign.comhttp://choycedesign.com/2012/10/20/design-for-non-designers/
  3. 3. Intro to Design
  4. 4. What is design?
  5. 5. “Design is what links creativity andinnovation. It shapes ideas to becomepractical and attractive propositionsfor users or customers. Design maybe described as creativity deployed toa specific end.”Sir George Cox
  6. 6. Design = creative problem solving.
  7. 7. Everything around us is designed.
  8. 8. What is web design?
  9. 9. “Web design is the creation of digitalenvironments that facilitate andencourage human activity; reflect oradapt to individual voices and content;and change gracefully over time whilealways retaining their identity.”Jeffrey Zeldman
  10. 10. We have to adapt our designs alongside the web as it develops. source: http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
  11. 11. What makes good design good?
  12. 12. “I shall not today attempt further todefine the kinds of material Iunderstand to be embraced within thatshorthand description; and perhaps Icould never succeed in intelligiblydoing so. But I know it when I see it.”Supreme Court Justice Potter Stewart
  13. 13. Good Design:• Is Innovative• Makes a Product Useful• Is Aesthetic• Makes A Product Understandable• Is UnobtrusiveDieter Rams
  14. 14. Good Design (cont):• Is Honest• Is Long-lasting• Is Thorough Down to the Last Detail• Is Environmentally Friendly• Is as Little Design as PossibleDieter Rams
  15. 15. Why is good design important?
  16. 16. Good design forms anemotional connectionto your users.
  17. 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. 18. Good designestablishes trust.*Hand designed by Pavel Nikandrov from The Noun Project
  19. 19. A well-designed site appears muchmore trustworthy than a poorlydesigned site, especially when you aretrying to sell something to your users.The more trust your users have in you,the safer they feel buying from you.
  20. 20. Good design makes yourwebsite easy to use.
  21. 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. 22. Design Principles
  23. 23. Grid & Alignment
  24. 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. 25. Objects look better when aligned along a grid. looks good vs looks bad
  26. 26. Brings order to chaos.*12col 960gs
  27. 27. White Space
  28. 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. 29. Typography
  30. 30. “Web Design is 95% Typography”Oliver Reichenstein,The Web is All About Typography. Period.
  31. 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.
  32. 32. How do I make it look good?
  33. 33. Size Big is beautiful. 14px+ for body fonts.* http://www.zeldman.com/
  34. 34. Line HeightHe 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 thesay, “There goes the Doctor!—He’s a street in his high hat everyone wouldclever man.” And the dogs and thechildren would all run up and follow say, “There goes the Doctor!—He’s abehind him; and even the crows that clever man.” And the dogs and thelived in the church-tower would caw children would all run up and followand 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
  35. 35. Line LengthThe house he lived in, on the edge of the town, was quite small; but his garden was verylarge 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
  36. 36. Color
  37. 37. 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.
  38. 38. *http://www.serialcut.com/extrabold
  39. 39. 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/
  40. 40. * http://viens-la.com/
  41. 41. Some color tips:Don’t go too bright. Don’t use black. Less is more.
  42. 42. Hierarchy
  43. 43. “Good visual hierarchy isn’t aboutwild and crazy graphics or the newestphotoshop filters, it’s aboutorganizing information in a waythat’s usable, accessible, and logicalto the everyday site visitor.”Brandon Jones,Understanding Visual Hierarchy in Web Design
  44. 44. 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
  45. 45. Demohttp://choycedesign.com/2012/10/20/design-for-non-designers/
  46. 46. Thanks.Any questions?@melchoyce choycedesign.comhttp://choycedesign.com/2012/10/20/design-for-non-designers/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×