Designing in the Browser

Yes, you can design in the browser. Yes, you can design in Photoshop.

When we say “design”, we are really talking about visual idea generation, aesthetic exploration and layout. The reality is that you cannot produce a website without getting into the mark-up and most websites require some level of image manipulation from a graphics program, such as Photoshop. The debate, on some level, is really on where we start the process.

It’s a hot topic, and like all hot topics there seems to be heated debate from both sides with little discussion on the obvious, compromise. The greater reality is that you can do whatever you want; you can design wherever you want. Design in Photoshop, design in Fireworks, design in the mark-up or simply design on a napkin. The important element is that your design be successful. And remember … success is a result of creating the highest quality deliverable through the most efficient use of time.

We absolutely design in the browser, but we don’t ever start there. But hey, that’s just us. It’s not an agency thing, it’s not a corporate policy thing, it’s not a cultural thing … it’s purely personal. We believe in being unique and creative to design an experience that is interesting, informative and intuitive. We do this best in Photoshop, for better or worse. However, once we’ve established a visual design direction, we almost always extend those concepts by working directly in the code.

Let’s Have Some Fun

We’re a forward thinking progressive bunch; so, if you’re all going to rant and rave about something, we’re certainly up for giving it a shot. Our own Dave Desandro decided to take on this challenge when designing the recently launched BeerCamp website. It’s a playground for pushing HTML5 and CSS3 (sorry IE users), but it’s an experiment on designing in the browser. No Illustrator, no Photoshop, no Fireworks, no graphics, no images (except for those pesky sponsor logos). It’s all code, everything! It’s ridiculous, it’s impractical, and it’s bloated … but it’s amazing; amazing in the context of what can be done, the possibilities.

Take a look for yourself, http://sxsw.beercamp.com, be impressed, be disgusted, be confused or even be inspired. Above all else, be someone who not only thinks about the topic of designing in the browser, but the technologies that might better allow us to do so and that impact on our work.

We often design in Photoshop in pursuit of developing an experience beyond that of the browser’s default visual display … but just maybe, designing in the code will change how we think about design. Design in the browser, design in Photoshop ... we simply don’t care where you do it or even where the members of our own team do it. The most important element is that we understand the code and the implications it has for the experiences we are designing for. Design for a brand, design for an audience, design for a medium … but design it wherever you want!