Mailbag: Do you still use Photoshop mock-ups?

Every now and then we are asked great questions through the Viget contact form. Sometimes the questions are worth responding to publicly through our blogs. This one comes to us from Anthony.

[Anthony]: I just wanted to ask you guys what you thought about the idea of eliminating Photoshop from the design process in favor of designing in the browser.

[Tom]: It's an interesting question and one that touches on some healthy debates we have. We're still partial to using image editing software of some sort as part of our design process. Our preference is Photoshop but there are others like Illustrator and Fireworks that we utilize from time to time. That said, we are prototyping more and more alongside static comps to illustrate intended behaviors without having to commit too much time into either. As animations and transitions become more integral to the work we're doing it's helpful to have references to demonstrate our intentions. We simply can't fully sell our vision if we don't have something to refer to. This is becoming more common and we are spending more time in HTML, CSS, and JS to help us with this.

Similar to your question, you might ask, "Why not combine the two and just design in the browser?" One reason is that we just haven't seen many extraordinary designs done this way. We're looking for designs that go beyond style and function and further into the emotional and communicative side of design. In other words, we're mostly seeing decorative design with simple colors, patterns, and surface level treatments by those we've seen designing in the browser. We believe that design needs to communicate so much more especially as it relates to brand promise. We believe our clients come to us wanting something more. So we spend more time thinking about narrative which often equates to designing less piecemeal. Storyboards, sketches, and image editing software are good tools to help with the type of storytelling we go for.

We are, however, trying to learn from those who are experimenting with moving to the browser earlier in the client approval process. I have personally found Matt Griffin's ALA article "Responsive Comping: Obtaining Signoff without Mockups" to be intriguing. I anticipate we'll begin to test the waters more as we begin to see successes from others and build up more of a comfort level ourselves. Until then, our designers love image editing software for better or for worse. We have found more opportunities to get in the browser earlier with projects that are large interfaces with lots of views versus smaller one-pagers or microsites that are intended more for marketing or otherwise aspirational purposes.

One recent example of doing more design in the browser was with our recent redesign of the World Wildlife Fund website. With that project we did a few comps to get things started. The site was far too vast to comp every page so we built a visual design system consisting of very intentionally designed elements. Using the initial comps as a guide we were able to grab various components from the parts kit and create pages on the fly. Once we had pages put together we were able to make small tweaks as needed to ensure the integrity throughout. This approach is more common with larger websites, applications, and sites designed responsively. You can read more about our work with WWF in our portfolio.

We'd love to see some good work that was done without image editing software if anyone has any to share. Post any links as comments below.