Post on 25-Jan-2015
description
Designers Shouldn’t CodeHyper Island 27th of Nov 2013
Who is this guy?But first a quick(-ish) answer to:
Mathias HellquistCreative Technology Director
Mathias HellquistCreative Technology DirectorFreelance
Mathias HellquistCreative Technology DirectorFreelance
Background:
Marrie
d
2 kids
Mathias HellquistCreative Technology DirectorFreelance
Background:Active online (professionally) since -93, working in several web agencies in Stockholm, Hamburg and London (where I lived 11 years, 1999-2010)
Marrie
d
2 kids
Dare
I-D Media
Profero
Halo
gen
ProjectorCatwalk Edo
Mathias HellquistCreative Technology DirectorFreelance
Background:Active online (professionally) since -93, working in several web agencies in Stockholm, Hamburg and London (where I lived 11 years, 1999-2010)
In London I worked with solutions and strategy for clients like Apple, Microsoft, SonyEricsson, Unilever, Barclays, RBS etc.
Marrie
d
2 kids
Dare
I-D Media
Profero
Halo
gen
More than 30 projects
for the UK Public Sector
Member of company board
ProjectorCatwalk Edo
Mathias HellquistCreative Technology DirectorFreelance
Background:Active online (professionally) since -93, working in several web agencies in Stockholm, Hamburg and London (where I lived 11 years, 1999-2010)
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.
Marrie
d
2 kids
Dare
I-D Media
Profero
Halo
gen
Agency Of The Year 4 times
More than 30 projects
for the UK Public Sector
Have won m
ost
internation
al
awards at
least once
Member of company board
ProjectorCatwalk Edo
Mathias HellquistCreative Technology DirectorFreelance
Background:Active online (professionally) since -93, working in several web agencies in Stockholm, Hamburg and London (where I lived 11 years, 1999-2010)
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.
Marrie
d
2 kids
Dare
I-D Media
Profero
Halo
gen
Agency Of The Year 4 times
More than 30 projects
for the UK Public Sector
Those were for Mini Cooper and Axe/Lynx.
Have won m
ost
internation
al
awards at
least once
Member of company board
ProjectorCatwalk Edo
Mathias HellquistCreative Technology DirectorFreelance
Background:
Creative Technology DirectorFreelance
Background:
Mathias Hellquist
Creative Technology DirectorFreelance
Background:Back in Sweden I worked forTieto 3 years and later for Society46
Mathias Hellquist
Creative Technology DirectorFreelance
Background:Back in Sweden I worked forTieto 3 years and later for Society46
At Tieto I was running a departmentcalled Service Design & User ExperienceClients like SVT, Entercard, Fortum etc
Mathias Hellquist
Creative Technology DirectorFreelance
Background:Back in Sweden I worked forTieto 3 years and later for Society46
At Tieto I was running a departmentcalled Service Design & User ExperienceClients like SVT, Entercard, Fortum etc
At Society46 we worked with clients likeDuracell, Red Bull and Pepsi
Mathias Hellquist
Creative Technology DirectorFreelance
Background:Back in Sweden I worked forTieto 3 years and later for Society46
At Tieto I was running a departmentcalled Service Design & User ExperienceClients like SVT, Entercard, Fortum etc
At Society46 we worked with clients likeDuracell, Red Bull and Pepsi
Loves:
Mathias Hellquist
Creative Technology DirectorFreelance
Background:Back in Sweden I worked forTieto 3 years and later for Society46
At Tieto I was running a departmentcalled Service Design & User ExperienceClients like SVT, Entercard, Fortum etc
At Society46 we worked with clients likeDuracell, Red Bull and Pepsi
Technology, amazing end user experiences,Social Media (used right), Accessibility,API’s, Open Source and visionary thinking.
Loves:
Death Metal
Guitars
Photography
Draw
ing
My familyFood
Gaming
RPG’s
Has won
Rock-S
M
Mathias Hellquist
Designers Shouldn’t Code
Excuse me! Define “Code” please…
How to eat an elephant
How to eat an elephantone bite at the time
How to eat an elephantone bite at the time
How to eat an elephantone bite at the time
No one knows ALL that stuff!
How to eat an elephantone bite at the time
No one knows ALL that stuff!
Start with what is close to you
How to eat an elephantone 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 elephantone 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 elephantone 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 elephantone 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 elephantone 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 elephantone bite at the time
How to eat an elephantone bite at the time
How to eat an elephantone bite at the time
Suggested Goal:
How to eat an elephantone bite at the time
Suggested Goal:Do the design sign-offs withyour clients in a browser
How to eat an elephantone bite at the time
Suggested Goal:Do the design sign-offs withyour clients in a browser
This should mean it probably looks different in the different browsers
on the different platforms…
How to eat an elephantone bite at the time
Suggested Goal:Do the design sign-offs withyour 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 elephantone bite at the time
Suggested Goal:Do the design sign-offs withyour 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 elephantone bite at the time
Suggested Goal:Do the design sign-offs withyour clients in a browser
How to eat an elephantone bite at the time
Suggested Goal:Do the design sign-offs with your clients in a browser
How to eat an elephantone 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 elephantone bite at the time
Suggested Goal:Do the design sign-offs with your clients in a browser
It will force you to learn:
Sales arguments
How to eat an elephantone bite at the time
Suggested Goal:Do the design sign-offs with your clients in a browser
It will force you to learn:
Sales arguments HTML
How to eat an elephantone bite at the time
Suggested Goal:Do the design sign-offs with your clients in a browser
It will force you to learn:
Sales arguments HTML CSS
How to eat an elephantone bite at the time
Suggested Goal:Do the design sign-offs with your clients in a browser
It will force you to learn:
Sales arguments HTML CSS
Possibly even a little JavaScript!
How to eat an elephantone bite at the time
Suggested Goal:Do the design sign-offs with your clients in a browser
It will force you to learn:
Sales arguments HTML CSS
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 arebringing a knife to a gun fight”
- Andy Clarke
Benefits with HTML/CSS sign-off
“Graphic design tools arebringing a knife to a gun fight”
- Andy Clarke
Percentage-based layoutsMedia QueriesNative form element stylingFont rendering (and web fonts)Flexible leading and measureBrowsers CSS capabilitiesPseudo-classesCSS3 ligatures and swashesCSS3 animationsCSS3 transitions
Benefits with HTML/CSS sign-off
Photoshop probably isn’twhere the product willlive when you go live
“Graphic design tools arebringing a knife to a gun fight”
- Andy Clarke
Percentage-based layoutsMedia QueriesNative form element stylingFont rendering (and web fonts)Flexible leading and measureBrowsers CSS capabilitiesPseudo-classesCSS3 ligatures and swashesCSS3 animationsCSS3 transitions
Benefits with HTML/CSS sign-off
Photoshop probably isn’twhere the product willlive when you go live
“Graphic design tools arebringing a knife to a gun fight”
- Andy Clarke
Percentage-based layoutsMedia QueriesNative form element stylingFont rendering (and web fonts)Flexible leading and measureBrowsers CSS capabilitiesPseudo-classesCSS3 ligatures and swashesCSS3 animationsCSS3 transitions
You want to test drive
a car before buying.
You usually try clothes
on before buying
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
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 FrameworksGo ahead, use them (carefully)
CSS FrameworksGo ahead, use them (carefully)
Bootstrap Foundation PureCSS
CSS FrameworksGo ahead, use them (carefully)
Bootstrap Foundation PureCSSLESS
CSS FrameworksGo ahead, use them (carefully)
Bootstrap Foundation PureCSSLESS SASS
CSS FrameworksGo ahead, use them (carefully)
Bootstrap Foundation PureCSSLESS SASS SMACSS
CSS FrameworksGo ahead, use them (carefully)
Bootstrap Foundation PureCSSLESS SASS SMACSS
CSS Pre-Processors
CSS FrameworksGo ahead, use them (carefully)
Bootstrap Foundation PureCSSLESS SASS SMACSS
Basically CSS but handles variablesCSS Pre-Processors
CSS FrameworksGo ahead, use them (carefully)
Bootstrap Foundation PureCSSLESS SASS SMACSS
Basically CSS but handles variablesCSS Pre-Processors
You should learn “real” CSS first
CSS FrameworksGo ahead, use them (carefully)
Bootstrap Foundation PureCSSLESS SASS SMACSS
Basically CSS but handles variablesCSS Pre-Processors
You should learn “real” CSS first
JavaScript & jQuery
CSS FrameworksGo ahead, use them (carefully)
Bootstrap Foundation PureCSSLESS SASS SMACSS
Basically CSS but handles variablesCSS Pre-Processors
You should learn “real” CSS first
JavaScript & jQueryjQuery is awesome. Include it.
CSS FrameworksGo ahead, use them (carefully)
Bootstrap Foundation PureCSSLESS SASS SMACSS
Basically CSS but handles variablesCSS Pre-Processors
You should learn “real” CSS first
JavaScript & jQueryjQuery is awesome. Include it.
To use it fully you needto learn more JavaScript
More Good links
More Good linksCSS Zen Garden
GistBox1 HTML file, 100’s of CSS designs
Save your code snippets centrally
More Good linksCSS Zen Garden
CloudCannon
GistBox1 HTML file, 100’s of CSS designs
Save your code snippets centrally
Dropbox based CMS (no database)
More Good linksCSS Zen Garden
CloudCannon
GistBox
Kirby
1 HTML file, 100’s of CSS designs
Save your code snippets centrally
Dropbox based CMS (no database)
Excellent PHP based CMS (no database)
More Good linksCSS Zen Garden
CloudCannon
GistBox
Kirby
Hammer for Mac
1 HTML file, 100’s of CSS designs
Save your code snippets centrally
Dropbox based CMS (no database)
Excellent PHP based CMS (no database)
Link HTML pages together as in a CMS (no database)
More Good linksCSS Zen Garden
CloudCannon
GistBox
Kirby
Hammer for Mac
YQL
1 HTML file, 100’s of CSS designs
Save your code snippets centrally
Dropbox based CMS (no database)
Excellent PHP based CMS (no database)
Link HTML pages together as in a CMS (no database)
For the adventurous - anything on Internet as a database
More Good linksCSS Zen Garden
CloudCannon
GistBox
Kirby
Hammer for Mac
YQL
BugHerd
1 HTML file, 100’s of CSS designs
Save your code snippets centrally
Dropbox based CMS (no database)
Excellent PHP based CMS (no database)
Link HTML pages together as in a CMS (no database)
For the adventurous - anything on Internet as a database
Visual bug tracking (for your browser based creation)
More Good linksCSS Zen Garden
CloudCannon
GistBox
Kirby
Hammer for Mac
YQL
BugHerd
Marvel
1 HTML file, 100’s of CSS designs
Save your code snippets centrally
Dropbox based CMS (no database)
Excellent PHP based CMS (no database)
Link HTML pages together as in a CMS (no database)
For the adventurous - anything on Internet as a database
Visual bug tracking (for your browser based creation)
Create prototypes from PSD’s via DropBox
More Good links
More Good linksFittext
BigTextjQuery plug-in - Excellent for headlines
jQuery plug-in - Excellent for headlines
More Good linksFittext
Lettering
BigTextjQuery plug-in - Excellent for headlines
jQuery plug-in - Excellent for headlines
jQuery plug-in - Excellent for radical typography
More Good linksFittext
Lettering
BigText
KernJs
jQuery plug-in - Excellent for headlines
jQuery plug-in - Excellent for headlines
jQuery plug-in - Excellent for radical typography
Bookmarklet - Plug-in to Lettering (above)
More Good linksFittext
Lettering
BigText
KernJs
Responsive IMG
jQuery plug-in - Excellent for headlines
jQuery plug-in - Excellent for headlines
jQuery plug-in - Excellent for radical typography
Bookmarklet - Plug-in to Lettering (above)
jQuery plug-in (needs PHP) - for resizing images
More Good linksFittext
Lettering
BigText
KernJs
Responsive IMG
HTML5
jQuery plug-in - Excellent for headlines
jQuery plug-in - Excellent for headlines
jQuery plug-in - Excellent for radical typography
Bookmarklet - Plug-in to Lettering (above)
jQuery plug-in (needs PHP) - for resizing images
Dictionary of all HTML5 elements and how to use them
More Good linksFittext
Lettering
BigText
KernJs
Responsive IMG
HTML5
Strut
jQuery plug-in - Excellent for headlines
jQuery plug-in - Excellent for headlines
jQuery plug-in - Excellent for radical typography
Bookmarklet - Plug-in to Lettering (above)
jQuery plug-in (needs PHP) - for resizing images
Dictionary of all HTML5 elements and how to use them
Make HTML5/CSS3 Prezi like presentations
More Good linksFittext
Lettering
BigText
KernJs
Responsive IMG
HTML5
Strut
Trent Waltons blog
jQuery plug-in - Excellent for headlines
jQuery plug-in - Excellent for headlines
jQuery plug-in - Excellent for radical typography
Bookmarklet - Plug-in to Lettering (above)
jQuery plug-in (needs PHP) - for resizing images
Dictionary of all HTML5 elements and how to use them
Make HTML5/CSS3 Prezi like presentations
Clever use of Lettering, Fittext and CSS. Good read too.
…but wait, there is more!
…but wait, there is more!A List ApartTHE online magazine for web design/development
…but wait, there is more!A List Apart
ZeldmanTHE online magazine for web design/development
The man, the myth, the legend, the concept. ALA founder.
…but wait, there is more!A List Apart
Sidebar
ZeldmanTHE online magazine for web design/development
The man, the myth, the legend, the concept. ALA founder.
5 daily links of excellence for designers/developers
…but wait, there is more!A List Apart
Sidebar
Zeldman
CSS Mac Plus
THE online magazine for web design/development
The man, the myth, the legend, the concept. ALA founder.
5 daily links of excellence for designers/developers
How-to on building a Mac Plus in CSS
Thank you!
Creative Technology DirectorFreelanceMathias Hellquist
Email: mathias@imakethingswork.com
Twitter: @hellquist
About me: http://about.me/hellquist
Creative Technology DirectorFreelanceMathias Hellquist
Email: mathias@imakethingswork.com
Twitter: @hellquist
About me: http://about.me/hellquist
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.
Final Thought