Mathias Hellquist, profile picture
Uploaded byMathias Hellquist
PDF, PPTX1,025 views

Designers shouldn't code - The wrong answer to the right question

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.

Design◦Technology◦Business◦
Related topics:
Front-End•

Embed presentation

Download as PDF, PPTX
1 / 128
2 / 128
3 / 128
4 / 128
5 / 128
6 / 128
7 / 128
8 / 128
9 / 128
10 / 128
11 / 128
12 / 128
13 / 128
14 / 128
15 / 128
16 / 128
17 / 128
18 / 128
19 / 128
20 / 128
21 / 128
22 / 128
23 / 128
24 / 128
25 / 128
26 / 128
27 / 128
28 / 128
29 / 128
30 / 128
31 / 128
32 / 128
33 / 128
34 / 128
35 / 128
36 / 128
37 / 128
38 / 128
39 / 128
40 / 128
41 / 128
42 / 128
43 / 128
44 / 128
45 / 128
46 / 128
47 / 128
48 / 128
49 / 128
50 / 128
51 / 128
52 / 128
53 / 128
54 / 128
55 / 128
56 / 128
57 / 128
58 / 128
59 / 128
60 / 128
61 / 128
62 / 128
63 / 128
64 / 128
65 / 128
66 / 128
67 / 128
68 / 128
69 / 128
70 / 128
71 / 128
72 / 128
73 / 128
74 / 128
75 / 128
76 / 128
77 / 128
78 / 128
79 / 128
80 / 128
81 / 128
82 / 128
83 / 128
84 / 128
85 / 128
86 / 128
87 / 128
88 / 128
89 / 128
90 / 128
91 / 128
92 / 128
93 / 128
94 / 128
95 / 128
96 / 128
97 / 128
98 / 128
99 / 128
100 / 128
101 / 128
102 / 128
103 / 128
104 / 128
105 / 128
106 / 128
107 / 128
108 / 128
109 / 128
110 / 128
111 / 128
112 / 128
113 / 128
114 / 128
115 / 128
116 / 128
117 / 128
118 / 128
119 / 128
120 / 128
121 / 128
122 / 128
123 / 128
124 / 128
125 / 128
126 / 128
127 / 128
128 / 128
Designers Shouldn’t Code
Designers Shouldn’t Code Hyper Island 27th of Nov 2013
But first a quick(-ish) answer to: Who is this guy?
Mathias Hellquist Creative Technology Director
Mathias Hellquist Freelance Creative Technology Director
ie d r ar ds M ki 2 Freelance Creative Technology Director Mathias Hellquist Background:
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
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
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
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
Mathias Hellquist Freelance Creative Technology Director Background:
Mathias Hellquist Freelance Creative Technology Director Background:
Mathias Hellquist Freelance Creative Technology Director Background: Back in Sweden I worked for Tieto 3 years and later for Society46
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
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
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:
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
Designers Shouldn’t Code
Excuse me! Define “Code” please…
How to eat an elephant
How to eat an elephant one bite at the time
How to eat an elephant one bite at the time
How to eat an elephant one bite at the time No one knows ALL that stuff!
How to eat an elephant one bite at the time No one knows ALL that stuff! Start with what is close to you
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
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:
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
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
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!
How to eat an elephant one bite at the time
How to eat an elephant one bite at the time
How to eat an elephant one bite at the time Suggested Goal:
How to eat an elephant one bite at the time Suggested Goal: Do the design sign-offs with your clients in a browser
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…
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.
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!
How to eat an elephant one bite at the time Suggested Goal: Do the design sign-offs with your clients in a browser
How to eat an elephant one bite at the time Suggested Goal: Do the design sign-offs with your clients in a browser
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:
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
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
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
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!
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
Benefits with HTML/CSS sign-off
Benefits with HTML/CSS sign-off “Graphic design tools are bringing a knife to a gun fight” - Andy Clarke
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
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
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
CSS Zen Garden
CSS Zen Garden
CSS Zen Garden
CSS Zen Garden
CSS Zen Garden
CSS Zen Garden
CSS Zen Garden
CSS + jQuery Plug-ins
CSS + jQuery Plug-ins
CSS + jQuery Plug-ins
CSS + jQuery Plug-ins
CSS + jQuery Plug-ins
CSS + jQuery Plug-ins
Trent Walton Using It All
Trent Walton Using It All
Trent Walton Using It All
Trent Walton Using It All
Trent Walton Using It All
Trent Walton Using It All
Trent Walton Using It All
Trent Walton Using It All
Trent Walton Using It All
CSS Frameworks
CSS Frameworks Go ahead, use them (carefully)
CSS Frameworks Go ahead, use them (carefully) Bootstrap Foundation PureCSS
CSS Frameworks Go ahead, use them (carefully) Bootstrap LESS Foundation PureCSS
CSS Frameworks Go ahead, use them (carefully) Bootstrap LESS Foundation SASS PureCSS
CSS Frameworks Go ahead, use them (carefully) Bootstrap LESS Foundation SASS PureCSS SMACSS
CSS Frameworks Go ahead, use them (carefully) Bootstrap LESS Foundation SASS CSS Pre-Processors PureCSS SMACSS
CSS Frameworks Go ahead, use them (carefully) Bootstrap LESS Foundation SASS PureCSS SMACSS CSS Pre-Processors Basically CSS but handles variables
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
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
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.
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
More Good links
More Good links CSS Zen Garden 1 HTML file, 100’s of CSS designs
More Good links CSS Zen Garden 1 HTML file, 100’s of CSS designs GistBox Save your code snippets centrally
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)
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)
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)
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
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)
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
More Good links
Fittext More Good links jQuery plug-in - Excellent for headlines
Fittext More Good links jQuery plug-in - Excellent for headlines BigText jQuery plug-in - Excellent for headlines
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
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)
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
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
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
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.
…but wait, there is more!
…but wait, there is more! A List Apart THE online magazine for web design/development
…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.
…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
…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
Thank you!
Mathias Hellquist Freelance Creative Technology Director Email: mathias@imakethingswork.com Twitter: @hellquist About me: http:/ /about.me/hellquist
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.

