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

72635a06781143410d1ef4a25bf164ae?s=128

Mattijs Bliek

March 22, 2016
Tweet

Transcript

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

  2. None
  3. We zijn een creative agency

  4. We werken voor zinnige zaken

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. Waar ga ik het vandaag over hebben?

  16. 1. The Front-end Designer

  17. Dit:

  18. None
  19. IS GEEN

  20. IS GEEN FUCKING

  21. IS GEEN FUCKING UX DESIGN

  22. IS GEEN FUCKING UX DESIGN !

  23. “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
  24. None
  25. Pushing the wrong pixels

  26. Subscribe! Sign up me@gmail.com

  27. Subscribe! Sign up me@gmail.com

  28. Subscribe! Sign up mattijs@grrr.nl

  29. Thanks for signing up! here’s a gif of a pony

    while we get your things in order
  30. Your account is ready Our pony is sending you there

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

    now Here be fucking magic
  32. Maar hoe kom je daar?

  33. Enter: The Front-end Designer

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

  35. 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/
  36. 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/
  37. 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/
  38. 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/
  39. Front-end design wordt steeds belangrijker

  40. strategy content design development

  41. design development strategy content design development strategy content design development

    strategy content
  42. 2. Development als UX

  43. UX is niet alleen voor designers

  44. Slechte code leidt tot slechte UX

  45. None
  46. None
  47. None
  48. Slechte front-end code = Slechte UX voor de user

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

  50. De meeste projecten die je nu maakt, gaan de kast

    in nadat je je cijfer hebt gehad
  51. Maintainability

  52. The Unix philosophy

  53. “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
  54. None
  55. None
  56. This is software designed according to the Unix philosophy

  57. None
  58. 3. Performance is een feature

  59. It’s a mobile world

  60. None
  61. Mobiele connecties zijn traag

  62. None
  63. Maar pagina’s worden steeds zwaarder

  64. None
  65. None
  66. None
  67. None
  68. None
  69. Ik bedoel dus niet: ‘Mijn pagina is minder dan 1

    MB’.
  70. Ik bedoel: ‘Mijn pagina rendert in 2 seconden via een

    3G verbinding’
  71. Critical path & render blocking

  72. Libraries, plugins & bullshit

  73. HTTP Requests

  74. GZIP / Minification

  75. Caching / Invalidation

  76. Volg deze mensen: Scott Jehl (Filament Group) Ilya Grigorik (Google)

    Jake Archibald (Google) Paul Lewis (Google) Addy Osmani (Google) Lara Hogan (Etsy)
  77. 4. jQuery !== JavaScript

  78. Leer vanilla JavaScript te schrijven

  79. None
  80. None
  81. None
  82. None
  83. None
  84. None
  85. Leer native mogelijkheden te gebruiken

  86. None
  87. None
  88. None
  89. Bonus: leer ES2015

  90. None
  91. None
  92. None
  93. 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
  94. 5. Your editor is your friend

  95. Installeer een degelijke editor

  96. Sublime Text Atom Vim Emacs

  97. Keyboard shortcuts

  98. None
  99. Text snippets

  100. None
  101. Linters

  102. None
  103. Creëer je eigen config Git integratie Themes Indentation settings Custom

    keyboard shortcuts Snippets
  104. 6. CLI

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

    alles regelt
  106. Zodra je in een werkomgeving komt, is basic kennis een

    vereiste
  107. Commando’s als ls, mkdir, cd, grep, helpen je sneller te

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

  109. Of open source projecten

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

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

  112. None
  113. 7. Lezen Lezen Lezen Lezen

  114. Je gaat van het lezen van blogposts, boeken, en artikelen

    meer leren dan van welke leraar dan ook. (sorry Koop)
  115. Volg mensen op Twitter. Kijk wie werk maakt wat je

    inspireert.
  116. Newsletters PonyFoo All The Small Things WDRL Responsive Design Weekly

    Twitter twitter.com/mattijsbliek/following Various Hacker News Designer News Echo JS
  117. Bonus

  118. * Fuck Wordpress

  119. 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 mattijs@grrr.nl @mattijsbliek