Designing Hacks

Jeremy Cimafonte

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

Thursday, September 5, 13

who i am.

Thursday, September 5, 13

Thursday, September 5, 13

Thursday, September 5, 13

Thursday, September 5, 13

how to make your hack that stand out.

design principleselements of designresponsive design

debug design / things watch out forcss

Thursday, September 5, 13

Developers wantgood design.

"Attractive things work better." Don Norman

Thursday, September 5, 13

"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

minimal is what works

Thursday, September 5, 13

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

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

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

cohesive idea. not groups of a few ideas

Thursday, September 5, 13

• who do you think will use your app?

• draw out an interface tailored for them.

xThursday, September 5, 13

SketchYour Ideas.

Thursday, September 5, 13

Alignment...Spacing..Visual Hierarchy

Thursday, September 5, 13

“Design is as much an act of spacing as an

act of marking.”Thinking with TypeEllen Lupton

Thursday, September 5, 13

Use Margins so everything lines up

equally

Thursday, September 5, 13

=

Thursday, September 5, 13

Thursday, September 5, 13

Thursday, September 5, 13

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.

Thursday, September 5, 13

Visual Hierarchy

SizeColor

density density density

Value

whitespace

Thursday, September 5, 13

Debug Your Design

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

Thursday, September 5, 13

Typography

Thursday, September 5, 13

Text-background color contrast

Lazy handling of titles and subtitles

Common Mistakes

Thursday, September 5, 13

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

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

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

designer

Common Mistakes

Thursday, September 5, 13

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

designer

Common Mistakes

Thursday, September 5, 13

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

Use Iconshttp://fortawesome.github.io/

Thursday, September 5, 13

Use IconsPlace them next to text to indicate action.

Thursday, September 5, 13

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

A note on Responsive Design

Thursday, September 5, 13

courtesy open signals

iOS

Thursday, September 5, 13

courtesy open signals

Android

Thursday, September 5, 13

courtesy open signals

Comparison

Thursday, September 5, 13

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

Think Before You Shrink

Thursday, September 5, 13

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

Inline Elements do thisInline Elements do

thisBlock Elements do

Table Cell’s can do this

(vertical align!)

Thursday, September 5, 13

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

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

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

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