In 2016, the Internet celebrated its 25th birthday, which means it’s older than 2/3 of our interactive team. In that time, technology has evolved at unprecedented rates. We’ve gone from slow dial-ups on bulky desktop PCs to razor thin smart phones with access from virtually anywhere (except your cabin Up North). While technology advances at lightning speed, design has made a slower evolution. It has to make sense to everyone—from those for whom the internet has existed for a lifetime, to those who consider it to be somewhat newfangled. This has lead to a little bit of, well, samey-ness in design.
In 2017, designers are officially tired of the samey-ness of the web. Here are some ways designers are breaking the mold while keeping their eye on usability.
1. Death of the conventional header
For most of the Internet’s life, website headers were pretty standard—logo on the left, navigation and search, identity and titles, nav links, etc. This does not translate well to the mobile-driven modern web. Today everything is more visual. We tell our stories through images more than words. Hero images, video and animations are the new convention for telling your brand story.
2. New navigations
With the conventional header going by the wayside, navigation is inevitably changing along with it. Like it or not, the hamburger menu is here to stay. It’s practically the new standard at this point. However, it’s not the only option. Users are becoming increasingly tolerant of unique website navigation. Designers are now creating full screen, header and footer sticky navs that work with the textures of more complex imagery. We’ll continue to see even more innovation with navigation in 2017.
3. Enhancing the grid
Once mobile technology allowed us to carry PCs in our pockets, grids emerged as a popular design. They’re clean and allow for simple responsiveness. As we move into 2017 we’re going to see websites break out of that original fixed-width design. Designers are using more modular layouts, either layering boxes of various widths or interrupting the grid pattern with horizontal white space. These designs allow for the simple responsiveness, but they also break out of the dreaded “samey-ness” of years past.
4. Preloaders
If you’re old enough to remember the early years of the Internet, you surely remember Netscape’s preloader—that hourglass of doom letting you know your page is still loading. Preloaders have come a long way since then. They’re being used as design elements that set the tone the overall experience of the site.
5. SVGs
All modern browsers now support SVGs and we’ll be seeing more and more of them in 2017. SVGs, which stands for Scalable Vector Graphics, are pretty ideal for web usage. They load better than your standard PNG or JPG, they size perfectly across all devices and you can add filters that give movement and texture to your images.
6. Getting bold with type
When we say “getting bold with type,” we don’t necessarily mean bold type. It’s more about being bold with messaging that focuses on website content. We live in a world of 140 characters. We pack a lot of messaging into relatively short sentences, and using those rich statements as design elements drives your brand story throughout your site.
7. Creative microinteractions
Microinteractions are the moments on your website customized to your users’ experience in real time. They can function as anything from a subtle nod to the fact that the website is responding to the user — more info pops up when the user hovers over a button — to a call to action — “tweet this!” As interactivity in user experience becomes more important, expect to see more, and more creative, microinteractions in the near future.
With advancements in technologies and a desire to break the mold, it’s an exciting time for web design. There are so many unique ways to tell your story. Use these tools, but be careful to avoid style over substance. In our next post, we’ll discuss how a strong brand strategy drives effective web design, allowing you to make the right choices for your brand.
