Design for Developers, Idan Gazit

Get Started. It's Free
or sign up with your email address
Design for Developers, Idan Gazit by Mind Map: Design for Developers, Idan Gazit

1. slides & video




3. Google home-page

3.1. vs. Yahoo! / MSN

4. tag-line

4.1. making your front-end suck less

5. About

5.1. @idangazit

5.2. [email protected]

5.3. developed

5.3.1. django-advent

5.4. organized / designed

5.4.1. (Euro)DjangoCon

6. Why

6.1. design is a necessary capability of Web designers

6.1.1. provide better user experience

6.2. Don Norman: Attractive things work better

6.2.1. at leasr that's what people perceive

7. Suck Less

7.1. 1. Do less

7.1.1. less opportunities to suck

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

7.1.3. a lot of whitespace

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

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

7.2. 2. Create visual hierarchy

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

7.2.2. don'r be monotonic all bla bla bla

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

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

7.2.5. Contrast it's pretty & a good way to emphasize/de-emphasize e.g. A list apart hunted

7.3. 2.1 Design with a grid

7.3.1. use grid as underlying layout basis

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

7.3.3. different granulrity but overall single grid

7.4. 3. Use good typography

7.4.1. pretty fonts the clothes with which you dress your words

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

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

7.4.4. at least 600 years of experience

7.4.5. pitfalls Set "Solid" line spacing of 1 (browser default) Rule of thumb paragraph width if too long, can't return to location rule of thumb font size 12 pt (default in MS Word) is good for print but not screen/web rule of thumb not too many fonts 2-3 typefaces, maximum good guide see

7.4.6. web fonts revolution today browsers use webfonts - more than the old 10 MS fonts graceful degradation how font face embedding either don't use Support is still Flux

7.5. 4. Color

7.5.1. Color theory is hard tldr

7.5.2. A lot like music math proportions for harmony

7.5.3. I10n issues culture-specific though

7.5.4. print/screen different subtractive/additive based

7.5.5. 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

7.6. 5. Steal & learn

7.6.1. Copy good examples

7.6.2. Resources Pattern Tap patterns, examples, themes Smashing Magazine 25 fresh designs Book Designing for the Web

8. Rules are meant to be broken

8.1. be special/catch attention

9. Prototyping

9.1. Tools

9.1.1. Balsamic

9.1.2. Large pen on paper 37signals approach