It seems that every year, there are trends that dominate the country; be it through social media, fashion or entertainment. The same can be said for web designs. When one company or organization finds a winning model for a site as a whole or just one set of design elements that really make their site pop, they can quickly become popular staples.
As technology continues to evolve, 2018 is shaping up to be one of the most advanced years in tech and design ever. Developments in augmented and virtual reality are set to dominate not only web designs but have also begun to show a prominence on mobile interactivity as well. GIFs and other animated designs help to add an element of playfulness and color to make websites look more inviting.
This past December, DesignRush’s own Ross Brown compiled a list predicting the top 10 web design trends that will explode this year — trends in responsive designs, flat designs, material designs, right down to comments on evolving images and graphics. Now, into the second month of 2018, with trends beginning to emerge, here are the 10 best things to make your website stand out this year.
1. Variable Fonts/Inventive Typography
A key part of any good web design is not only how the type looks, but how well it matches the content of the website. You don’t want to be the one known for writing a scathing letter to the superstar basketball player that scorned you, in comic sans. (Looking at you, Dan Gilbert.)
The more creative and inventive a font can be, the more it will stand out and grab the reader’s attention. Typography is also an aspect that any website will ultimately incorporate in one way or another, and depending on the amount of copy a site or page has, the number of different fonts or typography available for use will be exponential.
Jon Peterson, lead UX designer for Artnet reemphasized the importance of typography on successful websites:
"Not only does it play a huge role in readability and usability in terms of thinking about the contrast ratio between your type and your background, it’s one of the first things I can tell that sets apart a good designer from a bad designer,” Peterson said. “Typography is one of the most clutch aspects of design and one of the most important, and also one of the hardest to learn because it’s a very old field (and) there’s a lot to absorb there. I really think that’s one of the big pieces.
2. Virtual Reality/Augmented Reality
Perhaps one of, if not the fastest growing technological trend, is alternative “realities.” This is the new way to create and take in content. From seeing what it would be like to fly with the Blue Angels to more practical uses such as military training exercises, virtual reality is booming.
Relatively newer augmented reality serves more of a creative, entertaining role, but with the quick rate at which it is developing and adapting, don’t be surprised to see more practical applications of AR. With both VR and AR still relatively new, being able to effectively use it can set you apart from other brands.
Peterson said that this growth can be attributed to the technology finally being able to achieve what web designers have wanted to create.
“I think it’s definitely something that’s here to stay,” Peterson said. “It continues to become a better and better experience. I think it obviously has huge opportunities for gaming and other entertainment aspects.”
Peterson also mentioned the experience The New York Times is offering to readers to view the Olympics in a whole new way through AR on mobile devices. As entertaining as many of the ways to use alternative realities may be, he does still say there are practical uses for the technology too.
“I’m sure we’ll see VR used in more and more things like combat simulators for troops to help them better prepare for different combat situations.We’ll probably see it in medical training, that wouldn’t surprise me at all.”
3. Artificial Intelligence
While not as recent as AR and VR, the advancements being made in artificial intelligence have been quite astounding. The ability for your phone or computer to learn from your actions, while frightening to some, also makes the way you interact with technology on a daily basis even easier.
Two of the most popular and successful sites that utilize AI are sites most people use every day: Facebook and Google. From calculating which promoted or suggested posts you would most enjoy seeing, to providing those — sometimes strange but always entertaining — search suggestions, the pros would seem to outweigh the cons of AI to this point.
Perhaps the most notable instance of AI in only recent months was the creation of Sophia; the first robot to be sentient enough to gain citizenship. The reaction to her rise in popularity has been an equal mix of amazement and fear. Many think that while she says she wants to befriend humankind, it could strike just a little too close to a “Black Mirror-esque” creation.
Thankfully, many of the uses for AI that relate to web design are not nearly as scrutinized, and are well worth including to help improve user experience.
4. Inclusive Design
In an ever-changing world — both in and out of design — inclusive design is a relatively new thing. As a way to make it easier to understand, seven principles of inclusive design have been established. They are:
- Provide comparable experience
- Consider situation
- Be consistent
- Give control
- Offer choice
- Prioritise content
- Add value
All of these principles circle back to the idea that your design should be consistent, accessible to all, delivered the same way to each person regardless of circumstances and giving users control in how they access content.
5. Bold, More Adventurous Colors
This one is rather self-explanatory, but also something that is so important in standing out amongst hundreds of other websites. Color can be as much of a nice accent to a website as it can be one of the first things thought of when mentioning a brand.
When you hear the word “Twitter,” you probably think of that light shade of blue on the bird. “Netflix?” That smokey, dark red. Even taking simple colors and uniquely tweaking them to the point where you have bold, recognizable and bright colors all your own, similar to what Design Studio did for the Premier League in their rebrand before the start of this current season. Khroma allows other designers to be able to do the same kinds of things when it comes to editing colors.
Anything that is aesthetically pleasing to the user and can draw their eye immediately is the kind of thing you’re looking for. The use of different Pantone colors for both foreground, background and accents are a great way to match what the overall theme of your website is. If you are able to evoke the emotion that you are trying to get across with your content — through just a strategically chosen color palette at the front of your site — you’ve done your job well.
6. Data Storytelling
The ability to effectively tell a good story is a skill possessed by a lucky few. Outside of novelists and certain musicians, reporters and journalists — both freelance and professional — are the next tier of those able to effectively transmit the story they are writing about.
One of the biggest trends in journalism within the past year is the ability to use copious amounts of data to enhance the impact of their story. The effect that it has had is two-fold: It allows the readers to step back and say, “Wow! I had no idea this many users did this,” and it allows lets the writer display their story and data in an inventive, creative way.
From a design standpoint, the most common way that this is done is through static graphs and charts, often multi-colored, and if you’re lucky, you’ll be able to understand what it’s trying to show you. More often than not though, they are looked at for a couple seconds and scrolled past for good. The truly great examples of data storytelling include data that is displayed in not only a visually appealing way but in a way that the user can interact with.
One great example of this, from The New York Times, allows users to not only see multiple graphs that support and help tell their story but lets them hover their mouse over different data points to get more information.
This is just one of many successful examples of data storytelling, and while not all stories will need a data backbone, those that do and are done right truly stand out from the crowd.
7. Web Animation
Modern-day consumers of digital media are not only looking for a well-put-together website with the information or content they are looking for but also want a site that is aesthetically pleasing to look at that engages them as well. One way to reel in viewers and clicks is to add animations in different ways and to different portions of your website.
Lottie, an app from Airbnb, allows After Effects users to take static images and add animation to them for use in websites and other designs. There are multiple ways this animation can be done, as well.
For a site that relies on the kind of data storytelling mentioned above, the interactivity and movement that comes with clicking on or looking at certain data points make the user feel engaged with the information. Animations can be used as a way to signify different actions that a user may take on a website, be it checking out and finishing a purchase or making users feel better about hitting a 404 error. I mean, who can stay upset with clever animation telling them their page can’t be found?
It's important to note that animations don't have to be Earth-shattering, either. Creative agency We Are Young Blood welcomes users to their homepage with a simple animated GIF featuring brightly colored, spliced together examples of their work and engaging visitors from the get-go. It's a simple yet extremely effect feat that is easy to replicate.
8. Mobile-Friendly Design
Nothing is more frustrating than unlocking your phone to go to a website and having it handle like a semi-truck on ice or look like a boxer after a 12-round slugfest. Okay… maybe there are a lot of things more frustrating than that, but it certainly is a pain for the user, gives the website a bad rep and is something that can be avoided.
One of the best examples of a website that successfully designed their site for both desktop and mobile is Zappos. The difference between their streamlined, easy-to-navigate desktop design and their modern and intuitive mobile design is slight, ensuring their customers have a seamless shopping experience on any and all devices. Want to know what it takes to make your website as mobile friendly as it can be? DesignRush has your answer for that, too!
Ten to 15 years ago, being as compatible with mobile as possible was nowhere near as big a concern as it is now. With phones constantly attached to their users, a web designer can never be sure when someone is going to want or need to check out their site. The more easy/enjoyable it is for the user, the better the website is going to look, and the better chance the user comes back again.
9. Gradient Colors
Not only should your colors be something that sticks with people when they see it, it should also be used as a way to accent certain — for lack of a better word — “acceptable” features on the site. Pictures, graphs or charts, bio’s, etc. Using color gradients is a great way to accomplish this task.
By making the accented area either lighter or darker than the area around it, it allows for more of a “pop.” Gradients are also effective is giving a warmth or cooling effect to the page or area the user is looking at, in turn changing the dynamic of how they feel when on that page. As a transitioning tool, gradients can work for transitioning between sections, shifting between hues of one color, to whole other color altogether. For example, eccentric European singer and swan-enthusiast Björk uses a bold gradient as the background on her website design to set the unique tone for her brand.
10. Creative Layouts
Similar to properly using colors to convey emotion and garner a reaction, picking the right layout can really wow your users. Creatively and effectively using images, copy and organization is vital to a stunning web design. Anybody can hop on Wix or Squarespace and throw together a site with pretty images with some text. Sure, it’s a quick way to get your brand growing and get content out to the public, but you won’t be able to have it designed as precisely as you would want to it be if you took the time — and it will take some time — to do it yourself and add in all the nuances you see your site needing.
Now, it’s easy to sit here and say: “You need to have transitions and colors that no one has ever seen before!” but that really isn’t the ultimate goal when creating a good website. Not everything has to be something completely new to the world, you just want to avoid being bland and boring. Staying away from commonly used fonts, colors and grids is a good place to start.
You want your web design to match what you are trying to do. So if you think you should use a certain shade of a color that some others might not, or have a very bold or subdued font for everything, go for it! If it matches the vision you have for what you want your brand to be, then it’s effective.
Web design trends are always evolving, but by taking advantage of these web design trends now, you’ll be setting yourself up for success in the future. Even if the landscape changes, you’ll already be ahead of the game.
Want to stay on top of all things web design?
Which web design trend is your favorite? Tell us in the comments below!