Big question: should we design in the browser from the start?

Ross Bruniges
nature.com

Designing in the browser is a great thing if you’re responsible for designing and then developing a site, at least developing the frontend. Unfortunately outside of small startups, design shops and individuals, these two skills are normally never as close-knit.

If you work with a design department, or if you have specific designers on your team, then designing in the browser means that these designers have to be able to code, or at least hack the frontend stuff; and in my experience this isn’t a very common thing. Some designers want to stay away from code, some just don’t know it. This can lead to an already overworked frontend dev having to help out, fix and more than likely make these designs in the browser. And that’s just a broken process that leaves everyone wanting to pull their arms off. 

In a perfect world, things would most certainly be designed in the browser. But unfortunately at the moment we’re not living in such a world. So for the large majority, designing in Photoshop and then having devs make quick prototypes is a far smoother process.

Ross Bruniges is a web developer at Nature
 

Jonathan Smiley
zurb.com

The greatest advantage to designing in Photoshop is the lack of constraint – we’re free to try wild things that might not be expedient if we’re already concerned with code. I’d say do some work in Photoshop if you can, but move into code quickly to try out your design on different devices and make refinements to usability, flow, and yes – visuals.

Jonathan is a design lead at ZURB
 

Nick Francis
www.project83.com

I believe there are huge advantages to starting in Photoshop, and even a sharpie and paper before then.

To me starting in the browser is like building a house without the blueprints. You’ll go through a lot of unnecessary grunt work, coding things you end up ripping out, when in Photoshop you can experiment with new ideas in a few clicks.

I also think you’ll get a better visual design by starting in Photoshop. It keeps your focus on the creative side of the project and encourages you to add polish. When coding in a browser, we’ve found it’s much easier to move on before a visual element is ‘finished’, because it still gets the job done.

Photoshop is where your most creative work happens … the browser is only a means of execution. We don’t fire up the text editor until we’re ready to execute what we’ve already iterated and perfected.

Nick creates websites at Project83, a design agency in Nashville
 

Aral Balkan
aralbalkan.com

Design and development are two halves of the continuous, iterative process of product development. Design leads development, and development informs design. 

When making interactive products, it makes sense to design in an interactive medium using the very same materials that will comprise the final product. This is what designing in the browser is. Designing in the browser does not replace sketching on paper or mocking up ideas in tools such as Photoshop or Illustrator. It is, however, a powerful tool that complements these more traditional, static methods. As such, designing in the browser should be part of your toolset as a user experience designer who makes web applications and an essential part of the product development process for web applications. 

Aral is a designer, developer, professional speaker, teacher, and author of the Feathers iPhone app
 

Chris Coyier
chriscoyier.net

Getting into the browser as soon as possible in the design process is a good idea. Ultimately HTML, CSS and JavaScript are the output of a web designer and these tools can shape the design just as well as the Rectangle Tool, Eyedropper and Character Palette. And then because by working in the browser you’re working on the final output, you’re saving time, since when you’re done, you’re done. There is no additional conversion step.

That being said, I still personally start in Photoshop. For whatever reason, maybe it’s a left brain/right brain thing, I feel like I’m more creative while working in Photoshop. But once I have something I like starting to take shape, I jump ship over to code.

Chris is a web designer working at Wufoo
 

Mike Buzzard
www.cubancouncil.com

It’s been my experience that designing within the browser can unintentionally influence design, making it too ‘safe’. Letting design occur outside of the boundaries and constraints of the browser environment allows designers to repeatedly push and challenge the implementation process, which in turn ends up sparking evolution in the browser environment that would potentially be missed otherwise.

Mike is a partner member of Cuban Council
 

Andy Budd
clearleft.com

The argument for designing in the browser seems very seductive at first glance. The web is an interactive medium that defies the fixed canvas of traditional layout tools, so why not use the browser as your primary design environment?

The reason is simple. The browser was intended as a delivery mechanism with HTML and CSS a means of describing content rather than defining it (a subtle distinction I know, but an important one). As such the browser lacks even the most rudimentary tools, such as the ability to draw lines or irregular objects through direct manipulation. Instead this process is heavily abstracted through code. As the best design tools are the ones that put the smallest barrier between the creator and their creation (the pencil is a good example of this) designing in the browser adds an unnecessary level of craft to the process.

Despite the ability to create rounded corners, drop shadows and gradients in CSS3 (along with even more sophisticated effects using SVG and Canvas) it’s still preferable to present your richer design details as raster graphics. So designing in the browser forces you to do graphic production in one tool and then design layout in the other. Not only is this an inefficient process but it’s also the wrong way round. As such, ‘design in the browser’ encourages a minimal design aesthetic based on the rendering capabilities of CSS. This may be acceptable for a small number of companies such as 37 Signals, but I don’t believe this is desirable in most situations.

