Design Guide
Legibility
- use proper contrast
https://webaim.org/resources/contrastchecker/
https://accessible-colors.com/
choose fonts that are easy to read
Never use a serif font for the
people read left to right never center a large chunk of text
avoid using font-sizes lower than 15px for important text & input text
on mobile other secondary text can be as small as 13px & 14px
https://learnui.design/blog/mobile-desktop-website-font-size-guidelines.html
Visual Hierarchy
Apply contrast between headlines, links & buttons
most important information is organized by what is most valuable to the user
always keep the business objective in mind when structuring the homepage
Don’t go font crazy
the general design rule is no more than 3- but for speed purposes try to pick 1-2 fonts
once you choose the font & it’s on the site go through a few pages to make sure it’s legible and makes sense with the existing branding
Consistency is the key to a users heart
- if you do a cool thing- do that cool thing throughout the site
(animations, icon design style, splash of color)
use the same fonts, colors, design elements, buttons throughout the site
choose a CTA button and stick with it - other buttons should look differently
try to stay close to the branding of the company **if they have solid branding
Use images that make sense to the user
Some options here but use your best judgement:
use an image from the dealer if they have this option available
choose a photo of a happy family in their home - pulls at the users’ heartstrings
choose an image that relates to common problems the user has i.e - wet basement, cracked foundation, ( make sure the headline matches up well with this type of image & that the user can tell what’s going on in the photo )
choose an image that represents finished work the dealer does ( better for roofing dealers, remodeling dealers )
choose an image that portrays the branding of the company ( great for dealers who have great branding- if they don’t do not bother )
show a before and after shot in the main message - people love a glow up
choose a photo of people doing the work, talking with homeowners ( photos that instill trust in a brand will work)
Colors
Do not use too many colors!!!
Create a color palette that works with their branding ( https://coolors.co/ or https://color.adobe.com/create )
Try adding color after designing
Colors convey emotions, keep this in mind when choosing a color scheme for your site
https://www.verywellmind.com/color-psychology-2795824
https://www.colorpsychology.org/
Alignment & Proportions
There is a nifty little tool that can check to make sure items on the page are aligned
https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal
Mobile
Sometimes it makes sense to design mobile first ( like landing pages )
the font sizes don’t need to be crazy large
Make sure H1’s/ H2’s do not take up an entire page when scrolling
hide items you can hide for optimal mobile experience
make sure buttons are clickable & reachable
thumb rule
https://adoriasoft.com/blog/5-thumb-rule-tips-mobile-ux-design/
Font size guidelines here -
https://learnui.design/blog/mobile-desktop-website-font-size-guidelines.html
Research
it’s boring but it’s very helpful
look up nearby competitors, other contractor sites, sites that inspire you, sites with similar color palettes
look up new design trends and try them out
Other
Favicon should match the logo