Building out a Static Site for an Executive Coach

Content is King and Design is the Army

Posted on January 8th, 2017

Where is the best place to begin the process of building a site from scratch? Easy, start with the content. After receiving the base content from the client I realized I had to beginning editing it for the web. Taking what is essentially a resume' and rewriting all of the parts to turn into a web-based product. The product needs to read like a story, to engage the user and appeal to their emotions. This story was based on how this executive coach came to be and then displayed the reasons why the user should become a client. Displaying other clients' testimonials was also necessary and was one of the key motivating factors in helping her attain new clients. When writing the client's' story you have to figure out the ins-and-outs of their product and take into account where their brand comes from and most importantly where it wants to go.

Once I was comfortable with the copy, I had the tough task and splitting it up and organizing it into digestible pieces for the user. I wanted to build a wireframe that could split up content and give users bite size morsels of information. Let's admit it, reading through work experience and business offerings can get a bit stale, so it is important to use space and layout to keep the user's attention. I ended up modifying a template based off bootstrap. I know you are probably thinking why I would choose a template, but in this day and age, I simply considerate it another design pattern. The template needed mass amounts of editing; I changed out the footer, added a hero image, modified the fonts, and added new rows. This gave me the base for adding brand elements and developing aesthetic.

Wireframe Medium-low fidelity wireframe of

Lastly, it was time to brand. I wanted to bring in imagery that focused on "paths, adversity, and authority." We decided on images showing obstacles, like rock climbing, climbing up the corporate ladder, mountains, etc. Executive coaching is about helping the client reach their goals and what better way to show that then with few photos showing challenges. The color palette was chosen based on the emotions we want the user to feel. I knew that a blue palette would be perfect because it evokes a sense of calmness as well as authority. Finally there is the font selection. I decided on a simple pairing of Source Sans Pro and Source Serif Pro for the body copy and headings. The goal was to make the content easily readable but also add a sense of intelligence.

Branding Guidelines All primary colors that were used in branding

The key takeaways from this project are:

  • Content is king, always edit then re-edit
  • Build a story and appeal to the user's emotion
  • Use design patterns when available
  • Choose colors, fonts, and imagery that work best for the business

If you would like to see the site in action please check out