More Related Content

PPTX
Design for presentations
byEileen Walsh
 
PDF
Teaching Students with Emojis, Emoticons, & Textspeak
byShelly Sanchez Terrell
 
PDF
Hype vs. Reality: The AI Explainer
byLuminary Labs
 
PDF
Is everything we used to do wrong?
byRuss Weakley
 
PDF
HICapacity UI talk by Kathryne Sakata
byhicapacity
 
PDF
The Browser is Dead, Long Live the Web!
byJonathan Stark
 
PDF
The Browser is Dead, Long Live the Web! (Jonathan Stark)
byFuture Insights
 
PDF
Ciw going mobile
byr82093403
 
Design for presentations
byEileen Walsh
 
Teaching Students with Emojis, Emoticons, & Textspeak
byShelly Sanchez Terrell
 
Hype vs. Reality: The AI Explainer
byLuminary Labs
 
Is everything we used to do wrong?
byRuss Weakley
 
HICapacity UI talk by Kathryne Sakata
byhicapacity
 
The Browser is Dead, Long Live the Web!
byJonathan Stark
 
The Browser is Dead, Long Live the Web! (Jonathan Stark)
byFuture Insights
 
Ciw going mobile
byr82093403
 

Similar to Designers shouldn't code - The wrong answer to the right question

PPTX
Emperors new clothes_digitalbarn_output_snakk
bykevinjohngallagher
 
PPTX
Emperors new clothes - digitalbarn2012
bykevinjohngallagher
 
PDF
Working with designers that dont code
byKirsty Burgoine
 
PPT
Be a Web Design Professional with the Right Skills.
byACCHITABAJPAI
 
KEY
HTML CSS & Javascript
byDavid Lindkvist
 
PPTX
Talk 03 responsive-web-design
byMonkeyshot
 
PDF
Graydient Creative_LR
byShawn Spartz
 
PDF
From customer need to Umbraco setup
bySkybrud.dk
 
PDF
Monkeytalk Fall 2012 - Responsive Web Design
bySerge Hufkens
 
PDF
Uxpin web ui design patterns 2014
byMoodLabs
 
PDF
Responsive Webdesign - UXtour Microsoft
byThomas Deceuninck
 
PDF
Responsive webdesign
byBart De Waele
 
PDF
Designing Websites in Photoshop
byBrunner
 
PDF
Html 5 mobile - nitty gritty
byMario Noble
 
PDF
responsive awareness
byonehundred_be
 
PPSX
Web design and development trends
byCool Sky
 
PPT
Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLal
byRaj Lal
 
PPTX
Getting Down & Dirty with Responsive Web Design
bymartinridgway
 
PDF
Web designtrends 5-29-2013
byAngela Bowman
 
PDF
8 web design facts that we know
byImmortal Technologies
 
Emperors new clothes_digitalbarn_output_snakk
bykevinjohngallagher
 
Emperors new clothes - digitalbarn2012
bykevinjohngallagher
 
Working with designers that dont code
byKirsty Burgoine
 
