Why I use the browser as a design tool

  • 5 min read

When I wake up, I take a shower, grab some breakfast and read some articles I find interesting on my phone or today’s newspaper. I grab my keys and drive to work. After a few meetings, some user research, planning poker sessions, lunch and a few days I find myself stuck in the same situation as always, designing or developing UX at my desk on a big screen via a program and device that the user I’m designing for will probably never use.

It’s that situation that kept bothering my for a while now, because it doesn’t make sense. For example, when you design an iPad webapp that reads bedtime stories to children. The changes are, you’re probably not designing that webapp at dawn in bed via a mobile device, right? The only thing you probably did is creating an artboard in sketch with the dimensions of an iPad and view this via sketch mirror on your tablet, at least I would do that. To better understand or interpretate how the user will use your product and resulting functionalities I wanted to immerse myself in a situation that would be most likely for the user. Because the UX of the same product in both situations is largely different, but yet the same. It are the basic functionalities that won’t be much different in both situations, but the shape of those functionalities can be very different. But most of all it helped me to better interpretate how a product works.

So I decided to set-up the basic functionalities in sketch and fine tune the output on a device or browser in a situation that’s more convenient to the user. I started fine-tuning the design on a browser via devtools(chrome). You can view the documentation of chrome devtools here or read a blog on how to use it as a beginner. On a browser you can directly view how your product handles with responsiveness, font-rendering and certain functionalities. You can play with the font-size or alignment of elements and simultaneous scale your design to different dimensions. It helped me to understand how the user will actually view your product or functionalities when it’s finished. It made me feel if I was actually designing less static and more dynamic elements. Plus it helped the development team make the communication between design and development more efficient.

Designing in the browser has become a default step in my design process. I prefer to design a product on devices and in environments that it will probably be used in. I understand that it’s not always possible to be fully immersed in that situation, but it’s the thought that already helps. It helped me to start designing in the browser on different devices and sometimes immerse myself in that situation. It helps me to understand how a product is going to work in different situations and on different devices.