Style Guide

Design! Putting your best foot forward.

You may already have a style guide or content strategy to work with and if so, you should follow its guidance. If this is your own site, the following will be useful to you when choosing the layout and styles to apply to your site. And remember, consistency is key.

Headings

Heading 1 through to Heading 6 – in most themes, headings within a post or page will start at Heading 2 or 3 (H2 or H3 tags), going down to H6. The higher the value, the more important a search engine will consider it, but remember that H1 is usually reserved for the site title at the top of the page and H2 for the post or page’s title.

H1 to be used for the site title

H2 to be used for a page or post title

H3 to be used for a page or post title

H4 to be used as a sub title

H5 to be used as a sub title

H6 to be used as a sub title

Text Styles

  1. Use Unordered or Ordered lists for lists that are relatively short, but resist the temptation to use them for lists of paragraphs – instead, use the Heading styles. This section is an example of an ordered list. An unordered list is one that uses bullet points.
  2. Use Bold and Italic in moderation. Do not use bold as a substitute for heading styles – bold is not particularly important to a search engine or parser.
  3. You may want to select the block quote button when adding a quotation – It helps the quotation stand out from the rest of the text on the page.
  4. Some themes may override your styling decisions, for example enforcing alignment, the style of a block quote and so on. You should experiment and test.
  5. Keep text left aligned. You’ll very rarely need to centre align text.
  6. Most themes will highlight links in a different colour and with hover properties.

Images

Images can be cropped and resized in Photoshop (or equivalent software) before you upload them to your WordPress site. Alternatively you can crop, scale and rotate images straight from the Media Library in Standfirst, simply by navigating to the Media Library, selecting the image and then clicking ‘Edit Image’.

Ensure your photos are the correct dimensions and stick to this consensus across the site. Stretched images or images of multiple sizes can look unprofessional and unattractive. It may take a bit of extra time, but it’s worth it to keep your site looking professional.

Colour Palette

It may be tempting to use lots of different colours on your website, but to maintain brand consistency, it is advisable to stick to the colours defined in your colour palette. The colour palette we use at interconnect/it is shown below and you may notice that we keep to these colours and their related shades on our main website. It may be helpful to take the time to define your own colour palette if you haven’t got one already.