Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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?

Zaharenia Atzitzikaki

December 01, 2012
Tweet

More Decks by Zaharenia Atzitzikaki

Other Decks in Design

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. What are we talking
    about, again?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Nikos
    CEO
    Spyros
    CTO

    View full-size slide

  8. Nikos
    CEO
    Spyros
    CTO
    Giannis
    Developer

    View full-size slide

  9. Nikos
    CEO
    Spyros
    CTO
    Giannis
    Developer
    Zaharenia
    Designer

    View full-size slide

  10. So, where do I start?

    View full-size slide

  11. Fear of the Blank Canvas

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. HOW WORKABLE DID IT

    View full-size slide

  16. When in doubt, wireframe

    View full-size slide

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

    View full-size slide

  18. HOW WORKABLE DID IT

    View full-size slide

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

    View full-size slide

  20. Photoshop or HTML?

    View full-size slide

  21. HOW WORKABLE DID IT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. HOW WORKABLE DID IT

    View full-size slide

  26. HOW WORKABLE DID IT

    View full-size slide

  27. HOW WORKABLE DOES IT

    View full-size slide

  28. Tools of the trade

    View full-size slide

  29. HOW WORKABLE DOES IT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. Let’s code!

    View full-size slide

  33. Buzzwords ‘n’ stuff

    View full-size slide

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

    View full-size slide

  35. CSS preprocessors

    View full-size slide

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

    View full-size slide

  37. SASS or LESS?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. Decisions, decisions

    View full-size slide

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

    View full-size slide

  42. Beyond the beta

    View full-size slide

  43. HOW WORKABLE DOES IT

    View full-size slide

  44. HOW WORKABLE DOES IT
    App Interface

    View full-size slide

  45. Marketing Site
    HOW WORKABLE DOES IT

    View full-size slide

  46. Marketing Site
    HOW WORKABLE DOES IT

    View full-size slide

  47. HOW WORKABLE DOES IT

    View full-size slide

  48. HOW WORKABLE DOES IT

    View full-size slide

  49. HOW WORKABLE DOES IT

    View full-size slide

  50. HOW WORKABLE DOES IT
    E-mails

    View full-size slide

  51. Test early, test often

    View full-size slide

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

    View full-size slide

  53. One more thing...

    View full-size slide

  54. Love your work

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide