design for developers
DESCRIPTION
Design for Developers, as presented at Northern Virginia Code Camp 2012TRANSCRIPT
Design for Developers
Ed BuhainOctober 27, 2012
Things You Need To Know If Your Users Are
Human
• Think of something you think is poorly
designed.
• Share with your group.
You’re Surrounded!
• Pick a group representative.
• Share with the whole room.
We’re Surrounded!
Design for Developers
Ed BuhainOctober 27, 2012
Things You Need To Know If Your Users Are
Human
Perception is biased by
experience.
Perception is biased by
experience.
• Polish silverware.
Perception is biased by context.
Perception is biased by goals.
Perception is biased by goals.
Perception is biased by goals.
Perception is biased by goals.
• Avoid ambiguity.
• Be consistent.
• Understand the goals.
Human Perception: Implications
Proximity
Proximity
Similarity
Common Fate
Continuity
Closure
Symmetry
Figure & Ground
Figure & Ground
• 8775553948
• 5112345112345114
Present Structured Data
• (877) 555-3948
• 5112 3451 1234 5114
Present Structured Data
• You are confirmed on United Airlines flight
2049, departing from Washington-Dulles
Airport at 10:00 a.m. on Saturday, October
27, 2012 and arriving at Seattle-Tacoma
International Airport at 3:00 p.m.
Present Structured Data
United Flight 2049Washington-Dulles to Seattle-
Tacoma
Departs: Sat 10/27 10:00
AM
Arrives: Sat 10/27 3:00 PM
• LOREM IPSUM DOLOR SIT AMET,
CONSECTETUR ADIPISCING ELIT. DUIS
NON NISI SED METUS INTERDUM
LUCTUS. PROIN SCELERISQUE ORCI EU
DIAM PLACERAT EUISMOD. CRAS IN
NUNC MOLLIS LECTUS BLANDIT
SAGITTIS. ALIQUAM ERAT VOLUTPAT.
MAURIS SAPIEN TORTOR,
ULLAMCORPER VITAE CONGUE UT,
EUISMOD IN LECTUS.• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non nisi sed metus interdum luctus. Proin scelerisque orci eu diam placerat euismod. Cras in
nunc mollis lectus blandit sagittis. Aliquam erat volutpat. Mauris sapien tortor, ullamcorper vitae congue ut, euismod in lectus.
Present Readable Data
• Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis non nisi sed metus
interdum luctus. Proin scelerisque orci eu
diam placerat euismod. Cras in nunc mollis
lectus blandit sagittis. Aliquam erat volutpat.
Mauris sapien tortor, ullamcorper vitae
congue ut, euismod in lectus.
Present Readable Data
Focus On Relevant Information
Focus On Relevant Information
• Color Coding
• Terminology
• Fonts
• Pictograms
Airport Signage
• Modern Design
• International Typographic Style
• Motion Design
Windows 8
• Show pride in craftsmanship.
• Do more with less.
• Be fast and fluid.
• Be authentically digital.
• Win as one.
Windows 8 Design Principles
Tiles
View States
App Bars
Charms
Message Dialogs
Flyouts
Context Menus
Toasts
App Page
App Page
App Page
App Page
Certification
Certification
• Do you have an app (or will you)?
• What effect does design have on your app?
• Which elements of Windows 8 will you use?
Walkabout