Design for Developers

Making your frontend suck less

Idan Gazit • djangocon.eu 2010

http://flic.kr/p/zBdU7
DJANGO ADVENT
http://flic.kr/p/7TYgHL
0 Why
• API Metering • Distributed Log storage, analysis
• Backups & Snapshots • Graphing
• Counters • HTTP Caching
• Cloud/Cluster Management Tools • Input/Output Filtering
• Instrumentation/Monitoring • Memory Caching
• Failover • Non-relational Key Stores
• Node addition/removal and hashing • Rate Limiting
• Auto-scaling for cloud resources • Relational Storage
• CSRF/XSS Protection • Queues
• Data Retention/Archival • Rate Limiting
• Deployment Tools • Real-time messaging (XMPP)
• Multiple Devs, Staging, Prod • Search
• Data model upgrades • Ranging
• Rolling deployments • Geo
• Multiple versions (selective beta) • Sharding
• Bucket Testing • Smart Caching
• Rollbacks • Dirty-table management
• CDN Management
• Distributed File Storage http://randomfoo.net/2009/01/28/infrastructure-for-modern-web-sites
Design.
Attractive things work better
Don Norman
http://jnd.org/dn.mss/emotion_design_attractive_things_work_better.html
http://www.jnd.org/dn.mss/CH01.pdf
http://www.flickr.com/photos/mgdtgd/3507973704/
http://www.flickr.com/photos/mgdtgd/3507973704/
 http://www.flickr.com/photos/mgdtgd/3507973704/

pwned. FFFFFFUUUUUU
Suck Less.
1 Do Less
http://flic.kr/p/QCGLa
Less opportunities to suck.
Commonalities
Subtraction becomes hard
How do I remove clutter
without removing information?
2 Create a Visual Hierarchy
 Make your content
easy to scan and parse.
blah blah blah blah blah blah bla
ah blah blah blah blah blah blah
blah blah blah blah blah blah bla
ah blah blah blah blah blah blah
blah blah blah blah blah blah bla
ah blah blah blah blah blah blah
blah blah blah blah blah blah bla
ah blah blah blah blah blah blah
blah blah blah blah blah blah bla
ah blah blah blah blah blah blah
 Content
It’s why you have users.
Squint
White Space
 Contrast
It’s pretty.

(also, a good way to de/emphasize)

Dolphins Are Just Gay Sharks
Jan 28th 2010 • 7:45 PM
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
Read More…
Dolphins Are Just Gay Sharks
Jan 28th 2010 • 7:45 PM

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.

READ MORE…
Dolphins Are Just Gay Sharks
Jan 28th 2010 • 7:45 PM

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.

READ MORE…
 2 Create a Visual Hierarchy

2.1 Design with a grid

 960.gs
http://960.gs

blueprint CSS
http://www.blueprintcss.org/
http://flic.kr/p/6pRW4M
3 Use Good Typography
Hamburgefonstiv
Hamburgefonstiv
Hamburgefonstiv
 — the art and science of —
presenting textual information
Web Design is 95% Typography
http://informationarchitects.jp/the-web-is-all-about-typography-period/
 http://www.flickr.com/photos/nicksherman/3770659985

Gutenberg: 1436
574 years of tradition and best-practices.
The clothes in which
you dress your words.
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Nam liber tempor cum
soluta nobis eleifend option congue nihil
imperdiet doming id quod mazim placerat
facer possim assum. Typi non habent
claritatem insitam; est usus legentis in iis qui
facit eorum claritatem. Investigationes
demonstraverunt lectores legere me lius quod
ii legunt saepius.
Set “Solid”
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Nam liber tempor cum
soluta nobis eleifend option congue nihil
imperdiet doming id quod mazim placerat
facer possim assum.
1.3em
 L E
RUof
M B
U
TH

Line height of 1.3-2.0 ems

1 em

Lorem ipsum dolor sit M et, consectetuer

1.5 em adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut

Dear nitpickers: yes, it’s not exactly to scale.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue
nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis
in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est
etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica,
quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta
decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi.
 L E
RUof
M B
U
TH

Column width: 2 alphabets

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

Lorem ipsum dolor sit amet, consectetuer adipiscing elit,

sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Nam liber tempor cum soluta nobis eleifend option
congue nihil imperdiet doming id quod mazim placerat facer
possim assum. Typi non habent claritatem insitam; est usus
legentis in iis qui facit eorum claritatem. Investigationes
demonstraverunt lectores legere me lius quod ii legunt
saepius.
12pt
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Nam liber tempor cum
soluta nobis eleifend option congue nihil
imperdiet doming id quod mazim placerat
facer possim assum.
16pt/1.3em
http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/
 L E
RUof
M B
U
TH

Body text: 16px

16px = 100% in most browsers

http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/
OMG PONIES BLOG
Dolphins Are Just Gay Sharks
Jan 28th 2010 • 7:45 PM
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
Tagged fake, news
 http://www.flickr.com/photos/42386632@N00/2503398067

My eyes, ze goggles do NOTHING!

 L E
RUof
M B
U
TH

2-3 typefaces, maximum

A good guide:
Sans-serif (ex. Helvetica) for titles
Serif (ex. Georgia) for body text
typographyforlawyers.com
webtypography.net

Read and obey.

The web type revolution

Photo by Dunechaser - http://flic.kr/p/51Vuyf

Proudly supporting web fonts since

10 4 3.1 4 3.5
(EOT ONLY)
 HOSTED DIY

TypeKit FontSquirrel
@font-face generator
 HOSTED DIY

TypeKit FontSquirrel
NE
W also Google! @font-face generator
Better than previous solutions
flash, canvas
Support is still in flux
EOT, OTF, WOFF, SVG

Mobile is still iffy.

4 Color
 tl;dr:
color theory is hard
colourlovers.com
kuler.adobe.com
A lot like music
math
 l10n issues
colors have different meanings
Monochromatic
Analogous
Complementary
Split Complementary
Tetrad
5 Steal and Learn
“25 Fresh Designs” Sites
Smashing Magazine
Web Design Ledger
 Designing for the Web
highly, highly recommended!
(now free online)

http://designingfortheweb.co.uk/book/index.php
Rules are meant to be broken.
Haben sie questions?
Thank you!
Idan Gazit

@idangazit
idan@pixane.com