How We Design In The Browser

We don’t do pretty pictures of websites at Damn Fine. Our mission is to build products people actually use. To help us do this we've moved the majority of our design process out of visual software and into the browser. By giving Sketch and Photoshop a back seat in our process we’ve made huge gains in the speed of development and the quality of products we ship. Here’s how we do it.

We start out with a round of discovery, research and strategy work on all our projects. We gather content, analyse performance data, create user stories, and run interviews and workshops. Our aim is to go beyond the brief to make sure we’re solving the right problems and creating value for our clients. The Discovery phase is a whole thing so I won't go into too much detail here, expect an in-depth post soon.

With a solid plan of attack to guide us we will often move straight into a prototyping phase. This might begin with wireframe sketches or whiteboard sessions but we aim to move into code as soon as possible. By blocking out the main components of the app or site in the browser we can quickly get to a stage where our clients can interact with the product, get a feel for the content strategy and anything that might be missing. Reviewing and iterating on this skeleton lets us focus on what’s really important, be it a specific feature, flow or content, without getting too hung up on the nitty-gritty presentation details. In parallel with this process, we’ll begin to explore the visual design of the project more fully.

Using a hybrid Atomic Design and Style Tile approach we work to build up a visual language that can be layered into the prototype. This approach to designing the visual system has proven to be extremely powerful. Rather than a big reveal where we spring a full design on the client and risk missing the mark, we turn the visual design into an ongoing conversation. We tweak and iterate on the visual system as the project progresses. By the time the project launches we’ve all worked together to make sure the system is hitting the mark on all fronts.

As we cycle through sprints the structure, interactions, and visuals will evolve together. We refine content and interactions, flesh out features more fully, and layer in the visual design as it progresses. Our continuous deployment workflow means clients can log in to their beta server and see updates as they happen. No surprises, just steady progress towards our goal.

This isn’t to say we don’t use any visual design programs. Sketch and Photoshop are still a part of our workflow, particularly for the design details and elements with a heavy visual focus. At the end of the day, it all comes down to knowing where your focus is best spent to deliver value.