SlideShare a Scribd company logo
CSS3 vs Photoshop
Smashing Magazine Meetup
Basel, January 2012
Francis Chouquet
@Fran6
h p://peaxl.com
h p://francischouquet.com
mercredi, 1 février 12
How I learnt Web Design...
mercredi, 1 février 12
Difficult to predict
the future if we don’t
agree on the definition
of web design
mercredi, 1 février 12
The webdesigner loves
Photoshop !!
mercredi, 1 février 12
... and CSS3 arrived...
mercredi, 1 février 12
CSS3, the designer’s
playground
mercredi, 1 février 12
CSS3 offers a large range
of visual effects
that were previously done
with images
mercredi, 1 février 12
...and who says images,
says Photoshop...
mercredi, 1 février 12
Example...
mercredi, 1 février 12
Things we le on the move - h p://css3exp.com/moon
mercredi, 1 février 12
with that idea in mind,
some started to design
in the browser
mercredi, 1 février 12
mercredi, 1 février 12
mercredi, 1 février 12
Benefits
Fast conception when you know HTML/CSS
Modifications are easy to implement
Immediacy - You know right away what you can and cannot do
Dynamic prototype to show to clients
Website implementation faster
mercredi, 1 février 12
Disadvantages
Quite simple designs. You still need Photoshop
for more sophisticated effects
YOU NEED TO KNOW CSS/HTML !!
mercredi, 1 février 12
Goodbye Photoshop
Hello ____________ * ???
* put the name of the browser you use...
Internet Explorer is not a correct answer
mercredi, 1 février 12
Should the designer
know how to code?
mercredi, 1 février 12
I asked the experts ! :)
mercredi, 1 février 12
« To me a good web designer
is a someone that is multidisciplinary
as it doesn't stop with the visual aspect.
He or she also take care of the conversion
into actual webpages
with a good knowledge of html/css
so they can predict the outcome.
Knowing Javascript is a bonus. »
Veerle Pieters
mercredi, 1 février 12
"Although it's possible to be a web designer,
or an art director for the web,
my opinion is that a deeper appreciation of the medium
can only be achieved by having an understanding of code,
even it's relatively basic.
It's not just about knowing what you can create
and what you can't: front-end code is playing
an increasingly important role as a design tool, be it for
designing 'in the browser' or adapting designs to suit
multiple browser widths."
Elliot Jay Stocks
mercredi, 1 février 12
“ A "web designer" is one that can design a site and
get it on the web in the HTML / CSS fashion,
however no ma er what the medium a good designer
can designer for.
As a designer, we should be familiar with design rules
and principles no ma er the medium,
but that doesn't mean we need to learn how to code
or code well. ”
Brian Hoff
mercredi, 1 février 12
Different views
but one common point:
understanding HTML/CSS
is a strict minimum
mercredi, 1 février 12
Examples in
Car industry
Architecture
mercredi, 1 février 12
web design
evolves everyday
We are talking about CSS3 but what about Responsive Web Design ?
mercredi, 1 février 12
my answer
1. If not done yet, learn how to use HTML/CSS
2. You cannot stop the web. It evolves everyday.
We learn everyday. Try to adapt.
3. Use Photoshop for visual elements, quick wireframes.
Then move to the browser.
The more you will practice,
the more you will start to use the browser earlier
mercredi, 1 février 12
thank you !
@Fran6
h p://peaxl.com
h p://francischouquet.com
mercredi, 1 février 12

More Related Content

PDF
Creating and Running a Website – Best Practice and Common Mistakes
PPTX
Project Management or how to herd cats
PPTX
Introduction to react js
PDF
SEO and Accessibility
PDF
Pragmatic Progressive Enhancement
PPTX
We design orientation class
PPT
Web design Presentation
PPTX
BrickPress: Explaining WordPress Using LEGO Master Builder Techniques
Creating and Running a Website – Best Practice and Common Mistakes
Project Management or how to herd cats
Introduction to react js
SEO and Accessibility
Pragmatic Progressive Enhancement
We design orientation class
Web design Presentation
BrickPress: Explaining WordPress Using LEGO Master Builder Techniques

What's hot (20)

