Taking the Long Way: Designing a Website Worth Sharing
The path to a perfect design is rarely a straight line. Read about how we came to realize the design for our new website through the eyes of our resident graphic designer, Caitlin.
At the beginning of 2020, Sangfroid! was an ambitious agency with a dedicated team of four. As the year unfolded, and the challenges rolled in, the company began to grow. So much so that that very same team of four, is now a skilled band of 11. With each addition, the dynamic of our team evolved. By the time we grew to our current size, we felt the need for some internal soul searching. We ask ourselves, “Does our current brand continue to represent our maturing agency? Or have we outgrown it?”
Our creative team took a hard look at the then-existing SMS (Sangfroid Marketing Studio) brand, stripping it down to its core. We questioned everything, including the name itself. Once we explored every aspect of our identity we not only uncovered a new, exciting brand, but an even more fantastic version of ourselves.
After creating a knockout brand with vibrant colors and a fresh take on the old mark, we knew the time for a website redesign had come.
Discovering our Design Principles
The biggest challenge of this redesign was learning to work with a new brand, one that was in many ways still in development. From the start, we worked on a design that sparked intrigue without unnecessary flash. We wanted a site and brand that defined who we are now. One that demonstrates professionalism and skill, while communicating that we aren’t only a team you’d like to work with, but also one you’d grab a beer with.
During the first round of layouts, the team took a shot at creating our vision. While this stage didn’t lead us to an award-winning site (yet), it did help us uncover more of our identity. We explored different ways to communicate without saying too much. With such a bright color palette and strong voice, we needed to avoid clutter and embrace space. By creating an exciting icon system and playful graphics, we were on our way to a visually compelling user experience.
During this next phase of exploration, we had a clearer understanding of our brand and how we wanted to portray ourselves. We dug into other sites that were doing things well; whether it be language, iconography, web animations, or imagery.
The design approach of the early 20th-century German art school, Bauhaus, became an inspiration for us. We explored different ways they could turn loud colors and abstract shapes into something that made sense. For over a century they were able to stay relevant while demonstrating seamless design. We worked through different icon systems and uses of color that provoked interest without being obnoxious, similarly to Bauhaus.
Prototyping the site (The first go)
At this point in the game, we were ready to step into Figma and begin prototyping. We worked through each page carefully, making sure every element related to the next. We felt as if we were communicating our message with sophistication and flare. As we neared the last few pages of prototyping we were almost ready for a Webflow developer to realize our vision.
We scrolled through each page in detail, beginning to think about how the user might interact with the site. We thought through the incorporation of different transitions and animations that could take this website to the next level.
However, while working to find a place for these effects we realized (begrudgingly) something was lacking in our design.
Our intention from the beginning was to showcase our ability to work in programs we use for our clients, such as Figma for prototyping and Webflow for development. The beauty of Webflow comes from the incredible effects it can produce in a short amount of time. With the layout as it stood, we left little to no room to show this off. Once we came to the conclusion that the pages we spent so much quality time with were off-course, we needed to backtrack.
Despite the pit in our stomachs and rush of anxiety, we knew we had to refresh. This was an unnerving thought as we were scheduled to hand off our prototypes to the developer in only three days.
We had a choice, leave as is and miss out on a chance to show off what we can really do, or start over and create something incredible.
Back to the drawing board
Obviously, our ambitious (partially nonsensical) creative team decided to recreate our site in three days.
Thankfully, we had the pieces. We just needed to make them fit. The best way to handle a stressful and time-sensitive job is to have as much fun as possible with it, so that’s what we did. We let our creative minds loose and designed with Webflow in mind. Envisioning each transition as creatively as possible, we were able to design a site made for an experience in just a few days.
Following this three-day design sprint, we met with our developer to explain our thinking and why the prototype looked much different from the last time he saw it. Much to our relief, he seemed excited to create this new and improved site for us.
Within weeks we were able to see our site come to life. Over the course of several edits, additions, adjustments, and brainstorms, it became clear that we made the right call. Everything was flowing naturally and cohesively while still maintaining our pizazz. And now, we have a site we all love to show off.
The moral of the story: Take the long way, if it means getting it done right.
