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

A Front-end Designer's Guide to the Galaxy

A Front-end Designer's Guide to the Galaxy

Dutch only, sorry :)

My talk for the Webdev minor of CMD Amsterdam

Mattijs Bliek

March 22, 2016
Tweet

More Decks by Mattijs Bliek

Other Decks in Education

Transcript

  1. A Front-end Designer’s
    Guide to the Galaxy
    Mattijs Bliek

    View full-size slide

  2. We zijn een
    creative agency

    View full-size slide

  3. We werken voor zinnige zaken

    View full-size slide

  4. Waar ga ik het vandaag
    over hebben?

    View full-size slide

  5. 1.
    The Front-end
    Designer

    View full-size slide

  6. IS GEEN
    FUCKING

    View full-size slide

  7. IS GEEN
    FUCKING
    UX DESIGN

    View full-size slide

  8. IS GEEN
    FUCKING
    UX DESIGN
    !

    View full-size slide

  9. “User experience design is
    [about] improving the usability,
    accessibility, and pleasure
    provided in the interaction
    between the user and the
    product.”
    https://en.wikipedia.org/wiki/User_experience_design

    View full-size slide

  10. Pushing the wrong pixels

    View full-size slide

  11. Thanks for signing up!
    here’s a gif of a pony
    while we get your things in order

    View full-size slide

  12. Your account is ready
    Our pony is sending you there now

    View full-size slide

  13. Your account is ready
    Our pony is sending you there now
    Here be fucking magic

    View full-size slide

  14. Maar hoe kom je daar?

    View full-size slide

  15. Enter:
    The Front-end Designer

    View full-size slide

  16. http://bradfrost.com/blog/post/frontend-design/

    View full-size slide

  17. They understand UX principles
    and best practices, but may
    not spend their time
    conducting research, creating
    flows, and planning scenarios
    http://bradfrost.com/blog/post/frontend-design/

    View full-size slide

  18. They have a keen eye for aesthetics,
    but may not spend their time
    pouring over font pairings,
    comparing color palettes, or
    creating illustrations and icons.
    http://bradfrost.com/blog/post/frontend-design/

    View full-size slide

  19. They can write JavaScript, but
    may not spend their time writing
    application-level code, wiring up
    middleware, or debugging.
    http://bradfrost.com/blog/post/frontend-design/

    View full-size slide

  20. They understand the importance
    of backend development, but may
    not spend their time writing
    backend logic, spinning up
    servers, load testing, etc.
    http://bradfrost.com/blog/post/frontend-design/

    View full-size slide

  21. Front-end design wordt
    steeds belangrijker

    View full-size slide

  22. strategy
    content
    design
    development

    View full-size slide

  23. design development
    strategy content
    design development
    strategy content
    design development
    strategy content

    View full-size slide

  24. 2.
    Development
    als UX

    View full-size slide

  25. UX is niet alleen voor
    designers

    View full-size slide

  26. Slechte code leidt tot
    slechte UX

    View full-size slide

  27. Slechte front-end code
    =
    Slechte UX voor de user

    View full-size slide

  28. Maar slechte code leidt
    ook tot slechte UX voor
    developers

    View full-size slide

  29. De meeste projecten die
    je nu maakt, gaan de
    kast in nadat je je cijfer
    hebt gehad

    View full-size slide

  30. Maintainability

    View full-size slide

  31. The Unix philosophy

    View full-size slide

  32. “The Unix philosophy emphasizes building short,
    simple, clear, modular, and extensible code
    that can be easily maintained and repurposed by
    developers other than its creators.
    The Unix philosophy favors composability as
    opposed to monolithic design.”
    http://en.wikipedia.org/wiki/Unix_philosophy

    View full-size slide

  33. This is software
    designed according to
    the Unix philosophy

    View full-size slide

  34. 3.
    Performance
    is een feature

    View full-size slide

  35. It’s a mobile world

    View full-size slide

  36. Mobiele connecties
    zijn traag

    View full-size slide

  37. Maar pagina’s worden
    steeds zwaarder

    View full-size slide

  38. Ik bedoel dus niet:
    ‘Mijn pagina is minder
    dan 1 MB’.

    View full-size slide

  39. Ik bedoel:
    ‘Mijn pagina rendert in
    2 seconden via een 3G
    verbinding’

    View full-size slide

  40. Critical path &
    render blocking

    View full-size slide

  41. Libraries, plugins
    & bullshit

    View full-size slide

  42. HTTP Requests

    View full-size slide

  43. GZIP / Minification

    View full-size slide

  44. Caching / Invalidation

    View full-size slide

  45. Volg deze mensen:
    Scott Jehl (Filament Group)
    Ilya Grigorik (Google)
    Jake Archibald (Google)
    Paul Lewis (Google)
    Addy Osmani (Google)
    Lara Hogan (Etsy)

    View full-size slide

  46. 4.
    jQuery !== JavaScript

    View full-size slide

  47. Leer vanilla JavaScript
    te schrijven

    View full-size slide

  48. Leer native
    mogelijkheden te
    gebruiken

    View full-size slide

  49. Bonus: leer ES2015

    View full-size slide

  50. Lees deze boeken
    Eloquent Javascript - Marijn Haaverbeke
    JavaScript The Good Parts - Douglas Crockford
    You Don’t Know JS - Kyle Simpson
    Programming Javascript Applications - Eric Elliot
    Understanding ECMAScript 6 - Nicholas Zakas

    View full-size slide

  51. 5.
    Your editor is
    your friend

    View full-size slide

  52. Installeer een
    degelijke editor

    View full-size slide

  53. Sublime Text Atom Vim Emacs

    View full-size slide

  54. Keyboard shortcuts

    View full-size slide

  55. Text snippets

    View full-size slide

  56. Creëer je eigen config
    Git integratie
    Themes
    Indentation settings
    Custom keyboard shortcuts
    Snippets

    View full-size slide

  57. De CLI—aka command-
    line interface—is het
    controle-centrum van
    waaruit je alles regelt

    View full-size slide

  58. Zodra je in een
    werkomgeving komt, is
    basic kennis een vereiste

    View full-size slide

  59. Commando’s als ls,
    mkdir, cd, grep, helpen je
    sneller te ontwikkelen

    View full-size slide

  60. Met command-line
    kennis kun je meewerken
    aan dev projecten

    View full-size slide

  61. Of open source projecten

    View full-size slide

  62. Met command-line
    kennis hoef je minder
    handwerk te verrichten

    View full-size slide

  63. Met command-line
    kennis hoef je nooit meer
    de FTP’en

    View full-size slide

  64. 7.
    Lezen
    Lezen
    Lezen
    Lezen

    View full-size slide

  65. Je gaat van het lezen van
    blogposts, boeken, en
    artikelen meer leren dan
    van welke leraar dan ook.
    (sorry Koop)

    View full-size slide

  66. Volg mensen op Twitter.
    Kijk wie werk maakt wat je
    inspireert.

    View full-size slide

  67. Newsletters
    PonyFoo
    All The Small Things
    WDRL
    Responsive Design Weekly
    Twitter
    twitter.com/mattijsbliek/following
    Various
    Hacker News
    Designer News
    Echo JS

    View full-size slide

  68. *
    Fuck
    Wordpress

    View full-size slide

  69. Vragen?
    The Front-end Designer
    Development als UX
    Performance is een feature
    jQuery !== JavaScript
    Your editor is your friend
    CLI
    Lezen lezen lezen
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    Slides
    https://goo.gl/WHdTq9
    Contact details
    [email protected]
    @mattijsbliek

    View full-size slide