PPT
Don't Make Me Think Review
PPTX
Promo for Cleveland GiveCamp 2011
PPTX
5 Easy Things To Be Just A Bit More Agile
PDF
Htmlcssphx1018
PDF
How to be a good developer
PDF
How Chunky Do You Need To Be?: Adaptive Content Strategies For The Real World
PDF
WordCamp St Louis 2018 Contributing Without Coding
PDF
UX roles
DOCX
Starting a website from design
PPTX
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...
PPTX
Introduction about wireframing and responsive webdesign
PPTX
Web design 2 - Basic HTML 2010
PPT
Wireframing
PPT
I.T t shirts
PDF
Build Your Own Website - Thinkful DC
PPTX
Creating a Lawyer in a Box: Building User Friendly Guided Interviews with Doc...
ODP
Group presentation
PDF
UX: What Not to Do
PPTX
Current web design trends
Don't Make Me Think Review
Promo for Cleveland GiveCamp 2011
5 Easy Things To Be Just A Bit More Agile
Htmlcssphx1018
How to be a good developer
How Chunky Do You Need To Be?: Adaptive Content Strategies For The Real World
WordCamp St Louis 2018 Contributing Without Coding
UX roles
Starting a website from design
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...
Introduction about wireframing and responsive webdesign
Web design 2 - Basic HTML 2010
Wireframing
I.T t shirts
Build Your Own Website - Thinkful DC
Creating a Lawyer in a Box: Building User Friendly Guided Interviews with Doc...
Group presentation
UX: What Not to Do
Current web design trends
Ad

Similar to CSS3 vs Photoshop (remastered) (20)

PDF
Download full ebook of Css3 For Web Designers 1st Dan Cederholm instant downl...
PPTX
WRA 210 February 15, 2011
PDF
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
PPTX
Design Types
 
