For the first UI/UX meetup, I was asked to say a couple of words on the differences between designing web content using HTML & CSS or Photoshop. Slides can be found on Speaker Deck.
I believe that the two are not necessarily mutually exclusive; both have their own strengths and weaknesses, which is why you might want to switch methods at one point in your design process. In my opinion, the difference comes down to one thing:
“designing based on rules” and “designing not based on rules.
It’s important to realise that we’re talking about designing here, this is not about writing production-ready code. You want to experiment or communicate the design that’s somewhere in your head, and to do that you need to find the most efficient way to do this. That’s why – regardless of which method you decide to start out with, CSS or Photoshop – it’s always good to start out on paper to answer the important questions:
- What are you actually making?
- What information do you want to convey?
- Will you be designing a single page or a visual language for your product?
- Is thinking about “Pages” even the right thing to do?
- What are the basic layouts that you’ll be working with?
Once you are in your text editor or in Photoshop, moving stuff around might take a while (it could be minutes or hours, but can take you out of your flow), so think about which method suits your project best.
The comparison
This is what it’s all about, right? Why would you pick one method over the other. Here’s a quick list of what the two methods are good for.
CSS & HTML
Let’s begin by stating the obvious: CSS & HTML are computer languages, everything is based on rules. This means that small changes can have a big effect on the big picture of your project. Things like whitespace, colours or font sizes for an entire page can be tweaked with one line of code. This can take ages in Photoshop.
Since you’re not viewing your designs in a static and arbitrarily sized canvas, but in the browser, you’ll actually be interacting with your design immediately, and because browsers already add a layer of feedback to web pages, there’s a good change that you’ll be confronted with missing behaviour. You kind of expect your website to respond to things like mouseovers, window resizing, clicks, etc… Inside Photoshop, it might also be easy to forget that your design will appear on tons of different devices. From huge 2560 x 1440 displays, to smaller notebooks, tablets and smartphones.
I don’t want to discuss how code is written here, but although I am not a huge fan of CSS Preprocessors, I do feel they can give you additional “rules” that can be used: for example regarding colours, or by applying basic math to units.
Photoshop
Although you could argue that Photoshop can base certain things on rules (Layer styles / blending options), the process of designing in Photoshop does not involve explicit rules. Which is one of it’s biggest strengths compared to CSS.
> Yet their strength and their speed are still based in a world that is built on rules. Because of that, they will never be as strong or as fast as you can be.
> — Morpheus
As mentioned before, when designing using HTML & CSS everything that you create has to be based upon rules. While designing – especially when trying to come up with a visual language for your project – your head might not be ready to output a list of rules that your design is based on. If an element needs three borders on it, you don’t want to figure out how to make that happen in CSS, you just draw a 3rd line and you’re done. All these things that make CSS great – responsiveness, feedback, states, positioning based upon rules – don’t matter yet, at all. What does matter is that you visualise the ideas in your head and can experiment without any big restrictions. Focusing on these things now is probably premature.
The full scope of design
It’s important to realise that Photoshop doesn’t naturally cover the full scope of designs for the web, which is also why learning a bit of css to present and explore these concepts would probably benefit designers working in web.
Designers writing code, however, is not a goal on itself (although it’s certainly convenient), it’s about being able to communicate the design in the best way; If there was an application which did cover all these aspects then it probably wouldn’t be necessary.
Wrapping up
Depending on your project, you may or may not need a lot of visual exploration. It is possible that the style you’re going for would be best explored using HTML & CSS – I believe Quora was designed this way. If you’re not sure of your visual language yet, you might want to start out in Photoshop because it makes exploring so much easier. Once you’ve got your style down, it might be a good time to switch to CSS and think about behaviour of the elements that you’ve been designing, because behaviour is just as much a part of the design as putting pixels in the appropriate places.
