Design Rules of Thumb
-
Upload
chris-deleon -
Category
Documents
-
view
250 -
download
1
Transcript of Design Rules of Thumb
-
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