Design – Overall

General Page Layout

  • No walls of text, on desktop or mobile. Use images, elements and sections to break up big chunks of text.
  • No big gaps of white space that look out of place. Use images and headings to make each section look professional.
  • Images must match the topic of the webpage, especially the hero. If we don’t have any good images, ask the client if they have any, or ask if we can use stock images. Contact your manager if you need help here.
  • If we need to change content or headings to improve the look of the page, bring it up with the team. We can work with writers or SEO team to make updates.
  • Make sure paddings are all even. This goes for paddings around headings, images, text, etc. we should not see uneven padding that looks unprofessional.

Text

HEADINGS

Headings must be consistent throughout the website. Just as important as styling is capitalization.

  • If it’s an existing site, we use the headings already being used to be constant.
  • If we’re building a new site we should have a dedicated:
    • H1 (singular use) For H1 use uppercase or capitalize
    • H2 (used for secondary headings) For H2 we can use uppercase, capitalize or just sentence case. As mentioned above, be consistent with the rest of the site.

PARAGRAPHS

  • We should aim for about 5 lines of text before breaking for a new paragraph.
  • Paragraphs should be in sentence case by default.

LINKS

  • Should be clearly different than the body copy
  • Links must have a strong contrast to the background they are on
  • Links should be underlined
  • Hover color should also have a clear contrast to the background and the regular link color

BULLETS

  • If we have a long bullet list, add multiple columns so we don’t have a big chunk of white space beside it. I think this will apply to nearly all bullets and lists.

Images

  • Crop image to the size that will display on the frontend of the webpage. Do not use a file with an original width of 1000px for an image that is 150px width on the front end. This is a sure fire way to ruin PSI speed scores. Always resize images before uploading.
  • Compress image before uploading, https://compress-or-die.com/ is a great tool for this.
  • Use next generation formats like .webp.
  • Never use the default file we receive from the client. File name should be short and descriptive, similar to the Alt, add keywords naturally when possible.
  • Add Alt Attributes. Describe the image and try to use keywords, max of around 5 words.
  • Gallery images should always be 1000px plus width.

Also see these image docs: