design basics web - george w. jenkins high...
TRANSCRIPT
![Page 1: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/1.jpg)
@melchoyce http://choycedesign.com/2012/10/20/design-for-non-designers/
choycedesign.com
Design Basics for Non-Designerspresented at #wcphilly
![Page 2: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/2.jpg)
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/
![Page 3: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/3.jpg)
Intro to Design
![Page 4: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/4.jpg)
What is design?
![Page 5: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/5.jpg)
“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
![Page 6: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/6.jpg)
Design = creative problem solving.
![Page 7: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/7.jpg)
Everything around us is designed.
![Page 8: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/8.jpg)
What is web design?
![Page 9: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/9.jpg)
“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
![Page 10: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/10.jpg)
source: http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
We have to adapt our designs alongsidethe web as it develops.
![Page 11: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/11.jpg)
What makes good design good?
![Page 12: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/12.jpg)
“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
![Page 13: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/13.jpg)
Good Design:
• Is Innovative
• Makes a Product Useful
• Is Aesthetic
• Makes A Product Understandable
• Is Unobtrusive
Dieter Rams
![Page 14: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/14.jpg)
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
![Page 15: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/15.jpg)
Why is good design important?
![Page 16: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/16.jpg)
Good design forms an emotional connection to your users.
![Page 17: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/17.jpg)
“People will forgive shortcomings, follow your lead, and sing your praises if you reward them with positive emotion.”Aarron Walters, Designing for Emotion
• 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.
![Page 18: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/18.jpg)
Good design establishes trust.
*Hand designed by Pavel Nikandrov from The Noun Project
![Page 19: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/19.jpg)
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.
![Page 20: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/20.jpg)
Good design makes yourwebsite easy to use.
![Page 21: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/21.jpg)
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.
![Page 22: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/22.jpg)
Design Principles
![Page 23: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/23.jpg)
Grid & Alignment
![Page 24: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/24.jpg)
• 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.
![Page 25: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/25.jpg)
vs
looks good
looks bad
Objects look better when aligned along a grid.
![Page 26: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/26.jpg)
*12col 960gs
Brings order to chaos.
![Page 27: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/27.jpg)
White Space
![Page 28: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/28.jpg)
Guides the eye & creates balance.
Header lorem ipsum
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.
Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh
ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Aenean eu
leo quam. Pellentesque 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.
Widget Title
Vestibulum id ligula porta felis
euismod semper. Nullam id
dolor id nibh ultricies vehicula
ut id elit. Curabitur blandit
tempus porttitor. Aenean eu
leo quam. Pellentesque
ornare sem lacinia quam
venenatis vestibulum.
Maecenas faucibus mollis
interdum. Donec sed odio dui.
![Page 29: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/29.jpg)
Typography
![Page 30: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/30.jpg)
“Web Design is 95% Typography”Oliver Reichenstein,
The Web is All About Typography. Period.
![Page 31: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/31.jpg)
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.
![Page 32: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/32.jpg)
![Page 33: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/33.jpg)
How do I make it look good?
![Page 34: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/34.jpg)
Size
* http://www.zeldman.com/
Big is beautiful. 14px+ for body fonts.
![Page 35: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/35.jpg)
Line HeightHe lived in a little town called, Puddleby-on-the-Marsh. All the folks, young and old, knew him well by sight. And whenever he walked down the street in his high hat everyone would say, “�ere goes the Doctor!—He’s a clever man.” And the dogs and the children would all run up and follow behind him; and even the crows that lived in the church-tower would caw and nod their heads.
He lived in a little town called,
Puddleby-on-the-Marsh. All the folks,
young and old, knew him well by sight.
And whenever he walked down the
street in his high hat everyone would
say, “�ere goes the Doctor!—He’s a
clever man.” And the dogs and the
children would all run up and follow
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
![Page 36: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/36.jpg)
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
![Page 37: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/37.jpg)
Color
![Page 38: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/38.jpg)
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.
![Page 39: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/39.jpg)
*http://www.serialcut.com/extrabold
![Page 40: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/40.jpg)
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/
![Page 41: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/41.jpg)
* http://viens-la.com/
![Page 42: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/42.jpg)
Some color tips:Don’t go too bright. Don’t use black. Less is more.
![Page 43: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/43.jpg)
Hierarchy
![Page 44: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/44.jpg)
“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
![Page 45: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/45.jpg)
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
![Page 46: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/46.jpg)
http://choycedesign.com/2012/10/20/design-for-non-designers/
Demo
![Page 47: design basics web - George W. Jenkins High Schoolgeorgejenkinshs.com/wp-content/uploads/designbasics... · 2015-08-25 · Guides the eye & creates balance. Header lorem ipsum Header](https://reader034.vdocument.in/reader034/viewer/2022042312/5edad6e609ac2c67fa68640f/html5/thumbnails/47.jpg)
http://choycedesign.com/2012/10/20/design-for-non-designers/
Thanks.
Any questions?
@melchoyce choycedesign.com