FAQ Friday: What is a Strategy Guide?
When I start any design project, whether for a client or a template, I like to get the basics down first. This includes things like colors, fonts, and the inspiration for the design so that they can guide me through the entire project and serve as an easy reference for my clients in the future.
Each One-Week Design project kicks off with a Strategy Guide that is delivered on the Monday of the client’s Design Week. I sit down Monday morning to review the project questionnaire, brand information provided by the client, the images (both branded and stock) added to the project’s Google Drive folder, and any inspiration that has been shared.
After I put all that information into the strategy guide and make adjustments based on what we need for a website design, I send the Strategy Guide to my clients for them to review and provide feedback on. Generally, this stage doesn’t need much tweaking, but some clients will request to adjust some of the colors that have been chosen based on their personal preferences.
Where do I get the information for the strategy guide?
Some of my clients wonder how I get enough information from their questionnaire to put together an entire Strategy Guide, especially if they don’t have a robust brand built out and don’t send a Pinterest board, but my design superpower is translating our conversations and the information I have about their business into a design that fits their aesthetic.
The information I request from clients includes:
questionnaires, including information about your existing website, competitor websites, and designs that you like, as well as why you like them
a Pinterest board of inspiration that can include colors, design elements, and websites
brand information including color palette, logo, and fonts
any images that they have to use on the website
I also spend time researching other brands within the same industry to see how we can stand out, color palettes that will give us the brand aesthetic we want to create, and making sure all of the design choices are both accessible and possible to create in Squarespace.
What if I don’t have my brand built out yet?
About half of my clients don’t have a firm brand design with a full color palette and fonts. In this case, I make sure to leave time to create all the pieces they will need for the project and give them a Brand Guide that can be used as a reference for the future as they create graphics, design their office space, and order supplies.
I help them to create a color palette based on their logo, color preferences, and design style.
Fonts are chosen to complement the logo design and design style. I always try to choose fonts that are available on both Squarespace and Canva or that have similar fonts on Canva.
I also choose a logo font and create a basic logo that can be used on the website and any other brand collateral.
My favorite resources for making design choices are:
Typewolf to find font combinations and free alternatives
The Color Palette Studio to build color palettes or add to an exisiting palette
Pinterest to find font combinations that fit the design aesthetic we’re trying to achieves and that are still web-friendly and easy to read
Coolors.co for quickly viewing different color combinations
Unsplash for free stock images
What’s included in the strategy guide?
Each Strategy Guide includes 6 pages of brand and project information.
Key Brand Words and Website Color Palette
I always start by creating the Key Brand Words for the project. These represent the feeling we want to evoke in people when they land on the website.
Then I choose the color palette for the website. I like to choose 8 colors for each project:
2 lights colors (usually including white)
2 light neutrals
2 bolds
2 dark neutrals (usually including black or something close)
If the client already as a full color palette to use, I check to make sure there are enough color combinations that have high enough contrast meet website accessibility guidelines and make adjustments as needed.
If they only have a few colors, I’ll use those and build out the rest of the palette based on the formula above, making sure we have lots of high contrast options.
Accessible Color Combos
Once I’ve created the final color palette, I create a graphic version of all the accessible color combinations so it’s easy to check that the background and foreground colors of any design element have a high contrast.
Moodboard
The moodboard is generally the most difficult for clients to give feedback on because it’s not as clear how each element will be used in the final design.
I like to choose images to represent:
images that we’ll use on the website
graphic styles for icons
specific design elements like overlapping elements, headline placement, or button shapes
a texture for the site
Each of these individual pieces is part of the greater vision for how we’ll pull everything together in the homepage mockup. I like to tell clients to look at the moodboard as a whole to make sure the tone and image style fits with their ideas and to take a look at the design elements because those will guide how I layout different sections of the website.
Logos, Icons, and Font Palette
I like to include the logo and favicon along with an example of the icon style we could use and the texture we’ll use on the website.
The texture is generally used as a background for certain sections of the website to add interest and break up the solid colors. This could also be a pattern chosen for the project as well.
Sometimes I’ll include a design elements instead of icon style if we’re not using icons of the site and are instead using a repeated design element from the logo throughout the site.
The font palette includes the font choices for headings and paragraph text. I like to choose two fonts, a serif and sans serif, and then use them both as different headline options and one for all the paragraph styles.
Sitemap
The sitemap may look like a boring page that can be skipped over, but it’s vital to the project.
The sitemap page tells my client a few things:
what links will be included in the main menu
what sections and links will be included in the footer
if any of the pages listed aren’t part of their One-Week Design project
Occasionally, I’ll include links in the sitemap to show clients where they should be located, but they aren’t part of the 5 pages I’m designing for their website.
Links and Resources
The final part of the Strategy Guide is only delivered after our project is complete and includes:
access to my Squarespace Tutorial Library
a link to the client’s Google Drive folder for the project where I’ve uploaded all the design elements, images, and fonts I’ve used for the project
template links to any design elements (like logos, favicons, or graphics) created in Canva for them to edit later
information on Google Analytics and Search Console for the website
How is the strategy guide used in the design process?
Once the Strategy Guide has been reviewed by my client, I make any adjustments based on their feedback and then use it as the main reference as I’m designing the homepage mockup (day 2 of Design Week).
I actually have the Canva version of the Strategy Guide open on one monitor while I’ve working in Adobe XD designing the website. That way I can see the exact colors and fonts we’ve chosen and can easily reference the moodboard as I create the sections of the page.
After the project, the Strategy Guide makes an easy reference file for my clients to make sure they know which colors to use in other design pieces.
Ready to transform your website and create an online home that fits your aesthetic and brings in more patients?
Apply now for my One-Week Design process and launch your new website in the next few months!
