The 80/20 Hybrid Approach to Designing in the Browser

by Tom Kenny (@tkenny)

Designing in the browser has been a point of discussion for a few years now and still is. With the web design world switching to flat design, designing in the browser has been seen as the future, but it is really that effective?

The Search for Speed

The driving force behind designing in the browser is the desire to improve the speed at which we design and build websites in a responsive world where we can present our work to clients/bosses on multiple devices.

It’s a search I’m fully behind but we need to be careful about not degrading the quality of our work just for the sake of speeding it up. There needs to be a balance.

The 80/20 Hybrid Approach

If you’re building the design you’ve created, I find an 80/20 hybrid approach is the most effective way to get to a finished website without sacrificing design quality. Simply put, it roughly works out like below:

80% in a dedicated design tool / 20% in HTML and CSS

I still like to use Photoshop to get to the closest possible point to a finished design because it’s the fastest way arrive to a point of good quality work. I really like the way Dan Mall expressed this in an interview:

The value of Photoshop for me has always been that it’s the path of least resistance to the most expressive result. It’s a great tool for me to quickly get to some useful approximations.

Sure, designing in the browser can be faster than designing and then building the website separately but you will likely find that you’ll sacrifice the quality of your design work.

Unless you think and dream in HTML and CSS, designing in the browser puts an unnecessary barrier between your great design ideas and the most effective way you can actually design them. You can’t manipulate your design directly with code. The HTML and CSS code effectively acts as a middleman between your brain and your design work. Why would you want something getting in the way of that?

I’ve tried designing in the browser many times and often find the results to be a bit dull because you just don’t have anywhere near as much creative freedom as a tool like Photoshop gives you. In fact, many of the complaints about flat design when the trend began was blandness which coincides with the design in the browser movement. To me, it’s no coincidence and the two are related. Attempts at designing in the browser are unfortunately contributing to the blandness.

That’s why I’ve been sharing Photoshop productivity tips (latest here and here) recently and will continue to do so unless something better comes along. Until then, we have to make our tools as invisible as possible so we can concentrate more of our thoughts on the actual design work itself.

Tweaking the Final 20% in the Browser

This is where CSS shines. You’ve already reached 80% with your choice of dedicated design tool and you’ve already written the HTML and CSS. Now it’s time to make tweaks or even any additions to the last 20% of the design work through the power of CSS.

What about Style Tiles?

Style tiles was another much praised approach which seemed as great to me initially as it did to everyone else. In practice however, it’s difficult for clients to visualise the end results no matter how many pieces they can see. This is what I’ve found from my own experiences, talking to other designers and researching what others say online.

A style tile won’t show a business owner how a customer uses certain features of their website and a wireframe still leaves too much to the imagination.

The only time a style guide has really worked well for me was when I was part of an internal team. They are probably best utilised as an internal tool for yourself or a team to pull from, and not something to show the client unless you present it to them alongside your designs to give them something to use going forward.

Additional Notes

It’s very interesting to see the design process of the UK’s Government Digital Service team who don’t use a dedicated design tool. One point stuck out for me:

Lots of the big graphic design decisions have been made.

That sure makes designing in the browser easier. I can see how they’ve made that work for them when that has been set as a foundation.

Your Thoughts

Like any process, this won’t work for everyone but I thought it would be useful to share part of my process and why it is the best way for me but I would love to know your thoughts about it and what you do. Simply let me know on twitter @tkenny or send me an email and I’ll add any anything interesting to the additional notes.

Improve Your Eye for Great Design

Learn why the best designers make the decisions they do to design successful websites people love in this FREE eBook with 3 in-depth case studies. I’ve spent hours studying what makes these websites amazing, so you can use what works and focus on your design work. Subscribe now to get it immediately.

100% privacy. No spam. Completely free!

by Tom Kenny

I’m a freelance web designer and front-end developer with over 7 years of experience designing for the web. Follow me on Twitter here.