Designing in Browser

I’ve only been a UX Designer in this industry for a short period. But the most important lesson I’ve learned so far is that as designers we need to be adaptable, because the web has many users with various ability, technology and expectations.

In this fast-paced industry, many professionals understand that evolving their design process is necessary as change is, and always will be, inevitable when it comes to the web.

My Process

I’m not saying that the way I do things is perfect, but any designer claiming to have the perfect process which fits every project and client is telling you and themselves, fibs. As designers, we must adapt to change and approach every project with the right strategy. Sometimes designing in the browser works, sometimes it doesn’t.

I started to design in browser in the Summer of 2012. The design agency I worked for at the time was moving towards implementing a mobile-first responsive design approach as well as providing our clients with something tactile as soon as possible in the design process to iron out any user experience issues we would miss by handing over a flat visual.

After almost five years of working in this way, in multiple environments, I can summarise my design in-browser process as follows;

 Step 1: Planning

Every project starts with information gathering. Understanding the stakeholders and what they need for the project to be a success is pivotal to ensuring that you’re not just designing something that is aesthetically pleasing but that you’re providing real value to the client and their audience.

Step 2: Low-fi Wireframing

Once we understand the stakeholder requirements, I use a content-first approach to consider how content could fit into different layouts.

There are plenty of tools available to designers to create simplistic wireframes. I tend to stick to pencil and paper and once a workable layout is achieved I will flesh these out into “grey-box” prototypes.

“In a project’s life cycle, talking about aesthetics should be one of the final items on the agenda. It’s simply not that important at the beginning (or even the middle) of the UX design process.”

 -  Zsolt Kocsmarszky https://logbook.hanno.co/why-designing-in-the-browser-is-the-way-forward/

Step 3: Creating a Style Guide

A style guide is an effective way of showing how different elements will display on a website. By using a framework, like Bootstrap or Foundation, I can apply colours, typography and design elements to match the brand guidelines provided by clients. This is all created using Sass so it is easy to change the appearance of elements by only making small changes to the code. This means that the process of getting the aesthetics right quick and painless.

Step 4: Putting the Design together

Once the layout is agreed upon, it can be coded up using a front-end framework. Identifying common layout patterns and keeping snippets of these handy can speed up the process.

Having the colours, typography and other design elements in your stylesheet from Step 3, means you don’t have to repeat any work.

The Benefits

It’s quicker

Using a front-end framework to prototype, allows me to iterate upon wireframes and design using the same tools (HTML, CSS and JavaScript).

Content First

Investing in content early in the process and fitting the layout and design around this allows for focus on what users are visiting the site for. Content. By prioritising this the User Experience will benefit.

Realistic Interpretation of the Final Product

Presenting work to the client in the browser ensures the can view and use their website in its natural habitat.

“Photoshop comps are the most effective way to show your clients what their website will never look like.” - Brad Frost (http://atomicdesign.bradfrost.com/chapter-1/)

They can see animations, interactions and understand the fluidity of the design and how this transcends different browsers and screen sizes. Ultimately, the client can experience these things in the same way as a user.

The Mobile First Approach

By not limiting your design to a Photoshop canvas, you can truly be flexible in your design. If someone wishes to see their design on a different screen it needs to be flexible. It would be an endless process designing for every possible screen size in Photoshop. I make use of the built-in responsive viewport tool in Chrome to test if layouts break at specific viewports and apply styles directly in the code to resolve this.

Designing with Restrictions

Sometimes it’s easy to forget about browser quirks, viewports and just how many links you can fit into your navigation when working with a fixed width canvas. Designing in browser lets you face these issues head on and resolve them as part of a flexible design.

The Negatives

Time

When implementing a new technique it can take a bit of time to get things right. When I started designing in browser it was a huge change in the way I worked and at first it took me a while to get used to it. Luckily, I started doing this while I was still a student, so I have had more experience now in designing this way than I ever had of creating visuals in Photoshop and then taking it to code.

You won’t design anything original in browser

I’ve heard this one numerous times from fellow designers when I tell them about how I work. I can understand the argument though. Many people who do go straight to code tend to create websites which look like work they’ve done before. Personally, I find that by concentrating on content and layout first it ensures the best possible User Experience and the design of the site will be based upon a strong foundation.

Considering trying this approach? Here’s a few tips I’d recommend from my experience:

• Find a Good Framework – this allows you to move quickly from wireframes into clickable prototypes
• Get a feature-rich text editor – this will streamline your design process
• You’re not reinventing the wheel – use appropriate tools to help you choose the correct colours and fonts
• Fill in the blanks – this is handy for playing about with image size/placement before introducing the final imagery into the website
• Inspect Element is your friend – Using a content first approach means you can get your mark up in place and tweak how this appears in your browser across multiple screen sizes