Creating a New Design Direction for the New 4SiteStudios.com

This series outlines our project process through the lens of our development of the new 4SiteStudios.com. In this post, we will discuss our process for developing a creative direction for a client.

I’m coming up with a design for the new 4Site website following the same process and with the same deliverables as our clients’ sites. That means starting out with some conversations with the decision-makers (“the boss” – aka Heming – in this case) to figure out what kind of personality the company has and what kind of customers/clients/visitors the site will have. Because I’m so close to 4Site, I see so many design possibilities that it can become overwhelming to choose just one! This is where the reviews and multi-stage deliverables come into play. Where they help clients decide what design direction they’d like, the 4Site design deliverables help me and my team discuss internally what works and what can be improved.

I start out with style tiles to reflect a few different ideas based off of my discussions with the team, then create a component style guide to reflect all the changes we want to see and get an idea of what some individual pieces of the site  will look like. This part is a narrowing-down of the style tile directions, but often I need to combine elements from several tiles, which poses a challenge to create balance and proper visual hierarchy, and can often take longer than the style tile stage.

With the 4Site redesign, I spoke with Heming initially to figure out how we’d like to portray ourselves as a company. We had just released our new logo, which is a minimalist version of our old logo, to be more modern and versatile. That now needs to be paired with the friendly, eclectic, historic feel of Columbia Heights, our neighborhood. Getting the clean, minimalist technology direction to mesh well with the artsy, hip aesthetic was definitely challenging. The first round of design (the style tiles) covered the gamut of ‘just clean,’ ‘clean and eclectic,’ and ‘just eclectic.’ Then, going into the component style guide after getting everyones thoughts and feedback, I had to come up with the real combo.  I’m pretty sure I had a few dreams about it, and every time I walked up 14th to the office I’d see something new to include in the design. It took a long time to come up with which elements should reflect which parts of our company, as well as showcase our work, but in the end we all were very happy with the results.

The component style guide wound up being a reflection of who we are as a company, and the type of work we do. We work primarily with non-profits and like to think of ourselves as “do-gooders,” so we have a lot of inviting textures. Our roots are as a design and creative services company, so we have some playful fonts here and there. And finally, because we’re pretty tech-savvy (geeky!), and are on the cutting-edge of web design and development, we have a clean, open, airy feel. A few Victorian accents add the Columbia Heights feel (since the modern elements are already covered with the other aesthetics). And… voila! There’s our concept for the new 4Site website theme.

Our style tiles and component style guide are working documents that inform our design mockups. Below is the component style guide for the new website. Let us know what you think!

New 4SiteStudios.com Component Style Guide from 4sitestudios

4Site Interactive Studios is a talented troupe of web professionals who are passionate about creating tools to support digital marketers. We love to hear from our community! Reach out to us with your thoughts and questions. And don’t forget to subscribe below to get notified when we post new blogs – no spam, just content👍🏼