Elements that take your website from ordinary to extraordinary

I’ve been at mso for 6 months now and I’ve learnt a great deal about how important it is to consider the following elements: typography, images and illustration, user interaction and colour schemes.

As much as we’d like to think we’re not, we are all judgemental beings. Before we even begin to read the contents of a website we look at the design. As a designer, it’s important the right message is portrayed to the designated target market. It determines if a user will continue to explore the website and read its contents.

Alongside the design, the functionality is hugely important. It’s an unspoken fact, if a site isn’t intuitive to use, people will leave! Some may think it is difficult to have a beautiful design with intuitive functionality – we say it goes hand in hand…

Typography

It’s important that fonts are legible and easy to read but that doesn’t mean they have to be boring. Take our ‘My School Portal’ site as an example: here you will see two fonts; Helvetica, an easy to read clear font combined with Populaire, a fun friendly and inviting font. These fonts together contribute to the brand identity.

Images and illustrations

Picking images for a site is far more important than you think – it can make or break it! A user of a website unconsciously perceives whether a designer has taken the time to consider images. Here at mso we take this very seriously. Take our own website as an example, we’re always on the hunt for great images and change our header images regularly to represent us: a cool (at least we like to think so), growing, and versatile digital agency.

The use of illustrations has been used for the My School Portal site. These were designed with the aim to comply with flat design trends while ensuring they were not overpowering illustrations. It was important that the illustrations complemented the web design and portrayed the right message: helping both parents and teachers interact as a student progresses through school.

User interaction

User interaction and intuitive functionality is really important when designing. At mso when we begin a design we always start with desktop but ensure mobile is always front of mind. This is to ensure our designs can be translated or adjusted for mobile whilst allowing us to design without the restrictions mobile holds.

A breakthrough in functional design was the navigation designed for Morrisons. Far more intuitive, the arrows at the side help define levels of navigation and gives the user the option to click on a page (that contains a dropdown) without opening a dropdown. Check it out on https://www.morrisonsacademy.org/

Colour schemes

Colour schemes are another important consideration. Again, looking at the Morrison’s school website – the brand colours have been included to complement and simplify the usability of the website (this is where design and functionality meet). The design is clean, with its use of white transparent overlays which makes the website more interesting.

At mso we have four key colours (all vibrant): orange, green, blue and purple – these are used throughout our branding. You may not see this so obviously through our website, this is to ensure our website is not overpowered by colour – less is sometimes more.
In contrast, the new design upgrade of the My School Portal site uses a younger shade and style of our brand colour to communicate the message of the website. Although to see this, you have to be patient, that’s coming soon since it’s not yet live!