The web is a dynamic and exciting environment. New design tools, concepts and code create challenges and opportunities for web designers all the time. This article is a glimpse into the future of 2017, to help you stay ahead of the curve and ride the wave of web design.
We’re going to look at four of the more interesting trends for 2017 and throw in a trend that is on the road to no where!
Four Interesting Web Design Trends For 2017
- Navigation Diets
- Color – Brighter and Bolder
- The Grid
ONE: Navigation Diets
Or, using less navigation options for your main navigation menu. This is a trend that is in large fueled by a mobile-first design arena and takes the ‘clean and minimal look‘ to the next level.
Instead of overly complicated and long navigations, more and more sites are starting to simplify their navigation down to about four to five items.
I like the example from Jacob Lee’s portfolio site:
He is actually incorporating the hamburger menu (which is becoming increasingly standard for mobile slide in menus), into a full width design. Even when the menu slides in, it only has three page links. That’s a definite navigational diet!
I like and encourage this trend, and The Next Web hits the nail on the head:
Keeping navigation to a minimum also helps visitors to focus on the intent at hand, instead of trying to find a way off the page.
TWO: Color – Brighter and Bolder
For a long time, web designers had to be conservative in their design. In the beginning of webdesign, web-interactions were a new or foreign experience, compatibility issues on browsers caused problems and the coding language and bandwidth was limited. All those things are still important considerations, but we are now living in a time when the next generation has grown up with the internet being a part of their daily lives, HTML5 and CSS3 have some incredible design capabilities and the web is becoming more unified.
2017 is the year when web designers finally get to bring the design part of their title to life, and color is going to be a big part of that. Instagram provides a good illustration with their logo re-brand:
But we are also finding more websites with bold color schemes and intense graphics:
It’s worth taking a peak at Nymbl’s website for a preview of some pretty awesome micro-interactions (#4 below!).
Zazzle (who’s appropriate tag line is: A Brighter Digital Future) has this to say about ‘Courageous Colours’:
The use of bolder colours in web design is helpful in attracting the attention of users, but it’s also a signifier of change for brands, as many make a conscious effort in 2016 to try new things and break new ground, moving away from the previously established, ‘safer-bet’ practises.
THREE: The Grid
Yes, I know the grid isn’t new for 2017, but there are some new elements to it which will make the grid a continuing and evolving trend for quite some time.
Card based designs are going strong: here’s a list of fifty published this year! But when I talk about the grid, I’m really talking about the coding language that goes into designing a website.
- Flexbox – this is what Web Flow has to say about Flexbox:
If you haven’t dived into flexbox yet, you’re in for a treat. This relatively “new” CSS layout module offers both incredible responsive-friendliness in its functionality, but also makes a lot of sense to visual designers used to manipulating objects on the canvas with the align and distribute tools offered in the likes of Sketch and Illustrator.
- Grid – this piece of coding isn’t even fully released yet, but looks set to be pretty powerful for web design. As Chris House, creator of “A Complete Guide to Grid” puts it:
Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites.
Once you start looking, you’ll see the grid layout everywhere and many of the designs will be directly coded with flexbox. Like this famous company:
I saved this for last, but I think it’s the most exciting. Websites have never been passive activities; you’ve always been able to click on stuff, or scroll. But, things are moving to a whole new level in 2017. If you want to jump into micro-interactions feet first, check out this site (arguably not so micro, but you see the potential).
Micro-interactions can be a whole host of things that really enhance user experience when done right. We’re talking buttons changing color, images gaining a pop border, text going bold as well as the complex and creative ideas.
The Envato Blog states:
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.
Micro-interactions need to be experienced, so a screenshot wont cut it, but here are a couple of awesome web design examples:
- KLM – I FLY 50 – fifty reasons to travel
- Sound of Change – interactive sign-up page
- Reebok – intutive mouse pointer
Don’t Waste Your Time On This One
Facebook Will Become a Content Destination
Facebook and Google have links open in their own article formats, Instant Articles, and AMP pages,cementing their place as destinations for content, not just jumping off points.
I think the opposite is true, especially with recent awareness of fake news sites. The web sites that have put effort into generating great content and establishing a strong user connection will continue to reap the benefits of that work. I think the relationships will only grow stronger as people seek information from trusted websites with personal connections.
It’s also possible that I just have a visceral reaction to Facebook taking control of publishing content as well as everything else. While, not the subject of this blog, you can read a pretty extensive exploration of the issue at contently.com.
In the meantime I plan to design for awesome content on my own site and to use Facebook as a social networking tool!
Share and Learn
So, as you can see, there is a lot going on in the world of web design. It is an exciting field with lots of people doing amazing things. I’m building a list of resources in my widget footer at the bottom of the page. If you’ve got resources to share then please comment with a link and if I like it, I’ll include it in my resource list! Together, we can keep up with the trends 🙂