Your design, made Workable

Workflows, best practices and assorted advice for designing in a start-up. How difficult is to keep a UI consistent after countless iterations?

Transcript

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