Designing hacks

Designing Hacks
Jeremy Cimafonte
“Turns out good design is
just a collection of hacks”
Thursday, September 5, 13

who i am.

how to make your
hack that stand out.
design principles
elements of design
responsive design
debug design / things watch out for
css

Developers want
good design.
"Attractive things work better."
Don Norman

"its a lot easier to execute a minimal
design than it is for you to get
ambitious.
“you get ambitious you fail"
Idan Gazit

minimal is what works

your users can only focus on one thing
at a time.
"Do not try to do everything. Do one
thing well.”

Jeff Raskin
Steve Jobs

Knowing how people
will use something is
essential.
"Everyday people are not very
good designers."
Don Norman
Designers are not good
designers.............

think humane.
your ﬂow. and interface.
should help the user.
one obvious way to do things.
easy to learn, easy to remember.

cohesive idea. not groups of a few ideas

• who do you think will use your app?
• draw out an interface tailored for them.
x

Sketch
Your Ideas.

Alignment...Spacing..
Visual Hierarchy

“Design is as much an
act of spacing as an
act of marking.”
Thinking with Type
Ellen Lupton

Use Margins so
everything lines up
equally

Visual Hierarchy
• Contrast shows relative importance.
• Repetition attaches meaning to new
elements.
• Alignment creates order.
• A single element that breaks the
established alignment calls attention to
itself and it’s importance. Think of a pull
quote.
• Proximity groups elements within a
hierarchy and creates new sub
hierarchies.

Visual Hierarchy
Size
Color
density density density
Value
whitespace

Debug Your Design
1. Desaturation Test 2. Blur Test 3. Upside Down Test

Typography

Text-background color contrast
Lazy handling of titles and subtitles
Common Mistakes

Text Size
Have ﬁxed sizes for headers, subheaders, body copy. Go for consistency.
Provide adequate line spacing. Don’t decrease linespacing...
Common Mistakes

Text blocks that are not split up into enough small, scannable, digestible parts
Indiscernible links.
Text is not treated as an interface but as decoration
Common Mistakes

content is the center of attention, content deserves the most love from the
designer
Common Mistakes

Find Fonts?
• Go to fontsinuse.com
• Look for fonts and font combos you like.
• Try and ﬁnd similar ones on google fonts so you can
embed easily. (no searching around internet)
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Use Icons
http://fortawesome.github.io/

Use Icons
Place them next to text to indicate action.

Colors
Go to http://colourlovers.com/
Pick a Color Palette that you think ﬁts your app.
create variable for them and reuse throughout.
$blue: #939393
$dark-blue: #121234
$green: #734323

A note on Responsive
Design

courtesy open signals
iOS

Android

Comparison

Use a CSS
Framework
• frameworks give equal margins and grids.
for easier alignment
• prebuilt components you can restyle
• so you can use your app on any device.
(if its good, you can use later..)
• Use Foundation or SASS

Think Before You Shrink

Use this to ﬁx box model.
*{box-sizing: border-box;}
• drop this in your CSS.
• something 200px wide. will
always be 200px wide
• otherwise, with padding/
margin, could be different
size....

Inline Elements do thisInline Elements do
this
Block Elements do
Table Cell’s
can do this
(verticalalign!)

float property allows element boxes to be shifted to the right or left on
the current line
Floated boxes are block boxes
Floated boxes are “pulled out” of the normal flow and repositioned
Must have explicit width
May overlap other boxes
clear property specifies which side(s) of an element should NOT be
adjacent to a floating box that is specified earlier in the document

position property:
static – box is positioned according to normal flow
relative – box is positioned relative to where it would have been placed in the
normal flow
absolute – box is positioned relative to its containing block; these boxes are
taken out of flow
fixed – box is fixed in relation to the viewport (a browser window or a printed
page)

CSS allows authors to generate content that is not part of the
document tree using the following entities:
:before pseudo-element
:after pseudo-element
content property

Designing hacks

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Designing hacks

Semelhante a Designing hacks (20)

Último

Último (20)

Designing hacks