Bold & Pop : Run Like Clockwork Branding & Squarespace Website Design

To say we're excited about the launch of Run Like Clockwork's new branding and website is a complete understatement. We immediately hit it off with Adrienne of Run Like Clockwork and were so excited to have the opportunity to work with her!

The Project:

The Design:

One of the main factors we needed to consider in both the logo and website design was that their program is based off the principles of the book, Clockwork. Because of this, we needed to create something unique for them while also keeping it cohesive with the branding of the book.

Here are the main things we focused on during their design:

  • Creating a unique, fun and approachable brand and site that was cohesive with the book's branding
  • Capture leads with their opt-in
  • Create a user-friendly experience by helping visitors easily flow through the site with strategic CTAs 

We decided to use one of the fonts and the colors from the Clockwork book's branding to keep things cohesive. Adrienne mentioned wanting to keep some graphic gear elements but wanting them to be a little different than the book's. So we created some hand-drawn gears that we could not only use in the logo but also on the website! 

Bold & Pop : Run Like Clockwork Branding & Squarespace Website Design

Here's a look at the logo design progression: 

Bold & Pop : Run Like Clockwork Branding & Squarespace Website Design
Bold & Pop : Run Like Clockwork Branding & Squarespace Website Design
 
RunlikeClockwork_Logo-01.png
 

After we finished up the logo design, we got to work on the website! Based off how all the elements came together on the inspiration board, we loved the idea of creating a layered look with photos, graphics, and text. Adrienne also really wanted to have some interactive elements so we added some fun hover elements for the buttons as well as on some key pieces of information throughout the site. 

Bold & Pop : Run Like Clockwork Branding & Squarespace Website Design

Since their website was so text heavy, we had to get a little creative how we structured the site. There were a few spots where we decided to have a text pop-up from a button. So for example, when visitors clicked the "Learn More" button under each of their headshots on the About page, a text box popped up with their bios. This allowed us to still have this important information without having it right on the site taking up valuable real estate. 

Bold & Pop : Run Like Clockwork Branding & Squarespace Website Design

Another little trick we used to hide some of the text was create some collapsible text similar to how a collapsible FAQ would work. So we created "Click to continue reading..." text that actually drops down with the remaining text when a visitor clicks on it. 

Then to add a little fun touch, we created custom bullet points using the gear graphic that we created for them. (How fun are those?!) 

Bold & Pop : Run Like Clockwork Branding & Squarespace Website Design

Can you see why we loved this project so much?! We got to create some really fun elements to give their brand a unique look while also staying cohesive with the book's brand. Plus, it was amazing working with Adrienne and that's always an added bonus! 

Bold & Pop : Banner
Bold & Pop : Digging what you see? Let's Work Together! Branding and Web Design Package
Name *
Name
Bold & Pop : Banner

Comment