Break down of some web design trends of 2015
Every year it seems the Internet changes and new web design trends seem to start appearing. If you’re just a casual user you may not have noticed them. A lot of these web design trends are very subtle and improve the user interface experience in a way that seems very natural. Let’s go over some of these new design trends. Hopefully after mentioning and describing them you’ll start to notice them as you browse the internet yourself.
This is probably the most common update to websites in 2015. Ever since Google changed their algorithm to reward websites that are mobile friendly and penalize websites that are not, everyone has been in a rush to get their website updated. A responsive site knows what size device it’s being displayed on and adjusts the content and images to always fit without the need for pinch zoom. Deciding to create your website with a responsive design is a great first step to incorporate the other web design trends of 2015 I’d like to cover below.
One page sites – aka longer scrolling sites
One of the biggest web design trends we’ve been noticing this year is simplification. One of the ways people are simplifying the user experience is by incorporating the majority of their website onto the homepage creating a longer scrolling page. This is to utilize features people are already used to using such as a mouse wheel or finger scrolling to scroll through the page to get information more quickly instead of clicking lots of links to find information. Having a longer landing page or internal pages provides a designer to throw in more eye catching styles as you navigate to the bottom of the page. When done well it can create a really captivating experience.
One of the new fancy words being tossed around is “parallax design.” This is when a background typically stretches 100% across the screen and as you scroll down it appears to scroll slightly slower than normal. This creates the trendy “parallax” effect. It’s very subtle but if you were to side by side a parallax background versus a non-parallax background you would see one does feel more modern and classy than the other. We like to use a mixture of this feature here at The Ohio Web Group. As they say, too much of anything can be a bad thing.
Smooth scrolling anchor tags
Along the lines with the one page websites comes the smooth scrolling elements. It used to be that when you click an anchor tag the page would instantly pop to the area that related to this content. Since the introduction of the one page and long page websites there has been code written to enable smooth scrolling so you can visually see the page go up and down. This helps create a modern feel to the website and more importantly visually shows you how far up or down you have gone on the page making it easier not to lose your place.
Opting for design simplicity
Many designers have been simplifying their website removing non-essential design elements in favor of simple designs. The idea behind this is to improve readability and bring the focus to the content. Some are even going so extreme as to remove their large background images. Reducing how many images have to be loaded increases the page load speed. This can be challenging because as a creative designer it’s become habit to get all your photo editing software out and add all kinds of effects to the page. But, do your visitors really care about your shadows, bevels, and other design elements? Probably not, they’re here for the content they were searching for. If you make it hard for them to find, they are going to leave your page and worse yet probably never return.
100% width design elements
Fixed width items are hard to make responsive and mobile friendly so the solution is to design with 100 percent in mind. When items stretch edge to edge of the confines of it’s specified container it will naturally adjust to the size of the screen it’s viewed on. Similarly, you’ll notice most websites are going for a centered look rather than a fixed left aligned (or the more rare right aligned) website. The most common max pixel width of a website design in 2015 seems to be 1140 pixels. Once the browser exceeds that design elements stop stretching past that. Although, some websites lately have made their top navigation menu stretch the entire screen whereas the rest of the layout stops at 1140 pixels.
Full screen professional high quality photography & storytelling on the homepage
We’ve been seeing this quite a bit this year. The landing page or homepage of a website will often times have an automatically adjusting full screen high quality image slideshow that tells a story. We are very fond of these here because they allow a user to sit back and let the homepage tell them a short story without having to touch anything. When done well, you can create a call to action right from your homepage slideshow. Slideshows are more than just plain pictures that fly by, they are beginning to have interactive elements that slide in place.
Flyout and slideout menus
There are a few of these flyout and slideout elements that have been showing up. Probably the most common one is the use of the new triple dash menu button. Some people like to have it pull down a menu with navigation links and others like to go with a more Facebook style approach where the menu slides out from the left or right of the screen pushing the entire website and content out of the way along with it.
Another common design element that is appearing a lot lately are flyout or pop-up boxes. These are new like the old spammy pop up boxes, but rather a window that pops up in the same browser usually asking if you’d like to subscribe to a websites newsletter. I’m still on the fence regarding the usage of these myself, only because I’ve been to websites that have them and they still irritate me when that’s the first thing you see and you have to close it before you can read the content. But, nevertheless, they are becoming a thing. Apparently user data shows that people do interact with these. Personally, I’m hoping with time we come up with a more elegant way to do this rather than throwing something in a users face.
Larger font face aka larger typography
This is personally one of my favorite changes to the internet this year. Designs tend to make use of larger fonts and for obvious reason. It’s easier to read! The text on your page is the most important thing, why wouldn’t you want to make it easy for people to read? This goes for headlines and for blocks of text. I’ve seen a lot of people complaining about websites with small text to prove that this is probably a good thing. Google will even calculate how large your font size is on multiple screen devices and use this as a rank determining factor. With the large variety of fonts available, they can be quite beautiful.
Ghost Buttons, Ghost Icons, & Feature List Icons
This is one of my personal favorite new design trends. Creating simple buttons that have a solid color border and no background so whatever is behind it bleeds through (until a mouse over). The same design style is applied to feature list icons. Feature list icons are an elegant way to display your list of services, navigation items, menu items, or other things you have to list. The feature list will show the icon and then a brief description about what the icon represents. These icons load very quickly and don’t detract much from the overall page load. So, it’s a win win because you have an elegant display that loads quickly.
Fixed Sliding Navigation Menu
With these the navigation menu is usually at the very top of the website. As you scroll down the page it will often times readjust to a smaller navigation bar and stay fixed at the top of the page. This is not always the same for the mobile view, but for the desktop view this is becoming a new trend. Some people have also figured out ways to have a giant storytelling slideshow at the top of the website with the navigation menu directly underneath the slideshow. As you scroll down the navigation menu will be smart enough to stop and stick to the top of the page as you continue to scroll and when you scroll back up it will place itself back below the slideshow.
That’s all I have for now but I’m sure there are many more trends. Can you think of any that I may have missed? Did I get anything wrong or would you like to add anything to one of these points? Use the comment section below. We’d love to hear from you!