Be a Web Design Professional with the Right Skills.
byACCHITABAJPAI
 
HTML CSS & Javascript
byDavid Lindkvist
 
Talk 03 responsive-web-design
byMonkeyshot
 
Graydient Creative_LR
byShawn Spartz
 
From customer need to Umbraco setup
bySkybrud.dk
 
Monkeytalk Fall 2012 - Responsive Web Design
bySerge Hufkens
 
Uxpin web ui design patterns 2014
byMoodLabs
 
Responsive Webdesign - UXtour Microsoft
byThomas Deceuninck
 
Responsive webdesign
byBart De Waele
 
Designing Websites in Photoshop
byBrunner
 
Html 5 mobile - nitty gritty
byMario Noble
 
responsive awareness
byonehundred_be
 
Web design and development trends
byCool Sky
 
Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLal
byRaj Lal
 
Getting Down & Dirty with Responsive Web Design
bymartinridgway
 
Web designtrends 5-29-2013
byAngela Bowman
 
8 web design facts that we know
byImmortal Technologies
 

Recently uploaded

PDF
Claire Donnelly Portfolio- Interior design
byclairecd05
 
PDF
Nina's Architectural Portfolio _ 2026
byNinaBader1
 
PPTX
cubichomeinteriors-Interior Designer in Coimbatore
byVikrantgirase
 
PDF
day 1 sessions of fals robotic surgery.pdf
bySourav Panda
 
PDF
The Graph Sunrise Migration Flow Version 1
byJames Hall
 
PPTX
How High-Quality Images Increase Online Sales
bySam Smith
 
PDF
The Graph Sunrise Migration User Flow Design Version 2
byJames Hall
 
PPTX
Elevations-Massing Of the building through forms and colours
byDirector-Navnirman Bahu-Uddeshiya Mahila Sanstha,Suvarna Lele Architects.
 
PPTX
Create clear, well-structured grant proposals with AI - AI Grant Proposal Gen...
byVenngage AI Infographic Generator
 
PPTX
Turn ideas into clear, structured AI flowcharts - AI Flowchart Generator
byVenngage AI Infographic Generator
 
PPTX
03 unit-III-Full-Notes Design Thinking.pptx
bysivaamutha4
 
PDF
Nina Bader Architectural Portfolio 2026
byNinaBader1
 
PDF
Architectural Internship Portfolio - Supriya Kirthi
bySupriyaKirthi
 
PDF
Ramalan roshma_Employee_Satisfaction_Engagement_Survey.pdf
bymohamedsameers602
 
DOCX
Felix's Research project final copy.docx
bymaingijimmy002
 
PPTX
mẫu tin học gốc Nguyễn Việt Nam Anh lớp 8G
byvietnamanh7707
 
DOCX
epp subject reviewjhqweqwewkjdhadasdasdqw12312
byJeffreySoriano10
 
PDF
Universal Verification Methodology - Used to describe the Hardware Digital Ci...
byerssayyappa
 
PDF
Holm Community at St Nicholas Kirk. Full plans
byAntoine Pietri
 
PDF
Early Nozzle (Now Amp) Explainer, Presented at company offsite in Ireland
byJames Hall
 
Claire Donnelly Portfolio- Interior design
byclairecd05
 
Nina's Architectural Portfolio _ 2026
byNinaBader1
 
cubichomeinteriors-Interior Designer in Coimbatore
byVikrantgirase
 
day 1 sessions of fals robotic surgery.pdf
bySourav Panda
 
The Graph Sunrise Migration Flow Version 1
byJames Hall
 
How High-Quality Images Increase Online Sales
bySam Smith
 
The Graph Sunrise Migration User Flow Design Version 2
byJames Hall
 
Elevations-Massing Of the building through forms and colours
byDirector-Navnirman Bahu-Uddeshiya Mahila Sanstha,Suvarna Lele Architects.
 
Create clear, well-structured grant proposals with AI - AI Grant Proposal Gen...
byVenngage AI Infographic Generator
 
Turn ideas into clear, structured AI flowcharts - AI Flowchart Generator
byVenngage AI Infographic Generator
 
03 unit-III-Full-Notes Design Thinking.pptx
bysivaamutha4
 
Nina Bader Architectural Portfolio 2026
byNinaBader1
 
Architectural Internship Portfolio - Supriya Kirthi
bySupriyaKirthi
 
Ramalan roshma_Employee_Satisfaction_Engagement_Survey.pdf
bymohamedsameers602
 
Felix's Research project final copy.docx
bymaingijimmy002
 
