Design 101
A quick start guide for developers
everyone

● Why you need design skills
● Design principles

‘I am a programmer.
I am not a designer.’
This statement, meant to empathise with a target audience of developers, is exactly the myth that we
need to stop perpetuating. If you are a programmer, the work that you do contributes directly to the
experience that the people using your product will have. Whether you know it or not, you are a
designer. Whether you know it or not, the work you do affects the design of the site or application you
are building. If you are aware of this fact, you can make a conscious effort to affect the design in line
with the needs of your users. If you are not aware of it, you will still be impacting the design of the
product, however you will be doing so without realising it and without thinking about the people who
will ultimately be using your product.
extract: http://aralbalkan.com/notes/design-is-not-veneer/

Why does bad design happen to
good code?
● Released without designers seeing it.
● Devs look at things differently.
● Don’t get taught how to design.

What are you going to learn?
● Identify patterns within the applications and understand why they are used.
● Learn to critique design properly
○ Using science and visual psychological principles
○ Beyond just “opinions”
○ Separate Form from Function and critique both separately.
● Understand why consistency matters to users.
● Collaborate more effectively, and feedback with more considered views
● Produce higher quality UI
● Learn to notice, seek and remember

Why are we doing this?
● Spot flaws in the UI and fix them before they ship, or point them out in
code reviews.
● Champion good design within your team.Understand the difference
between extending the design standards rather than breaking them
● Know when NOT to innovate
● Change company culture to improve the user experience
● Devs outnumber designers so inevitable devs will do design

Design is...
● NOT a veneer
● NOT added later
● NOT magic fairy dust
● NOT colouring in
● NOT art.
“Design is not just what it looks like
and feels like. Design is how it works.”
- Steve Jobs

Design is...
● Problem solving
● Attention to detail
● Planning
● Decision making
● Evolved
● Integral
● Simplicity
“Design is not just what it looks like
and feels like. Design is how it works.”
- Steve Jobs

Design is...
… a skill you can learn

Design principles

Contrast
Repetition
Alignment
Proximity
Also hierarchy,dominance, ratios, pattern recognition, closure.

Contrast

Creates hierarchy,
balance, dynamics and
rhythm.

Contrast
If items are meant to be grouped, don’t just
make them similar make the identical.
If things aren’t meant to be grouped but look
similar - make them very different.

Green is more visible - has better contrast.
But red is more important!
Clash of the titans.

Repetition

We are always looking
for patterns
(even when there are
none)
Apophenia - finding patterns in meaningless data

The pattern becomes
what we see.
We overlook what isn’t in the
pattern.
Especially if there is a lot of
information to process.

Spot the difference
We have a very strong ability to see the
exception in a pattern if it differs in specific
ways.
Gestalt - the mind understands external stimuli as whole rather than the sum of their parts.

Shape Colour Size

Hue Space Line weight

Pattern interruption
○ Grabs the users attention
○ Causes confusion and panic
○ Prevents the user completing a task

Details matter

● Colours
● Spacing
● Shapes
● Line thickness
● Fonts
● Icons

● Colours - call to actions, primary buttons
● Spacing - break up information in forms
● Shapes - create patterns
● Line thickness - choose one
● Fonts - less is more
● Icons - no icon salad

Alignment

Grids
Grids in graphic design refers to a series of
intersecting horizontal and vertical lines that
are used to structure content on a page.
Their roots are in traditional typography for
typesetting books but they can be used for
placement of any graphic design element in
print, web or multimedia. Grids act as a
framework that a designer can use to
organize content in a rational manner.
Fibonacci - mathematical sequence which is used to create the golden ratio used in aesthetics

Alignment
● Reduces cognitive load
● Flow - lines for eye to follow
● The brain fills the gaps to create closure

Alignment
● Connect elements with each other
● Use the grid layout system
● Reduce the number of alignment points to a
bare minimum

ProximityWhitespace

Busy and loud
=
Bargain!

or a website from
the 90’s

Space = clarity and quality

Proximity
● Grouping and ungrouping
● Creates context and structure

Proximity
● Create smaller visual units
● Make it easier to complete small tasks
● Separate unrelated elements
● Don’t force users to hunt for related
elements

Example
Where’s Wally? the primary action?

Just
wrong!

Some things are just wrong!
Multiple layers of tabs...

Some things are just WRONG!
Centre alignment...

Some things are just WRONG!
Mystery meat

Some things are just WRONG!
Don’t scare people

Your turn.
“We got nukes, we got knives, we got sharp sticks.”

Contrast
Repetition
Alignment
Proximity

Want to know more?

Thanks
Questions?