Using Discretion

Pointers for when to make a discretionary choice over following the exact instructions of the intake form. No matter what discretion you use, make sure you NOTATE what you've done when you submit your ticket to the QA team IF your design choice is in any way different from the ticket's original instructions. Never make a discretionary choice without providing a brief valid reason for doing so. If you do not notate, the QA team will wonder why the work does not match the original ticket's requests and will assume you misread the ticket or did it wrong. If you leave a note, they will be able to see that you made that choice voluntarily and will pass your advice forward to the design rep and the customer.

Layout Options

The Intake Tool

The intake tool is what the Website Specialists use to consult with the customer and collect all their information and content needed for their new website.

The Legacy Intake Tool

In order to establish a structure to work within, the design tool used in the consultation process used to offer 8 header options, 5 footer options and 8 font packages to choose from. The layout options in the design tool acted as way to help the design rep and builder develop a better understanding of what the customer found appealing.

  • The problem with this, however, was that a customer would choose a layout for themselves and considering that they couldn't really conceptualize the end result, the site would come back looking strange at best.
  • Another issue was that it was hard to keep the layouts shown to customers in the tool up to date with the latest design trends, and since web design is an exponentially fast-growing industry, trends go in and out of style within months of their conception.

The Current Intake Tool

The new design tool removed the layouts from the view of the customer and replaced them with checkboxes to ask the customer what template appropriate items the header and footer should have. Instead of using the pre-built headers from the intake tool like before, there are completely new layouts separate from the tool that can be imported and used that have elements from the checkboxes present.

There are also complete guidelines for builders on how to determine which templates to use based on the customer's industry vertical and their choices from intake tool's checkboxes for each area.

  • The good thing about this process is that customers get to tell us what they'd like to appear in their header/footer regions and they don’t get an expectation for a certain layout embedded in their minds that may not work for their content.
  • Another good thing about having the templates separate is that we can now update them quarterly based on design trends for each site industry.

Reference Sites

A huge new addition to the new and current intake tool is that there is now a section to add reference sites with fields to fill out what the customer likes about each site. Instead of getting buried in the content, the reference sites and what they like about each site will be front and clear for the builders to look through as inspiration before starting the build. This will help builders see which elements the customer is fond of, and will help them try to build a site with a similar look and feel or similar elements so they can get the site right for the customer and have fewer revisions.

First Impressions

Making a Good First Impression

The point is to deliver the customer with a site that can inspire a positive first impression. A lot of the time if we follow what the customer chose in the design tool word-for-word, the site will come out looking dull and not be what the customer visualized. You'll run into a few builds every so often where a customer is extremely particular and knows exactly what they want - those are often easier because chances are we have something very exact to reference.

Most of the time, however, customers hire designers because they aren't very creative themselves and want us to make choices that help them visually appeal to their audience. Its better to take a risk to override a choice they made in the design tool with a better one and show them a professional-looking first draft, rather than give them exactly what they want and leave them feeling dissatisfied with our design potential.

How can you better understand the customer?

