View
375
Download
2
Category
Preview:
DESCRIPTION
Citation preview
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
Recommended