Your SlideShare is downloading. ×
Design Principles for Non-designers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Design Principles for Non-designers

3,143
views

Published on

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 …

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.

Published in: Technology, Business, Design

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,143
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
119
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

  • 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

  • Transcript

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