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 Backups & Snapshots Counters Cloud/Cluster Management Tools
• • • •

• • • • • • • • • • • •

Distributed Log storage, analysis Graphing HTTP Caching Input/Output Filtering Memory Caching Non-relational Key Stores Rate Limiting Relational Storage Queues Rate Limiting Real-time messaging (XMPP) Search
• •

Instrumentation/Monitoring Failover Node addition/removal and hashing Auto-scaling for cloud resources

• • •

CSRF/XSS Protection Data Retention/Archival Deployment Tools
• • • • • • •

Multiple Devs, Staging, Prod Data model upgrades Rolling deployments Multiple versions (selective beta) Bucket Testing Rollbacks CDN Management

Ranging Geo

• •

Sharding Smart Caching

Dirty-table 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.

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.

Set “Solid”

1.3em

LE RUof B UM TH

Line height of 1.3-2.0 ems
1 em

Lorem ipsum dolor sit M et, consectetuer adipiscing 1.5 em 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.

LE RUof B UM 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
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.

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.

12pt

16pt/1.3em

http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/

LE RUof B UM 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!

LE RUof B UM 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
(EOT ONLY)

3.1

4

3.5

HOSTED

DIY

TypeKit

FontSquirrel
@font-face generator

HOSTED

DIY

TypeKit
NE W

FontSquirrel
@font-face generator

also Google!

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