Designing in Photoshop or the Browser?

There has been a lot of talk over the last year or two about how web designers should go about creating websites. The standard tool for creating the visual appearance of websites, Adobe Photoshop, is becoming less relevant as coding techniques become more and more advanced. The main question being asked is –  should the creation of a website take place in a creatively flexible program like Photoshop, or should it take place in the browser, the medium that it is meant to be viewed in as a final product?

Does it Have to Be All or Nothing?

The benefits of each design method are distinct. The ability to be extra creative (Photoshop) is balanced against the ability to see a design in its finished form right away (browser). Let’s explore both options on their own and then come up with a compromised solution that hopefully gives us the best finished product possible.

Designing in Photoshop Only

The most common method of designing websites has been to create a Photoshop mockup of what the site will look like, revise as necessary, and then move on to coding. The benefits of doing things this way mainly had to do with creativity – if you wanted great looking graphics, Photoshop could deliver if you knew what you were doing.

Key Benefits for Designing with Photoshop:

• More creative flexibility
• Ability to create graphic elements such as textures, shapes, lines
• Manipulation of images
• Ability to create unique layouts and iterations that would otherwise take a long time

Designing in the Browser Only

A new wave of design philosophy has emerged that puts more weight on the final medium – the browser – than the more traditional Photoshop method does. The design takes place with HTML and CSS first, skipping Photoshop and going straight to the code editor. It says, “If you’re going to design FOR the browser, and you have the ability to design IN the browser, why not do it?”

The key benefits of designing in the browser have to do with typography, taking advantage of preexisting toolkits, and implementing responsive design patterns.

Key Benefits for Designing with CSS first:

• Type is rendered accurately
• Ability to interact with the website immediately to get a feel for how things work
• Preexisting toolkits such as Twitter Bootstrap allow for rapid development
• Browser-based design put content first and simplify designs overall
• Makes responsive design easier

Is There a Balance?

Besides the fact that each and every project is going to be different and therefore require a different way of doing things, perhaps there is a balance between using only Photoshop and using only a browser to design a site. A workflow that is becoming more and more common in my recent projects is something like this:

• Create a logo, if necessary, using a sketchbook and Illustrator
• Create a mood board to explore the project’s visual direction including: color palette, background, typography choices for headings / body text, and HTML elements including buttons, block quotes, forms etc.
• Sample images (stock comps if necessary) and their treatment (borders, captions etc)

One Page Moodboard Approach

Essentially, we’re left with a one page mockup in Photoshop that includes all of these elements – logo, navigation, headings, body copy, buttons, images, etc. They are put together in a way that isn’t necessarily a homepage, but represents the look and feel of the website as a whole. Any necessary background images can be sliced from this file, and it is something tangible that the client can approve.