12 Web Design Trends of 2016, and How to Utilize Them
April 26th, 2016 | Stacy Davis Web design is a field that really rolls with trends, and there was a lot happening in 2015. Advancing technologies and tools quickly change what’s possible, and other creative industries from cinema to fashion also make their mark. Check out these web design trends of 2016 to stay ahead of the curve.
1. Flat Design and MinimalismFlat design and minimalism will continue to dominate web design in 2016. Google Material Design has some great examples of flat design taken to the next level. Clean, modern designs that offer a simple, fresh user experience are key, and less clutter and smart use of white space are essential to these trends. Expect to see more long shadows and ghost buttons which enrich a flat design.
2. ‘80s Bright Color PaletteThis year “vintage” means 1980s. Think bright, vibrant colors that look perfect with flat design elements – a solid move away from the muted colors that we’ve been seeing dominate web design will happen this year.
As with any colors, too much can be a bad thing, so use this design trend sparingly. It’s great for a prominent background, but try to stick with a cohesive color theme that compliments your site, instead of give the user a sore eye.
3. Custom Illustrations
With more browser support for SVG and more advanced typographical approaches (discussed below) expect to see more custom illustrations with lots of color. Hand-drawn icons and icon fonts will also dominate. Look for the personal illustration to replace the stock photo.
‘Illustration’ defined by dictionary.com is “an example serving to clarify or prove something” – make sure your illustrations follow this idea. Illustrations should serve a purpose to your site, and should not be a randomly placed dog riding a pop-tart (unless that’s what your site is about). Users will be thankful for visualization of an idea, instead of seeing irrelevant information.
4. IconographyIcons, like illustrations, are great used sparingly. Icons have been used in the previous years to denote things like the controversial ‘hamburger menu’. Pair icons with text that makes sense with it, such as a header or an action. Ideally, they represent what a function does, or help visually clear up the purpose of a section of content, or to draw some attention to an important product or service.
Less is more – too many icons can actually confuse the user instead of helping them navigate or understand what all is happening on the page.
5. Statement Typography
With the influx of new fonts from Google Fonts and Adobe Typekit, we will see more exciting, adventurous typography making a statement and advancing brands in 2016. Using these tools, fonts have quicker loading times and more choices are available.
With so many choices available, you may see more and more fonts that are more of a ‘statement’ – which may be in the grunge style, watercolor, or just something that really stands out, sometimes taking up the entire page, creating a huge visual statement.
6. Big GraphicsBig graphics are a great way to grab the user’s attention, but use the graphics with the right context for optimal results.
Better browser support and more bandwidth will make HD visuals easier to utilize. Expect to see HTML5 video, CSS3 background blending, cinemagraphs (think still images with subtle motion), and hero video headers this year, but make sure to keep in mind your graphics should be optimized before uploading to make a more enjoyable experience for your users.
7. Grid-based LayoutsGrid-based layouts are popular, and this will continue as widely-used frontend frameworks like Bootstrap make creating grid-based layouts even easier. These layouts strive to have items aligning by a certain grid and can be utilized in many different ways, including using the rule of thirds and the golden rectangle to base your grids off of.
Expect to see more grid-based designs that are less structured and rigid that you’ve seen in the past as CSS3 Shapes make rounded edges and softer contours attainable. There are many different ways to utilize the grid, and it’s up to the designer’s imagination to make the best of it.
8. Card Design LayoutsThanks to Pinterest, you can expect to keep seeing cards and card-style interfaces in 2016. Card design is content in a box that looks similar to what might be on a playing card. This trend makes relevant information visually relevant, and can use an image inside it to relate as well.
Card layouts should be used to entice the user to click through, and should not be complex. Convey what is necessary!
9. Hamburger MenusLove or hate the hamburger menu, you’ll still see a lot of it in 2016. Hamburger menus are a great way to hide navigation and make a site cleaner looking, but if used incorrectly can actually increase user frustration and be a burden rather than helpful.
If you find that the hamburger menu would be a useful addition to your website, by all means, use it – but make sure to add some text indication that it is a menu instead of leaving it to just a symbol. This can make all the difference in user recognition, especially for those who aren’t used to the hamburger icon.
10. Long ScrollingThe growing reliance on mobile device use will continue to inspire long scroll designs. As there is less room for content on mobile, more sites are utilizing this aspect into their site design to create pages that usually require the same amount of scroll on desktop as it does on mobile.
Long scrolling websites have made it possible to expand large amounts of text across multiple screens, instead of cramming it all on one place. This web design trend has also created the ability to have web pages navigate like a storybook, and as you scroll more details are unveiled.
11.Subtle AnimationsAnimations are a fantastic way to brand your site and increase user experience. This can help the user navigate a site or help with recognition of what experience is happening. Animations should not distract the user from the objective you’d like them to reach, or from any objective they may have.
Expect to see these types of animations more in 2016: loading animations that make waiting less painful; hover animations that add personality as you scroll around; and motion animations helping to organize menus and enhance the user experience. Subtle animations can also add charm to a page if used the right way.
12. Fun-ner FormsForms are around, and have almost always been present on the internet. But they’re so boring! Changes are a-coming, as designers and developers alike are beginning to create new visually enticing forms. You may start seeing more form types that go along the likes of “fill in the blank”, or full screen forms that take up the entirety of the page, reducing distractions on the user side.
Also inspired by more mobile use, in 2016 we will see more full-screen forms, in e-commerce checkouts and search fields, which may end up helping checkout experiences and more.
ConclusionThese are some design trends that we have noticed much more of in 2015, and expect to continue to see in 2016. Not all design trends will be the best option for your site, and your audience should be taken into consideration along with the user experience and content you’ll be providing to them, first. As with any trends, inspiration for the future is taken from the past. Which design trends are you glad are coming back?
Did we miss any web design trends that are on your mind for 2016? Share your trends of 2016 in the comments.