Photoshop’s Role in Web Design

A new trend is emerging in web design: developers who bash the idea of using Photoshop to design web sites.

Lately, I have heard several different people extolling the belief that less design should be done in Photoshop and more should be done “in the browser”. Recently at WordCamp Maine, Sang-Min Yoon , a web designer & front-end developer, gave a talk called: Designing (Deciding) in the Browser.

Full disclosure: I was not at WordCamp (although DeAnne Curran from our firm was there and part of the design panel), but I could tell from Twitter, and even some e-newsletters that his talk had struck a nerve. Additionally, this anti-Photoshop rant has appeared on some Responsive Web Design forums and groups that I’m involved with.

Whenever trends like this arise, it is an opportunity to reflect on one’s process. But it’s not always best to take them to the extreme.

4 Ways to Use Photoshop Responsibly In Web Design

I think it’s critical that we understand the benefits of Photoshop and the potential drawbacks of designing completely in the browser.

If you view Sang-Min Yoon’s, slides, you’ll see that he is not suggesting we all stop using Photoshop. In fact, he said that plans to continue to “make SOME of the design decisions” in Photoshop and “make MORE of the design decisions” in the browser.

1. Use every medium necessary to develop the best design

We think differently when we use different tools. Ever heard the expression, “When you have a hammer, everything looks like nail.”

When we use a combination of different media and also the medium we are most fluent with, we are most likely to do our best design work. Some web designers still start with pen and paper, and that can be valuable. Some web designs pull in elements from Illustrator. Many people like Photoshop.

This reminds me of an argument I heard frequently in design school. Several of the professors insisted that we start all logo designs using pen (or pencil) and paper. Everyone knows (and knew then) that a high-quality logo needs to be finalized in a vector-based program to be able to be fully scalable. That generally means Adobe Illustrator. So many designers and design students jump onto Illustrator and start generating rough designs. But the design professors insisted that we use a different medium for developing at least some of our sketches and initial ideas.

If you read about the great designers of any age, nearly all of them use pencil sketching as part of the process. So the medium that you start with is not the issue.

When you are in the design phase, you want to develop options quickly and not at full detail. In the early, iterative design phase, use whatever medium works best for you.

2. Beware of the defaults in all of your tools

To create visually compelling, distinct designs, we need to get ourselves to think outside the box. However, in the commercially-driven world of web design, we often rely on pre-defined processes or routines to be able to get a web project from start to finish efficiently.

If you’re a designer who can design quickly in Photoshop, that may be your favorite tool. (And remember Sang-Min Yoon was not saying to abandon this step). But the risk is that you are creating designs that are not really functional in the real world of browsers-on-infinite-devices. For example, you do have to set a static size for your design file which does not show you the way your design will adapt to different sizes. Or, you may use fonts that are not available on mobile phones, etc.

On the other hand, if you decide to go right into HTML and start building out your design in the browser, you’re likely to rely on some shortcuts that are equally dangerous. You may pick up a pre-built template to help flesh out the page structure. You may build off an existing style sheet, and limit your design thinking. Your coding skills may not be strong enough to execute what you want, so you cut corners.

Every tool has defaults, whether in the piece of software, or in our brain.

3. Consider the whole process, even in the design phase

I’ve heard of web developers who complain that designers turn over design files that would be “impossible” to code. The problem is not that they used Photoshop, the problem is that the designer doesn’t understand web design.

Here at Visible Logic, we only show mockups of designs we know we can produce. We are able to do this because we have a tight team of designers and developers and each person, at some level, understands the complete process. We also design and develop the web sites internally as a small, smart and well-connected team.

Related to this, is understanding the scope of the project. For example, we design simpler low-cost web sites for startups, but also design large-scale web sites for growing companies. We build all our sites in WordPress which is incredibly flexible. However, if we’ve quoted a basic web design for a lower cost, we need to keep the project simple and workflow efficient. We are not going to suggest design options that would require a large investment in development time to execute. If we have a project without those scope limitations, we will show options that might require much more development time on the back end.

4. Explain the mockups

Nearly every web design firm follows a similar process where you show some sort of “mockup” to your client before you build out a web site. The idea is to efficiently demonstrate a sample of what to expect and get approval before doing all the work to complete it. This just makes sense.

As designers, we need to educate our clients on how “finalized” the mockup is that they are approving.

If I were to show a pencil drawing to a client, there is little question that it is not the final version. However, when people see a slick Photoshop-built (ie image rather than HTML) comp, it can be hard to understand that this is not really final. Clients need to understand what changes they can expect from the mockup to the execution.

Designers are used to this, we may use a stock image in place of custom photography that is not yet complete. We need to take this same type of approach when showing image-based mockups that will need to be adjusted for multiple devices and browsers.

Photoshop supports content-driven design

For us, at Visible Logic, we find that Photoshop-based mockups are the best way to efficiently show our clients what to expect. After the Photoshop step we continue with browser-based implementation and making many decisions there. But Photoshop is not going away, yet.

Most importantly, I think it’s because we’re so focused on content.

This is where I have a disagreement with Sang-Min Yoon’s presentation. There is nothing specifically about Photoshop that forces content to play second fiddle. There are a lot of developers out there who develop directly in the browser who have no understanding of how to make content engaging.

Making content readable, viewable, usable, shareable, fill-out-able, clickable, etc. is about using design effectively.

It means looking at the limitations of the space, the priorities of the elements, the hierarchy of words, images, color, etc. and figuring out how the user will interact with it. There are many paths and tools to use along the way to make decisions as a designer, as a developer and with your client to emphasize the right elements.

Photoshop is not the problem, just a scapegoat for poor web design.