Design Principles for Non-designers

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

more share options
Embed For WordPress.com

Without related presentations

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

2 Favorites

Canuck099 favorited this 6 months ago
schallner favorited this 6 months ago

Design Principles for Non-designers - Presentation Transcript

je@brightwhite.ca @brightwhite on twitter design principles for non-designers aim 2009 | 04 23 2009
what is design?
Verdana Georgia Helvetica Trebuchet MS Arial
Just say no to Comic Sans
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.
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.
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.
je@brightwhite.ca @brightwhite on twitter open question session

+ Jeff White, 6 months ago