A Smarter Workflow: Designing in the Browser
In the early days of web design, when sites were beginning to show visual appeal (as opposed to the former stark white page, or horribly tiling background and blue and purple links), Adobe Photoshop was designers’ software of choice.
The Workflow of Yore
The workflow for web design generally looked something like this:
- The designer creates mockups of how the site will look, using Adobe Photoshop or Illustrator.
- Iterations continue in that format until everyone is happy with that look.
- Version 1 of the website gets built in HTML and CSS. Usually, this is when ‘slicing’ occurs, where a Photoshop file is sliced into smaller images to then be reassembled on the site.
- Once the team sees the site in the browser, minor changes that didn’t show up on the one page ‘ideal scenario’ mockup begin to rear their ugly heads and need to be dealt with. Often, these are just cross-browser and cross-platform issues; but some details don’t make it to the comps. (eg. Is it a fixed size or liquid? Is the design centered or parked to one side? Does anything scale or is it all one size regardless of format?)
- Browser-based revisions then take place until the site is pixel perfect.
- Additionally, the original mockups may need reworking and re-slicing and replacing on the browser.
This strategy got results; but as you can imagine, it’s not the most efficient process.
It is still a common workflow today, but with the introduction of “responsive design,” which optimizes a website to be viewed correctly on all devices (desktop, laptop, tablet and phone), the shift towards designing directly in the browser is becoming common place.
You’ll still need to create your image files in Photoshop, Illustrator, or the like; and you’ll still need to wireframe. But if you can go from there, straight into a browser based mockup, you’ll be a step ahead of the game.
Why Design in Browser?
- You cut your workload in half by eliminating the need to build in two formats
- It’s hard to visualize in a Photoshop mockup how the site will look on screen, in various screen sizes, OS, browsers and devices; and this leads to more time spent on iterations and adaptations after the initial site build
- Your client can view the design cross-platform, etc, and get a much clearer demonstration of user experience
- Changes can be made quickly; if the client wants to see a different color or swap a typeface or treatment, it is generally a much faster to change in HTML/CSS, versus Photoshop
- In Photoshop, the emphasis is on style rather than content; and it sometimes makes more sense to upload content and build a style that works with it, rather than the reverse
How to get started
Depending on a designer’s experience with coding, there might be a bit of a learning curve to consider, but there are a number of helpful new web development tools like Froont, Adobe Edge Reflow, and Macaw to assist in the design-in-browser process — especially for designers without much experience using HTML or CSS.