Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

Design for Developers, Idan Gazit by Mind Map: Design for Developers, Idan
Gazit
0.0 stars - reviews range from 0 to 5

Design for Developers, Idan Gazit

typographyforlawyers.com

Google home-page

vs. Yahoo! / MSN

tag-line

making your front-end suck less

About

@idangazit

idan@pixane.com

developed

django-advent

organized / designed

(Euro)DjangoCon

Why

design is a necessary capability of Web designers

provide better user experience

Don Norman: Attractive things work better

at leasr that's what people perceive

Suck Less

1. Do less

less opportunities to suck

remove anything & leave only the bare minimum to do the job

a lot of whitespace

e.g., Sleepover, San-Francisco, hunted, Untitled, Square

subtraction becomes hard, how do I remove clutter without removing information?

2. Create visual hierarchy

make your content easy to scan, users are there to take action & not to figure out your site / be impressed from your design

don'r be monotonic, all bla bla bla

Content, in the center, users should immediately recognize what's the user, it's why your users want, test, squint

Whitespace, human perception clusters views, whitespace should leverage this, different content clustered in well separated blocks

Contrast, it's pretty, & a good way to emphasize/de-emphasize, e.g., A list apart, must read, titles in large red font, authors are small font, all caps & different color, consistency, hunted, red background for current category, listen to, the dead-wheather

2.1 Design with a grid

use grid as underlying layout basis

some proportions are beautiful, provided e,g, by, 960.gs, blueprint CSS

different granulrity but overall single grid

3. Use good typography

pretty fonts, the clothes with which you dress your words

but not only: the art & science of presenting textual information

most of the web is text - so 95% of web design is typography

at least 600 years of experience

pitfalls, Set "Solid", line spacing of 1 (browser default), Rule of thumb, 1.3 - 2.0 ems, em - propertilnal to the font, 1 em = width of capital M, paragraph width, if too long, can't return to location, rule of thumb, 2 alphabets, font size, 12 pt (default in MS Word) is good for print but not screen/web, rule of thumb, 16px, =100% in most browsers, not too many fonts, 2-3 typefaces, maximum, good guide, sans-serif for titles, serif for body text, helps distinguish letters, though, "a list apart" do the opposite, to break the rule, see, webtypography.net

web fonts revolution, today browsers use webfonts - more than the old 10 MS fonts, graceful degradation, how, font face embedding, like URL of resource, either, hosted, TypeKit, commercial, 50$/year, normal volume, also Google, CDN'ed, DIY, FontSquirrel, don't use, Flash, Canvas, Support is still Flux, you need to provide all packaging types, EOT, OTF, WOFF, the future, SVG, important for IPhone, Mobile still iffy

4. Color

Color theory is hard, tldr

A lot like music, math, proportions for harmony

I10n issues, culture-specific though

print/screen different, subtractive/additive based

strategies, monochromatic, line in radius of colors ring, analogous, series of symmetric points on ring, Complementary, Symmetric edges of ring, Split complementary, Analogous around one edge of Complemetary, Tetrad, Square over ring

5. Steal & learn

Copy good examples

Resources, Pattern Tap, patterns, examples, themes, Smashing Magazine, 25 fresh designs, Book, Designing for the Web, highly, highly recommended, now free on the web

Rules are meant to be broken

be special/catch attention

Prototyping

Tools

Balsamic

Large pen on paper, 37signals approach

slides & video

http://www.scribd.com/doc/32311867/Design-for-Developers

http://djangoconeu.blip.tv/file/3685673/