##1. Going Large with High Quality Photography and Fonts
The first, and I think, most obvious trend of 2015 that we’ve seen so far, and will continue to see is the use of huge, screen filling photos. Quite literally the full width and height of the viewport – giving full focus on the above the fold content. The photos themselves tend to be high quality, engaging and above all, inspirational.
The photo, which generally ends at the fold provides a perfect place to get a simple message to the user with no distractions – and more often than not, your crucial Call to Action (CTA). The text, centred and rather large, with the CTA close by which by all accounts will probably be a Ghost button (see below for the â€˜Ghost Button’).
An inspirational and clear homepage from Exposure.
##2. Animated Storytelling with Parallax Effects
Probably my favourite design trend which emerged in 2014 but is getting rather popular in 2015 is the animated storytelling site – they’re just so interesting! Unfortunately they do have one pitfall – it can often be difficult to work out what you’re actually supposed to be learning from it. All in all, great for social sharing and media interest – not too great for selling a product or service.
The storytelling makes use of the Parallax effect, which is taken from old, early console video games, which layer multiple background images on top of one another and move them at different speeds creating an effective feel of depth to your site. When done well it looks wonderful.
A great example which is close to home: The British Legion Poppy Spend.
##3. Multimedia Reinvented
Multimedia has been a word that has been used and abused since the dawn of the PC. 2015 will see a reinvent of the use of multimedia on sites, one of which is background video. Much like the full viewport images mentioned above, full screen video is both engaging and informative – after all, a picture tells a thousand words, doesn’t it? So a video must tell a million. Using a video is an effective way to keep the user’s interest and avoid that much loathed bounce, and at the same time sell your service or product. On the flip side, an inspirational video may not convey much information, but it will engage your visitor and draw them in.
A stunning video which has you hooked instantly (note the Ghost Button too). From Risk Everything.
##4. Material Design
IOS bought skeuomorphism to the masses and if you’ve not been around for the last 5+ years and you’re unsure what the hell that means, skeuomorphism is creating a look which replicates natural materials found in everyday life. The normal example would be the notes App on IOS, which was designed to look like a real Notebook. In 2013 and 2014 the â€˜Flat’ trend came in, and this was the polar opposite to skeuomorphism. It did away with the natural materials in favour of simplicity, solid colors and no shadows, the notebook has become a white screen with a cursor.
If skeuomorphism and flat design got together one night, had a couple of bottles of wine and got a bit frisky, the end product would be Material Design. Material design (which was champtioned by google – they even have a spec sheet) is the middle ground between the two – not so flat, but not too real either.
The material design of Android’s Calendar.
##5. Ghost Buttons
A byproduct of the huge photo or multimedia backgrounds, Ghost Buttons are simply buttons with no solid fill, with thin borders and text inside, they allow the background image to show through. Personally i think they’re best as your secondary CTA (if you have one).
Dribbbox uses a Ghost Button as a secondary CTA
##6. Hidden Menus / App-like Menus
It was coming for a while, the app menu that all mobile apps seem to have adopted has now leaked over to the Web. Purposely designed on mobile due to the lack of screen real-estate, the hidden menus, which are often activated by hitting the menu button (aka hamburger) and sliding out from the left or right, gave designers a way of not cluttering precious smartphone screen up with navigation, yet keeping the user in the context of the page when opening the navigation. With the super simple designs of 2015, designers are adopting this for use on desktop sites as well – choosing to keep a clutter free, almost empty page.
The new Google Inbox uses a hidden menu just like a phone app.
##7. Pinned Elements
Pinned elements stick to the screen while you scroll so they’re always with you. Most commonly used on navigation, such as our very own pinned left subpage navigation. They’re damn convenient – saving you to scroll back to the top every time. Pinned element use is growing, not just for navigation, but for an array other elements as well.
On our very own Web Hosting page, the left with the pinned sub navigation, while on the right the social share buttons are pinned too.
##8. Grid Based Design (AKA Tiles or Cards)
Think Facebook news feed or Pinterest – it’s a series of information, each piece of related information is stored on a card. Where as Facebook only do one row, placing the cards in a grid fashion is popular in 2015, take a look at Pinterest:
Pinterest with their very well known card based grid layout.
##9. Subtle Animations
While large animation has it’s benefits, 2015 has seen a rise in the use of subtle animations concentrated on individual elements or components. Sometimes you may not even realise they’re happening, but at the same time you’d notice if they weren’t. Commonly triggered on clicks or mouse over, they provide a visual response to your action.
An animation confined to a component on a page. The component itself contains a series of subtle animations. Also, take note of the material design.
Thanks again, to Google, website speed is now a metric on which you’re ranked on – and so it should be. Everyone, from designers to CEO’s have realised that slow sites are bad for business. All in all it’s great for the end user. Sites are now actively testing and tweaking site speed in order to hit what appear to be near instant page loads.