Scribd Logo
Upload

Welcome to Scribd!

  • 1K views

    Design Rules of Thumb

    Uploaded by

    Chris DeLeon
    The document provides design rules of thumb for creating effective visual designs. It discusses six main principles: 1) making sure nothing is arbitrary and distinctions are semantic, 2) guiding attention with layout and type through proximity, contrast, alignment and repetition, 3) situating thinking through sketching, wireframing and prototyping, 4) being a curator and pruning unnecessary elements, 5) getting distance from a design by stepping back, taking breaks and getting feedback, and 6) starting early to allow for iteration. Examples and further explanations are provided for each principle.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd

    Design Rules of Thumb

    Uploaded by

    Chris DeLeon
    1K views25 pages
    The document provides design rules of thumb for creating effective visual designs. It discusses six main principles: 1) making sure nothing is arbitrary and distinctions are semantic, 2) guiding attention with layout and type through proximity, contrast, alignment and repetition, 3) situating thinking through sketching, wireframing and prototyping, 4) being a curator and pruning unnecessary elements, 5) getting distance from a design by stepping back, taking breaks and getting feedback, and 6) starting early to allow for iteration. Examples and further explanations are provided for each principle.

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document provides design rules of thumb for creating effective visual designs. It discusses six main principles: 1) making sure nothing is arbitrary and distinctions are semantic, 2) guiding attention with layout and type through proximity, contrast, alignment and repetition, 3) situating thinking through sketching, wireframing and prototyping, 4) being a curator and pruning unnecessary elements, 5) getting distance from a design by stepping back, taking breaks and getting feedback, and 6) starting early to allow for iteration. Examples and further explanations are provided for each principle.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    1K views25 pages

    Design Rules of Thumb

    Uploaded by

    Chris DeLeon
    The document provides design rules of thumb for creating effective visual designs. It discusses six main principles: 1) making sure nothing is arbitrary and distinctions are semantic, 2) guiding attention with layout and type through proximity, contrast, alignment and repetition, 3) situating thinking through sketching, wireframing and prototyping, 4) being a curator and pruning unnecessary elements, 5) getting distance from a design by stepping back, taking breaks and getting feedback, and 6) starting early to allow for iteration. Examples and further explanations are provided for each principle.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 25

    DESIGN RULES OF THUMB

    A s s e m b l e d by C h r i s D e L e o n fo r

    LC C 6 31 3 Fa l l 2 01 2

    SLIDES-AS-HANDOUT DISCLAIMER

    These slides are designed to function on screen or on paper, but are much too wordy to be used in an oral presentation. When creating slides to present in class, keep wordier text (if needed) in the notes section. Use the slides instead for fewer, carefully-chosen words, alongside appropriate images, graphs, diagrams, maps, etc.

    DESIGN RULES OF THUMB WELL COVER

    Nothing Should Be Arbitrary Guide Attention with Layout and Type Situate Thinking by Sketching Be a Curator Get Some Distance Start Early

    NOTHING SHOULD BE ARBITRARY


    MAKE DISTINCTIONS SEMANTIC

    NOTHIN G SHOULD BE ARBITRARY


    Make distinctions semantic

    In case it isnt sufficiently obvious, this is an example of what not to do. Its meaningless visual clutter. Photo by Veronica L. Almy Wright..

    MAKE DISTINCTIONS SEMANTIC

    1. Images and placement convey meaning and tone. Use this deliberately. 2. Use color, font, and layout to say something about the topic. 3. Dont use anything in its default stateit wasnt made with your purposes in mind. Adapt it.

    TONE
    What do these images, fonts, and color s say about Adobe? (TONE/RESTRAINT ADOBE EXAMPLE)

    RESTRAINT
    How many fonts can you spot here?

    SITUATE THINKING BY SKETCHING


    THINK ON PAPER (OR LAPTOP)

    THINK ON PAPER (OR LAPTOP)


    1. PROTOT YPE, WIREFRAME Sketching for digital media has many forms. Does it need interaction? Sound? Rearranging? 2. JUST DO SOMETHING If its bad, get it down to get it out of your system. If its decent, get it down and iterate on it. 3. NO DESIGN IS OR SHOULD BE PERFECT Tradeoffs and compromises are found by sketching and implementation. 4. CODE IN LAYERS If what youre designing involves code, dont try to immediately program it all at once. Get the bare minimum working, then build upon that one step at a time.

    Black text for 2 and 3 come from Frederick, Matthew. 101 Things I Learned in Architecture School. Cambridge, MA: MIT, 2007. Print.

    (WHITEBOARD UI DIAGRAM EXAMPLE)

    PUT YOUR IDEAS INTO A SKETCH, A MOCK-UP, OR A PROTOT YPE Doing something concrete with ideas lets us notice and address issues that arent evident when merely thinking about them.
    Image from http://blogs.wayne.edu/web/2010/12/08/whiteboard-exemplar-online-newsletter/

    GUIDE ATTENTION WITH LAYOUT AND TYPE


    USE ST YLE TO SUPPORT CONTENT

    USE ST YLE TO SUPPORT CONTENT

    1. PROXIMIT Y Use spacing and grouping to convey relationships 2. CONTRAST Exaggerate differences 3. ALIGNMENT Line up edges, limit use of text centering 4. REPETITION Repeating a pattern keeps focus on the content 5. PLACEMENT Whats at the top is assumed most important

    1-4 from Williams, Robin. The Non-designers Design Book: Design and Typographic Principles for the Visual Novice. Berkeley, CA: Peachpit, 2004. Print.

    CONTRAST Headings are a different size, color, and typeface, to help establish a hierarchy

    (CONTRAST REPETITION PROXIMIT Y ALIGNMENT EXAMPLE)

    REPETITION The use of a clear pattern minimizes ambiguity or distraction from content

    PROXIMIT Y Using a little extra spacing above each heading than below ties it to its body text

    ALIGNMENT Headings are left justified. Indentation is used only for paragraphs after the first

    BE A CURATOR
    WHAT MAKES A MUSEUM GREAT IS THE STUFF THAT'S NOT ON THE WALLS

    Quoted, including headline, from Frederick, Matthew. 101 Things I Learned in Architecture School. Cambridge, MA: MIT, 2007. Print.

    WHAT MAKES A MUSEUM GREAT IS THE STUFF THAT'S NOT ON THE WALLS
    1. Anything that doesnt add meaningfully to what youre doing is a distraction from the elements that do. 2. Its fine to try many different things during development, but for the final draft prune out everything but what works best. 3. You need less than you think A good designer isnt afraid to throw away a good idea. (Fried and Heinemeier) 4. Pick only one or two fonts, a few sizes, and a limited color palette. Trying to use everything possible looks amateur.

    3 is quoted from Fried, Jason, and David Heinemeier. Hansson. Rework. New York: Crown Business, 2010. Print.

    COMPARE THIS SEARCH ENGINE TO

    (Google, showing no clutter, just search functionality)

    EXCITE.COM AS A TOTAL FAILURE TO CURATE

    THINK ABOUT ALL THAT HARD WORK

    The incredibly cluttered webpage of excite.com no doubt took a significant amount of time and work to develop. But that in no way makes it good design. Furthermore, no amount of better or additional programming can solve the problem shown there! The main type of work that could help is thorough curation. Sometimes that means tossing something out, even if it works in the programming, because it isnt working in the design.

    GET SOME DISTANCE


    YOURE PROBABLY TOO CLOSE TO SEE WHATS WRONG WITH IT

    YOURE PROBABLY TOO CLOSE TO SEE WHATS WRONG WITH IT


    1. STEP BACK Back up a little. What stands out? Should it? 2. TAKE A BREAK Start early, make progress, get away from it, then come back fresh. Good ideas need context and time. 3. GET A SECOND OPINION Ask a fellow designer for critique. Respect their time by asking about specific aspects. This is also a good opportunity to practice your design vocabular y. 4. DO USER TESTING Put it in front of a non-designer for reaction. Watch them use it without telling them how it works. Listen to feedback, and look for patterns, but dont argue. After release you cannot always be there to justify complaints!

    FEEDB ACK All desig n invo lves critique. Dont wait until the end! FEEDBACK All design involves critique. Dont wait until the end!
    Image from http://gtresearchnews.gatech.edu/gtri-to-create-online-vehicle-design/

    START EARLY
    ITERATION AND TIME TO RETHINK ARE ESSENTIAL TO GOOD DESIGN RESULTS

    ITERATION AND TIME TO RETHINK ARE ESSENTIAL TO GOOD DESIGN RESULTS


    We are all terrible estimators. We think we can guess how long something will take, when we really have no idea.(Fried and Heinemeier) Hofstadter's Law: Any computer project will take twice as long as you think it will, even when you take into account Hofstadter's Law.

    Quote from Fried, Jason, and David Heinemeier. Hansson. Rework. New York: Crown Business, 2010. Print. / Hofstadters Law form Douglas Hofstadter, Gdel, Escher, Bach: An Eternal Golden Braid

    H A P P Y G EORG IA T EC H G RA D S T U D EN T S S TA RT EA RLY Starting earlier is not only about enduring less stress and getting more out of the fun concept phaseyoull get better results!
    Image from http://www.instructables.com/id/How-to-use-Documatic-The-automated-documentary-pr/

    DESIGN RULES OF THUMB WE COVERED

    Nothing Should Be Arbitrary Guide Attention with Layout and Type Situate Thinking by Sketching Be a Curator Get Some Distance Start Early

    You might also like