Web Application Design & Development

Young OddBirds

Featured Clients

Art from Riding SideSaddle*

Dark Raspberry

anywhere between maroon and magenta…

Designing Software!



All the devices

The Web is User-Centered

the printing press is creator-centered





“The fact we can control a paper page is really a limitation of that medium.”

—John Allsopp, A Dao of Web Design (April 07, 2000)

Technology is only useful when it…

Solves Real Problems for Real Users

Start with Users

They know more about their needs than you do.

Most Abused Quote…

“If I had asked people what they wanted, they would have said faster horses.”

Henry Ford John McNeece (kinda)

Douglas Engelbart

1968: The Mother of All Demos

(the mouse, hypertext, view switching, networked computers, early GUI)


“The creation of tools for expert users”

Augmenting Human Intellect

"Providing the means for users to create better tools."

Steve Jobs

1976: Apple I

Identical, Easy-to-Use, Low-Cost appliance

Invisible” closed interfaces (the "just work")

What Are the Tradeoffs?

User Expertise:

  1. End Goals

  2. Existing Solutions

  3. Points of Failure

User Blind Spots:

  1. Interface Design

Ask about Problems, not Solutions

works with art feedback as well…

When the Problem is in Act V

The Solution is Often in Act I

Always Ask Why

look for the root causes…

Analyze Patterns

common pain-points, related issues, etc…

Present Context & Tradeoffs

establish yourself as a teammate

Only Show Good Options

mind games always backfire

Recognize Personal Bias

Dark Raspberry

anywhere between maroon and magenta…

Less Theory, More Practice

Less Mockups, More Code

Quarq Race Intelligence

How Does it Move & Adapt?

Responsive Design

Design & Code are Inseparable


QN Activity sketch

QN list sketch

QN map sketch


Early QN

Friends sketches

Ugly Helps Communicate

Interactive Mockups



Iterate on Features/Epics

sketch » wireframe » html markup » backend logic » design

Test, Test, Test

Tight Feedback Loop

Document Systems

and use shorthand

Color preview screenshot with three colors and their values

Herman Ratios

Herman Text Sizes

Preview of size patterns

Herman Icons


Website like Legos
Put your helmet on


When In Doubt, Test