2017 Web Design Trends

2017 web design trends

Our design team read through the blogs of our design-industry peers, took part in some furious internal discussion, debated these trends and distilled them into the ten points you’ll see across our new 2017 Web Design Trends guide.

 

Fin’s Pick of the 2017 Hype

 

Last month we carried out a research project, to see how ‘on-trend’ corporate website design is throughout the financial services sector.

Each year we’re faced with a glut of promoted trends and recommendations from magazines, blogs and content providers. We’re advised to take note of these in order to keep-pace with design development and consumer expectations.

This occurs in all industries, from manufacturing to music, and especially affects the world of design, an industry which thrives on the tension between contemporary innovation and adherence to classic principals.

From December to February we like to keep an eye out for these end-of-year lists and New Year predictions. We like to survey the spread of opinion and decide for ourselves what is relevant.

This year we decided to turn our research into something else. We thought that if we were a little more methodical and collated this year’s predictions for digital design in particular, we could turn it into something useful for our clients and peers alike.

We thought that we should assess the trends that we considered relevant for our industry in 2017, and see how well they were already represented incorporate websites across financial services.

Our design team read through the blogs of our design-industry peers, took part in some furious internal discussion, debated these trends and distilled them into the ten points you’ll see across the following pages.

The methodology we used was to survey a sample of household names in our industry against the relevant trends. Our sample was selected from big players in Private Equity, Wealth Management and Asset Management organisations (all big brands, no niche companies).

Over the page you’ll find our top-line conclusions, followed by our more specific findings. We won’t be so indiscreet as to tell you who we surveyed here, butwe’re always very happy to discuss best practice, and how we arrived at our conclusions, face-to-face.

If you need someone to discuss digital design and strategy with, do feel free to call us in.

 

Our Initial Conclusions

 

Even if 2017’s trends aren’t for you, it is clear that we should all be doing a bit better.

Our expectations weren’t high. The percentages you’ll see show how well-represented each trend is in each of the three sectors. Traditionally ours is a conservative industry so it wasn’t a surprise to see most of 2017’s trends unrepresented on the sampled websites.

For all the tech-savvy displayed in retail banking apps, high-frequency trading technology and online trading platforms, the corporate website often appears to have been left behind. Retail has led the way, adapting to the needs of consumers with aplomb, however, the B2B side of our industry has shown much less urgency.

Testament to this is that desktop-only sites have lingered far longer than we could ever have expected. We anticipated encountering one or two ‘legacy’ sites but the number we saw, though a low percentage, is far too high.

If your site isn’t yet responsive we really should talk. Soon.

The reasons for this hesitancy are legion. Security and compliance are often seen as barriers to progress and, in some more extreme circumstances, a lack of understanding the digital space is worn like a badge of honour. Sadly, this means some will be left behind. This shouldn’t be the case.

We were heartened to see that grid-style page structures were prevalent, but there’s still too little attention paid to window dressing. A long-standing overdependence on obviously stock photography is clear, little imagery appears to be bespoke, infographics are more common (but often generic) and micro interactions are an afterthought (these are the animated transitions when things change on screen).

Not being ahead of 2017’s trends isn’t a black mark against your brand. Our list should not be considered a checklist for your new website. The features we’ve picked out won’t be suitable for every site. You just need to pick what’s right for your needs and your brand.

Never forget that as much as trends show progress, they also date quickly. Only the very best trends become timeless (we rarely hear anything described as “amazeballs” anymore and the jury is out on how long hamburger menus will be around).

If you need some in-depth advice, a little consultancy or even just some pointers on where to start, call us.

[emaillocker id="383"] [/emaillocker]
Download our PDF version of this insight paper: Web design trends for 2017

1. Making the Most of a Hero

 

A hero image is the one you lead with. It’s the most prominent image on the page and usually the biggest.

Prominent use of a hero shot was found across the majority of websites in our sample, nearly everyone stood proud. While we might be critical of the choice of image we are pleased that everyone is trying to use the space to set out their stall.

A homepage hero image should be impactful, present your brand and make clear who you are. On sub-pages they should draw attention and reinforce messaging. Really, it’s not so different to design for print, it’s just that these pictures will have to scale to different screens.

 

