Design Principles for Non-designers
•Download as KEY, PDF•
3 likes•1,354 views
This is from my talk at the Atlantic Internet Marketing (AIM) Conference 2009 about design and the principles non-designers can use to make their websites, presentations and print documents communicate better.
Recommended
Recommended
More Related Content
More from Kula Partners
More from Kula Partners (12)
Design Principles for Non-designers
- 1. je@brightwhite.ca @brightwhite on twitter design principles for non-designers aim 2009 | 04 23 2009
- 7. Verdana Georgia Helvetica Trebuchet MS Arial
- 8. Just say no to Comic Sans
- 9. Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur adipiscing elit. Ut sagittis. Ut volutpat, nibh id lacinia sagittis. Ut volutpat, nibh id lacinia malesuada, justo elit adipiscing malesuada, justo elit adipiscing mi, eget gravida lacus tortor in mi, eget gravida lacus tortor in arcu. Fusce iaculis, urna vel arcu. Fusce iaculis, urna vel elementum consequat, lectus nisi elementum consequat, lectus nisi egestas augue, eget pellentesque egestas augue, eget pellentesque nisl risus a augue. Integer nisl risus a augue. Integer eleifend interdum arcu. eleifend interdum arcu. Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur adipiscing elit. Ut sagittis. Ut volutpat, nibh id lacinia sagittis. Ut volutpat, nibh id lacinia malesuada, justo elit adipiscing malesuada, justo elit adipiscing mi, eget gravida lacus tortor in mi, eget gravida lacus tortor in arcu. Fusce iaculis, urna vel arcu. Fusce iaculis, urna vel elementum consequat, lectus nisi elementum consequat, lectus nisi egestas augue, eget pellentesque egestas augue, eget pellentesque nisl risus a augue. Integer nisl risus a augue. Integer eleifend interdum arcu. eleifend interdum arcu.
- 10. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis. Ut volutpat, nibh id lacinia malesuada, justo elit adipiscing mi, eget gravida lacus tortor in arcu. Fusce iaculis, urna vel elementum consequat, lectus nisi egestas augue, eget pellentesque nisl risus a augue. Integer eleifend interdum arcu. Donec eu sem vitae ipsum sodales cursus. Suspendisse semper, lacus a pellentesque tincidunt, nunc purus faucibus diam, sit amet suscipit mauris odio at diam. Nulla facilisi. Donec nec tortor. Nullam ultricies, sapien eu aliquet fermentum, diam urna tristique eros, ac porta odio tortor eget neque. Ut urna risus, aliquam vitae, porttitor eget, placerat non, odio. Integer congue tortor et urna. Praesent felis. Aenean at nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse ac quam non dolor vulputate accumsan. Praesent nec dolor eu dui faucibus porttitor. Duis sollicitudin varius erat. Nunc eu arcu quis justo sollicitudin faucibus. Duis lacinia purus sed metus. Suspendisse malesuada, odio scelerisque tempus faucibus, elit dui sagittis nunc, id blandit lectus purus eget felis. Fusce ute.
- 11. This is a Heading AND IʼM BUT A SUBHEADING Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, adipiscing elit. Ut sagittis. Ut volutpat, nibh id lacinia malesuada, justo elit adipiscing mi, consectetur adipiscing elit. Ut eget gravida lacus tortor in arcu. Fusce iaculis, urna vel elementum consequat, lectus sagittis. Ut volutpat, nibh id lacinia nisi egestas augue, eget pellentesque nisl malesuada, justo elit adipiscing mi, risus a augue. Integer eleifend interdum arcu. eget gravida lacus tortor in arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis. Ut volutpat, nibh id Fusce iaculis, urna vel elementum lacinia malesuada, justo elit adipiscing mi, eget gravida lacus tortor in arcu. Fusce iaculis, consequat, lectus nisi egestas augue, urna vel elementum consequat, lectus nisi eget pellentesque nisl risus a augue. egestas augue, eget pellentesque nisl risus a augue. Integer eleifend interdum arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis. Ut volutpat, nibh id lacinia malesuada, justo elit adipiscing mi, eget gravida lacus tortor in arcu. Fusce iaculis, urna vel elementum consequat, lectus nisi egestas augue, eget pellentesque nisl risus a augue. Integer eleifend interdum arcu.
- 16. je@brightwhite.ca @brightwhite on twitter open question session
Editor's Notes
- Story When I went at NSCAD, I had the opportunity to study under a wonderful man named Horst Deppe. Horst is an old school typographer. That’s him in the center of that image, next to another wonderful professor I studied with, Frank Fox and Ed Porter from the printmaking department. All were wonderful teachers, but Horst stands out the most for me. Over the course of the semester, Horst said a few things that have stuck with me. When clients complain about the wasted space we designers like to leave to help lead the eye through a page, tell them that “white space is cheaper to print” because you don’t have to pay for all that extra ink. Always put a typo in the headline so that it will give your client something to comment on, thereby feeling that they’ve made a contribution. Now, I’ve never done anything like this to my clients, but you can see a bit inside the mind of a designer now. Good designers always have reasons for why they do certain things. Note that, ‘it looks cool’ is not a good reason. What this tells me, however, is that design is all about compromise. The even while we’re trying to create something that communicates to your end users, at the same time, we’re endeavoring to appeal to our client and ensure that they’re happy.
- What is Design? Design is a process It’s not about prettification I know this isn’t a word Ultimately, design is communication. Design has little to nothing to do with the programs on your computer notice the frilly graphics here. looks pretty nice eh? however, it’s purely stylistic and decorative, and it adds nothing to your understanding of the message of this slide. That’s not to say that decoration isn’t important. but it should be the last thing you consider once you’re certain your message is clear and that decoration won’t infringe on that communication.
- What is Good Design? Semiotically-speaking, good design is that which communicates a message that the person receiving it will understand. This is the sign/signifier relationship Good design enhances the message, increases our understanding of what is being said without getting in the way. To many people, a designed object is something that looks cool, or interesting. While this may be true in fashion, industrial design, it shouldn’t be the case in communication design.
- Let you in on a secret Anyone can be a designer To truly elevate the craft you have to understand a few principles Design is as much about a creative idea as it is about visual execution, which means that even without an idea, you can make your websites and documents look more professional and communicate better. Everyone, from experienced designers to design students to the general public gets caught up in a cool look Design is many things, but fashion shouldn’t be one of them Instead focus on communication, getting an idea across is your number one concern Effective communication is the key to design working, if it does it’s job, you shouldn’t even notice (think of a good book--you don’t even notice the quality of the typesetting, you simply get engaged in the story,) Good design knows when to get out of its own way.
- What makes a Design Pro? Grids Good use of typography Proper Photo Cropping Negative space
- Typography Font choices on the web are limited You can still make beautiful type online Talk about the subtleties between Arial and Helvetica Choose your type wisely and use fonts that perform at their best for the situation you need: Georgia looks gorgeous BIG Helvetica makes a great headline font, but starts to fall apart below 12 pt Verdana is clunky at anything larger than 12pt, but is nicely legible even down to 9pt For years, designers had very few fonts, and they still managed to make beautiful, expressive work Trebuchet is a nice compromise if you’re trying to match a more modern sans-serif
- Typography Comic Sans is bad, mmmkay?
- Typography You have four options for text alignment Left Aligned Right Aligned Centered Justified Use only one Never use justified, it introduces rivers of white into the copy and makes it harder to read and just plain ugly. Browsers can’t render this properly as they don’t handle incremental spacing well. Page layout programs can fix this, but there’s no control for this kind of kerning and tracking on the web. Flush left, ragged right is the easiest to read and looks the most professional, especially for copy that is meant to be read don’t use double spaces, that was for typewriters and monospaced fonts
- Typography Line lengths should be kept to 70-80 characters per line maximum. You can go with less, but never more. This influences your layout width. percentile (elastic) widths run the risk of being hard to read. To aid readability, increase the leading or space between lines explain leading, relation to line-height Use space between lines, not indents to signal the next paragraph double spaces are for typewriters and monospaced fonts like Courier line breaks and widows/orphans--you have no control, so stop worrying first paragraph is helvetica, second is arial
- Typography All caps is yelling, and shouldn’t be used for anything other than emphasis and short lines for headings. You want to try to create a form of hierarchy with your typography. There’s lots of things that convey importance from size, colour, placement, negative space use bold and italic where appropriate. bold is to strengthen a point, italic is to emphasize never underline type. underlines are used when italics weren’t available and on the web, an underline means a link. talk about redundant typography
- Layout Use a grid! Remember that on the web, just about everything has to live in a distinct box. You can fake it with backgrounds that cross multiple areas, but it makes the most sense to organize your content with a grid vertically and horizontally. Know your user base and what resolution they’re likely to use When in doubt, use established conventions for navigation Drop down menus can be bad for usability, so consider their use carefully. Leave white space to guide the eye. Making something small and surrounded by a large amount of white makes it feel important and precious Don’t forget about scale! When everything is the same size, it looks boring. Have a single focal point, and then use a graphical hierarchy to go from there.
- Colour Stick to two or three colours Choose a palette the way an interior designer would pick colours for a kitchen. Look at the colour wheel Stay away from pure primaries unless that’s the look you’re going for Start with colour(s) from your logo if you have one and work outwards from there Alternatively, choose a prominent photo and select colours from that to work with If you’re planning to take this to print, be aware that while there are millions of colours available for on-screen use, there are only a few thousand possible shades of ink and some colours simply can’t be reproduced in print
- Photography Rule of thirds Cropping Colour Light Buying stock photos Stock photos are cheap cheap cheap now (although micro stock prices have been rising of late) If you’re looking for images you can use commercially, try a CC search on Flickr, that’s how we got the images we use on brightwhite.ca Treat photos with a border and some padding to make them feel less plunked in place Consider background colours, such as close cropped photos and how these will work. Can they become a central element in your design?
- Pulling it all together If all else fails, find a template online and modify it to suit your needs If you use a grid as a basis, you can’t go wrong, and it gives you avenues for experimentation and iteration If you have a good grid, it allows for easy placement of lots of content, related information and all kinds of stuff