It's no secret that a large percentage of web design projects start directly in Photoshop
. You'll find tutorials in every school, program and blog about how to create a website design in Photoshop, and it's a favorite tool in the belt of many web designers. In this post, you'll discover why designing in Photoshop is killing your understanding of the web
Photoshop was designed for images
Photoshop was created primarily for editing photos. By relying on an application that was designed to edit moments captured in time, you are limiting yourself to thinking of a website in terms of a snapshot or a static canvas. This does nothing to build an understanding of some of the most important elements of a website such as designing interactions with website elements (e.g. hover effects), or getting a feel for what an experience might be like across different browsers and devices.
Photoshop's tools weren't made for websites
This means you are limited to using tools that were designed specifically for other purposes. Does this mean they don't work? No. But applications like Fireworks
(still a favorite of many designers), Edge Reflow
, and Macaw
were made with the web in mind. You might find you get better results by using applications that were intended from the beginning to be used for the web.
It makes it easy to get too detailed, too quickly
You aren't creating a website in Photoshop. You are creating a picture of a website. And when you spend hours lovingly crafting every detail, it's easy to forget what you are making won't stay that way, and it's hard to let your vision go. And let go you must, because the reality is that with the hundreds of different screens
, devices, browsers, and operating systems that people will use to view your design, it's impossible to achieve that pixel perfection.
are an excellent way to create a solid visual design while not getting too bogged down by details too early in the design process. They can also save you a lot of time by presenting multiple ideas
without wasting time designing multiple layouts for designs that will never see the light of day.
"You'll have to rip Photoshop from my cold, dead fingers"
If this is what you are thinking right now, rest assured that you don't have to give up on your beloved Photoshop. Photoshop is an amazingly complex and powerful application; it can be a great place to establish a design direction, and is essential for creating design elements.
You only start crippling yourself if you rely on it as your only tool to create a website design, or if you do most of your planning directly in Photoshop. For example, it's hard to picture how your design will work in the context of a drop-down menu, or when filling out forms, or a hundred other types of user interactions
. Good design is essential for these elements as well, and that's hard to capture and plan out on a fixed canvas.
Does this mean you should never use Photoshop for the web? No. But it does mean it can be helpful to spend less time in Photoshop, and spend more of your time refining a design with something that better represents a website, like a prototype. Every person and situation is different, so the best tool may not always be what is most commonly used. Experiment and test new methods, and you may just find that there is a better way for you.