Think that your site looks tired, cramped and cluttered? You’re not alone. Design trends have changed significantly over the last few years, and many sites are starting to look like they were designed in the last century. Older sites look cramped, with all content “above the fold”, long-winded sales messages written in unreadable fonts, and they’ve not kept up with the move to mobile.
Creating a business case for a full redesign can be tricky, but most of these problems are easy to solve. We’ve put together some simple ideas that you can implement today to make your website feel fresh and modern without spending £1000s.
It’s all about space, man!
Websites with large gutters and all the content crammed awkwardly above the fold don’t just look un-cool, they’re often hard to use. Research has taught us sites are more successful if users can easily identify groups of information and scan for keywords and phrases.
Today's web designers make full use of the width and height of the web browser to not only create engaging visual effects, but to help the user find what they’re looking for.
So look at your pages, and make sure that the content is both logically grouped and evenly spaced out. Sites can’t always be 100% wide on all screens as that introduces other usability issues, but getting rid of unnecessary border effects that make your content feel boxed in can go a long way to creating the illusion of space.
What is black and white and eats like a horse?
Okay, I should stick to design. My next point is about striped sections. We’re see them very often, especially on homepages, and they do an excellent job of grouping information and giving the impression of full width. Striped sections also allow the designer to apply different visual effects and content grids making your pages easier to read and much more engaging.
Look at your pages and think: do I need that sidebar? And remember that - despite what you’ve been told for years - users are happy to scroll, especially if the content is worth reading.
Something that is quickly becoming a web design convention is a sticky top navigation bars. Research has already show that sticky navs are 22% quicker to navigate and users generally say that they prefer them. What’s not to like? Your users don’t have to scroll to the top of the pages to access the sites key sections and features, meaning they can find what they need more quickly and easily. Go the extra mile and apply a gentle micro interaction on scroll to give the user that feeling of quality.
Here’s a good example of a sticky nav that you can copy.
When looking at your top navigation bar, consider making it 100% width, so it’s easier to clearly group and separate your sites features (e.g. the main menu, user account login, search, contact details,etc.).
From zero to hero
One of the most requested design feature on homepages is the hero banner. It’s typically 100% wide, often 100% high, and can contain images, slideshows, videos or other calls to action. Some people use a video background that auto-plays, though personally we’re not a fan of this as they can be distracting, and can be painful for users on mobile devices or poor broadband connections.
Hero banners allow you to put your key messages in the centre stage. You can use BIG fancy fonts and present your messages with beautiful and inspirational backdrop images. Another popular effect is to apply a parallax animation on scroll, making that background move at a different speed to the content area and gives the website more “wow!”. Point your developers at the excellent Parallax JS library, or if you’re a wordpress fan, then check out Parallax Scroll plugin.
You need to consider the user experience when adding full height hero banners, as it’s easy for users to think there is nothing more to see. A downward facing “there’s more below” arrow often does the job here as long as it’s clear.
These are some of the most requested modern design features. Applying them to your site will give it immediate extra impact, make it easier for your users, and will keep your sales team happy.