How to Get References

If all your references are other interfaces, your work drifts toward the average of everything on Dribbble. The work that feels like it came from somewhere usually pulls from outside the discipline.

Shu Ding keeps a list of the best things he has found. It has Kurosawa, Pink Floyd, Borges and Feynman on it, and almost no software.

Collect references from outside your field, and borrow how they work, not how they look.

Where to look

Film. Editors were guiding the eye through a change long before screens had transitions. Rauno Freiberg's essay on designing depth starts with film composition and ends at the backdrop behind an overlay, which he blurs the way a lens would.

• Water LiliesClaude Monet, 1906
• The Japanese FootbridgeClaude Monet, 1899
• HaystacksClaude Monet, 1890

Delete collection?

The three paintings inside will stay in your library.

CancelDelete

Open dialog

FlatDepth

FlatDepth

Flat only dims. Depth pushes the page back and softens it, so the dialog sits in front the way a face sits in front of a blurred street. Nothing about that is native to screens. It was borrowed.

Print. Grids, rhythm and restraint were worked out on paper. Vercel says its Geist typeface draws on the Swiss design movement.

Music. Easing is phrasing. Stagger is rhythm. The copy sound on this site is a rising C-E-G-C arpeggio, because music already knew what "done" sounds like.

Physical things. Pick up a well-made tool and notice how it stops moving.

Translate, don't transplant

Copy what a reference looks like and you get a costume. Copy what it does and you get a mechanism.

Lists on the iPhone don't look like rubber. They behave like it: pull past the end and the list gives way less and less the further you go, then snaps back. Drag both lists down.

Hard stop

• Inbox12
• Drafts3
• Sent
• Archive

Drag the list down

Rubber band

• Inbox12
• Drafts3
• Sent
• Archive

Drag the list down

The hard stop ignores you. The rubber band answers: you were heard, and there is nothing more here.

Paco Coursey argues that anything new in design is old work reworked in new ways. That is fine, as long as what you rework is the mechanism and not the pixels.

Make it a practice

Capture them. A folder, an Are.na channel, a camera roll of door handles and ticket stubs.

Name what each one does. Write one line on how it directs attention, how it builds tension, or what it leaves out. If you can explain what a reference taught you without showing it to anyone, it was a good one.