5 Actual Web Designs Trends for 2016
Whenever I see a link called Web Design Trends for this year I click it happily only to be disappointed within minutes. It’s always, without fail, trends from last year, or non-trends like: illustrations. Like, did you know that animations apparently is a big trend? Seriously, if you write a trend list and include full screen background video as a trend for 2016 you should really try to go online and look at websites before jotting down your list. No one like click baits. Anyway, without further ado, here’s a list of five actual trends for the first half of this year.
1) Full screen & not scrollable
Non scrollable sites are gaining traction finally. Where one page websites, that scrolled through eternity, with a sticky anchor link header at the top, almost became the standard way of doing home pages, it’s nice to see pages where you have to click in order to navigate. As much as people hate scroll-jacking, it can actually be nice sometimes. The key when designing these sites is to use the screen for limitations. Prototype in Keynote. Keyboard navigation is common on these sites.
Three examples of full screen sites without scrolling:
- Facebook Privacy Basics — Great site, albeit not responsive, by Facebook explaining step-by-step how privacy works on their service. Great illustrations!
- Fantasy — The design agency Fantasy’s much anticipated new website launched earlier this year and it didn’t disappoint. Especially check out the Work section, everything stays in the screen.
- KLM 50 Travels — Beautiful campaign site for KLM. It takes you through 50 destinations, one screen at the time. Navigate with keyboard arrows, and the space bar.
2. Sticky headline to the side
For the most recent trends in web design it’s always wise to look at agency sites, or rather design studios. And recently it’s been á la mode to have your headlines scroll to the side of the text. All the cool kids are doing it. This is a desktop only trend, so you reading this on your phone will just have to trust me on this, without visiting the example links.
Three examples of sticky headlines on the side:
- Code & Theory — The city headlines stays in the picture when you’re scrolling through the open positions on this beautiful website.
- Stack Overflow — This one doesn’t fit the bill a hundred percent but it’s not an agency site so that gives it a pass. When scrolling, the sub-navigation stays sticky to the right. Nice.
- DDB Sthlm — I’m from Sweden so I throw in a Swedish example as well. If you press Work from in their menu and scroll down you’ll see that the vertical headline stays on the side.
3) The logo is the loader
This is a huge trend and has become almost synonym with agency websites this year. Everyone has it. And so they should, because it looks great and it gives the visitor a feeling that the website is part of the brand. Very clever.
Three examples of using the logo as the loader:
- Instrument — This site only show their logo when the page is loading, and when you open the navigation menu. That’s new, and ballsy.
- Fubiz — This site made a big splash when it launched and for good reasons. The site have a different logo for every section, all of them with very nice animations.
- This Also — Great design studio website with a lot of never seen before art director for agency sites. While technically not the logo, the navigation icon is the loader here, but it’s situated where a logo usually is so it fits.
4) Disrupted background images
Having a background images that fills the whole browser window is nothing new, it’s probably at the top of the classic post Actual Web Design Trends 2013 but this is taking it to a new level. Add some mouse hover effects on your background image and you’re good to go.
Three examples of disrupted background images:
- Make me pulse — Move the mouse over the background and see the mountains come alive, very well done.
- Active Theory — If you are making a website for your agency, what better way to show you got some mad web skills than to make it look like a Google experiment? None.
- Details — This will take some scrolling. This Swiss design agency apparently don’t believe in anchor links so if you scroll down to the bottom of the page 4/4 Nos Experts and hover the photographs you’ll see a slight distortion on them. Nice!
5) Over the top animations
This is technically possible now, so why not right? If done right, this could be a very visually pleasing and entertaining experience, if done wrong then it’s Flash sites all over again. Word from the wise: use with care, but go way over the top when you do use it.
Three examples of over the top animations:
- Waaark — Lol, this little design studio has produced on of the most stunning visual experiences of this year. Leave it to the french to go over the top when it comes to animations.
- Animocons — This is some examples of icons with spectacular click animations, all done using web code.
- Rally Interactive Beta — Rally does a great job of not having just the right amount of animations on their site. They have gone crazy in the top, and then keep it mellow when you clicked and selected something.
Bonus: not really a trend yet, only seen it in one or two places but building responsive websites that scale indefinitely is going to be huge. That is, the site looks exactly the same on a 1280px screen as it does on a iMac 27" Retina 5100+ px screen, it’s only bigger. Check out the great site for Brasilian telecom operator Oi for an example.
My name is Nils and I work as a design director at Ape, a digital studio in Stockholm, Sweden. We live for great design, technology and communication. If you want to know more about us, check out our website, who unfortunately have none of the above listed trends.
Also, if you enjoyed this article, please press recommend below. It helps a great deal.
