Designing in the browser is becoming more and more popular with the rise of “designers who code”. But just because we’ve picked up some new skills does it mean we should ditch our paper, sharpies, desktop publishing software and wireframing tools and jump straight into coding prototypes?



Browser vs. Photoshop is a Hot Topic

If you’re working in the digital space, with designers and developers, you will have seen the rising trend in designers being expected to have (some) coding skills.

Many people are all for it, whilst some believe that designers shouldn’t touch code. However, those designers that do code are getting more confident and some are even arguing that designing in Photoshop is no longer relevant in certain scenarios.

I’m of the opinion that creativity is tool independent, but I can see the benefits and drawbacks of both approaches in isolation (I’ve listed them below, so you can get my perspective on the discussion).

In this article I use the term “Photoshop” and “UXPin” loosely. I am really referring to any tool of this sort, whether you use Sketch, Balsamic or something else! The same argument applies. Photoshop and UXPin just happen to be my tools of preference.

Going Straight into the Browser

Copyright © 2013 Olle Svensson Attribution-commercial-Share Alike 2.0 license

A common situation in which someone in an organization might design in the browser is if they are skilled in visual design, but are also comfortable coding. For example, the purpose might be to communicate to a developer building a CMS what the design will look like. A PSD would be suitable, but the designer might feel like it would be more valuable to show all of the extras, such as animation and responsiveness in a way that is closer to the final build.

Benefits

Frameworks such as Bootstrap and Foundation make the process quicker. In my experience, it’s good to actually learn how to code from scratch before leaning on frameworks as you will learn what’s going on behind the scenes.

Learning to code front-end reduces the amount of bottlenecks, especially if your team is heavier on the design side. You can let the developers focus on more of the challenging aspects of development and specialist areas.

Drawbacks

Designing in the browser can be a bit slower if you’re not confident at coding. In my experience, it can pay to enrol in a front-end development course, and try your hand at some freelance gigs such as building a simple landing page.

This process may shift designers’ focus away from their core strengths. Yes, it can be good to have coding chops. However, some people argue that the division of labour (people focusing on very specific tasks) leads to greater efficiency in production. The realities of the market (and flexibility sought after in the digital space) may lead to people arguing otherwise!

Designing in Photoshop/UXPin

Copyright © 2013 Serg Kij Attribution-commercial-Share Alike 2.0 license

Desktop publishing software such as Adobe Photoshop and Software as a Services (SAAS) such as UXPin are just a couple of many tools that are the bread and butter of designers. Even designers that can code and often design in browser will find it valuable to plan things out using these tools first.

Benefits

Graphics applications are great in the early planning and research phases. In my experience, paper and sharpies are quick and dirty ways to quickly flesh something out.

Wireframes can be a good way for a business analyst or other non-visual stakeholder to communicate basic meta data. Designing in a browser would probably be overkill as the goal of at this stage is to generate something loose for discussion.

Planning and forethought with lower fidelity mock ups may lead to a considerable decrease in development time.

Drawbacks

Designing for the responsive web can feel repetitive in Photoshop and not translate realistically to what the actual build will look like. In my experience, it is easier to tweak your media queries by eye for different devices, getting real time feedback of what the actual build will look like, rather than producing a number of speculative mock ups in Photoshop.

There are hard to recognise technical limitations when designing in Photoshop. For example, once I was designing a landing page for a client. It featured an email capture box, which later became very hard to design due to the complexity. In the end I “designed” in the browser the lazy way, which was much more practical.

Conclusion

Creativity is tool independent. Working directly in the browser confronts you immediately with possible limitations and helps you evolve your design. However, in my experience it’s no substitute for an early cut in UxPin and Adobe Photoshop. These approaches aren’t mutually exclusive either. I use Adobe Photoshop a lot, even when designing in browser. These days it also has some great extensions to help you code much more efficiently.

Are you a designer that codes? Or do you prefer to do your mock ups in desktop publishing software such as Photoshop? Leave a comment below!