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?
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.
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.
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.
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:
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.