Remember what web design trends use to look like in the 90s and 2000’s?!?
Things were simple back then; more attention to text and the pages remained quite dull.
Just take a look at fanfiction.net, which has been around since 1998. It’s a great example of a typical web page back from the ol’ Web 1.0 days.
FanFiction.net…you don’t look a day past 1998.
Things have come a long way since then.
With the increasing importance of web technology for businesses and individuals alike, and with the introduction of new uses such as mobile, designers needed to come up with new design concepts. We’ve been through material designs, hamburger menus, animated backgrounds, and in general simple typography and designs to cater for the increasingly speedy nature of modern life.
When you spend as much time online as I do, and when you’ve been surfing the net as long as I have, you start to notice some things.
I’ve put together a list of web design trends that I’ve noticed throughout the last year.
Menus and navigation
Hamburger menus
This trend came out of the mobile-first approach as a design solution for smaller screens, however they’ve risen in popularity and are being used on desktop screens. A hamburger menu rids the need of taking too much room on a website, and makes a site appear free of navigation clutter like drop-downs, social icons, search bars and utility links. Since most people are familiar with the usage of a hamburger menu their ubiquity across screen sizes may go unnoticed.
Vertical user flows
Mobile is here to stay and Google confirmed last year that it witnessed more searches via smartphones than desktops. This has caused many web designers to give their websites the feel of vertical patterns and scrolling. There was a time back when I was in school where people built horizontal scrolling sites, and they were cool!
But you just don’t see them around anymore.
Now it’s become important that websites allow users to scroll more on smaller screens. In short, vertical user interfaces have become the thing of present in 2017. The act of vertical scrolling is being used to lure prospective customers into moving down deeper into a site’s content, and thereby increasing conversion rates.
Fewer menu options
If you were paying attention in 2016, many websites were redesigned with reduced primary navigation options. This has only continued in 2017. Header menus that previously presented 5-7 options have been reduced to 3-4.
Themes and colours
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.
Dark aesthetics
I’ve noticed the last while that the current versions of my software tools have been released with dark UI designs. I think this trend is becoming more common in web design as YouTube has released an optional ‘dark theme’ this past year.
Bright gradients & two-tone photography
Gradients have been huge lately. A good example of this would be Agadir-based agency symodd.com who make this two-tone effect look fresh and modern, with their full-screen, gradient-washed homepage.
Toning has always been one of the most accessible photo manipulation tricks designers can use in Photoshop and Lightroom, and these parred-down, two-tone colour schemes look cool and contemporary on Australian Design Radio.
Landing pages with monochromatic colours and a contrasting CTA button
CTAs (call-to-action) should always stand out, and a bright pop of colour on an otherwise neutral or contrasting colour palette can really do the trick.
Fonts
Dynamic & bold typography
The advent of Google Fonts and Adobe Typekit has made using new and different fonts and scaling them to large sizes much easier than it ever used to be. It’s allowing designers to be able to do simple and dramatic layouts, which is benefited by today’s high-resolution displays. Basically, it gives you the opportunity to display your brand identity in a unique and differentiated way.
More and more companies are turning to big, bold typography in the ‘above-the-fold’ to anchor their home pages. This style works best when the rest of the page is kept minimal and clean. Much like these examples here.
More serif typefaces
For anyone who’s studied design in school, you would have heard that sans serif typefaces are preferred on screen displays. They are believed to be easier to read than serif fonts. Serifs or other typefaces with thin alternating strokes can disintegrate at certain sizes or screen resolutions. However, since more people have high definition screens on all their devices, this has lead to enhanced readability and designers are now making greater use of serif typefaces.
Mixing horizontal and vertical text
Freeing text from its usual horizontal alignment and placing it vertically on a page adds some refreshing dimension. Take this example from director Matt Porterfield, which mixes horizontal and vertical text alignments on an otherwise very simple page.
Oversized type
Source: nurturedigital.com
In-your-face lettering is going to continue to get bigger and bolder. From single word homepages that ask users to move through the design on a whim, to words in interesting typefaces or with splashes of color, text is more important than ever.
Graphical elements
More Authentic Imagery
Every business owner who’s been making a living online since the early 2000’s has always told me, “never use stock photography.”
Who ever knew these people were 10-15yrs ahead of this trend?
Because of the popularity of Instagram and other visually driven platforms like Pinterest, there has been a significant increase in companies and websites opting for authentic photos rather than generic stock images.
Business owners realized the importance of showing real people and company processes, to establish a stronger connection with their clients and to “put a face” to the brand. Photographs, custom illustrations, as well as cartoon type of videos are a powerful tool for attracting new clients, easily explaining a new concept and building up strong brand recognition.
More SVGs
Scalable vector graphics (SVGs) present plenty of advantages over traditional formats such as PNG, JPG, and GIF. Instead of being pixel or raster-based, SVGs are resolution-independent, so they will appear stunning on any device or screen. Are you using SVGs in your design work yet?
Hybrid material design
There was a trend in design for going very flat. Microsoft’s operating system is indicative of this. They got rid of shadows, textures and everything got super flat. That was predominantly the style for a while and now we’re starting to move away from that.
Google has developed something called material design which is essentially a hybrid between flat and a little bit of a more volumetric shape built into it, so it’s easier to navigate and move around while protecting the modern visual aesthetic. Also, material design is better for mobile in terms of understanding how to navigate and what you actually need to do on the website or app.
Full-width & full-screen media
Full width image/video sliders are very trendy these days. Studies have shown that large images make people stop and take notice. It’s exactly that kind of “interruption” that contributes to higher levels of conversion.
Illustration
More companies are turning to illustrators and graphic artists to create bespoke illustrations for their websites. After years of flat design and minimalism, adding illustrated touches to your site is a great way to inject a little personality, as seen in this charming example from NewActon.
Geometric shapes and patterns
Whimsical patterns and shapes are popping up more frequently on websites, adding some flair in a landscape otherwise ruled by flat and material design. Toronto-based design studio MSDS uses patterned letters on their homepage.
Video, animation and sound
GIFs and Cinemagraphs
Whether they know it or not, people love animation. Everything from large animated backgrounds to subtle small animations like GIFs and button hovers. The human eye is immediately attracted to any movement. Animation creates a level of visual feedback for the user, which in turn, makes for more attractive and engaging experiences.
Cinemagraphs (high-quality videos or GIFs that run on a smooth, continuous loop) have become a popular way to add movement and visual interest to otherwise static pages. They are even being used more commonly in display advertising.
The ability to create animated loops is much more accessible now than in days past. Back in school, I had to approach animation projects from the concepts found in stop motion. Basically, I was drawing and/or photographing every single frame and then using computer software to make a video out of it. It was always a lot of work even to just make the shortest of animations.
These days it’s almost like you’re working in reverse. In the case of cinemagrphs, you can use mobile apps (like Flixel) to shoot video first and then use software to make animated stills. Another way to look at it is as a subtractive move. You’re taking information out of the video to make still motion. This has shortened the overall time it takes to make an animation. As a web design trend animation will only continue to change and evolve but we’ll always be using animations in our designs.
Videos with sound
One thing I’ve noticed this past year in social feeds like Facebook and Instagram is that when scrolling past videos they now autoplay with sound. Whereas before, they would autoplay with captions and the user needed to click on the video to get audio.
There was a time in the last 5 years where Google and Facebook would penalize advertisers who drove paid traffic to landing pages that had videos that would autoplay. I’ve personally found more lenience towards this recently. It also has me believing that users are becoming more accustomed to autoplay media while online.
Broad Observations
Responsive First Approach to Design
‘Mobile’ and ‘responsive’ design are buzzwords that have been thrown around a lot in the last several years. With that being said they have also changed a bit as well and I’d like to provide my own distinction. Responsive design is an approach to web design that uses CSS media queries and flexible layouts.
The ‘mobile first’ approach simply means designing for the smallest screen first and then working up from there.
Not too long ago website owners use to have separate stylesheets for different screen sizes. Essentially having one set of pages for desktop and another set for mobile.
There has been an upgrade to web design thinking in how website owners manage their sites. The ‘responsive design’ approach really is an evolution over the ‘mobile first’ concept because it reduces the number of files needed for browsers to display a site. Removing this bloat makes websites run better so designers can truly focus on user experience.
Emphasis on the content
We’ve spent years adding things to our websites such as sidebars, headers, banner ads, sidebar ads, popups, social media buttons, etc. All of these elements have ended up cluttering our websites and taking up more and more real estate, taking the attention away from the entire point of a web page: the content. In 2017, websites started moving back to basics and placing more emphasis on content.
No more traditional web design
Companies are beginning to wane on using traditional web design concepts. In the old ways, the role of the design was to make the tech look good to the audience. With the emergence of experience design, the focus and reach of web design have shifted. By using human-centered concepts, it has frantically changed the way we view web designs. User experience has become the basis for web design now.
The start of the end of flat design
All the rage that once existed in flat web design has just about run out. Web designers have just about burned out from applying the same basics over and over again. Because this technique is being used by virtually everyone, websites often look the same overall.
We may be looking at a future where flat web design may become obsolete. In their place, more imaginative and unique layouts and designs will take over.
New technologies
Virtual reality & 360 videos
Virtual reality has never had such a bigger year than that of 2016 and now it can be experienced on browsers as well. It has been gaining momentum very quickly and has been seen in Samsung commercials as well. VR is on the same path as that of conversational interfaces. However, the user interface challenges with VR are far more robust and easier to understand than conversational interfaces. I’m expecting to see a lot more virtual and augmented reality in the near future.
AI-powered bots and conversational interfaces
In terms of visuals, bots are unlikely to have a big impact on web design, but they will significantly influence how designers think about creating websites. AI-powered bots are going to get even more realistic and complex, empowering businesses to automate communication and sales. Using tools like Letsclap, online businesses will be able to connect with their customers via messaging apps like WhatsApp, Facebook Messenger or WeChat, providing customized customer support and commerce. Conversational interfaces will be a huge shift, helping big brands express different sides of their personality and making them more human and approachable.
More than 900 million people around the world use Facebook Messenger every month, so the introduction of Bots for Messenger last year was a welcome addition to the toolkit of communication channels for businesses of all sizes. Any brand can build a Facebook bot now without any coding knowledge. Integrations with tools like Botsify or Chatfuel make the setup process so simple that it’s becoming unusual not to use a customized bot. This year, we’ll see the conversational interfaces reach a higher level of personalization and inventiveness.
Web design trends
Do you agree with the web design trends you have seen in this article? Have you seen some unexpected web design trends or changes from previous years? I’d love to hear what you have to say so leave a comment below.
Subscribe to my email list so we can keep in touch.