We take a look at some of the popular web design trends that have been seen so far this year.
Full screen & not scrollable
Non-scrollable sites is 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. It is also important to ensure there is a responsive header for mobile-viewers.
Some 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.
Sticky titles top or left of screen
A good source of recent web design trends is to look at agency sites, or rather design studios. And recently it’s been quite popular to have your headlines scroll to the side of the text. 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.
Some 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.
- 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.
Using the logo as a loader
These type of web design trends have become common place with agency websites this year. It looks great and it gives the visitor a feeling that the website is part of the brand.
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.
Interactive background images
Having a background images that fills the whole browser window is nothing new but this is taking it to a new level. Add some mouse hover effects on your background image and your good to go. In some instances the background is madeup of tiles with a filter that become transparent or flip over as you roll the mouse (or press on mobile).
Some examples of disrupted background images:
- Make me pulse — Move the mouse over the background and see the mountains come alive, very well done.
- Details — This Swiss design agency don’t use 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!
Planet Amazing specialise in mobile-friendly WordPress web design. Get in touch today for a free quote or take a look at our extensive portfolio of websites.
CONTACT US VIEW OUR WORK