Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Your hiring, made Workable design ^ UpNorth Conference 2012, Thessaloniki
Slide 2
Slide 2 text
Your hiring, made Workable design ^ UpNorth Conference 2012, Thessaloniki
Slide 3
Slide 3 text
Who am I?
Slide 4
Slide 4 text
Sugarenia (ʃʊgərɛnjɑ)
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
What are we talking about, again?
Slide 8
Slide 8 text
Designing for a start-up (in my case, Workable HR)
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
Workable helps companies manage their entire hiring process online. http://workablehr.com
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Nikos CEO
Slide 13
Slide 13 text
Nikos CEO Spyros CTO
Slide 14
Slide 14 text
Nikos CEO Spyros CTO Giannis Developer
Slide 15
Slide 15 text
Nikos CEO Spyros CTO Giannis Developer Zaharenia Designer
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
So, where do I start?
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Fear of the Blank Canvas
Slide 21
Slide 21 text
Don’t panic. Sugar’s tip #1
Slide 22
Slide 22 text
Solution #1: Research dribbble.com patterntap.com online galleries
Slide 23
Slide 23 text
Solution #2: Colours colourlovers.com design-seeds.com take a walk
Slide 24
Slide 24 text
HOW WORKABLE DID IT
Slide 25
Slide 25 text
When in doubt, wireframe
Slide 26
Slide 26 text
Don’t design anything before laying it all out. Sugar’s tip #2
Slide 27
Slide 27 text
HOW WORKABLE DID IT
Slide 28
Slide 28 text
Balsamiq Mockups http://www.balsamiq.com HOW WORKABLE DID IT
Slide 29
Slide 29 text
Photoshop or HTML?
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
HOW WORKABLE DID IT
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Photoshop loves you and you should too. Sugar’s tip #3
Slide 35
Slide 35 text
Design in Photoshop You can throw ideas around easily Pixel-perfect design takes ages
Slide 36
Slide 36 text
Design in browser What you code is (mostly) what you get Experimentation is limited, bloated code
Slide 37
Slide 37 text
HOW WORKABLE DID IT
Slide 38
Slide 38 text
HOW WORKABLE DID IT
Slide 39
Slide 39 text
HOW WORKABLE DOES IT
Slide 40
Slide 40 text
Tools of the trade
Slide 41
Slide 41 text
HOW WORKABLE DOES IT
Slide 42
Slide 42 text
HOW WORKABLE DOES IT InVision http://www.invisionapp.com
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
Hammer for Mac http://www.hammerformac.com
Slide 45
Slide 45 text
Let’s code!
Slide 46
Slide 46 text
Buzzwords ‘n’ stuff
Slide 47
Slide 47 text
Bootstrap
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
Think before you Bootstrap. Sugar’s tip #4
Slide 50
Slide 50 text
CSS preprocessors
Slide 51
Slide 51 text
You need to try preprocessors, you guys. Sugar’s tip #5
Slide 52
Slide 52 text
SASS or LESS?
Slide 53
Slide 53 text
SASS or LESS? Sugar’s tip #6
Slide 54
Slide 54 text
Why SASS? Compass If/else, for, while, each @extend
Slide 55
Slide 55 text
Decisions, decisions
Slide 56
Slide 56 text
Your HTML won’t be totally semantic, and that’s OK. Sugar’s tip #7
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
Beyond the beta
Slide 59
Slide 59 text
Consistency
Slide 60
Slide 60 text
HOW WORKABLE DOES IT
Slide 61
Slide 61 text
HOW WORKABLE DOES IT App Interface
Slide 62
Slide 62 text
Marketing Site HOW WORKABLE DOES IT
Slide 63
Slide 63 text
Marketing Site HOW WORKABLE DOES IT
Slide 64
Slide 64 text
HOW WORKABLE DOES IT
Slide 65
Slide 65 text
HOW WORKABLE DOES IT
Slide 66
Slide 66 text
HOW WORKABLE DOES IT
Slide 67
Slide 67 text
HOW WORKABLE DOES IT E-mails
Slide 68
Slide 68 text
Test early, test often
Slide 69
Slide 69 text
You only notice UX errors when you show people. Sugar’s tip #8
Slide 70
Slide 70 text
One more thing...
Slide 71
Slide 71 text
Love your work
Slide 72
Slide 72 text
If you have second thoughts, don’t do it. Sugar’s tip #9
Slide 73
Slide 73 text
Be proud of your work. Sugar’s tip #10
Slide 74
Slide 74 text
Thank you! You’re awesome. Zaharenia Atzitzikaki (@sugarenia) UI designer http://sugarenia.com • http://workablehr.com