Design Review Cheat Sheet

Design Review Cheat Sheet

Review Design Form

1. Check color selections - create a palette using https://coolors.co/ if needed. Update colors in drupal settings - please reference the Color Palette Policy if needed.

2. Update button (and/or promo button) styles and update in Drupal settings under -> Appearance -> Settings -> GP Custom -> Theme Customizations.

3. Check for any notes about likes/disklikes about preexisting site.

4. Update ticket with font selections.
   
   We have a Customize Site ticket where we begin the process of making these initial updates once the design form is received & content migration is still in progress:
   
   
   

Once the content migration is complete - Begin Internal Review

1. Colors: Double check that all colors are cohesive and text is legible: links, header & footer.

2. Alignment, Size & Spacing:

   • Hours in the header sometimes do not fit well, especially if they are long & many many lines. Having a developer split them into 2 columns (left & right) can even out the header better.
     

   • Make sure that the menu is not getting squished on responsive screen sizes.

   • Check the size of the logo in both the header and footer and ensure that it fits well and is not too big/too small. Logo sizes will always change depending on the file type.

   • Hero banner text is a big one that often needs to be adjusted around the image that is being used. Text may need to be moved up/down/left/right, made more bold, or have a text-shadow added so it is more legible.

   • Go through ALL of the service pages. Often, when the html is copy/pasted from a preexisting site, there are alignment issues that don’t look great and need to be fixed. For example, images/icons that don’t fit properly, random text is bolded, inconsistencies with h3 and h4 tags on subheadings. Make sure that subheadings are ALL h3.

3. Images: Go through ALL pages on site and ensure that images are quality and fit well on the page. Cross-check google drive AND Rocketlane for any folders that the client may have shared. If there are images that are not being used and can, or images that are better than what has been migrated, use them.

4. Content:

   • Check sidebars and make sure there are not any empty sections. Sometimes “Rate Us” will have empty social icons.

   • Check for any typos on main homepage sections and make sure that the welcome block and services categories are worded nicely.

   • Use ChatGPT to “fluff” any sections that client did not provide enough information on.

   • Check ALL pages and make sure there is sufficient content. If content is needed, create a ticket in Rocketlane and assign it to the onboarding manager to gather from the client.

5. Border radius: This is still in the process of being refined on the template but if the client selects a rounded button style, match the rest of the theme’s components to have a rounded border radius. For example, images on the homepage and any other containers like smile gallery or service cards (if applicable). Same thing goes if the client selects a squared button. For example, theme A’s default image style for the welcome block is a circle but if the client selects a squared button, then we will update this image styling to also be a square or rectangle. All in all, we want the design to appear cohesive and border-radius is a small adjustment that makes a big difference.
   

6. Background images: Selecting the right background image will make a big difference in the appearance and uniqueness of a client’s website. There are generally a few rules that I follow when selecting an image:

   • Review the design form. There is a question, “Tell us about the area where your practice is located”, that can sometimes give good insight. For example, they may live near the ocean or have a prominent visual feature on their building such as a red brick wall. “How do you want your website to feel?” can also provide direction for choosing a background image.

   • Try to match the background image to their color palette.

   • Alternate the blocks where the background images will go. https://www.mathesondentistry.com/ & https://www.baileydentalgroup.com/ have similar patterns as you can see every-other block has an image. The welcome block is typically best left white/a very light color because the text can become difficult to read with a background image. On the contrary, this client: https://www.elitedentalholland.com/ had many more custom requests than most and wanted a darker theme. That being said, the same pattern is still followed, with background-images on every-other block.

7. Mobile QA: 

   • The most important element on mobile is the hero banner. Ensure that the text is legible and is not covering the image. Theme A has a dark background gradient on mobile that sometimes causes issues and needs to be adjusted/removed.

   • Check ALL service pages and ensure that spacing and alignment looks good.

   • Ensure the logo in the header & footer is appropriately sized.

   • Check the “Hours & Contact” dropdown and ensure text is legible.