Online Support Centre

Follow

5 Steps to Improve the Look and Feel of Your Website

1. Backgrounds

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. Listed below are details to look out for when selecting an image, and how to complement it with a header, menu, or both.

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. If you select an image that is smaller you run the risk of having a pixelated image, compromising the integrity of your site.​​​​​​​

Using a background with a header and navigation bar

After selecting a great 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. We are lucky within Sporty.co.nz to have a wide selection of fonts to choose from. 

Do's

  • 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. Or vice versa.
  • Use the align buttons in the text toolbar to balance your site's content. 


Don'ts

  • 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

How to use the button widget effectively

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

BUTTON TEXT
Keep your text (CTA) minimal e.g. "REGISTRATIONS" rather than a long sentence. This allows for a more balanced aesthetic.

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.

mceclip0.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. 

In the Grid layout, you have the ability to change the Layout and also how the news articles are displayed. There are plenty of customisation options (see here for help). 

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 not only gives your website a contemporary look but also allows 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

 

Was this article helpful?
0 out of 0 found this helpful

Comments