Online Support Centre

Follow

5 Things to Improve the Look and Feel of your Website

1. Backgrounds

Background selection can create a massive difference to the look of your site. By using a high impact image as your background it immediately draws the attention of the viewer. On this page, I'll show what things to look out for when selecting an image, and how to complement it with a header, menu or both.

Selecting your image

Image selection is the most important part of using one as a background. Make sure it is a high-quality photograph. The full-width screen size is 1920px. 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

If you have selected a great image to use as your background, it's a good idea to complement it with a good looking navigation bar, and if you want a header too. Like the image above, if you have nice clear space for a menu 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.
​​​​​​​An example of a fully transparent menu can be seen below.

mceclip0.png

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

 2. Text

Although fonts are completely subjective to each persons' tastes there are some do's and don't 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 visa versa.
Use the align buttons in the text toolbar to balance your site's content. (on this page everything is left aligned, making it elegant)


Dont's

Don't overcomplicate it, the more fonts you use, or variations (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 crowd's the space around the word.
It's advised against using serifed fonts in paragraph text (serifed fonts are the little flicks you see on the ends of letters in such as this T in Times New Roman) Serifed fonts are great for titles but were not made for displaying on the web. In saying this, sometimes they work

3. Buttons

How buttons can be set to display inline with your brand guidelines and enhance the look of your website. Also being able to set a global default button for ease of use.

How to use the button widget effectively

Our button widget can be used throughout your website and with a few selections can customise the look to your desire.

BUTTON TEXT
Keep your text (CTA) text 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 your custom height of a button. Select a good height to match the font size to create a nice balanced button.

BUTTON WIDTH
A button width is important to keep in mind when setting how a button may be displayed on different devices. The default is 100%, this will display full-width of the widget container even on mobile. So setting it at a % of 100% eg 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 constantly 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 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 is plenty of customisation that can be done when it comes to selecting how you wish for the news to be displayed, you can choose the orientation of the news whether it be landscape or portrait,  with a title and snippet of the article or purely just the title. 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 was otherwise unused. Full-width widgets are great for home pages as it is high impact to land on and draws the users attention. 

mceclip2.png

To enable full-width sections, click here

 

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

Comments