Making the most of the hero judging criteria

 

Click the images to see some good non-financial services examples

jaguarlandrover website homepage

Nike website homepage

2. Stand-Out Typography

 

Big and bold typography has been widely marked as a trend for 2017. Until recently web designers have been held back by the limited choice of web-safe fonts and a preponderance for overloading corporate pages with too much information.

The typography we saw was generally conservative, but clear. There were some bold and unconventional highlights, short compelling statements that were graphic features as well as clear guiding messages. We also saw plenty of confusing hierarchies and often too may words crammed into too small a space.

How you use your fonts will set the tone for how you are perceived. A font is an integral part of brand personality. Using large type to break your grid will draw attention to powerful statements and allow the contents of a page to breathe.

Stand-Out Typography Judging Criteria

 

 

Click the image to see some good non-financial services examples

 

 

 

3. Animated Backdrops

 

These won’t be for everyone (and we hope they don’t become so popular as to be passé), but the use of background animation can bring any web page to life, whether it’s a simple animation or real-world video, full page or just a prominent chunk of the real estate available on the page.

These animations can be as simple, or complicated, as you like. They can be lightweight animated gifs, streamed heavyweight video or driven by CSS-code. So long as they are in service of your story and engage your viewer they’re doing their job.

We weren’t surprised to see so few of these, static pages are the peer-group norm.The power and efficiency of creative video (by that we mean not just another set of talking heads) is only just being explored throughout financial services.

Animated Backdrops Judging Criteria

 

Click the images to see some good non-financial services examples

myprovence.fr website screenshot

West Elm Hotels Website Homepage

4. Bespoke Illustration

 

Financial services websites aren’t necessarily known for creative expression, but in a crowded market place your own illustration style can can really elevate a page and draw attention to your content and your message. We found no-one in our sample making use of this opportunity.

Illustration presented in a brand’s house-style provides personality and a uniquepoint of visual difference. Be aware that stock illustration, like stock photography,will look generic rather than disctinctive. We appreciate that illustration can getexpensive but, if done right, it is definitely worth it.

Target its use to get the biggest bang for your buck. You don’t need to use it everywhere, just use it well. (FYI: we didn’t include custom-designed icons under illustration, as lovely as they can be they’re just functional assets).

Bespoke Illustration Judging Criteria

Click the images to see some good non-financial services examples

lighthouse brewing website homepage

make your money matter website homepage

5. Use of Infographics

 

New to no-one but perennially on-trend, infographics are a brilliant way to convey complex information clearly and simply. A well-built infographic will deliver keyinformation with minimal effort on the part of the audience.

Infographics are an ideal vehicle for achieving this so we had expected to see more of them, and to see them displayed more prominently. Overall we saw them used sparingly across our sample but we’re sure this will change in time.

A good infographic is a serious piece of work and online we are even able to make them interactive. The more complex they are the more costly they can
be to produce, but with sound planning your infographic can be evergreen content which won’t show its age, something that you will repurpose for all of the channels you use.

 Use of Infographics Judging Criteria

Click the images to see some good non-financial services examples

Histography website homepage

GV Website Homepage

6. Animated Interaction

 

Animated interactions (or micro interactions) are the finishing touches to any website. These are the animated transitions between states, the way text loads into a page, the way an image tile flips or a progress bar displays as you scroll through an article.

Sadly, we didn’t see that much attention had been paid to this aspect of web design. Fewer than 30% of the sample displayed any sort of finesse in this area.

When well executed these enhance a website’s sense of quality. Clever use of animation can look beautiful and lead the user journey. A good designer and developer will be able you help you with this, and the code required doesn’t need to be created from scratch, so it needn’t be expensive..

 

Animated Interaction Judging Criteria

Click the images to see a good non-financial services example

Every last drop website homepage 1

Every last drop website homepage 2

7. Bold Use of Colour

 

This should be fairly self explanatory. Big, bold use of colour is an easy way tocatch eyes, stand out and affirm your brand. It can also be used to break up pagesand lead users on the journey you want them to take through your site.

