Photoshop 960 grid system

Using Photoshop in Web Design

There’s been a lot of talk recently about the tools we use to design the web. Correct me if I’m wrong, but the majority of designers use Photoshop. Brad Frost recently wrote a really excellent piece on what photoshop should be used for. But he is focused on the wrong thing. The tools you use as a designer are more about your process. Designers use tools to communicate ideas. As long as your ideas are received and understood the way you intended them to be, your tools are effective. So if tools are relative to the designer, it’s the process that becomes so much more important.

Process over Tools

If you didn’t know, design is about solving problems. You, as a designer, look at your client’s problems, mull them over for a few days/weeks and spit out what you believe to be the best solution. Your process during that mulling it over time is what makes your ideas good or bad. I’ve written about my process, but your process is probably different. Just make sure your process covers these things.

Goals - To solve a problem you have to actually know what the problem is. Talking about what you want the website to eventually do is how you articulate that problem. Make sure you have some way to discuss the goals with your client. I would even get them to agree to a set of goals.

Audience – Identify what your audience wants from the website and what you want from them. There’s so many ways to research this. Some are super simple and some are super in-depth. Whatever you do, just make sure that you’re considering both their needs and your needs. Without knowing both, your website can’t be successful

Some type of layout – Prototyping or layout is really just about making sure the important things are given the most prominent position. So whatever tool you use for this, make sure you show what is most important on your website and what isn’t. Also your client should probably be on the same page are you are about this.

Look and Feel – At some point, the client wants to know what their new website will look like. What you do to show them that is really dependent on the type of client you have. If you have a pretty savvy client, you could probably show them something like style tiles and you would be ok. Dan Mall talks about this idea in more detail. But for me, our clients have trouble seeing the big picture. So that’s what we have to give them. Either way, you need to help your clients anticipate what the end product will look like.

The Right Tools for Every Job

If you first think through your process, then making the choice for which tools you need will be much clearer. You can see which tools will make the most sense for you to accomplish the tasks that your process dictates. Just make sure to keep things simple. There’s no reason to spend thousands of dollars on software when a pencil and piece of paper will do the trick.

Here’s a list of tools.

Photoshop – There it is. Like I said before, the most common tool among web designers. This is a really great tool to get a feel for the style of your website. Use it for textures, graphics, button styles, whatever. It could also be used to layout your entire site, but be careful. Photoshop is static. It makes static stuff. That’s what it was build to do. We now have a dynamic and flexible environment. If you’re going to do all your layouts in Photoshop, you’ve got a lot of work ahead of you. I would reconsider.

Illustrator – I used this tool for a long time. It was just easier for me to create a box, give is some color and move it to where I needed it to be. But I’ve always been entranced by flat design so it was a natural fit. Illustrator can be good to put together layouts, or wireframes. It does give you a lot of freedom. But again, it’s static. You can create a bunch of art boards and copy and paste but your still stuck with static comps and a lot of work ahead.

Sketching – Yes with a pencil. I am a strong believer that there won’t be a better, simpler tool for thinking through an idea than putting your ideas down on paper. You can rapidly throw out ideas, reject them, and start new ideas with as little interference as possible. Sketching just has to be in your process somewhere, that’s all I can say.

Adobe Reflow – This is a new tool available with the Adobe Creative Cloud. It’s got some amazing potential to allow for responsive design. It could probably become the next layout tool of choice for designers and developers. At the moment it doesn’t look like it will replace Photoshop. It looks like it will be a layout tool and free up Photoshop to work as a graphic creation tool. To be fair, I’ve not had a chance to play with it yet, but I’m really looking forward to it. I’ll write up a review when I do.

Other Prototyping Tools – I’ve never really been interested in other tools that help me make boxes and buttons on a page. They might be really helpful, I don’t know. I’m sure a bunch of you can tell I’m wrong in the comments, but I’ve always thought, why jump on the computer and make lines and circles on a page when I can just as easily do that with a pencil. So, in general, I would say don’t over complicate it just because you like to work on the computer.

HTML/CSS – Yes it’s a tool, especially if you know how to use it. There’s a bunch of programs out there that designers use to simulate the experience of a website, but when you get down to it, they’ve all just faking it. Why not just use the medium in which it’s going to be made. When you use HTML/CSS you’re working in the truest of forms; the ACTUAL medium in which the product will be produced. What’s that, you don’t know HTML/CSS? Learn it. You’re a web designer for god sake. You might not be able to program an entire CMS or build a WordPress theme yourself, but you need to at least be able to make a simple HTML website and understand how CSS is used to layout things. Don’t worry about making mistakes or coding everything to standards. Just communicate the ideas. These are the basics and to design anything for the web you need to know how it works.

Web Designer’s Revolution

A large part of our community is from a print background. Some of us were forced here unwillingly; some of us came out of necessity. Photoshop (and InDesign) has always been home for us. But web design no longer fits comfortably in the 960px wide canvas we’ve been using. If you really sit down and look at it, Photoshop doesn’t even make sense as a layout tool. It’s named Photo Shop for a reason. In print, I wouldn’t layout a large brochure in Photoshop.

We’re at a point in web design where our needs are outgrowing the traditional tools we have used. Photoshop, on it’s own, can not communicate the solutions we have dreamed up. We need to focus on our process for arriving at those solutions and find better ways communicate them to our clients.

Just as we have to change, we have to retrain our clients. And clients will always want to see what their website will look like. It’s in our best interest to find a simple way to give them reassurance that we’re on the right path. Expectations are a powerful thing. Make sure they are working in your favor.

Before the revolution can begin, we need to take a step back and focus on the process we follow to create great websites. There’s more to creating a website than the tools that we use to comp it. Communicating the best solutions in a way other people can understand is paramount. The tool you use to accomplish that is up to you. Just make sure it’s simple and it makes sense.

Comments

  1. Sorry this discussion about photoshop really sucks because fireworks is the tool to realize webdesigns.

    • Yeah I’ve never really used Fireworks. I’ve heard a lot of people mention it. In my mind, Adobe Reflow replaces fireworks. That’s why I didn’t really mention it above. Am I wrong?

  2. “What’s that, you don’t know HTML/CSS? Learn it.”

    amen. :)

Leave a Reply

My name's Andrew. I like to make things. Better yet, design things. At the moment it’s websites for a company called Infomedia. I also take on a few freelance clients when I have a chance. WordPress is my main tool at the moment. These are all the places you’ll find me on the web.