Site Design Flow by Vertical

Step 1. Determine site vertical

How to use

The following items by vertical are only suggestions. There will always be instances where the requests of the customer may contradict the design research done. If the contradictions look good, go for it, however, if they look bad, use the research by vertical to help you choose a better course of action and use it to notate why you decided to do so.

Step 1. Determine site vertical

Look for the industry of the site in the send up and categorize it as part of or similar to one of the verticals shown here.

Step 2. Customizer Setup

Read details of the vertical under which the site falls. If no specific colors/fonts/examples or instructions on design have been requested, use the research from the vertical to help you select a color palette and fonts.

Jump To Section

Step 3. Theme Setup

The specs for the header and footer layouts within the vertical act as a reference to what "most" sites in that vertical have. The templates for headers and footers are applicable for that vertical, contain all/most of the mentioned specs, and act as a good starting base. 

Choose headers based on the number of pages, the logo size and orientation and the content to be present in the header. You can use hamburger headers for sites with any number of pages, you cannot use non-hamburger headers for sites with more than 5-6 pages. Choose footers based on the content requested to be in the footer and based on the amount of information present on the site. Use the relevant site templates area on the vertical and the flowcharts in step 3c to select and apply archive and singular layouts and/or relevant pods layouts.

Jump To Section

Step 4. Page Layout

The specs for the hero area within the vertical act as a reference to what "most" sites in that vertical have. Use the hero media, the suggestions in the vertical and the flowchart in step 4a.i to help you select and style your hero. Use the relevant site templates area on the vertical and the contact section in step 4b to select a contact layout that works with the information provided.

Jump To Section

Step 2. Customizer Setup: Site-wide

2a. Colors

The site verticals provide an overall color tone and background recommend as well as common primary and secondary colors. Each color is linked to a palette containing that color - these palettes don’t have to be used especially if the site has a logo or an already provided color scheme, however, they help in situations where there is no logo or where the color is to be chosen by the builder.

Basic Color Rules:

  1. Only use bright colors as accents or for overlays where appropriate
  2. If colors can look better in a darker/lighter shade, use colorhexa and pull another shade that works
  3. Avoid bright colors for solid row backgrounds and for use in large layout components
If "compliment logo" selected
  • Use subtle colors from logo in layout
  • For bright colors in logo, use as site accent only
  • For logos with one color, use colorhexa and pull another shade of that color for the second accent

You can also create your own color palettes for the site based on the logo or colors requested. Here are some tools to do so:

If "choose for me" is selected OR if black/white logo

In the case that the color is to be chosen by the builder, a palette can be chosen from the available options that either contain the primary or secondary colors or a palette can be chosen that is labeled "generic."

You can also create your own color palettes for the site based on the logo or colors requested. Here are some tools to do so:

If "custom color" is selected
  • Use colors chosen by customer
  • If colors chosen by customer are an obnoxious combination, use colorhexa and pull another shade of those colors or of one of them that work better together or in general

You can also create your own color palettes for the site based on the logo or colors requested. Here are some tools to do so:

Applying the color scheme - Which colors go where/why?

How do you go about applying the website color scheme? Which colors go where, and why?

  • Primary colors go to the “hot spots” on your web page. You should use these bold, vibrant colors to attract users’ attention and prompt them to take action. CTA buttons, headlines, benefits icons, download forms, and other important information should be highlighted using primary colors.
  • Secondary colors are used to highlight the less important information on the website, such as secondary buttons, subheadings, active menu items, backgrounds, or supporting content like FAQs and testimonials.
  • Neutral colors will most likely be used for text and background but could come in handy in particularly colorful sections of the site, just to help tone it down and refocus the eye.

Resources: 
https://websitesetup.org/website-color-schemes/
http://mmicreative.com/the-60-30-10-rule/

2b. Typography

The site verticals provide an overall font type recommendation and font categories that apply to headings/subheadings, body text and navigation menu links. 

Basic Font Rules:

  1. Feel free to choose any Google Font that falls under the appearance of the available categories for each site vertical - If you choose a Google font that isn't listed on styleguide and that falls within an applicable category, that's okay - just make sure you notate it 
  2. If the customer has a logo with text, try to find a font similar to the logo text instead
  3. Don't use fancy or illegible fonts for important content like main headings or body text, use them as accents only (see example)
Example: Mix-matching font categories

Each font category is linked to an archive with different options in each.

These categories can be mixed and matched if needed, e.g. for the site vertical "Corporate/Professional Services" the H1 could be a bold serif, the subheadings could be circular geometric sans and the body and nav could also be circular geometric sans OR the H1 could be bold fancy serif, the subheadings could be condensed sans, and the body and nav could be standard sans.

Example: Logo uses fancy fonts

In the case that the main text on the logo is using some sort of fancy font, you can use this font as an accent. Don't use this font for all headings or subheadings, only use it as an accent in the hero areas or in applicable CTA rows or places on the site where it makes sense. For all headings use a different legible font from the categories by site vertical that compliments this fancy font. 

2c. Favicon

  • For Logo w/ legible icon: Crop the icon from the logo in a square aspect ratio and use it as the favicon
  • For Text logo OR for logo w/ illegible icon: Use relevant icon from iconsdb

Step 3. Theme Setup: Header, Footer, Archive & Singular

3a. Header Themer Layout

Header Templates

