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
   

   View Slide

2. Your hiring, made Workable
   design
   ^
   UpNorth Conference 2012, Thessaloniki
   

   View Slide

3. Who am I?
   

   View Slide

4. Sugarenia
   (ʃʊgərɛnjɑ)
   

   View Slide

5. View Slide

6. View Slide

7. What are we talking
   about, again?
   

   View Slide

8. Designing for a start-up
   (in my case, Workable HR)
   

   View Slide

9. View Slide

10. Workable helps companies
    manage their entire hiring
    process online.
    http://workablehr.com
    

    View Slide

11. View Slide

12. Nikos
    CEO
    

    View Slide

13. Nikos
    CEO
    Spyros
    CTO
    

    View Slide

14. Nikos
    CEO
    Spyros
    CTO
    Giannis
    Developer
    

    View Slide

15. Nikos
    CEO
    Spyros
    CTO
    Giannis
    Developer
    Zaharenia
    Designer
    

    View Slide

16. View Slide

17. View Slide

18. So, where do I start?
    

    View Slide

19. View Slide

20. Fear of the Blank Canvas
    

    View Slide

21. Don’t panic.
    Sugar’s tip #1
    

    View Slide

22. Solution #1: Research
    dribbble.com
    patterntap.com
    online galleries
    

    View Slide

23. Solution #2: Colours
    colourlovers.com
    design-seeds.com
    take a walk
    

    View Slide

24. HOW WORKABLE DID IT
    

    View Slide

25. When in doubt, wireframe
    

    View Slide

26. Don’t design anything
    before laying it all out.
    Sugar’s tip #2
    

    View Slide

27. HOW WORKABLE DID IT
    

    View Slide

28. Balsamiq Mockups
    http://www.balsamiq.com
    HOW WORKABLE DID IT
    

    View Slide

29. Photoshop or HTML?
    

    View Slide

30. View Slide

31. View Slide

32. HOW WORKABLE DID IT
    

    View Slide

33. View Slide

34. Photoshop loves you and
    you should too.
    Sugar’s tip #3
    

    View Slide

35. Design in Photoshop
    You can throw ideas around easily
    Pixel-perfect design takes ages
    

    View Slide

36. Design in browser
    What you code is (mostly) what you get
    Experimentation is limited, bloated code
    

    View Slide

37. HOW WORKABLE DID IT
    

    View Slide

38. HOW WORKABLE DID IT
    

    View Slide

39. HOW WORKABLE DOES IT
    

    View Slide

40. Tools of the trade
    

    View Slide

41. HOW WORKABLE DOES IT
    

    View Slide

42. HOW WORKABLE DOES IT
    InVision
    http://www.invisionapp.com
    

    View Slide

43. View Slide

44. Hammer for Mac
    http://www.hammerformac.com
    

    View Slide

45. Let’s code!
    

    View Slide

46. Buzzwords ‘n’ stuff
    

    View Slide

47. Bootstrap
    

    View Slide

48. View Slide

49. Think before you Bootstrap.
    Sugar’s tip #4
    

    View Slide

50. CSS preprocessors
    

    View Slide

51. You need to try
    preprocessors, you guys.
    Sugar’s tip #5
    

    View Slide

52. SASS or LESS?
    

    View Slide

53. SASS or LESS?
    Sugar’s tip #6
    

    View Slide

54. Why SASS?
    Compass
    If/else, for, while, each
    @extend
    

    View Slide

55. Decisions, decisions
    

    View Slide

56. Your HTML won’t be totally
    semantic, and that’s OK.
    Sugar’s tip #7
    

    View Slide

57. View Slide

58. Beyond the beta
    

    View Slide

59. Consistency
    

    View Slide

60. HOW WORKABLE DOES IT
    

    View Slide

61. HOW WORKABLE DOES IT
    App Interface
    

    View Slide

62. Marketing Site
    HOW WORKABLE DOES IT
    

    View Slide

63. Marketing Site
    HOW WORKABLE DOES IT
    

    View Slide

64. HOW WORKABLE DOES IT
    

    View Slide

65. HOW WORKABLE DOES IT
    

    View Slide

66. HOW WORKABLE DOES IT
    

    View Slide

67. HOW WORKABLE DOES IT
    E-mails
    

    View Slide

68. Test early, test often
    

    View Slide

69. You only notice UX errors
    when you show people.
    Sugar’s tip #8
    

    View Slide

70. One more thing...
    

    View Slide

71. Love your work
    

    View Slide

72. If you have second
    thoughts, don’t do it.
    Sugar’s tip #9
    

    View Slide

73. Be proud of your work.
    Sugar’s tip #10
    

    View Slide

74. Thank you!
    You’re awesome.
    Zaharenia Atzitzikaki (@sugarenia)
    UI designer
    http://sugarenia.com • http://workablehr.com
    

    View Slide