Website Guidelines
What’s the point?
This website guide exists to make sure there is consistency throughout the entire website and that the brand of LOVECHURCH is upheld in order to give clarity and ease of access to the people that use the website.
Typography
In the digital world, typography is perhaps more important than you might think. With most websites there are usually 3-4 heading styles and 3 paragraph (body text) styles to choose from when writing text. Heading styles are called H1, H2, H3 & H4 with H1 being the largest font size and H4 being the smallest. These are important as they really help with accessibility reasons for impaired users. This system gives hierarchy to what section is more important than others within a page.
This is why a H1 heading will usually be at the top of a page (in the hero) and shouldn’t be used anywhere else on that particular page. Sub sections should use a H2 or H3 style with H4 being used for subheadings within subsections.
Heading 1 (H1)
Heading 2 (H2)
Heading 3 (H3)
Heading 4 (H4)
Paragraph 1
Paragraph 2
Paragraph 3
Colours
The website sticks to mainly monochrome colours with occasional uses of other colours thrown into the mix.
This is two-fold. Firstly, With lots of editors on the site it could become a free-for-all if lots of different colours were being used from page to page. This would create inconsistency and damage the overall experience for the user.
Secondly, we take great pride in our photography. By using a more muted palette, it means that any photography and videography has a greater chance of having a bigger impact. We don’t have to worry about different assets clashing with one another.
Buttons
Buttons are used to easily navigate between different areas of the website. The button style is rectangular to keep in with the branding of LOVECHURCH.
The colour of the button will depend on what the colour of the background is. For example on a white background, the button will most likely be a black outline.
*A hover state will only work on a desktop device. For mobile and tablet devices, button styles will stay as an outline style.
Imagery
Imagery plays a big part for the LOVECHURCH website (and social media, print & material design). It is usually the best mechanism to get across who we are as a Church family and give reassurance to the quality and authenticity of an event, for example.
Because imagery is so important, it’s imperative that the quality of imagery is set to the highest standard. The best way to maintain the standard is by checking to see it matches the rest of the site. If you’re struggling to find good imagery, contact the media team for help.
What can I upload?
When uploading images to the site, they shouldn’t exceed a file size of 1mb. The bigger the file size, the slower the site will become over time. There are websites like shrinkme.app that can reduce the size of an image without reducing the quality. It’s always best to put any images through a site like this anyway!
How do I keep images consistent?
Every photo should have a similar filter style. As well as this, there are four key image ratios to stick to:
Standard 3:2
Classic landscape style
Standard 2:3 or 3:4
Classic portrait style
16:9
Used mostly for going full bleed across the width of a screen. (EG, Hero images at the top of each page)
1:1
Square ratio for when you need an in-between style.
3:2
16:9
3:4
1:1
*Tip: When you upload an image, you can crop and set a ratio within ‘image editor’.
Sections & Spacing
With all elements across the site, sections and spacing are integral parts to keeping the site coherent.
Sections
Sections (or sometimes referred to as ‘blocks’) are used to separate different parts of a page. We use these in order that we don’t cram in lots of content. It keeps everything evenly spaced out, and makes for a more enjoyable experience.
Spacing
Within every section, you have the option to define specifically how wide or tall you would like the section to be. To keep everything even and uniform every section height should be set to ‘M’, with the every section Width being set to ‘M’. There are some exceptions for the height and width parameters (for example videos and the footer), but should be anomalies.