PDF
MIMA 2014 - Changing your Responsive Design Workflow
PPTX
Responsive Web Design - Bridging the Gap Between Art Directors
PPTX
Responsive
PDF
Responsive Web Design Tutorial PDF for Beginners
PPTX
What Front-End Developers (FED's) Need to Know to Be the Modern Day Superhero
PDF
NCDevCon2012_designing the mobile experience
PDF
Sculpting Text: Easing the Pain of Designing in the Browser
PDF
Web designtrends
PDF
Web designtrends 1wd
PPTX
Few skills every successful web designer needs
PDF
Designers are from Venus - Presentationas Given to CD2
PDF
Bootstrap 4 Online Training Course Book Sample
PDF
Project folder-structure-
PDF
Designers Vs Developers—Can't we all just get along
PDF
Crafting Digital Experiences with Innovative Web Designing”
PDF
How to Learn Web Designing Step by Step From Basics in 2018
Download full ebook of Css3 For Web Designers 1st Dan Cederholm instant downl...
WRA 210 February 15, 2011
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Design Types
 
MIMA 2014 - Changing your Responsive Design Workflow
Responsive Web Design - Bridging the Gap Between Art Directors
Responsive
Responsive Web Design Tutorial PDF for Beginners
What Front-End Developers (FED's) Need to Know to Be the Modern Day Superhero
NCDevCon2012_designing the mobile experience
Sculpting Text: Easing the Pain of Designing in the Browser
Web designtrends
Web designtrends 1wd
Few skills every successful web designer needs
Designers are from Venus - Presentationas Given to CD2
Bootstrap 4 Online Training Course Book Sample
Project folder-structure-
Designers Vs Developers—Can't we all just get along
Crafting Digital Experiences with Innovative Web Designing”
How to Learn Web Designing Step by Step From Basics in 2018
Ad

More from Francis Chouquet (6)

PDF
Du numérique à l'analogique: retour aux sources après 10 ans de web
PDF
Hand & Ink, a long tradition of beautiful letters
PDF
L'Art indémodable du dessin de caractères
PDF
Les tendances dans le web design, faut-il les suivre ou les fuir ?
PDF
Presentation WordCamp Paris
PDF
CSS3 vs Photoshop, quel avenir pour le métier de webdesigner ?
Du numérique à l'analogique: retour aux sources après 10 ans de web
Hand & Ink, a long tradition of beautiful letters
L'Art indémodable du dessin de caractères
Les tendances dans le web design, faut-il les suivre ou les fuir ?
Presentation WordCamp Paris
CSS3 vs Photoshop, quel avenir pour le métier de webdesigner ?

Recently uploaded (20)

PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PDF
gpt5_lecture_notes_comprehensive_20250812015547.pdf
PDF
Accuracy of neural networks in brain wave diagnosis of schizophrenia
PPTX
A Presentation on Artificial Intelligence
PDF
Encapsulation theory and applications.pdf
PDF
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
PDF
1 - Historical Antecedents, Social Consideration.pdf
PDF
Assigned Numbers - 2025 - Bluetooth® Document
PPTX
Tartificialntelligence_presentation.pptx
PDF
Transform Your ITIL® 4 & ITSM Strategy with AI in 2025.pdf
PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
A novel scalable deep ensemble learning framework for big data classification...
PDF
Approach and Philosophy of On baking technology
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PPTX
SOPHOS-XG Firewall Administrator PPT.pptx
PPTX
1. Introduction to Computer Programming.pptx
PDF
Getting Started with Data Integration: FME Form 101
PDF
Univ-Connecticut-ChatGPT-Presentaion.pdf
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
PDF
Hindi spoken digit analysis for native and non-native speakers
Building Integrated photovoltaic BIPV_UPV.pdf
gpt5_lecture_notes_comprehensive_20250812015547.pdf
Accuracy of neural networks in brain wave diagnosis of schizophrenia
A Presentation on Artificial Intelligence
Encapsulation theory and applications.pdf
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
1 - Historical Antecedents, Social Consideration.pdf
Assigned Numbers - 2025 - Bluetooth® Document
Tartificialntelligence_presentation.pptx
Transform Your ITIL® 4 & ITSM Strategy with AI in 2025.pdf
Unlocking AI with Model Context Protocol (MCP)
A novel scalable deep ensemble learning framework for big data classification...
Approach and Philosophy of On baking technology
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
SOPHOS-XG Firewall Administrator PPT.pptx
1. Introduction to Computer Programming.pptx
Getting Started with Data Integration: FME Form 101
Univ-Connecticut-ChatGPT-Presentaion.pdf
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Hindi spoken digit analysis for native and non-native speakers

CSS3 vs Photoshop (remastered)

  • 1. CSS3 vs Photoshop Smashing Magazine Meetup Basel, January 2012 Francis Chouquet @Fran6 h p://peaxl.com h p://francischouquet.com mercredi, 1 février 12
  • 2. How I learnt Web Design... mercredi, 1 février 12
  • 3. Difficult to predict the future if we don’t agree on the definition of web design mercredi, 1 février 12
  • 4. The webdesigner loves Photoshop !! mercredi, 1 février 12
  • 5. ... and CSS3 arrived... mercredi, 1 février 12
  • 7. CSS3 offers a large range of visual effects that were previously done with images mercredi, 1 février 12
  • 8. ...and who says images, says Photoshop... mercredi, 1 février 12
  • 10. Things we le on the move - h p://css3exp.com/moon mercredi, 1 février 12
  • 11. with that idea in mind, some started to design in the browser mercredi, 1 février 12
  • 14. Benefits Fast conception when you know HTML/CSS Modifications are easy to implement Immediacy - You know right away what you can and cannot do Dynamic prototype to show to clients Website implementation faster mercredi, 1 février 12
  • 15. Disadvantages Quite simple designs. You still need Photoshop for more sophisticated effects YOU NEED TO KNOW CSS/HTML !! mercredi, 1 février 12
  • 16. Goodbye Photoshop Hello ____________ * ??? * put the name of the browser you use... Internet Explorer is not a correct answer mercredi, 1 février 12
  • 17. Should the designer know how to code? mercredi, 1 février 12
  • 18. I asked the experts ! :) mercredi, 1 février 12
  • 19. « To me a good web designer is a someone that is multidisciplinary as it doesn't stop with the visual aspect. He or she also take care of the conversion into actual webpages with a good knowledge of html/css so they can predict the outcome. Knowing Javascript is a bonus. » Veerle Pieters mercredi, 1 février 12
  • 20. "Although it's possible to be a web designer, or an art director for the web, my opinion is that a deeper appreciation of the medium can only be achieved by having an understanding of code, even it's relatively basic. It's not just about knowing what you can create and what you can't: front-end code is playing an increasingly important role as a design tool, be it for designing 'in the browser' or adapting designs to suit multiple browser widths." Elliot Jay Stocks mercredi, 1 février 12
  • 21. “ A "web designer" is one that can design a site and get it on the web in the HTML / CSS fashion, however no ma er what the medium a good designer can designer for. As a designer, we should be familiar with design rules and principles no ma er the medium, but that doesn't mean we need to learn how to code or code well. ” Brian Hoff mercredi, 1 février 12
  • 22. Different views but one common point: understanding HTML/CSS is a strict minimum mercredi, 1 février 12
  • 24. web design evolves everyday We are talking about CSS3 but what about Responsive Web Design ? mercredi, 1 février 12
  • 25. my answer 1. If not done yet, learn how to use HTML/CSS 2. You cannot stop the web. It evolves everyday. We learn everyday. Try to adapt. 3. Use Photoshop for visual elements, quick wireframes. Then move to the browser. The more you will practice, the more you will start to use the browser earlier mercredi, 1 février 12
  • 26. thank you ! @Fran6 h p://peaxl.com h p://francischouquet.com mercredi, 1 février 12