A few days ago on HackerNews, one of the top articles on the front page was entitled Make Your Mockup in Markup. As someone who makes a living by making websites for various clients, I couldn’t help but cringe at the thought of skipping what I consider to be an integral part of web design: the Photoshop mockup.
Why I Use Photoshop
I think I’ve used Adobe Photoshop nearly every single day since starting to freelance. I use it for making mockups for clients, hashing out conceptual ideas for websites or even brainstorming interface elements and blog posts. Photoshop lets me take an idea and turn it into something visual within seconds, with no limitations on where I place things or how they fit together. I can create a mockup for a client and if he wants to know how the site will look with the sidebar on the left instead of right, all I do is drag and drop the elements around. I can change the layering of elements on the fly or temporarily hide them, so my client can see exactly what to expect from the finished site.
Of course, you can substitute Photoshop for Fireworks, GIMP or any other image editor. Even if you just use a simple mockup program like Balsamiq, visualizing content placement and interface elements before starting to code can be a huge time saver in the overall scheme of things.
Understanding the Web Design Process
The article on 24ways takes a bunch of HTML content and starts to structurally lay things out, then adds bits and pieces of styling and “flair” to make it look semi-decent. Sorry, but this is not how web design works. To understand why I disagree with the author’s process, let’s take a look at what is involved in making a website.
When you make a website, you cater to several different people, including:
- The client your are designing for (aka the person paying you)
- The client’s existing customers (aka the people paying the client)
- The target market of the website / prospective customers (aka the people that may eventually be paying the client)
The product you create has to find the balance between the these groups and satisfy all of their needs. The process to create this product requires research and constant revisions (improvements based on feedback). You can argue that HTML mockups also allow for revisions, as you can indeed continuously update the code, however I’ve worked on projects where the client has asked for something completely different than the initial Photoshop mockup. After creating a completely different 2nd or 3rd (or more) mockup, the client will ask for bits of the first mixed with bits of the second. You can do all of this mixing and matching with HTML but it is much more time consuming. In Photoshop, I save every variation and mockup I create and each is separated into folders, so I can literally drag/drop bits and pieces around to create that ideal design the client is looking for.
Put simply, using Photoshop to create mockups saves me more time than creating them in HTML/CSS.
It’s More Fun Using Photoshop
As someone who has to make websites for the majority of the day, making or improving on designs in Photoshop is something I seriously look forward to. It’s a pleasant change from typing code or optimizing servers. Photoshop is my digital paintbrush and it lets me explore the million variations of an idea I have in my head in a visual manner - this is something that HTML and markup simply can’t do.
Don’t just take my word for it though - take a look at this video that the guys at Guestlist App have recently posted, it provides a great view of how a design changes and why Photoshop is so critical, especially in the early stages:
One of the arguments against creating mockups in Photoshop is that it’s essentially just an image - browser compatibility can completely throw your work out of the window when it comes time to produce markup. This is absolutely true and exactly why you, as a designer, must know your limitations and design intelligently. As a web designer, I know which browsers support rounded corners, which effects can be achieved using images and which can be done in CSS. I try to make my Photoshop mockups represent exactly what the client will see and feel (in terms of behavior) when they view the finished product online in a web browser.
I seriously hope web designers will not start skipping on this important part of the design process. Just compare the two different approaches - the one used in the time lapse above and the one used by the author of the 24ways article. If you were a client paying money for a website, which would you prefer your web designer doing? Which process encourages creativity, requires careful thought and constant revisions to get to that perfect design?
Edit: This piece sounds a lot like I’m advertising Photoshop. While it’s a great product, I have no connection with Adobe and am not getting paid for writing this. Use Fireworks, GIMP or whatever other imaging software you’d like - the exact tool is not as important so long as you’re using one!