: With the invention of CSS3, should a web designer use Photoshop? I see that many designers create beautiful web design works in Photoshop, but now with the arrival of CSS3, when they want to

@Martha945

Things to think about:


A lot goes into putting those fancy designs on the web. At least for the more complex ones. Photoshop helps makes seeing the end result happen faster.
For a designer at his job, doing a mock-up in Photoshop is usually faster, justified, as you won't spend all day hacking away at html and CSS3.
As you mentioned they can do 80% of it in CSS3, but then they'll eventually need Photoshop form some part.
I would argue that you forego doing a mock-up in Photoshop if your're the designer and developer and it would save time, otherwise always do a mock-up in Photoshop.

Vote Up Vote Down

@Holmes874

Gotta disagree with everyone. Photoshop is not a tool for designing a web site. It's a tool for sketching out a web site. The web site should still be designed in the medium that it's in--which tends to be CSS, HTML and JS.

That doesn't mean you don't use Photoshop. But you certainly don't have to.

I'm a huge fan of not ever showing web site designs in photoshop to clients. It's not the medium the site will live in. Photoshop comps offer no ability to communicate interaction, device differences, browser idiosyncracies, clickability, responsiveness, etc.

Admittedly, in reality, a lot of the time you still need to show JPG mockups. Fine. Use Photoshop for that. But don't then take that PSD file and slice and dice it into a web site. That made sense in 1999. No so much today. Instead, take that PSD, and just use it as a guide. This is 'roughly what the site should look like but take into account the fact that it's being built in CSS/HTML/JS and accomodate as needed.

So, to answer the question:


Can a web designer create the entire design directly in HTML & CSS without bothering to add another middle layer of creating a design in Photoshop, and then simply create the remained elements there?


Yes. One can certainly do that. I've seen that done in parallel with PSD designers. The biggest problem with the PSD approach is when you're working on an agile team. Heavy files used for documentation (such as PhotoShop) become rather large burdens to the Agile process and end up adding more issues than they solve. We tend to then work in reverse...we sketch in PS as needed, and then design and build in HTML/CSS/JS. When we then need to make quick visual updates for meetings, we'll just screen-shot the working presentation layer markup, and slap it in PhotoShop and tweak quickly.

Vote Up Vote Down

@Kevin459

** EDIT **

New Client?

Absolutely - If you're pitching a design for a NEW client/site. Lay-folk generally have a hard time seeing what's in your(my) head. Wireframes, drawings, etc. don't always cut it either - scratch that - they don't cut it. I hear more, "I thought it was going to do X" from clients when all they have is a WF, or sketch than I do when they're given a mockup with their logo, photos, corporate fonts, and a UI.

Any other scenario:

Maybe not - If can use existing HTML/CSS/JS that matches the job requirements, or you're editing content of an existing client, you'll be better off working just in the code. If not, you're probably going to waste a gross amount of time in Photoshop for very little return. There are those instances (like @DAO1 mentioned) where a screenshot and tweak-via-Photoshop can really speed up an approval process, or hammering out an idea, or three.

** end **

I say yes -

It's a lot easier to sell your designs (and much quicker to create comps) with a visual - even if it's simplified. That's where PS is most helpful for my jobs.

I also incorporate a layer with a grid system, so I can see how things are laid out, and quickly drag them to where I need them. Again, this helps with comps, and client-requested changes.

If you keep a Photoshop library of your commonly used elements: vector based rounded corner input boxes, your grid(s), "logo goes here" box... all in layers of a single file, or multiple files (your choice) - you'll be able to build home pages and interior pages in a fraction of the time it takes to code them.

Keeping a common CSS file (with popular settings) will also help when it comes time to code, but I don't see the value of eliminating PS from the work flow - regardless of how robust CSS becomes.

Vote Up Vote Down

@Speyer780

Can you guarantee that 100% of your users have browsers which will see your site exactly the way you (or more importantly, the client) intend it to be seen? No? Then what percentage? 90%? 80%?

Can you make sure it degrades nicely, so that the alternate version seen by the remaining 10% (20%? 40%?) is acceptable?

If either or both of those issues is a problem, you need some Photoshop.

Vote Up Vote Down