Flag

We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Get exclusive access to thought-provoking articles, bonus podcast content, and cutting-edge whitepapers. Become a member of the UX Magazine community today!

Home ›› Business Value and ROI ›› 6 Key Questions to Guide International UX Research ›› Building a Better User Experience by Designing in the Browser

Building a Better User Experience by Designing in the Browser

by Jared Rogers
7 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

Designing in the browser makes it easier to set realistic expectations with clients and creates working comps that are ready to test with users.

As a web designer at Four Kitchens, part of my job is leading the production team’s visual design objectives. A key part of this process is ensuring the client’s satisfaction with the overall look and feel of the site. Since most of my projects utilize an agile development process, I am no stranger to shifting objectives or newly added requirements. One of the biggest challenges I face in agile development is adapting the design process to fit.

As a web designer at Four Kitchens, part of my job is leading the production team’s visual design objectives. A key part of this process is ensuring the client’s satisfaction with the overall look and feel of the site. Since most of my projects utilize an agile development process, I am no stranger to shifting objectives or newly added requirements. One of the biggest challenges I face in agile development is adapting the design process to fit.

If you’ve ever worked on a traditional web design project, it should come as no surprise that the most common way to get client sign-off on visual design is through comps. Generally speaking, a comp is a comprehensive, high fidelity, Photoshopped layout of a website—or rather, what appears to be a website. It is just an image after all, an image of what your website would look like under perfect weather conditions. This delusion of grandeur, when used as a deliverable or finished product, often misleads the client into a false sense of usability. Here are my issues with comps:

1. Looks Like in Photoshop ≠ Looks Like in Browser

This is not new information: different browsers render web fonts differently—colors can vary, not to mention the plethora of possible sizes of a user’s screen on any given device. Still, it is important to understand how delivering a comp as an end product sets up client expectations. Even the most tech-savvy clients signing-off on a comp will, by nature, expect to see that perfect image and no deviations. Don’t get me wrong; it’s not their fault. As production teams who have delivered comps for years, we have set them up for that exact expectation.

2. Images Don’t React

Comps do not present the client with any sense of interaction. Sure, as a designer you can present the various button states as separate images to a client, but you’re asking them to “imagine” how the button would function. Should you also expect that they imagine the multiple methods of interaction for mouse versus touch devices? Not to mention, you are creating more work in an outside application that will have to be re-created in code, bringing me to my next point.

3. Costly and Finite

As a designer, you spend many hours focusing on detail after detail of something that will never see the light of day after the project is over. And if the scope changes or new functionality emerges, which is inevitable working for an agile shop, your perfect comp gets thrown in the trash. Or worse. You have to redo the comps. Sigh.

4. Less Team Collaboration

Working on perfecting comps means that most planning decisions are made between the designer and client. This exclusivity leaves other team members out of the process, and is a perfect recipe for unhappy developers. Developers get stuck trying to create an interaction thought up by the designer and client, who may have a limited understanding of how it’s actually going to be implemented.

Changing the Process

So, with all these problems attributed to comps, how can you transform this archaic design process? Let me share how my team and I adopted the design-in-the-browser process for a recent client.

My initial reaction to the idea was something along the lines of: “YES! Let’s design in the browser! Get rid of these over-detailed, time-sucking, lies!”

My excitement quickly turned to panic when I considered the giant hole this would leave in my design process. Now I needed to come up with a way to sell a visual language for a website—an extension of a well-known brand—and get my client to buy into it without my trusty old comps. Quite a challenge, but solving problems is what I do …

Style Tiles for Miles

Long before my team and I began designing in the browser, we’d used Style Tiles to assist clients in making decisions on a sites’ aesthetics. If you don’t know about Style Tiles, you need to! They are awesome because they allow designers to create fast iterations of very broad visual elements (typography, color palette, etc.). We employed this strategy to achieve faster sign-off on comps, often resulting in fewer iterations and a clearer understanding of the design objectives.

Style Tiles had helped to get comps approved, could they also work if I got rid of comps? The answer, as I soon came to find out: absolutely! However, Style Tiles, in all their glorious splendor, only offer a vague picture of a site (which is the point). Using them to begin building an entire site in the browser would be a very daunting task, especially if more than one designer/developer is helping build the front-end. It was easy to imagine the blank look on my colleague’s face if I sent him an approved Style Tile and said, “Here is the design. Make it work!”

Enter the Style Guide

Creating a website style guide is not a new concept. Just look to the team at Starbucks and stare in awe at their thoroughly documented guide. It comes complete with multiple layouts, menus, and widgets—well done for a coffee shop. A website style guide doesn’t have to be this fancy or complex; at its core it simply shows the user interface elements used on a website. For my project, I started my Style Guide using Photoshop. Yes, that is correct. I still use Photoshop, along with paper sketches, mood boards, whiteboards, etc. The point here is that I don’t ship these off as a deliverable.

