Web design has taken place primarily in Photoshop for years, but as front-end development tools have matured, more and more design is taking place in the browser. There is plenty of chatter for and against designing in the browser elsewhere, so here I’d like to offer a few pros and cons of walking down that path.
- Responsive design needs a responsive canvas. Seeing how your responsive design dances in the browser requires the ability to, well, change the canvas size. Designing in the browser allows you to quickly observe how the design changes with screen real estate.
- The Web is an interactive medium, and it can’t be fully designed on a non-interactive canvas. Interaction design is not a separate discipline in Web design; it is Web design. Designing in the browser allows you to visualize interaction as it happens.
- Web browsers offer more visual constraints than Photoshop. Knowing your limitations prevents you from having to rework a Photoshop visual treatment that can’t (or shouldn’t) be replicated in the browser.
- It’s easy to neglect the details. Using Photoshop means decoupling the high fidelity design work from “live” markup, which allows you to think exclusively about the design without rushing the process.
- Constraints are meant to be pushed, and designing in the browser keeps those constraints front and center. Designing outside the browser liberates you from the constraints of the browser, allowing you to push the boundaries with less hesitation.
- Sharing requires overhead. Not only does getting buy-in and sign-off require serving content to the browser, it also forces those decision makers to envision the future design as it gets polished – which is a big request for those not trained in visual design.
Personally, I still prefer to start the design on a whiteboard or sheet of paper, then move into Photoshop, and then move into the browser. I find it easier to manage expectations in an incremental way.
Where do you design? Photoshop? Illustrator? Browser? Why?