Skip to main content

Five Steps to Improve the Look and Feel of Your Website

Here's our top five points for how to improve the look and feel of your website. 

 

1. Background

Background selection can create a massive difference to the look of your site. Using a high impact image as your background immediately draws the attention of the viewer. 

Selecting your image

Appropriate image selection greatly affects the strength of your background. Make sure it is a high-quality photograph. The full-width screen size is 1920px, so anything that is more than 1500px - 1600px wide is going to work well. 

Using a background with a header and navigation bar

After selecting an image to use as your background, it's a great idea to complement it with a good looking navigation bar and a header too. If you have nice clear space for a menu (like the below example) it's possible to show the menu as text only (so the text does not sit in a solid colour bar). To do this, set the transparency to 100% in the background colour.

mceclip0.png

​​​​​​​If you have a background image that is a bit busy where the menu would sit, it's a good idea to set the background colour of the menu to a contrasting colour to the background, and set it to full width.

2. Text

Although fonts are completely subjective to each persons' tastes there are some do's and don'ts when it comes to selecting typefaces for your website.

Do

  • Use easy to read legible fonts. Luckily, we have curated and included the most popular and best to use
  • Use a contrasting colour to the background the font is going on
  • Use complimenting fonts. Headers are big and bold, the subtext is lighter and more elegant

Don't

  • Don't overcomplicate it. The more fonts you use, or font variations (E.g. bold, italic), the messier the page will look
  • Don't use an overpowering font such as Impact or Arial Bold in your menu. It over-crowds the space around the word
  • It's advised against using serifed fonts in paragraph text (serifed fonts are the ones with little flicks you see on the ends of letters). Serifed fonts are great for titles but were not made for displaying on the web

3. Buttons

Our button widget can be used throughout your website and is customisable to the look that you desire.

How to use buttons effectively:

BUTTON TEXT

Keep your text (CTA) minimal e.g. "REGISTRATIONS" rather than a long sentence.

 

BUTTON COLOUR / BORDER COLOUR

Use your guidelines colours, if you don't have any use one that is in your logo or a dominating colour in your organisation.

 

BUTTON HEIGHT

We allow for the ability to set the custom height of a button. Select a good height to match the font size.

 

BUTTON WIDTH

A button's width is important to keep in mind when setting how a button may be displayed on different devices. The default is 100%, which will display full-width in the widget container (even on mobile). So setting it at a fraction of 100%, e.g. 80%, will give the button room to breathe on the left- and right-hand sides.

Screen_Shot_2021-12-09_at_12.07.16_PM.png

4. Grid Layout - News Articles

Displaying news on your website is a great way to keep your website up to date. The News Feed widget allows you to display your news in different layouts to suit your needs. The Grid layout in particular is very captivating, and gives your news a professional and modern look. 

For more information on how news articles are displayed, see this article. 

Below is a great example of a well-presented news feed widget displayed in the grid layout. 

mceclip1.png

5. Full-Width Sections

Utilising full-width sections give your website a contemporary look while allowing you to use more screen real-estate that would've otherwise been unused. Full-width widgets are great for home pages as they are high impact and draw the user's attention. 

mceclip2.png

To enable full-width sections, click here. 

Related articles