7/31/2019 Design Rules of Thumb

1/25

DESIGN RULES

OF THUMB

Assembled by Chr is DeLeon for LCC6313 Fal l 2012

7/31/2019 Design Rules of Thumb

2/25

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.

SLIDES-AS-HANDOUT DISCLAIMER

7/31/2019 Design Rules of Thumb

3/25

Nothing Should Be ArbitraryGuide Attention with Layout and TypeSituate Thinking by SketchingBe a CuratorGet Some DistanceStart Early

DESIGN RULES OF THUMB WELL COVER

7/31/2019 Design Rules of Thumb

4/25

MAKE DISTINCTIONS SEMANTIC

NOTHING SHOULD

BE ARBITRARY

7/31/2019 Design Rules of Thumb

5/25

Make distinctions semantic

N O T H I N G S H O U L D

BE ARBITRARY

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..

7/31/2019 Design Rules of Thumb

6/25

1. Images and placement convey meaning andtone. Use this deliberately.

2. Use color, font, and layout to say somethingabout the topic.

3. Dont use anything in its default stateit wasntmade with your purposes in mind. Adapt it.

MAKE DISTINCTIONS SEMANTIC

7/31/2019 Design Rules of Thumb

7/25

TONE

What do theseimages, fonts,

and colors say

about Adobe?

RESTRAINT

How many

fonts can you

spot here?

(TONE/RESTRAINT ADOBE EXAMPLE)

7/31/2019 Design Rules of Thumb

8/25

THINK ON PAPER (OR LAPTOP)

SITUATE THINKING

BY SKETCHING

7/31/2019 Design Rules of Thumb

9/25

1. PROTOTYPE, WIREFRAME Sketching for digital media hasmany forms. Does it need interaction? Sound? Rearranging?

2. JUST DO SOMETHING If its bad, get it down to get it out ofyour 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.

THINK ON PAPER (OR LAPTOP)

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

7/31/2019 Design Rules of Thumb

10/25

Image from http://blogs.wayne.edu/web/2010/12/08/whiteboard-exemplar-online-newsletter/

PUT YOUR IDEAS INTO A SKETCH, A MOCK-UP, OR A PROTOTYPE

Doing something concrete with ideas lets us notice and address

issues that arent evident when merely thinking about them.

(WHITEBOARD UI DIAGRAM EXAMPLE)

7/31/2019 Design Rules of Thumb

11/25

USE STYLE TO SUPPORT CONTENT

GUIDE ATTENTION WITH

LAYOUT AND TYPE

7/31/2019 Design Rules of Thumb

12/25

1. PROXIMITYUse spacing and grouping to convey relationships2. CONTRASTExaggerate differences3. ALIGNMENTLine up edges, limit use of text centering4. REPETITIONRepeating a pattern keeps focus on the content5. PLACEMENTWhats at the top is assumed most important

USE STYLE TO SUPPORT CONTENT

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

7/31/2019 Design Rules of Thumb

13/25

(CONTRAST

REPETITION

PROXIMITY

ALIGNMENT

EXAMPLE)

PROXIMITY

Using a littleextra spacing

above each

heading than

below ties it to

its body text

CONTRAST

Headings are a

different size,

color, and

typeface, to

help establish

a hierarchy

REPETITION

The use of a

clear pattern

minimizes

ambiguity or

distraction

from content

ALIGNMENT

Headings areleft justified.

Indentation is

used only for

paragraphs

after the first

7/31/2019 Design Rules of Thumb

14/25

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

WHAT MAKES A MUSEUM GREAT ISTHE STUFF THAT'S NOT ON THE WALLS

BE A CURATOR

7/31/2019 Design Rules of Thumb

15/25

1. Anything that doesnt add meaningfully to what youre doingis a distraction from the elements that do.

2. Its fine to try many different things during development, butfor the final draft prune out everything but what works best.

3. You need less than you think A good designer isn t afraidto throw away a good idea. (Fried and Heinemeier)

4. Pick only one or two fonts, a few sizes, and a limited colorpalette. Trying to use everything possible looks amateur.

WHAT MAKES A MUSEUM GREAT IS

THE STUFF THAT'S NOT ON THE WALLS

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

7/31/2019 Design Rules of Thumb

16/25

(Google, showing no clutter, just search

functionality)

COMPARE THIS SEARCH ENGINE TO

7/31/2019 Design Rules of Thumb

17/25

EXCITE.COM AS A TOTALFAILURE TO CURATE

7/31/2019 Design Rules of Thumb

18/25

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 oradditional 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.

THINK ABOUT ALL THAT HARD WORK

7/31/2019 Design Rules of Thumb

19/25

YOURE PROBABLY TOO CLOSETO SEE WHATS WRONG WITH IT

GET SOME DISTANCE

7/31/2019 Design Rules of Thumb

20/25

1. STEP BACK Back up a l ittle. What stands out? Should it?2. TAKE A BRE AK 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 isalso a good opportunity to practice your design vocabulary.

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 releaseyou cannot always be there to justify complaints!

YOURE PROBABLY TOO CLOSE

TO SEE WHATS WRONG WITH IT

7/31/2019 Design Rules of Thumb

21/25

FEEDBACK All design involves cr i t ique. Dont wait unt i l the end!

Image from http://gtresearchnews.gatech.edu/gtri-to-create-online-vehicle-design/

FEEDBACKAll design involves critique. Dont wait until the end!

7/31/2019 Design Rules of Thumb

22/25

ITERATION AND TIME TO RETHINK AREESSENTIAL TO GOOD DESIGN RESULTS

START EARLY

7/31/2019 Design Rules of Thumb

23/25

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.

ITERATION AND TIME TO RETHINK ARE

ESSENTIAL TO GOOD DESIGN RESULTS

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

7/31/2019 Design Rules of Thumb

24/25

Image from http://www.instructables.com/id/How-to-use-Documatic-The-automated-documentary-pr/

Starting earlier is not only about enduring less stress and getting

more out of the fun concept phaseyoull get better results!

HAPPY GEORGIA TECH GRAD STUDENTS START EARLY

7/31/2019 Design Rules of Thumb

25/25

Nothing Should Be Arbitrary

Guide Attention with Layout and TypeSituate Thinking by SketchingBe a CuratorGet Some DistanceStart Early

DESIGN RULES OF THUMB WE COVERED