By Jeff Yerkey
Web & Interactive Director, Right Hat
Many companies will be celebrating 20 years on the Web this year. Saying websites have come a long way since those first static HTML black and blue text pages of 1995 is an understatement. Web design and technology has exploded in the past few years and 2015 promises to be no exception.
The top 5 trends we expect in 2015 are below:
1. Web Everywhere
The rousing chant of “Internet everywhere” and (shoot me now) the “Internet of Things” is in full swing and it’s a safe bet to say that smartphones, particularly “phablet” tablet/phones, will be out in front. To that end, we expect to see virtually 100% of new websites being built as responsive design or in other words a site that will work regardless of size or type of device you view it on.
Perkins Coie’s new Responsive website optimizes and resizes based upon device
And while your website may not need to display on a toaster just yet, if it’s not responsive, you’ll soon be thrown to the wayside by mobile visitors.
Things to keep in mind this year are:
2. Flat Design
Hang on to your hats! Although surprising to most savvy designers, the Redmond-based giant Microsoft was the innovator in flat design. They created a simple “tile-based” user interface on Windows “Metro” 8 and Windows Phone. This spurred Google and Apple to follow suit.
Flatland: Clockwise from top left: Microsoft Windows Phone 8; icon, iPhone IOS 8; Google Material Design concept illustration
Flat design means that websites load faster, scale better and are easier to read on all devices. It provides a foundation upon which designers can render an exceptional experience to the visitor through rich CSS web fonts, scalable vector graphics (SVG) instead of blurrier JPEGs, and more clear-cut content via layout conventions such as Google’s card design.
3. Beautiful Experience
With the technical superiority of HTML5, Retina image support and CSS, 2015’s websites will look sharper, more vibrant and more expansive.
Webfonts will continue to provide companies with brand-specific fonts that scale perfectly and provide razor-sharp rendering.
Greater bandwidth and the rise of visual-based website coding options like SquareSpace will mean a more widespread use of large-scale videos and backgrounds in order to uniquely brand websites.
Expansive video and large scale web fonts make Greenpeace’s ‘Into the Arctic’ microsite dramatic and moving.
Retina-style photos, which are twice as sharp as traditional web images mean bigger jaw-dropping images that scale much better to tablets and smartphones.
Combine all this with richer, lusher colors (like Pantone’s Color of Year 2015, Marsala) and you have no reason to have a boring looking site.
4. Enhanced Storytelling
Whether it’s a splashy infographic conveying stats in a graphically compelling way, animated GIFs showing off an action over time or parallax structure helping tell a complex story by scrolling, there are a myriad of ways to tell your brand story. So don’t tell it with mere words!
Impressive HTML5 animations, parallax scrolling and layered stories make this site a winner.
Subtle animations can draw the eye to tidbits that help pull visitors into more comprehensive pages. Such effects work together when you think of your brand as best conveyed through graphical storytelling.
And lastly (for the geeks among us) are browser cookies, which can be used to set and track user history and preferences to make subsequent visits to your site more personal and meaningful.
5. Fresh Navigation Models
Divining the depth and breath of your website – and the user’s travels while visiting – has never been more exciting. Driving this excitement are new, splashier types of navigation. We all want the nav to get out-of-the-way when we’re focused on content. And on smartphones, every square pixel’s space counts. In a way, it reminds us of a movie narrator: ease me in to the experience, explain the sticky parts and then get the hell out of my way. The show must go on!
Changes to site navigation are happening at opposite ends of the spectrum and in 2015, we see them meeting in the middle.
On desktops, we want to always be able to find our way through the use of pinned navigation or navicons (the “hamburger” menu) that are always present, like Downton’s favorite head butler, Mr. Carson; but when clicked, spring to center stage with large and well-designed menus that contextually guide the visitor.
New York’s Museum of Modern Art features special exhibition with hamburger-style menu, giving way to full frame navigation
When triggered, these mega-menus must be well designed and easy to parse. But don’t overlook that navigation can also incorporate a small feature or story that visitors weren’t even expecting.
Navigation mega-menus also provide a core branding area that can visually support your strategic goals while sending users to areas they might not think to visit. (Web surfing anyone?) Use it as an ancillary pitch space.
On smartphones a tap should reveal just enough choice so as not to overwhelm and confuse the person standing up on the train trying to find her page. This is the essence of “who, what, when and where” (save “why” for the destination) navicon hamburger menus.