Why I don’t design websites in Photoshop
A lot of web designers use Adobe Photoshop to design their clients’ websites. Then, once approved, they hand off those files to a web developer to code into a fully functioning site. And that may be fine for them. They can be as creative as their little layer-slicing, eye-dropping, magic-wanding hearts desire.
It’s just not how I work.
Because I code my clients’ websites myself, it just doesn’t make sense for me to spend time creating a masterpiece in Photoshop, and then re-creating that masterpiece in HTML and CSS. I rather design and code simultaneously, bringing the website to life as my visionary unfolds. I have found there are several benefits to doing it this way.
The client gets to view mockups the way they will actually look in their final, real-world environment.
- how the buttons look when they hover over them
- how the design looks on a large desktop monitor and on a small laptop screen
- how a page with long content is executed and how one with only a few lines of text plays out with the template
Let’s address #1 first. With Photoshop mockups, the client might be presented with hover states (how a button looks when hovered), but it’s just not the same as taking your mouse over that navigation and seeing it in action.
And #2. It’s difficult to tell the width of a website when it’s presented as a PDF or jpeg. Is it a fluid layout (i.e. will the width change depending on the visitor’s screen resolution)? If it’s a fixed width (i.e. the width does not change according to the visitor’s settings), is it narrow enough for a visitor with a low resolution? For a visitor with a high resolution, what is appearing in the “white space” around the website (a detail often left off a Photoshop mockup).
Finally, #3. With Photoshop comps, often the best-case scenario is presented in terms of content length. There will magically be the same amount of content in both the main column and the sidebar, and it will be just enough so that there isn’t a ton of white space at the bottom of the visitor’s screen, but not so much content that the visitor has to scroll. Only one problem. That isn’t real life. Page content varies greatly from a couple of lines to endless paragraphs of text that leaves the visitor scrolling for ages.
There are no surprises after design approval.
While there are certainly ways to code nearly any design you can possibly imagine, some design elements, or specific implementation of certain design elements, just don’t work well on the web (or at least not using standards-complaint code, with as few images as possible, and with reasonable load times for your visitors). By coding the site as I design, I never run into a problem where I am unable to code something I dreamed up in Photoshop, because it’s already coded! And the client never has to fall in love with a particular aspect promised to them in the design phase, only to get their hearts broken during the site build-out.
By the same token, designers using Photoshop to create mockups don’t always have the same fonts installed on their computer as are available to websites via Google Web Fonts. That means the fancy fonts that sold you on the design aren’t going to be the ones actually used on your site. Or, they are going to be used, but as images instead of text (gasp! Don’t get me started on accessibility).
Why the sudden outburst against Photoshop for creating websites? I’m working on a project where I’m coding up a non-web designer’s mockups (I usually do both the designing and coding myself), and I’m finding myself facing some of the predicaments listed above.
This isn’t to say that Photoshop is bad. I’m a designer; of course I love Photoshop and use it all the time; just not for entire website composition. I’m just sharing how I work, why it works for me, and how it benefits my clients. What has been your experience?