Designers shouldn't code - The wrong answer to the right question
0 likes1,020 views
The document discusses how designers can start learning basic coding skills by doing design sign-offs directly in browsers using HTML and CSS. It suggests this approach will force designers to learn arguments, HTML, CSS, and possibly some JavaScript. Doing sign-offs this way shows clients the real browser experience and allows designers to take advantage of CSS features like responsive design. CSS frameworks and preprocessors can help but designers should learn real CSS first before using them.
Designers shouldn't code - The wrong answer to the right question
- 3. Designers Shouldn’t Code Hyper Island 27th of Nov 2013
- 7. But first a quick(-ish) answer to: Who is this guy?
- 9. Mathias Hellquist Creative Technology Director
- 10. Mathias Hellquist Freelance Creative Technology Director
- 11. ie d r ar ds M ki 2 Freelance Creative Technology Director Mathias Hellquist Background:
- 12. ie d r ar ds M ki 2 Freelance Creative Technology Director Mathias Hellquist Halo ge n Background:Active online (professionally) Pro since -93, working in several fer re o web agencies in Stockholm, Hamburg and Da a I-D Me d i London (where I lived 11 years, 1999-2010) Projecto r lk E Catwa do
- 13. ie d r ar ds M ki 2 Freelance Creative Technology Director Mathias Hellquist Halo ge n Background:Active online (professionally) Pro since -93, working in several fer re o web agencies in Stockholm, Hamburg and Da a I-D Me d i London (where I lived 11 years, 1999-2010) Projecto r lk E Catwa do In London I worked with solutions and strategy for clients like Apple, Microsoft, SonyEricsson, Unilever, Barclays, RBS etc. Mem ber o co m f pany boar d s than 30 project More r UK Public Secto for the
- 14. ie d r ar ds M ki 2 Freelance Creative Technology Director Mathias Hellquist Halo ge n Background:Active online (professionally) Pro since -93, working in several fer re o web agencies in Stockholm, Hamburg and Da a I-D Me d i London (where I lived 11 years, 1999-2010) Projecto r lk E Catwa do Ag e ncy Of The Year 4 ti mes os t m on l ve w Ha ona nati nter i s at d war a e onc ea s t l In London I worked with solutions and strategy for clients like Apple, Microsoft, SonyEricsson, Unilever, Barclays, RBS etc. Two of the projects I’ve worked on were judged Top10 Campaigns Of The Decade. Mem ber o co m f pany boar d s than 30 project More r UK Public Secto for the
- 15. ie d r ar ds M ki 2 Freelance Creative Technology Director Mathias Hellquist Halo ge n Background:Active online (professionally) Pro since -93, working in several fer re o web agencies in Stockholm, Hamburg and Da a I-D Me d i London (where I lived 11 years, 1999-2010) Projecto r lk E Catwa do Ag e ncy Of The Year 4 ti mes In London I worked with solutions and strategy for clients like Apple, Microsoft, SonyEricsson, Unilever, Barclays, RBS etc. Two of the projects I’ve worked on were judged Top10 Campaigns Of The Decade. os t m on l Those were for Mini Cooper and Axe/Lynx. e w Hav iona rnat Mem inte at ber o s ds r co m f than 30 project More awa pany e r onc boar t UK Public Secto d for the leas
- 16. Mathias Hellquist Freelance Creative Technology Director Background:
- 17. Mathias Hellquist Freelance Creative Technology Director Background:
- 18. Mathias Hellquist Freelance Creative Technology Director Background: Back in Sweden I worked for Tieto 3 years and later for Society46
- 19. Mathias Hellquist Freelance Creative Technology Director Background: Back in Sweden I worked for Tieto 3 years and later for Society46 At Tieto I was running a department called Service Design & User Experience Clients like SVT, Entercard, Fortum etc
- 20. Mathias Hellquist Freelance Creative Technology Director Background: Back in Sweden I worked for Tieto 3 years and later for Society46 At Tieto I was running a department called Service Design & User Experience Clients like SVT, Entercard, Fortum etc At Society46 we worked with clients like Duracell, Red Bull and Pepsi
- 21. Mathias Hellquist Freelance Creative Technology Director Background: Back in Sweden I worked for Tieto 3 years and later for Society46 At Tieto I was running a department called Service Design & User Experience Clients like SVT, Entercard, Fortum etc At Society46 we worked with clients like Duracell, Red Bull and Pepsi Loves:
- 22. Mathias Hellquist Freelance Creative Technology Director Dr aw in g Background: Back in Sweden I worked for Tieto 3 years and later for Society46 on s w M At Tieto I was running a department S Ha kcalled Service Design & User Experience oc R Clients like SVT, Entercard, Fortum etc Deat h Me tal At Society46 we worked with clients like Duracell, Red Bull and Pepsi rs ita u Loves: Technology, amazing end user experiences, G Social Media (used right), Accessibility, Photog rap hy API’s, Open Source and visionary thinking. My family Fo o d G am ng i RP G ’s
- 27. Excuse me! Define “Code” please…
- 30. How to eat an elephant
- 31. How to eat an elephant one bite at the time
- 32. How to eat an elephant one bite at the time
- 33. How to eat an elephant one bite at the time No one knows ALL that stuff!
- 34. How to eat an elephant one bite at the time No one knows ALL that stuff! Start with what is close to you
- 35. How to eat an elephant one bite at the time No one knows ALL that stuff! Start with what is close to you Having an understanding of and knowing it isn’t the same thing
- 36. How to eat an elephant one bite at the time No one knows ALL that stuff! Start with what is close to you Having an understanding of and knowing it isn’t the same thing Remember:
- 37. How to eat an elephant one bite at the time No one knows ALL that stuff! Start with what is close to you Having an understanding of and knowing it isn’t the same thing Remember: “Good Design” is soft and subjective
- 38. How to eat an elephant one bite at the time No one knows ALL that stuff! Start with what is close to you Having an understanding of and knowing it isn’t the same thing Remember: “Good Design” is soft and subjective Code is hard and binary
- 39. How to eat an elephant one bite at the time No one knows ALL that stuff! Start with what is close to you Having an understanding of and knowing it isn’t the same thing Remember: “Good Design” is soft and subjective Code is hard and binary You CAN design with code!
- 40. How to eat an elephant one bite at the time
- 41. How to eat an elephant one bite at the time
- 42. How to eat an elephant one bite at the time Suggested Goal:
- 43. How to eat an elephant one bite at the time Suggested Goal: Do the design sign-offs with your clients in a browser
- 44. How to eat an elephant one bite at the time Suggested Goal: Do the design sign-offs with your clients in a browser This should mean it probably looks different in the different browsers on the different platforms…
- 45. How to eat an elephant one bite at the time Suggested Goal: Do the design sign-offs with your clients in a browser This should mean it probably looks different in the different browsers on the different platforms… …but as that fact is the reality already today, it should be fine.
- 46. How to eat an elephant one bite at the time Suggested Goal: Do the design sign-offs with your clients in a browser This should mean it probably looks different in the different browsers on the different platforms… …but as that fact is the reality already today, it should be fine. Only now it will be sold in right!
- 47. How to eat an elephant one bite at the time Suggested Goal: Do the design sign-offs with your clients in a browser
- 48. How to eat an elephant one bite at the time Suggested Goal: Do the design sign-offs with your clients in a browser
- 49. How to eat an elephant one bite at the time Suggested Goal: Do the design sign-offs with your clients in a browser It will force you to learn:
- 50. How to eat an elephant one bite at the time Suggested Goal: Do the design sign-offs with your clients in a browser It will force you to learn: ents rgum les a Sa
- 51. How to eat an elephant one bite at the time Suggested Goal: Do the design sign-offs with your clients in a browser It will force you to learn: ents rgum les a Sa HTML
- 52. How to eat an elephant one bite at the time Suggested Goal: Do the design sign-offs with your clients in a browser It will force you to learn: ents rgum les a Sa HTML CS S
- 53. How to eat an elephant one bite at the time Suggested Goal: Do the design sign-offs with your clients in a browser It will force you to learn: ents HTML rgum CS S es a Sal Possibly even a little JavaScript!
- 54. How to eat an elephant one bite at the time Suggested Goal: Do the design sign-offs with your clients in a browser It will force you to learn: ents HTML rgum CS S es a Sal Possibly even a little JavaScript! The main thing we are after is CSS …and HTML
- 56. Benefits with HTML/CSS sign-off
- 57. Benefits with HTML/CSS sign-off “Graphic design tools are bringing a knife to a gun fight” - Andy Clarke
- 58. Benefits with HTML/CSS sign-off “Graphic design tools are bringing a knife to a gun fight” - Andy Clarke Percentage-based layouts Media Queries Native form element styling Font rendering (and web fonts) Flexible leading and measure Browsers CSS capabilities Pseudo-classes CSS3 ligatures and swashes CSS3 animations CSS3 transitions
- 59. Benefits with HTML/CSS sign-off “Graphic design tools are bringing a knife to a gun fight” - Andy Clarke Photos Percentage-based layouts hop where Media Queries the live w Native form element styling hen Font rendering (and web fonts) Flexible leading and measure Browsers CSS capabilities Pseudo-classes CSS3 ligatures and swashes CSS3 animations CSS3 transitions probab ly isn’t pro du ct w il l yo u go live
- 60. Benefits with HTML/CSS sign-off “Graphic design tools are bringing a knife to a gun fight” - Andy Clarke Photos Percentage-based layouts hop where Media Queries the live w Native form element styling hen probab ly isn’t pro du ct w il l yo u go live Font rendering (and web fonts) Flexible leading and measure drive Browsers CSS capabilities o tes t ing. ant t e buy o u w efor Y Pseudo-classes car b a CSS3 ligatures and swashes thes r y clo ally t uying CSS3 animations usu Yo u ore b n bef CSS3 transitions o
- 62. CSS Zen Garden
- 63. CSS Zen Garden
- 64. CSS Zen Garden
- 65. CSS Zen Garden
- 66. CSS Zen Garden
- 67. CSS Zen Garden
- 68. CSS Zen Garden
- 70. CSS + jQuery Plug-ins
- 71. CSS + jQuery Plug-ins
- 72. CSS + jQuery Plug-ins
- 73. CSS + jQuery Plug-ins
- 74. CSS + jQuery Plug-ins
- 75. CSS + jQuery Plug-ins
- 77. Trent Walton Using It All
- 78. Trent Walton Using It All
- 79. Trent Walton Using It All
- 80. Trent Walton Using It All
- 81. Trent Walton Using It All
- 82. Trent Walton Using It All
- 83. Trent Walton Using It All
- 84. Trent Walton Using It All
- 85. Trent Walton Using It All
- 87. CSS Frameworks
- 88. CSS Frameworks Go ahead, use them (carefully)
- 89. CSS Frameworks Go ahead, use them (carefully) Bootstrap Foundation PureCSS
- 90. CSS Frameworks Go ahead, use them (carefully) Bootstrap LESS Foundation PureCSS
- 91. CSS Frameworks Go ahead, use them (carefully) Bootstrap LESS Foundation SASS PureCSS
- 92. CSS Frameworks Go ahead, use them (carefully) Bootstrap LESS Foundation SASS PureCSS SMACSS
- 93. CSS Frameworks Go ahead, use them (carefully) Bootstrap LESS Foundation SASS CSS Pre-Processors PureCSS SMACSS
- 94. CSS Frameworks Go ahead, use them (carefully) Bootstrap LESS Foundation SASS PureCSS SMACSS CSS Pre-Processors Basically CSS but handles variables
- 95. CSS Frameworks Go ahead, use them (carefully) Bootstrap LESS Foundation SASS PureCSS SMACSS CSS Pre-Processors Basically CSS but handles variables You should learn “real” CSS first
- 96. CSS Frameworks Go ahead, use them (carefully) Bootstrap LESS Foundation SASS PureCSS SMACSS CSS Pre-Processors Basically CSS but handles variables You should learn “real” CSS first JavaScript & jQuery
- 97. CSS Frameworks Go ahead, use them (carefully) Bootstrap LESS Foundation SASS PureCSS SMACSS CSS Pre-Processors Basically CSS but handles variables You should learn “real” CSS first JavaScript & jQuery jQuery is awesome. Include it.
- 98. CSS Frameworks Go ahead, use them (carefully) Bootstrap LESS Foundation SASS PureCSS SMACSS CSS Pre-Processors Basically CSS but handles variables You should learn “real” CSS first JavaScript & jQuery jQuery is awesome. Include it. To use it fully you need to learn more JavaScript
- 100. More Good links
- 101. More Good links CSS Zen Garden 1 HTML file, 100’s of CSS designs
- 102. More Good links CSS Zen Garden 1 HTML file, 100’s of CSS designs GistBox Save your code snippets centrally
- 103. More Good links CSS Zen Garden 1 HTML file, 100’s of CSS designs GistBox Save your code snippets centrally CloudCannon Dropbox based CMS (no database)
- 104. More Good links CSS Zen Garden 1 HTML file, 100’s of CSS designs GistBox Save your code snippets centrally CloudCannon Dropbox based CMS (no database) Kirby Excellent PHP based CMS (no database)
- 105. More Good links CSS Zen Garden 1 HTML file, 100’s of CSS designs GistBox Save your code snippets centrally CloudCannon Dropbox based CMS (no database) Kirby Excellent PHP based CMS (no database) Hammer for Mac Link HTML pages together as in a CMS (no database)
- 106. More Good links CSS Zen Garden 1 HTML file, 100’s of CSS designs GistBox Save your code snippets centrally CloudCannon Dropbox based CMS (no database) Kirby Excellent PHP based CMS (no database) Hammer for Mac Link HTML pages together as in a CMS (no database) YQL For the adventurous - anything on Internet as a database
- 107. More Good links CSS Zen Garden 1 HTML file, 100’s of CSS designs GistBox Save your code snippets centrally CloudCannon Dropbox based CMS (no database) Kirby Excellent PHP based CMS (no database) Hammer for Mac Link HTML pages together as in a CMS (no database) YQL For the adventurous - anything on Internet as a database BugHerd Visual bug tracking (for your browser based creation)
- 108. More Good links CSS Zen Garden 1 HTML file, 100’s of CSS designs GistBox Save your code snippets centrally CloudCannon Dropbox based CMS (no database) Kirby Excellent PHP based CMS (no database) Hammer for Mac Link HTML pages together as in a CMS (no database) YQL For the adventurous - anything on Internet as a database BugHerd Visual bug tracking (for your browser based creation) Marvel Create prototypes from PSD’s via DropBox
- 110. More Good links
- 111. Fittext More Good links jQuery plug-in - Excellent for headlines
- 112. Fittext More Good links jQuery plug-in - Excellent for headlines BigText jQuery plug-in - Excellent for headlines
- 113. Fittext More Good links jQuery plug-in - Excellent for headlines BigText jQuery plug-in - Excellent for headlines Lettering jQuery plug-in - Excellent for radical typography
- 114. Fittext More Good links jQuery plug-in - Excellent for headlines BigText jQuery plug-in - Excellent for headlines Lettering jQuery plug-in - Excellent for radical typography KernJs Bookmarklet - Plug-in to Lettering (above)
- 115. Fittext More Good links jQuery plug-in - Excellent for headlines BigText jQuery plug-in - Excellent for headlines Lettering jQuery plug-in - Excellent for radical typography KernJs Bookmarklet - Plug-in to Lettering (above) Responsive IMG jQuery plug-in (needs PHP) - for resizing images
- 116. Fittext More Good links jQuery plug-in - Excellent for headlines BigText jQuery plug-in - Excellent for headlines Lettering jQuery plug-in - Excellent for radical typography KernJs Bookmarklet - Plug-in to Lettering (above) Responsive IMG jQuery plug-in (needs PHP) - for resizing images HTML5 Dictionary of all HTML5 elements and how to use them
- 117. Fittext More Good links jQuery plug-in - Excellent for headlines BigText jQuery plug-in - Excellent for headlines Lettering jQuery plug-in - Excellent for radical typography KernJs Bookmarklet - Plug-in to Lettering (above) Responsive IMG jQuery plug-in (needs PHP) - for resizing images HTML5 Dictionary of all HTML5 elements and how to use them Strut Make HTML5/CSS3 Prezi like presentations
- 118. Fittext More Good links jQuery plug-in - Excellent for headlines BigText jQuery plug-in - Excellent for headlines Lettering jQuery plug-in - Excellent for radical typography KernJs Bookmarklet - Plug-in to Lettering (above) Responsive IMG jQuery plug-in (needs PHP) - for resizing images HTML5 Dictionary of all HTML5 elements and how to use them Strut Make HTML5/CSS3 Prezi like presentations Trent Waltons blog Clever use of Lettering, Fittext and CSS. Good read too.
- 120. …but wait, there is more!
- 121. …but wait, there is more! A List Apart THE online magazine for web design/development
- 122. …but wait, there is more! A List Apart THE online magazine for web design/development Zeldman The man, the myth, the legend, the concept. ALA founder.
- 123. …but wait, there is more! A List Apart THE online magazine for web design/development Zeldman The man, the myth, the legend, the concept. ALA founder. Sidebar 5 daily links of excellence for designers/developers
- 124. …but wait, there is more! A List Apart THE online magazine for web design/development Zeldman The man, the myth, the legend, the concept. ALA founder. Sidebar 5 daily links of excellence for designers/developers CSS Mac Plus How-to on building a Mac Plus in CSS
- 126. Thank you!
- 127. Mathias Hellquist Freelance Creative Technology Director Email: mathias@imakethingswork.com Twitter: @hellquist About me: http:/ /about.me/hellquist
- 128. Mathias Hellquist Freelance Creative Technology Director Email: mathias@imakethingswork.com Twitter: @hellquist About me: http:/ /about.me/hellquist Final Thought I have yet to meet someone who became less good at what they do from gaining more knowledge. ! The opposite I have seen many times though. Try learning (at least) one new thing every day.