We were pleasantly surprised to see lots of brand colour used in this way. While not especially innovative it was clear that in many of our sample sites, big blocks of colour were used to improve the user experience.

We’ve been generous though. Financial services brands have long herded around a safe set of serious, and often dour, colours. The common dominance of blues, greens, greys and white does not make it easy to stand out.

Bold Use of Colour Judging Criteria

 

Click the images to see some good non-financial services examples

Ven Amsterdam Website Homepage

raadhuis website homepage

8. Grid Structure UX

 

Increasingly, we see web pages organised in grids of information, columns and rows which present well-structured information allowing users to quickly survey, scroll and select what they’re looking for. We were pleased to see this user experience (UX) strategy deployed in many of the sites we visited.

Grid-based UX creates an easy-to-understand first step for a user’s journey. Content modules organise information clearly, and allow easier reformatting for different screen sizes and devices. This latter part helps designers createbetter user interfaces which deliver a coherent experience, no matter how a user accesses your site.

This common style is an example of convergence in UX and demonstrates that a grammar for corporate websites is developing, a clear positive for users all round.

Grid Structure UX Judging Criteria

 

Click the images to see some good non-financial services examples

teruhiroyanagihara.jp website homepage

merion.ch website homepage

9. Avoidance of (Obviously) Stock Photography

 

If you’re going to use stock images you really must make them your own. By default, stock photography is generic, so it often lacks personality. Spendsome time defining a house style and apply some sort of visual treatment to prevent them looking generic. That said, it’s very cost-effective and, with a littleforethought, it’s easy to make it your own, so using stock needn’t be a problem.

Here we judged whether the sites were using photography that was still obviously from stock websites. Sadly, the majority of our sample were usingoff-the-shelf images. These do nothing to support their brand and present a generic approach the communication. It smacks of low effort. However, we were pleased to see that some brands had commissioned their own images or at least developed a consistent style for images they’d bought in, and some even applied a bespoke treatment to make them their own.

Avoidance of (Obviously) Stock Photography Judging Criteria

 

Click the images to see some good non-financial services examples

pigallebasketball website homepage

caavadesign website homepage

10. Responsivity

 

A responsive website is one that will scale to fit different screen sizes and devices.By now, in the age of the second, and third, screens, no-one should have a website that doesn’t adapt for the user. We were absolutely delighted to see that nearly everyone in our sample had a responsive site.

By the same token, we were absolutely horrified to see a few websites that were entirely unresponsive. There’s no excuse for this. If your site isn’t fit for phonebrowsing you’re letting everyone down.

One minor caveat we’d like to make is that in the responsive number we included some sites that only had a limited amount of adaptivity and are clearly not optimised for smaller screens. These too must do better.

Responsivity Judging Criteria

 

Click the image to see a good non-financial services example

Nixon watch website homepage

Further Reading

 

Below you’ll find links to some of the articles we read while we were researching and assessing this year’s trends and judging which were most relevant for financial services.

The linked articles below are included in the spirit of transparency, we love to share this sort of information. See our Twitter handle (@fin_marketing) for more design and digitally focused content).

While reading these please bear in mind that in selecting the preceding trends we took a necessarily-limited, conservative, FS-focused view . You might think differently and be up for innovating. If that’s the case we applaud youwholeheartedly and look forward to hearing from you.

Forbes Top Web Design Trends To Watch In 2017

1stWebDesigner The Most Popular Web Design Trends for 2017

Zazzle Media Web Design Trends for 2017

Webflow 18 web design trends for 2017

Hub Spot 15 Web Design Trends to Watch in 2017

Usersnap 10 Web Design Trends for 2017

designmodo 10 Web Design Trends to Try in 2017

Site point 10 Web Design & UX Trends for 2017 That Can Boost Conversions

MintTwist Web Design Trends 2017 Predictions

WPMU DEV 10 Hottest Web Design Trends You Gotta Know for 2017

 

Download our PDF version of this insight paper: Web design trends for 2017
Alan
Alan Fender Head of Brand Strategy

Alan joined Fin as Creative Director. In time he found his fascination with strategic thinking taking precedence – and his …

More about Alan
Previous post