If you're feeling creative, you can do a little research on the customer and their business to help you get started on a path that will result in fewer revisions and a better overall first impression:

  • Parked-page-v3-Small
    Did the customer send examples?

    What do they have in common? Notice the widths, the header types, the kinds of hero images and font types, the page content, calls to action and interactive modules on these sites.

  • Domains-appraisal-Small
    Does the customer have a logo?

    Do they have branding material or brochures? If so, notice the color patterns, font types, spacing, positioning, etc. Its very possible that they already went through a long and tedious process with a designer getting their branding straightened out to where they like it, and chances are they want their site to eventually look very similar to this.

  • Information-technology-3-Small
    Did the customer give us any social links?

    If not, can we find them on social media? Not to put their links on the site (if they didn't give them to us), but to look at the imagery used on their business social pages that can give us a better idea of their aesthetic and what appeals to them.

  • Store-v2-Small
    What is the business category of the site?

    What do they do? Who is their audience? Where are they located? You can look up other businesses in their area that would technically qualify as competitors because chances are they have looked through their competitors sites and want something worthy of competition.

Favicons

A little extra touch can go a long way. If the customer has a logo with a graphic that could visibly fit in the tiny space on the page title tab, crop the graphic and put it there. No one likes to see a little paper icon up there, it looks unfinished. If the customer does not have a logo or if their logo doesn't have a graphic you can crop out to use in place of a favicon, take a few minutes to pick a free one out for them.

"Free flat one color icons - You can get all 4185 icons in any color you want. Choose your color or select from the preset colors!"
IconsDB gives us the option to download each free-for-use icon in any color in .png format.

  • Pick an icon that relates to the customer's business and either use black, or use a color from the color palette you've chosen to use across the site, as long as it shows up over the browser tab color (white on current/active tab, and #f6f7f8 on non-current/inactive tabs).
  • Even if its just an icon of a related item, it shows the customer you put effort into giving them something more professional and that you may care a little extra than if you left it blank.
  • After you've selected an icon that relates and colored it to match, download it in PNG format sized at 48 x 48 or larger - I usually download the 256 x 256 size in case I want to use it somewhere on the page or to accent the site in some way later on.
Examples

Below are some examples of different icons relevant to various business categories as a way to visualize how they can be used for different businesses:

  • leaf-64
    Leaf

    organics, health food, skin care

  • headphones-3-64
    Headphones

    DJ, musician, record store

  • shoe-64
    Shoe

    fashion, model, clothing

  • boat-10-64
    Boat

    beach resort, boat tours, fishing

  • restaurant-3-64
    Utensils

    restaurant, food service

  • car-64
    Car

    detail shop, dealership, delivery 

Logos

Is it a vertical or horizontal logo? Is the quality good?
Does it have a transparent background? If not, does it have crisp white edges / can the background be removed or is it pixelated?

  • Use whether the logo is vertical or horizontal to influence your header choice and the placement of the logo within it. In the case of a vertical logo graphic stacked upon text, it might make sense to cut the graphic from the text and place these images inline. If the text is illegible, place the graphic from the logo as an image and type out the logo text beside it instead. The UABB Info Box is a good module for this.
  • If the logo has a white background but is a high quality image, it may be easy to remove the background, if that's the case, do it.
  • If the logo has a white background but is a low quality image, pixelated or if after removing the background you're left with ragged edges, don't use a transparent header - use a header with a white or a heavily opaque background that hides the uneven edges on the image.
  • If logo is illegible, use the business name typed out or shrink the logo down to where its legible - don't use a logo that will tarnish a good first impression - leave a note to the QA team and design rep if you chose to omit the logo telling them why you made that choice

Header Choice

Selecting the Right Header

Does the Content Fit? Which of the headers in the design flow work best for the content the customer wants to have in their header? The content (header elements) they chose to include in the header may change the structure of the header type, and that is okay. When deciding on the right header layout for a customer based on their content, ask yourself the following questions to determine if its the right fit:

  1. Elements - How many header elements did they choose, and which ones?
  2. Logo - Is the logo horizontal or vertical?
  3. Navigation Menu - 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 secondary 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.

Header Pointers

Keep these pointers in mind when selecting a header and styling it:

Headers should Always be minimal

The goal is to minimize space taken up by the header on the page and condense as much of it into as little space as possible, still keeping it balanced and able to breathe. If there is extra content in the header, you can choose to hide it on mobile or at least make sure to style it to fit on mobile to keep the mobile header minimal as well and to avoid causing the header to take up half of the mobile screen.

Headers should never be a dark color

(unless the site is dark)... White or transparent is standard for headers. Never choose a solid color for the header background other than white on a regular site, or grays/blacks on a dark site, unless its been made clear that the customer is adamant on a certain style. Headers should never drown out the logo or any items in them. Make sure the color you choose for a header doesn't clash with the menu text color or logo color. Any items in the header should stand out and be very clear.

Rearranging The Layout

Feel free to move items in a layout around. Start with a base template if you'd like, then add or remove or rearrange items in the template to best suit the content chosen by the customer. 

Does the customer have a lot of nav links? Do they have social icons? Do they have a tagline? How big is their logo? If we can condense the content they want in the header to take up as little space as possible and make use of any empty space, we should.

Adjusting the Menu

Best practices for styling a menu to work best in the header area, and to help reduce the amount of space taken up by it:

  • Placement:

    If there are a fewer than 6 nav links, it would always make sense to float them to the left of the logo
    If there are many nav links, or links with longer labels, use a hamburger menu or split the menu into primary and secondary menus 

  • Link Length:

    If the page names are quite long and you think you can remove extra wording from the nav links in the menu while keeping the main word in place, do it. For example, reduce a page named "Contact Richard & Sons Co." to "Contact" in the nav menu, leaving the actual page name as is. You can change pages like "About Us" to "About" and "Our Services" to "Services" in the nav menu as well.

  • Grouping:

    See if you can group pages or links into sub navs under a main topic. For example, if they have pages called "Our History", "Our Team" and "Customer Reviews", these can probably go in a sub nav dropdown together under a dead link "About".

Header Elements

What content should we bother including in a header? If the customer specifically asked for certain content to be placed in the header, why did they want it there? How can we position it or place it for both, aesthetic appeal and to please the customer?

  • Contact Info:

    Adding the phone number to the header is appropriate for some businesses, however, if they ask for other contact info like an address or email, place a map icon or envelope icon linked to these items beside the phone number and don't put the whole address or email in the header area. 

  • Call-to-Action (CTA):

    What is the call to action they want in the header? Can it be replaced with a button in the menu? Is it something we can put in its own row above the logo row? Is it something that should be included in the hero instead?

    If the call-to-action they want in the header is "Contact us for a quote" with a button pointed to the contact page, chances are they have "contact" as a page linked in the nav already right below the CTA button. Repetition looks unprofessional. You could omit that entirely, and change the link to the contact page in the nav menu to say "Get a Quote" instead, then style it to look like a button. Then, you could write out the call to action above a button in the hero section below the hero text.

    If, for the same call to action, they had a phone number below it rather than a button pointed to the contact page, you could move the entire CTA sentence including the number up into its own row above the logo row and align it to the right.

Footer Choice

Footer Pointers

Footers are a lot simpler to work with because we don't have to worry too much about condensing the space, or it being the first thing a customer sees. Read through the points below to learn about better ways of arranging content in the footer area:

  • Put anything in the footer that should be repeated across all pages without having to put it on every page.
  • Don’t be afraid to add a column if there are three to begin with, or remove a column if there are four, if the contents of the footer need to be better distributed.
  • If the header menu has sub nav dropdowns, it’s a good idea to make a separate menu for the footer without any sub-navigation included
  • If the site has many nav menu links, consider making two menus for the footer, distributing the links evenly in two columns, preferably grouping similar pages together in a column and giving each menu per column a similar number of links - for example, in a Woo build, make one footer menu include all the regular pages like "home", "about", "services" and "contact", and have the other menu include all store-related links like "shop", "account", "checkout" and "terms"

Click here to see all site/store footer templates.

The subscribe form:

Chances are very high that the customer did not tell us what email marketing platform they use, and chances are even higher that they didn't proactively get us an API key for us to attach to the form that they asked us to include in their footer.

When styling the form, you'll notice the module will not let you save changes to it without choosing a "service". In this very likely scenario, choose "email address" as the service and set it to the customer's email on their account. That way if they don't have an email marketing platform set up yet, they'll at least get sent the email addresses of all the people subscribing using the form. Read about setting up, styling and connecting subscribe forms using the PowerPack module (click here). 

Table of Contents
    Add a header to begin generating the table of contents
    Next Steps

    After installation and customizer setup, its time to create the themer layouts.