A copy of a presentation I gave, with the confidential information removed.

1. Design 101
A quick start guide for developers
everyone

2. ● Why you need design skills
● Design principles

3. ‘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/

4. 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.

5. 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

6. 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

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

8. 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

9. Design is...
… a skill you can learn

10. Design principles

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

12. Contrast

13. Creates hierarchy,
balance, dynamics and
rhythm.

15. 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.

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

17. Repetition

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

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

21. 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.

22. Shape Colour Size

23. Hue Space Line weight

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

25. Details matter

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

27. ● 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

28. Alignment

29. 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

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

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

33. ProximityWhitespace

34. Busy and loud
=
Bargain!

35. or a website from
the 90’s

36. Space = clarity and quality

39. Proximity
● Grouping and ungrouping
● Creates context and structure

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

41. Example
Where’s Wally? the primary action?

42. Just
wrong!

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

44. Some things are just WRONG!
Centre alignment...

45. Some things are just WRONG!
Mystery meat

46. Some things are just WRONG!
Don’t scare people

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

49. Contrast
Repetition
Alignment
Proximity

50. Want to know more?

51. Thanks
Questions?