People seem to be treating ‘design in the browser’ as a new idea, but in the early days of the web this was the norm. So it was only through the act of co-opting existing design tools like Photoshop that the quality of design on the web was pushed forward. Now I’m not saying that ‘design in the browser’ will relegate us to 1999-style websites, as both the technology and our aesthetic abilities have moved on, but I do think it’s a step backwards rather than the great leap forwards as many people are suggesting.

This doesn’t mean that I believe that Fireworks or Photoshop are perfect tools and I’m fully aware of their inherent problems when it comes to the fluidity of the web. I just think that on balance and in most situations, these tools are the least worst options we have available. That's not to say that all design must happen in Fireworks/Photoshop, or that no design should happen in the browser. After all I work for a company that believes in the power of HTML/CSS prototyping and does responsive design by default, so understand that a certain amount of back-and-forth is inevitable.

Until our tools evolve, traditional graphic design tools such as Photoshop and Fireworks will remain the natural jumping off points for the majority of projects for many years to come. Designing in the browser isn’t the magic bullet many in the industry want (or are promoting) it to be. However I do think it’s a useful signpost in what should be the true quest for a truly native web design tool.

Andy is managing director of Clearleft
 

Trent Walton
paravelinc.com

I still like Photoshop for managing ideas and iteration. It’s easy to experiment with layout and hierarchy, and I often find I make happy mistakes while pushing things around. However, now that most (if not all) the sites we work on at Paravel are responsive, Photoshop doesn’t suit us as anything other than a starting place. Now, the most exciting part of the design process takes place in the browser. Architecting the way layouts change and scale at various widths has quickly become our favorite part of the job.

There’s also something to be said for accurately representing your work during the approval process. If a layout is approved as a .jpg, then viewed in IE6, that could present a problem. If a build is approved in the browser, then you’re golden.

Trent is founder of Paravel
 

Harry Brignull
Clearleft.com

This month’s big question implies that there are two main choices – either start in the browser, or start in Photoshop. This ignores the fact that there’s usually a load of design activities happening upstream, such as ideation workshops, user-interface sketching, wireframing and low-fidelity prototyping. 

If as a frontend designer you find you’re only being brought into the project after this stuff is done, then you’re missing out big time! You need to take a long hard think about why this is happening – is there a problem with the way your organisation plans projects? Is it because you lack the confidence to put yourself forward?

Harry is a UX designer at Clearleft
 

Rachel Shillcock
www.rachilli.co.uk

For me, it depends on the brief. For sites that have more of a minimalistic and simple concept and are stripped right back then I don’t see the problem in designing in the browser from the start. Apps such as the brilliant TypecastApp are also helping this, by helping you to use web fonts and design how you would like these to appear on the websites.

However, if the website you’re designing has a specific guideline for brand, colours and style then to a certain degree I think you’d need to work on mockups in Photoshop to get an idea of the layout and style you want to create.

Rachel Shillcock is a freelance web designer
 

Anna Debenham
Maban.co.uk

The first step in using software like Photoshop is to decide what width the canvas should be. The web was always fluid, but using tools intended for print design has restricted us.

Designing in the browser isn’t ideal either, particularly for designers who aren’t confident writing HTML and CSS, or who feel they are faster at producing mockups in design software.

Until tools such as Photoshop reflect the browser environment more accurately, designers who use them need to produce mockups that properly illustrate how the site responds to user interaction, not just make pictures of static websites at one width.

Anna is a freelance frontend developer
 

Anna Dahlström
annadahlstrom.com

Whether to design straight in the browser or not is really a question of your team’s skills and preferred way of working. Not all designers need to be experts in CSS and HTML. For some their time and skills are better spent working in PS, closely collaborating with IA, content strategist and development to ensure that what is being proposed actually works.

Designing in the browser has real benefits in getting something real working early on, but this can just as well be achieved with a lean UX approach. Additionally, the advantages of having PSDs to refer to in terms of shared vision, particularly for future iterations, and leaving the pros to create clean markup should not be underestimated. As for ensuring that clients have the correct expectations that the PSD they see won’t look exactly like that across all browsers, that’s an education and communication piece we should be doing anyway, not the least considering the broad range of devices and screens.

Anna is a freelance user experience designer
 

Rob Walker
xcitedigital.com

It very much relies on your working style, and perhaps more importantly the available time and standards for the final product. Designing in the browser can lead to messy code – as with all prototyping, the idea should be to get something indicative of the final functionality only available as quickly as possible. However, reaching something in an approved ‘complete’ state sometimes makes it very difficult to go back and reconstruct it properly, especially if time is tight. Coding properly in the first place is potentially more time consuming when multiple changes are necessary, since refactoring/removal of superfluous elements properly after every change required obviously takes longer than just doing it the once.

From a more design perspective, changes and variations in imagery necessitate the use of Photoshop or similar anyway. Designing in Photoshop initially means that if images do need to be changed, design adjustments can be made to the general layout or size of adjacent elements and so on more easily without having to two and fro between applications to ensure they interrelate correctly. 

Again, while it very much depends on resources and specific requirements project (and even the type of client), my personal inclination would be to divorce the design and build elements of the process.

Rob is managing director at Xcite Digital