10 Hottest Web Design Trends You Gotta Know for 2017
My FIRST blog post ever, I think this will make me read up on some stuff more
The web is a rapidly evolving space. Technologies and development techniques can appear quickly. Ever improving tools allow for greater freedom when designing interfaces and interactions. And because of this, web design patterns and techniques can begin to trend within a short period of time.
Below is a list of web design trends to keep in mind during 2017. They aren’t all new; some are styles that have been gaining and/or maintaining their popularity during 2016. These are expected to continue to be in common use for new websites launched in 2017.
There are also a few fairly new techniques and technologies you may want to implement in your site designs. These aren’t necessarily in widespread use yet, but you may want to take advantage of them now to stay ahead of the curve.
Color
Color choice for a website is incredibly important. It can influence visitors’ emotions, thoughts, and conversion rates. So, what are going to be the color trends for 2017?
Pantone has unveiled their 2017 color of the year – Greenery. It’s been chosen as a symbol of new beginnings; a refreshing and revitalizing shade. I don’t expect every website in 2017 to be green, but I’m sure there will be several web designs inspired by this.
If you’re looking for inspiration regarding color combinations, you can view some of Pantone’s recommended color pairings on their Color of 2017 page.
Due to the popularity of Google’s Material Design, the colors and color combinations recommended in those design guidelines are likely to trend upwards in 2017. These colors are bright and bold. Even outside of Material Design, there have been many examples of web designs incorporating bright colors recently.
This doesn’t show any sign of stopping anytime soon. You can use sites such as Material Design Palette and MaterialUI to help you choose a Material Design color scheme.
Need help picking a color scheme for your website? The Material Design Color Palette offers a great starting point.
Duotone is an image that is composed of two colors. We have seen many images of this type being used in the past year and I am expecting this style to become more popular in 2017.
Sites such as Spotify, have used duotone images to great effect. You may have noticed, duotone is a popular style for many YouTube video thumbnail images.
The Adison Partners website has made great use of duotone within their website design.
Modern Retro
Whether it is pixel art, vintage typography or 80s and 90s inspired imagery; retro with a modern twist is in right now. It has been having a greater influence on web design over the last few years, with many sites making use of this style.
This interactive resume of Robby Leonardi is a brilliant example of modern retro. He has combined a semi/modern pixel art style with the side scrolling of a Super Marioesque video game.
Sweet Magnolia Gelato has gone for vintage look, but makes use of some eye-catching animations. This gives the site a slick modern feel, whilst still retaining an older style charm.
Black Market has also gone for a vintage look combined with a modular layout. The site has a rustic appeal which works well with what Black Market offers.
Cinemagraphs
Cinemagraphs are still photos with elements that have repeated movements. They have been gaining popularity recently, and rightfully so; a well done cinemagraph can be visually striking.
Cinemagraphs can either be GIF files or video. Both can result in rather large file sizes if the cinemagraph is of a high quality. Cinemagraph GIFs can easily be over 3MB, so you might want to consider streaming video instead.
You can view some wonderful examples of cinemagraphs on Flixel; a hosting service for this type of image or video. Take a look around to see some of the great work people are doing. Below is just one example of many high quality cinemagraphs.
Material Design
Google’s Material Design has been on the scene since 2014. It is essentially built of on the principle of paper and ink, translating the qualities of these into a digital format. For example, the use of shadows and edges to indicate what you should touch, such as buttons.
Need help picking a color scheme for your website? The Material Design Color Palette offers a great starting point.
In the past couple of years, Material Design has grown in popularity, with numerous themes and templates being created for CMSs as well as front-end frameworks such as Twitter Bootstrap. One of the criticisms you will hear of Material Design is that many of the sites built using it seem very similar; perhaps too similar. This is due to adhering too rigidly to the style of Material Design, rather than just applying the principles.
I’m anticipating that we will see many smaller web projects adopting Material Design as-is. Not just the Material Design principles, but the actual style or theme. However, we will likely see a portion of the design community actively going against Material Design, or at least going against the stereotypical style, whilst still implementing the principles.
A great example of Material Design in its purest form is the Material Design Blog (surprise, surprise). Here you can see most Material Design principles in action.
Bold, Creative Typography
2016 saw some very creative uses of typography, and 2017 is likely to continue to push the boundaries of what designers will do with type. Expect type to not only take up more space on screen, but also expect to see more creative typefaces than the usual web fonts you are used to.
Nurture has combined typography and video to create a stylish and classy website. A video plays in the background, only visible through only a single, large letter from the word “nuture.” The video and the letter changes as you navigate through each of the sections of the homepage.
Friends is a design agency based in the US. Their site uses big, bold type that really stands out as the main feature.
Modular Design
Modular design isn’t anything new, but it has been gaining popularity over the past few years. It is a design approach using a modular, block grid pattern to layout elements. Looking at Google Trends data shows search interest for ‘modular design’ increasing since early 2011. I would expect this positive trend to continue in 2017.
Build in Amsterdam have created a very tasteful modular design website. The modular approach helps to clearly define each content element.
