Web Design Trends 2017
Missing from the design landscape for a few years, gradients are making a major comeback. But the look of the color blurring technique has shifted.
In the last round of gradients, there were subtle variations throughout the design. Apple’s iOS icons were a prime example. Now, gradients are big, bold and use plenty of color.
The most popular usage is a two color gradient overlay on photos. (This technique can look absolutely amazing!) It’s a great option to switch up your look or to make a less-than-interesting photo a little more intriguing. You can also use a gradient background to draw the eye when you don’t have other imagery to work with.
2. Video with Sound
Virtual Reality will likely be the most talked about design element of 2017. With more devices on the market – and at affordable price points – VR is going to be big. Gamers will probably get the most out of VR initially, but it could definitely reach into marketing and other applications.
You’ll need to be ready to design for it. But moreover, you need to be ready to create virtual reality experiences that don’t require a headset. This includes website designs with 360-degree video and other highly interactive experiences with three-dimensional effects.
Anything that takes interaction to the next level will have that VR feel and be perfectly on-trend.
4. Even More Parallax
Parallax scrolling effects were a big trend in 2016 and designers have only gotten cleverer with these mouse-based movements. That trend will continue with more impressive – and fancier parallax effects.
Look for parallax effects that move up, rather than down, and movements that capture a much more layered design. The key to almost every design trend in 2017 is that touch of reality and parallax will be no exception. The more real the movement looks on the screen, the more users will want it.
5. Super Simple Homepages
More designs will start to strip away the type heavy homepage styles that have been popular for a while. More designers are opting for design that feature only a word or two on the first screen of the design.
And before you worry about SEO, these pages are often packed with plenty of information below the scroll. This is a great example of how user habits are changing web design as a whole. Thanks to plenty of scrolling on mobile websites, users are scrolling more on websites regardless of device. This makes it easier to design a light, airy hero area and pack the design with content on the scroll.
Here’s the trick: Just make sure to give users enough in this simple design to make them want more so that they will engage in scrolling behaviors.
6. New Navigation Patterns
Navigation does not have to be glued to the top of the design. From hidden or pop-out styles to navigation on the side or bottom of the pages, it is trendy to move the menu. (As long as the placement is still quite obvious.)
When considering a change to navigation styles, think about user patterns. Is the nav easy to find and does it work in a manner that users will understand intuitively? If so, go for it. If not, rethink the idea.
7. More Tactile Design
Web design is rooted in physical things. It started with Material Design and the development of more tactile planes and layering of objects. This interface trend is expanding to the visuals as well.
Designers are much more rooted in reality. This includes images, rather than illustrations, and plenty of elements that feel like the user can reach out and touch them. The images are more natural as well, featuring elements that are made from materials found in nature and crafted into usable objects.
8. Neutral Color Palettes
Tactile principles will carry over into color palettes as well. While the last two years have been some of the most colorful we have seen in web design that is going to shift to a more natural, neutral set of hues.
Look for more greens, beiges and muted tones in projects. Color palettes will be derived from the natural world and have less of a bold, bright, almost-neon look to them.
9. Wearables Influence the Web
Small design will influence everything else. Very much in the way a mobile-first design mentality has impacted the way all websites work, a wearable-first approach will most specifically impact app design. (You’ll want your app to work on a phone or a watch, right?)
This influence will likely change the look and complexity of some mobile apps. We might see larger typography and more minimal styles emerge. With so many users opting to buy wearables of some sort and wanting those interactions to replicate on other devices, this method of design is destined to happen sooner rather than later.
10. Custom Typography
Big, bold lettering never goes out of style. It is one of those trends that seems to just get better and better. Thanks to a growing number of web fonts and compatibility, more designers are taking typography risks with more novelty and interesting typefaces.
It’s a win for the design and a win for users that are likely tiring of the same few sans serifs that seem to dominate design projects. From vintage type styles to retro looks to completely custom typefaces, designers need to think about how to add flair with type to create visual interest.
Just keep in mind, cool lettering still needs to be readable. So whether you are pairing it with an image or as stand-alone artwork, make sure users can understand exactly what you are trying to say at a glance.
Web Design Style Predictions for 2017
As 2016 nears an end, designers are continuing to develop visually interesting and bold styles.
Through 2016, we have been introduced to a multitude of new styles and trends as designers continue to shift away from very simplistic and minimalist directions. We are beginning to see a move back towards a more visually comprehensive and impactful design trend. The implementation of new technologies and softwares such as Framer and Origami continue to expand the possibilities of what is possible in web design.
Below, we will look at six web design style predictions which look set to develop and continue through 2017, and some recent examples which have already begun to effectively implement these latest trends.
1. Subtle microinteractions
Microinteractions have really begun to gather traction on the web, and with multiple new and sophisticated tools for prototyping and implementing these, the trend looks set to continue. Buck.tv is a great example of microinteractions done effectively. The hover effects are highly stylised and feature beautiful and satisfying transitional animations.
2. Overlapping depth elements
A trend that really began to develop with the introduction of Google’s Material guidelines is that of overlapping elements to create depth. The trend is as popular as ever and examples such as the above present a fine example of just how it can be so effective, particularly when use with contrasting colors and large shadows. The result is subtle but high impact, and can help produce a satisfying transition between elements as the user works their way down the page.
3. Hand-drawn iconography
Icon trends are also advancing and tie in directly with web design. The anyways.co website shows how carefully implemented hand-drawn icons can provide great contrast to clean and uniform typography. It’s also becoming more abundant for use as call to action pointers such as ‘Get in touch’. This is now more frequent as designers and marketers look to increase conversions using subtle contrasting visual hints.
4. Colorful shape gradients
Stripe’s new website was incredibly well-received across the design industry and gives us a glimpse at the styles that designers may be inspired by into 2017. One of the most bold and impactful styles used by Stripe is the shape-filled gradient header that is becoming ever synonymous with their brand. It uses multiple angular gradients and combines them to great effect. 2017 is likely to see more gradients introduced, particularly in hero sections of websites where designers have the most ability to attract the attention of new visitors.
5. Minimal mockups
Another trend that Stripe looks to have solidified is that of using minimal product mockups as opposed to their realistic counterparts. This can provide a less severe, subtle flow to a website, and presents the opportunity for the work inside the mockup to really stand out. The above example is a great free version of such a mockup and should help serve as a great resource to begin using the latest 2017 trends in your web designs.
6. Large colored shadows
As shadows continue to make their comeback, designers are looking at more creative ways of using them in their designs. One example of this is the use of large colored shadows as opposed to small monochrome equivalents. When combined with a colored background, as above, this style can enhance the shadowed element and overall visual design of the website.
As 2016 nears an end, web design continues to slowly shift away from the very flat trends that have been so prevalent in the previous few years. Designers are continuing to develop visually interesting and bold styles which are effective in conveying a brand while maintaining and improving ease of use for the user.