26
CSS3 vs Photoshop Smashing Magazine Meetup Basel, January 2012 Francis Chouquet @Fran6 hp://peaxl.com hp://francischouquet.com mercredi, 1 février 12

CSS3 vs Photoshop (remastered)

Embed Size (px)

DESCRIPTION

Even If Photoshop was created for photo editing, it has always been the preferred tool for web designers. Yet the CSS3 arrival last year might have changed this. Indeed, CSS3's great success is partially due to its many "design related" functions. Since last year, we noticed that more people dare to design directly in the browser instead of using Photoshop. This raises important questions for the future of web design: is the web designer supposed to code ? With CSS3, it seems impossible to stay away from it. But on the other hand, will the front end developper accept to give away this part of his job or will developpers now start to design as well?

Citation preview

Page 1: CSS3 vs Photoshop (remastered)

CSS3 vs Photoshop

Smashing Magazine Meetup Basel, January 2012

Francis Chouquet@Fran6

h!p://peaxl.comh!p://francischouquet.com

mercredi, 1 février 12

Page 2: CSS3 vs Photoshop (remastered)

How I learnt Web Design...

mercredi, 1 février 12

Page 3: CSS3 vs Photoshop (remastered)

Difficult to predictthe future if we don’t

agree on the definition of web design

mercredi, 1 février 12

Page 4: CSS3 vs Photoshop (remastered)

The webdesigner lovesPhotoshop !!

mercredi, 1 février 12

Page 5: CSS3 vs Photoshop (remastered)

... and CSS3 arrived...

mercredi, 1 février 12

Page 6: CSS3 vs Photoshop (remastered)

CSS3, the designer’s playground

mercredi, 1 février 12

Page 7: CSS3 vs Photoshop (remastered)

CSS3 offers a large rangeof visual effects

that were previously done with images

mercredi, 1 février 12

Page 8: CSS3 vs Photoshop (remastered)

...and who says images,says Photoshop...

mercredi, 1 février 12

Page 9: CSS3 vs Photoshop (remastered)

Example...

mercredi, 1 février 12

Page 10: CSS3 vs Photoshop (remastered)

Things we le on the move - h!p://css3exp.com/moon

mercredi, 1 février 12

Page 11: CSS3 vs Photoshop (remastered)

with that idea in mind,some started to design

in the browser

mercredi, 1 février 12

Page 12: CSS3 vs Photoshop (remastered)

mercredi, 1 février 12

Page 13: CSS3 vs Photoshop (remastered)

mercredi, 1 février 12

Page 14: CSS3 vs Photoshop (remastered)

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

Page 15: CSS3 vs Photoshop (remastered)

Disadvantages

Quite simple designs. You still need Photoshopfor more sophisticated effects

YOU NEED TO KNOW CSS/HTML !!

mercredi, 1 février 12

Page 16: CSS3 vs Photoshop (remastered)

Goodbye PhotoshopHello ____________ * ???

* put the name of the browser you use...Internet Explorer is not a correct answer

mercredi, 1 février 12

Page 17: CSS3 vs Photoshop (remastered)

Should the designer know how to code?

mercredi, 1 février 12

Page 18: CSS3 vs Photoshop (remastered)

I asked the experts ! :)

mercredi, 1 février 12

Page 19: CSS3 vs Photoshop (remastered)

« 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

Page 20: CSS3 vs Photoshop (remastered)

"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

Page 21: CSS3 vs Photoshop (remastered)

“ 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

Page 22: CSS3 vs Photoshop (remastered)

Different views but one common point:

understanding HTML/CSSis a strict minimum

mercredi, 1 février 12

Page 23: CSS3 vs Photoshop (remastered)

Examples in Car industryArchitecture

mercredi, 1 février 12

Page 24: CSS3 vs Photoshop (remastered)

web design evolves everyday

We are talking about CSS3 but what about Responsive Web Design ?

mercredi, 1 février 12

Page 25: CSS3 vs Photoshop (remastered)

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

Page 26: CSS3 vs Photoshop (remastered)

thank you !

@Fran6h!p://peaxl.com

h!p://francischouquet.com

mercredi, 1 février 12