mẫu tin học gốc Nguyễn Việt Nam Anh lớp 8G
byvietnamanh7707
 
epp subject reviewjhqweqwewkjdhadasdasdqw12312
byJeffreySoriano10
 
Universal Verification Methodology - Used to describe the Hardware Digital Ci...
byerssayyappa
 
Holm Community at St Nicholas Kirk. Full plans
byAntoine Pietri
 
Early Nozzle (Now Amp) Explainer, Presented at company offsite in Ireland
byJames Hall
 

Designers shouldn't code - The wrong answer to the right question

  • 2.
  • 3.
    Designers Shouldn’t Code HyperIsland 27th of Nov 2013
  • 7.
    But first aquick(-ish) answer to: Who is this guy?
  • 9.
  • 10.
  • 11.
    ie d r ar ds M ki 2Freelance Creative Technology Director Mathias Hellquist Background:
  • 12.
    ie d r ar ds M ki 2Freelance 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 2Freelance 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 2Freelance 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 2Freelance 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 CreativeTechnology Director Background:
  • 17.
    Mathias Hellquist Freelance CreativeTechnology Director Background:
  • 18.
    Mathias Hellquist Freelance CreativeTechnology Director Background: Back in Sweden I worked for Tieto 3 years and later for Society46
  • 19.
    Mathias Hellquist Freelance CreativeTechnology 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 CreativeTechnology 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 CreativeTechnology 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 CreativeTechnology 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
  • 24.
  • 27.
    Excuse me! Define“Code” please…
  • 30.
    How to eatan elephant
  • 31.
    How to eatan elephant one bite at the time
  • 32.
    How to eatan elephant one bite at the time
  • 33.
    How to eatan elephant one bite at the time No one knows ALL that stuff!
  • 34.
    How to eatan elephant one bite at the time No one knows ALL that stuff! Start with what is close to you
  • 35.
    How to eatan 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 eatan 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 eatan 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 eatan 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 eatan 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 eatan elephant one bite at the time
  • 41.
    How to eatan elephant one bite at the time
  • 42.
    How to eatan elephant one bite at the time Suggested Goal:
  • 43.
    How to eatan elephant one bite at the time Suggested Goal: Do the design sign-offs with your clients in a browser
  • 44.
    How to eatan 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 eatan 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 eatan 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 eatan elephant one bite at the time Suggested Goal: Do the design sign-offs with your clients in a browser
  • 48.
    How to eatan elephant one bite at the time Suggested Goal: Do the design sign-offs with your clients in a browser
  • 49.
    How to eatan 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 eatan 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 eatan 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 eatan 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 eatan 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 eatan 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.
  • 57.
    Benefits with HTML/CSSsign-off “Graphic design tools are bringing a knife to a gun fight” - Andy Clarke
  • 58.
    Benefits with HTML/CSSsign-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/CSSsign-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/CSSsign-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.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 70.
    CSS + jQueryPlug-ins
  • 71.
    CSS + jQueryPlug-ins
  • 72.
    CSS + jQueryPlug-ins
  • 73.
    CSS + jQueryPlug-ins
  • 74.
    CSS + jQueryPlug-ins
  • 75.
    CSS + jQueryPlug-ins
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 87.
  • 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.
  • 101.
    More Good links CSSZen Garden 1 HTML file, 100’s of CSS designs
  • 102.
    More Good links CSSZen Garden 1 HTML file, 100’s of CSS designs GistBox Save your code snippets centrally
  • 103.
    More Good links CSSZen 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 CSSZen 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 CSSZen 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 CSSZen 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 CSSZen 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 CSSZen 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.
  • 111.
    Fittext More Good links jQueryplug-in - Excellent for headlines
  • 112.
    Fittext More Good links jQueryplug-in - Excellent for headlines BigText jQuery plug-in - Excellent for headlines
  • 113.
    Fittext More Good links jQueryplug-in - Excellent for headlines BigText jQuery plug-in - Excellent for headlines Lettering jQuery plug-in - Excellent for radical typography
  • 114.
    Fittext More Good links jQueryplug-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 jQueryplug-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 jQueryplug-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 jQueryplug-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 jQueryplug-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.
  • 121.
    …but wait, thereis more! A List Apart THE online magazine for web design/development
  • 122.
    …but wait, thereis 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, thereis 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, thereis 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.
  • 127.
    Mathias Hellquist Freelance CreativeTechnology Director Email: mathias@imakethingswork.com Twitter: @hellquist About me: http:/ /about.me/hellquist
  • 128.
    Mathias Hellquist Freelance CreativeTechnology 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.