One of Sparkbox’s core values is that we learn and adjust. That value keeps us nimble and scrappy—it is at the heart of our frontend design approach. Several years ago we introduced the concept of a Frontend Designer to our team, which helped us bridge the gap between design and development processes. Since then, we have learned and adjusted a lot of what we know and understand about the role. Today, frontend design impacts many of our projects; amongst others, those with short time-frames, a need for rapid prototyping, or those with fixed budgets. Frontend design helps us meet our clients’ minimal viable product goals by excelling at a coupled design and development approach.
Understanding Frontend Design
At Sparkbox we have long seen design and development as a continuum. Creating a website involves an amalgamation of skills, which complement and overlap with one another. We have designers who code and developers who comprehend and practice design principles. Design and development are not siloed skills. Instead, they are inhabited by individuals practicing web making. Design and development are each learned skills and we’re always learning in order to become more competent and caring producers and consultants.
Versatility is important to producing a minimum viable product on the Web. Our team understands that HTML and CSS is as crucial a design tool as Figma, Sketch, or Illustrator. Having skilled workers that understand both design and code moves ideas into the medium faster, allowing those ideas to iterate and adjust to the most viable version.
The Hammer and Chisel Process
Several years ago I wrote an article introducing our Hammer and Chisel process—we have continued to iterate on this idea.The process draws from the idea of sculptors working with their medium, removing large pieces of material, then using more refined tools to shape and polish the final artwork. Likewise, our approach starts with large rough areas of a website—not a full aesthetically-pleasing composition, but usable—to get an idea of what the product could become. Each pass over the website adds more detail, more color, and a clearer picture of what features work and don’t work.
A year or two after The Hammer and the Chisel was published, Dan Mall included a reference to the article in his talk “’Til Launch Do Us Part.” In this talk, he expands on many of the ideas and processes we have worked through at Sparkbox. I find that Dan’s talk is as relevant today as when it was first presented. From that talk, I was introduced to the work of to Bob Gage, a 20th Century Art Director, who had this to say about the relationship between an art director and a copywriter:
“Two people who respect each other sit in the same room for a length of time and arrive at a state of free association, where the mention of one idea will lead to another idea, then to another. The art director might suggest a headline, the writer a visual. The entire ad is conceived as a whole, in a kind of ping pong between disciplines.”
– Bob Gage, Art Director, DDB
To me, this quote illustrates the same level of inclusive thinking we work toward among our designers and developers. The Hammer and Chisel concept is more than roles, it is a process of build-and-refine; the “ping pong between disciplines.” That process can be filled by as few as one person on a project performing both Hammer and Chisel tasks—many MVP projects lack budget or timeframes for an intricate team structure. Approaching Hammer and Chisel as a process first allows for a smaller, more nimble team to take great strides in the formation of the MVP.
Frontend Design on a Project
The Hammer and Chisel process can take many forms, as every project is different. Most often, it involves full-stack developers working in the hammer role with a Frontend Designer or a design-oriented full-stack developer working in the chisel role. Sometimes, it can be a single person occupying each role–alternating from a Hammer to Chisel focus of work. One way this plays out is for clients who need a pattern library to work with. These are our customers who are at a size where the breadth and oversight of full Design Systems are excess. They need a handful of components and a general aesthetic they can implement into a single project.
Here, a Frontend Designer can excel playing both Hammer and Chisel as they begin by building the scaffolding, sometimes from our Design System Starter. They can then work from a low-fidelity wireframe and rough concepts from an interface designer to create the structure and organization of the library. After that, with the framework in place, the Frontend Designer can iterate on each component and aspect of the styles. They refine, deploy, share, and repeat until the MVP is ready.
Our Frontend Designers are on the frontlines of quality assurance. Since they work closely with UI Designers during ideation and Developers during implementation, they have a thorough understanding as they work on the minute details. Frontend Design encompasses an essentialism approach to web design and development, focusing on performance, accessibility, and best practices in equal measure. This combination of breadth of skill and attention to detail helps increase our quality assurance throughout the life of a project. When we mix the innate attributes of a Frontend Designer with Sparkbox’s strength in code reviews, we get more comprehensive work with less effort.
Frontend design is much, much more than a title we have for a few Sparkboxers. It is a well-defined concept and an approach that many on our team are familiar with and can act upon. Many of our developers come from design backgrounds, including formal education in design and art. We recognize that the final design deliverable is in the browser and we work together to find the best way to that end. Our blend of design in the development process helps deliver our clients’ MVPs with a higher degree of build quality and definition.