Your design, made Workable

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?

1b8ad785acdd1ce1c99914b1c2a4e10e?s=128

Zaharenia Atzitzikaki

December 01, 2012
Tweet

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ɑ)

  5. None
  6. None
  7. What are we talking about, again?

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

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

  11. None
  12. Nikos CEO

  13. Nikos CEO Spyros CTO

  14. Nikos CEO Spyros CTO Giannis Developer

  15. Nikos CEO Spyros CTO Giannis Developer Zaharenia Designer

  16. None
  17. None
  18. So, where do I start?

  19. None
  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?

  30. None
  31. None
  32. HOW WORKABLE DID IT

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

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

  45. Let’s code!

  46. Buzzwords ‘n’ stuff

  47. Bootstrap

  48. None
  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
  57. None
  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