Web Design
Design

Design

Legibility

  • use proper contrast

https://webaim.org/resources/contrastchecker/ (opens in a new tab)
https://accessible-colors.com/s (opens in a new tab)

  • choose fonts that are easy to read

  • Never use a serif font for the <p>

  • 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 (opens in a new tab)
https://lh6.googleusercontent.com/B7V-WKxI7_-jGW4p6V4KXAtBaW8rJFfxwqYkFHzIV7_Gwdoqi5Cr9WT-lxrLQy32Z6MoQkSZaTbyu2idUX8nPV8YZB3e00_pfhXnZVdV7fKYwHdjSSM7rUKbezt2QA69uE1PuH0P (opens in a new tab)

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)

https://lh4.googleusercontent.com/RP3ihV0EPiB61GY5StdSshctyv2OX961P0wirXMFDkTGPu2Aw_k5aLpuAhG4VuIyqH7xWN3QTlnWrBtsWmxcf-_IuTbsbf34bCnwS-_jfWWbZ1lXI4UH73JVzyYExRkKd-NdiTjL (opens in a new tab)

Colors

https://www.verywellmind.com/color-psychology-2795824 (opens in a new tab)
https://www.colorpsychology.org/ (opens in a new tab)

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 (opens in a new tab)

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/ (opens in a new tab)

Font size guidelines here -

https://learnui.design/blog/mobile-desktop-website-font-size-guidelines.html (opens in a new tab)

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

https://www.behance.net/ (opens in a new tab)
https://muz.li/ (opens in a new tab)
https://www.siteinspire.com/ (opens in a new tab)

Other

Favicon should match the logo

BrandingFonts