A flash talk I've given to a

1. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
GET STARTED
WITH UI DESIGN
ON THE RIGHT FOOT
A quick intro to design that doesn’t suck
1

2. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
WHO AM I?
Coder // Designer
Product Manager
Meetup Organizer
2

3. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
MEETUP ORGANIZER
1629 people
26 events
3 years
50+ applications reviewed
3

4. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
WHAT’S WRONG WITH
MOST UI DESIGNS?
1. Follow bad advice
2. Lack of visual hierarchy
4

5. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
BAD ADVICE
Not everybody is your friend on the internet...
5

6. “
”
LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
JAKOB NIELSEN // “USABILITY EXPERT”
HOW USERS READ
ON THE WEB?
THEY DON’T.
6

7. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
7

8. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
8

9. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
ISSUES WITH THE STUDY
1. Irrelevant topic
2. Bad recruiting criteria
3. Biased test material
4. Bad selection of goals
9

10. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
THE TRUTH ABOUT
READING, EVERYWHERE
poynter.org/extra/eyetrack
$120 well spent
10

11. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
11

12. “
”
LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
LUCA CANDELA // ADVOCATE OF LOST CAUSES
STOP SAYING DUMB
SHIT, PEOPLE READ
ON THE INTERNET.
12

13. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
VISUAL
HIERARCHY
Top to bottom, all the way and back again.
13

14. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
14

15. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
15

16. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
GRID ANATOMY
Please get naked now, I’m a designer...
16

17. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
Gutter
Baseline
Margin
17

18. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
Gutter
Baseline
Margin
Vertical
unit
Column
Module
Region
18

19. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
Example from
“Web Typography Sucks”
by Mark Boulton and
Richard Rutter
http://webtypography.net/sxsw2007/
19

20. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
RESOURCES
You have no excuses now. Use a grid.
20

21. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
http://dribbble.com/shots/865767-iPhone-5-Grid http://www.titanui.com/11176-ipad-retina-grid-psd/
21

22. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
http://blog.sfaranda.com/grid-generator-plugin-for-
photoshop/
http://guideguide.me/
22

23. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
http://hashgrid.com/ http://goldengridsystem.com/
23

24. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
http://www.subtraction.com/ http://markboulton.co.uk/
24

25. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
THERE IS
SO MUCH
MORE TO THIS...
...but I’m out of time.
25

26. LUCA CANDELA // FOLLOW ME @LUCKYMETHOD
THANK YOU
Now go design some cool shit.
26