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

Designing hacks

  • Upload
    jbcima

  • View
    373

  • Download
    2

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Designing hacks

Designing Hacks

Jeremy Cimafonte

“Turns out good design is just a collection of hacks”

Thursday, September 5, 13

Page 2: Designing hacks

who i am.

Thursday, September 5, 13

Page 3: Designing hacks

Thursday, September 5, 13

Page 4: Designing hacks

Thursday, September 5, 13

Page 5: Designing hacks

Thursday, September 5, 13

Page 6: Designing hacks

how to make your hack that stand out.

design principleselements of designresponsive design

debug design / things watch out forcss

Thursday, September 5, 13

Page 7: Designing hacks

Developers wantgood design.

"Attractive things work better." Don Norman

Thursday, September 5, 13

Page 8: Designing hacks

"its a lot easier to execute a minimal design than it is for you to get

ambitious.

“you get ambitious you fail" Idan Gazit

Thursday, September 5, 13

Page 9: Designing hacks

minimal is what works

Thursday, September 5, 13

Page 10: Designing hacks

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

Thursday, September 5, 13

Page 11: Designing hacks

Knowing how people will use something is

essential. "Everyday people are not very

good designers." Don Norman

Designers are not good designers.............

Thursday, September 5, 13

Page 12: Designing hacks

think humane. your flow. and interface.

should help the user.

one obvious way to do things.easy to learn, easy to remember.

Thursday, September 5, 13

Page 13: Designing hacks

cohesive idea. not groups of a few ideas

Thursday, September 5, 13

Page 14: Designing hacks

• who do you think will use your app?

• draw out an interface tailored for them.

xThursday, September 5, 13

Page 15: Designing hacks

SketchYour Ideas.

Thursday, September 5, 13

Page 16: Designing hacks

Alignment...Spacing..Visual Hierarchy

Thursday, September 5, 13

Page 17: Designing hacks

“Design is as much an act of spacing as an

act of marking.”Thinking with TypeEllen Lupton

Thursday, September 5, 13

Page 18: Designing hacks

Use Margins so everything lines up

equally

Thursday, September 5, 13

Page 19: Designing hacks

=

Thursday, September 5, 13

Page 20: Designing hacks

Thursday, September 5, 13

Page 21: Designing hacks

Thursday, September 5, 13

Page 23: Designing hacks

Visual Hierarchy

SizeColor

density density density

Value

whitespace

Thursday, September 5, 13

Page 24: Designing hacks

Debug Your Design

1. Desaturation Test 2. Blur Test 3. Upside Down Test

Thursday, September 5, 13

Page 25: Designing hacks

Typography

Thursday, September 5, 13

Page 26: Designing hacks

Text-background color contrast

Lazy handling of titles and subtitles

Common Mistakes

Thursday, September 5, 13

Page 27: Designing hacks

Text Size

Have fixed sizes for headers, subheaders, body copy. Go for consistency.

Provide adequate line spacing. Don’t decrease linespacing...

Common Mistakes

Thursday, September 5, 13

Page 28: Designing hacks

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

Thursday, September 5, 13

Page 29: Designing hacks

content is the center of attention, content deserves the most love from the

designer

Common Mistakes

Thursday, September 5, 13

Page 30: Designing hacks

content is the center of attention, content deserves the most love from the

designer

Common Mistakes

Thursday, September 5, 13

Page 31: Designing hacks

Find Fonts? • Go to fontsinuse.com • Look for fonts and font combos you like.• Try and find 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'>

Thursday, September 5, 13

Page 32: Designing hacks

Use Iconshttp://fortawesome.github.io/

Thursday, September 5, 13

Page 33: Designing hacks

Use IconsPlace them next to text to indicate action.

Thursday, September 5, 13

Page 34: Designing hacks

ColorsGo to http://colourlovers.com/

Pick a Color Palette that you think fits your app.create variable for them and reuse throughout.

$blue: #939393$dark-blue: #121234

$green: #734323

Thursday, September 5, 13

Page 35: Designing hacks

A note on Responsive Design

Thursday, September 5, 13

Page 36: Designing hacks

courtesy open signals

iOS

Thursday, September 5, 13

Page 37: Designing hacks

courtesy open signals

Android

Thursday, September 5, 13

Page 38: Designing hacks

courtesy open signals

Comparison

Thursday, September 5, 13

Page 39: Designing hacks

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

Thursday, September 5, 13

Page 40: Designing hacks

Think Before You Shrink

Thursday, September 5, 13

Page 41: Designing hacks

Use this to fix 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....

Thursday, September 5, 13

Page 42: Designing hacks

Inline Elements do thisInline Elements do

thisBlock Elements do

Table Cell’s can do this

(vertical align!)

Thursday, September 5, 13

Page 43: Designing hacks

display property controls what type of box is generated for an elementValues: inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

Thursday, September 5, 13

Page 44: Designing hacks

float property allows element boxes to be shifted to the right or left on the current lineFloated boxes are block boxesFloated boxes are “pulled out” of the normal flow and repositionedMust 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

Thursday, September 5, 13

Page 45: Designing hacks

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

Thursday, September 5, 13

Page 46: Designing hacks

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

Thursday, September 5, 13