The following are header and top bar template suggestions based on the components of the templates that match with the research done by site vertical. These are only suggestions, other headers not listed can also be used if the content provided by the customer fits those better.

Use these templates as a base to start with and feel free to rearrange/remove/add items as needed based on the content provided by the customer. If the customer provides something to be placed in the header which doesn’t fit or doesn’t look right, try fitting it into the hero area instead or in the footer and then notate why you did so.

3a. i) Logo

Modify logo during new build process with notation:
IF logo is low quality
IF background is solid/non-white and cannot be easily removed
IF logo text is illegible when shrunk down to fit in the header space
Click here for logo/business name best practices.

How to Modify Text Logo
  • Rewrite logo text using infobox module
  • OR Rewrite logo text using infobox module and add a relevant icon to the left of the text from icondsdb
How to Modify Text & Icon Logo

Is the logo icon legible when shrunk down to fit in the header space?

If legible:

  • Rewrite logo text using infobox module and add logo icon as an image to the left of the text

If illegible:

  • Rewrite logo text using infobox module
  • OR Rewrite logo text using infobox module and add a relevant icon to the left of the text from iconsdb

3a. ii) Navigation Menu

Consider the following when choosing a header template from the list of options:

  • How many pages are there? Which headers would work best with the number of pages and the length of the page names?
  • Can the nav be set to display the responsive hamburger menu on all screen sizes? OR can the nav be split into main core page links with the remainder being placed in a hamburger menu beside it?

Site Headers | Store Headers | Site Top Bars | Store Top Bars
Click here to see all site templates that are site or store headers or top bars.

3b. Footer Themer Layout

The following are footer template suggestions based on the components of the templates that match the research done by site vertical. These are only suggestions, other footers not listed can also be used if the content provided by the customer fits those better.

Feel free use these as base templates and add/remove or adjust positioning of the elements within them per request/provided example from customer or per their site goal.

Click here to see all site/store footer templates. 

3c. Archive & Singular Themer Layouts

Use the flowcharts to help you determine which templates to download for import and usage depending on the site.

Click here to see all archive and singular layouts. Click here to see all pre-built pods.

Standard Site (WP)

The following layouts must be set up when building a standard site that either currently features or is going to feature a blog:

1. Post archive themer layout (apply to post archive, all archives, search results)
2. Post singular themer layout (apply to singular posts only - NOT all singular)

If the site is not expected to be a blog, and will not have search functionality of any sort, then there's no need to import and apply themer layouts for blog posts on a standard site.

Premium Site (WP)
Premium Store (Woo)

Step 4. Page Layout: Hero & Contact

4a. Hero Layout Options

These homepage hero layouts are only suggestions based on design research per site vertical. Ultimately, the media chosen for the hero row background will determine what kind of hero layout will work best. Pair the hero with a row separator or create your own layout, if the content and media provided suits it better.

  • hero - rule of thirds

    Visually divide the hero section into thirds. The focal point is generally in 1/3 to 1/2 of the image on its right or left. Include a gradient overlay behind the text if there is insufficient color contrast.

  • hero - stripe

    Similar to the "Rule of Thirds" hero layout, but the content might need more contrast. Content box does not “float”, it touches the top and bottom of the hero image container.

  • hero - 50 50

    Apply a 50/50 split or 60/40 split to the hero area with the image on one side and text on the other. Solid color or heavy overlay behind the text.

  • hero - overlay

    Text laid out over the image - usually centered, sometimes left aligned. May require overlay for contrast. Might also have negative space along the top half of the image.

  • hero - floating image

    Usually use a solid color or heavily blurred image in the background. Often the header matches hero background by being transparent.

  • Layer 9

    Blog-centric site with posts that get regularly updated, and customer would like for their latest posts to be the first thing people see.

  • Layer 10

    Premium store with many products that get regularly added, and customer wants latest or featured products to be the first thing people see.

Click here to see all hero layout templates. 

4a. i) Select a Hero Layout

After selecting a good hero image using the flow chart in Step 1, use the flow chart in Step 2 to place it in the layout that suits it best.

Step 1. Choose a Hero Image

Step 2. Choose a Hero Layout

4b. Contact Layouts

The following are contact layouts designed for different amounts of contact information for different kinds of sites. If it’s a starter site, append the layout to the bottom of the home scroll page. For all other plans, create a contact page and place the layout by itself on that page. If a standard already has 4 pages, that is fine, add a fifth page "Contact" and use the selected layout template with the customer's information. Use the site vertical suggestions and the flow chart to determine which contact layout to use on the site.

  • Contact Layout 1 – Basic

    Use if no contact information provided

  • Contact Layout 2 – Leads OR Contact Layout 3 – Singular Contact

    Use if very little contact info provided, and no location given

  • Contact Layout 4 – Multiple Contacts

    Use if contact info provided for multiple entities

  • Contact Layout 5 – Single Location

    Use if basic contact info provided along with location

  • Contact Layout 6 – Multiple Locations

    Use if contact info provided for multiple locations

  • Contact Layout 7 – Personality

    Use if contact info provided is only social media or agency information, or if site belongs to a celebrity/personality who doesn't want a contact form

  • Contact Layout 8 – Info Only

    Use if contact info provided but requested not to include a form

Click here to see all contact page layouts. 

Step 5. Page Build Process: Content