After playing in my Photoshop sandbox, I began building the basics in code, starting with the client approved visual design elements from my Style Tile exercise, and then moved onto more fully fleshed out sections: a header with fully responsive navigation, sidebars with multiple backgrounds, complete footer, etc. Being careful not to get too far ahead of myself, I built just enough to cover the web page elements needed for the first few sections we’d be building.

I feel it is important to note that I did not use the style guide for client sign-off, rather to document the look of the site. Client sign-off happened on the real features as we completed building them, allowing the client to authentically interact with the site.

After sufficient wireframing and more play in my Photoshop sandbox, I became more comfortable designing the site in the browser. I was able to make design decisions immediately in code. Because many elements we’re already defined thanks to my style guide, it was so much faster. And the best part is, once the team (client included) was satisfied with a design, it was done. It’s already been styled with real CSS and it’s fully responsive. My client was thrilled to be able to share it with users right out of the starting gate. I could start collecting user feedback, running tests, iterating pitfalls, and producing an overall better user experience.

To sum it up, the design in the browser improved UX in the following ways:

No False Expectations

Internally and externally, our teams were able to test the site’s UI design on any browser, on any device. Clients didn’t have any expectations of how the site would hypothetically look during an interaction, because it was already working.

Design, Build, and Test Faster

Doing the design directly in code allowed me, as a designer, to test the interactions immediately. This tightened the production cycle (design > development > test) and I could instantly make iterations on a single piece of functionality, changing it site-wide if necessary.

Full Documentation

By starting with a style guide, our team had fully up-to-date documentation of the site’s design aesthetics at every step in its production. This document served to maintain control over the design and ensure brand consistency. It also makes an excellent training aid for new members of the team.

Realign the Design

This process allowed the design of the site to grow organically and we were able to realign the design with every new addition. It was perfect for an agile shop, allowing me to design for new features, not force new features into an existing design.

Full Team Collaboration

The icing on the cake: this process brought everyone into an equal understanding of the site. Rather than trying to predict interaction pitfalls, we were course-correcting and changing the functionality and design as a unified team.

In Summary

Comps are part of an old design process, so stop catering to your client with inauthentic, hypothetical experiences. Present your work in the browser to give everyone the real experience.

 

Image of figs courtesy Shutterstock

post authorJared Rogers

Jared Rogers

Jared is a visual problem solver. He seeks to surprise, provoke, and delight through user-focused, intentional design. An Iowa native, he now creates responsive websites with Four Kitchens in Austin, Texas. When he’s not scouring the web for design brilliance, he’s probably cooking up a new recipe or taking a calm breath at the yoga studio.

Tweet
Share
Post
Share
Email
Print

Related Articles

AI is reshaping the role of designers, shifting them from creators to curators. This article explores how AI tools are changing design workflows, allowing designers to focus more on strategy and user experience. Discover how this shift is revolutionizing the design process and the future of creative work.

Article by Andy Budd
The Future of Design: How AI Is Shifting Designers from Makers to Curators
  • This article examines how AI is transforming the role of designers, shifting them from creators to curators.
  • It explores how AI tools are enhancing design processes by automating routine tasks, allowing designers to focus on strategic decision-making and curating user experiences.
  • The piece highlights the growing importance of creativity in managing AI-driven systems and fostering collaboration across teams, ultimately reshaping the future of design work.
Share:The Future of Design: How AI Is Shifting Designers from Makers to Curators
5 min read

Are you overthinking your research process? This article explores how to determine when research is essential and when it might be holding you back. Learn a practical framework to prioritize studies, align with stakeholders, and maximize impact without wasting time or resources. Unlock strategies to focus your efforts on what truly matters.

Article by Carol Rossi
Are You Doing Too Much Research?
  • The article questions the common practice of conducting extensive research, suggesting that not all projects require it. Instead, it highlights the importance of discerning when research is truly necessary.
  • It introduces a framework to prioritize research efforts based on clarity, risk, and cost, ensuring impactful results without unnecessary delays.
  • The author emphasizes the role of stakeholder involvement in the research process, fostering better collaboration and alignment with organizational goals.
  • Practical strategies are provided for tracking and communicating the post-research impact, making the value of research more transparent and measurable.
Share:Are You Doing Too Much Research?
7 min read

Learn how to design and facilitate impactful co-creation sessions that inspire collaboration, spark creativity, and align diverse perspectives for meaningful outcomes.

Article by Aalap Doshi
Designing and Facilitating a Co-Creation Session
  • This article delves into the process of designing and facilitating effective co-creation sessions to foster collaborative innovation.
  • It outlines key steps, including planning, creating a structured agenda, and using tools to engage participants meaningfully.
  • The piece highlights how co-creation sessions can drive creativity, align diverse stakeholders, and generate actionable outcomes for complex challenges.
Share:Designing and Facilitating a Co-Creation Session
3 min read

Join the UX Magazine community!

Stay informed with exclusive content on the intersection of UX, AI agents, and agentic automation—essential reading for future-focused professionals.

Hello!

You're officially a member of the UX Magazine Community.
We're excited to have you with us!

Thank you!

To begin viewing member content, please verify your email.

Tell us about you. Enroll in the course.

    This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and