Every year new trends emerge within the web design industry and in 2018, the focus will be on designing simple but powerful websites that are well optimized for mobile devices and heavily focused on brand and user experience.

  1. Playful brand-themed illustrations
  2. Subtle motion effects with cinemographs and particle background
  3. Vibrant, adventurous color schemes
  4. Big and bold typography
  5. Creative layouts
  6. Mobile Prioritization with responsive logos, Scalable Vector Graphics and Accelerated Mobile Pages
  7. HTTPS

Playful brand-themed Illustrations

 

Custom illustration has taken a backseat to stock imagery alternatives for much of the last few years. It wasn’t long ago stock images were the hot thing. Then there was custom photography, but all that is changing. We saw a lot more illustrations on websites in 2017 and the demand will continue to grow in 2018.

Whether they are whimsical, practical or purely artistic, illustrations set a tone for a brand and add an element of fun to their content. While this trend is perfect for businesses that are fun and energetic, brands that are typically perceived as serious should also consider utilizing this trend – illustrations can help make their brand more approachable to their customers.

Applying this trend on your website: No, you don’t need to illustrate your entire website. Simply incorporate a little bit of illustrations to spice up your website. Remember, this trend isn’t only about being whimsical, it’s about using illustrations to boost your brand’s recognition and adding playfulness to your content.

Examples:

 

Subtle motion effects with Cinemographs and Particle Background

 

The human eye loves motion and in 2018 we will see more experimental uses of motion in the form of cinemagraphs and particle backgrounds.

Cinemagraphs are also known as “moving photos.” Not quite a photograph and not a video either – it combines still photographs with the attention-grabbing movement of video. Cinemagraphs has been around for some time now and we’ve all seem them on many travel and tourism websites. The best cinemographs look very still and then surprise the viewer with a subtle motion.

Similarly, particle backgrounds allow you to add motion effect to your website. Particle background are lightweight javascripts that allow movements to be created as a natural part of the background.

Examples of websites that are brought to life with the help of a subtle particle background:

Applying this trend on your website: You can use cinemagraphs to build better product pages. Fashion, as well as food, photography can be enhanced by cinemagraphs. Examples include clothing fluttering in the wind and milk pouring into a cup of coffee. There are many options when it comes to cinemagraphs – you can purchase ready-made stock cinemagraphs from sites like Shutterstock and Gallereplay, or you can create your own using tools and services like Flixels, FlickGraph and Plotgraph.

 

Vibrant, adventurous color schemes

 

If you’ve been thinking of experimenting with colors on your website, 2018 is the year to do it. This year is all about breaking away from the web-safe, traditional color schemes and be bold, colorful and original.

The color of the year is Pantone 18-3838 Ultra Violet, a deep blue-based purple that’s not commonly found in nature and certainly not an easy color to just slap on to your website. But, it is a great accent color and it works well with both pastels and electric hues (think 80’s and 90’s).

Purple is also a popular color to use when creating duotones. Duotones are images that only use two colors. It’s a technique that’s been around for quite some time, often sepia toned. But in recent years, we are seeing more of them in brighter, bolder colors. Purple works well with contrasting colors like orange, yellow and green, as well as colors like blue and pink.

You can even take it up a level and create two-tone color schemes for your website. Khroma is a great tool to use in finding interesting two-tone color combinations.

Gradients are also making a comeback, and this year, it’s all about being big, bold and full of color, but with softer, subtler transitions. We are going to see gradients in the form of vibrant interfaces, backgrounds and illustrations. And the most popular of all – gradient filter over photos.

Examples:

Applying this trend on your website: While purple is not a natural color, shades of it do appear in some images and environments. Take advantages of purple in images and video to use the color without completely changing your website’s color scheme. Don’t get locked up in a deep purple just because it’s the color of the year but at the same time, be adventurous and creative and most of all, have fun!

 

Big and bold typography

 

The header text is another website element that’s getting shaken up in 2018. We’re talking about bolder, oddly spaced, transparent, haphazardly placed header text styles. We are already seeing the use of extra-large font sizes, as well as the pairing of serif with sans-serif fonts. Another interesting take on typography is cut-outs, as seen on the Danbury and LIG Works websites.

Another trend in typography is variable fonts. Variable fonts is an extension of the Open Type specification and it allows a single font file to store a continuous range of design variants. In other words, a single font file that behaves like multiple fonts, eliminating the need to call a dozen different fonts in your CSS. Variable fonts is a joint project between Adobe, Apple, Google and Microsoft, making it an emerging usable technology that is supported by design software, browsers and operating systems.

Applying this trend on your website: The availability of variable fonts is still limited, but we do expect to see a growing number of variable web fonts this year. For the time being, check out Google Web Fonts for the many pretty serif typefaces you can use on your website.

 

Creative layouts

 

This year, we will also see more websites take on the notion of “organized chaos” – less grid and more creative layouts that utilizes concepts like overlap, vertical whitespace, curved lines and asymmetry.

The appeal of the asymmetrical layout is that it is unique, distinctive and experimental.

Example:

Applying this trend on your website: The horizontal menu along the top of your website is still a good practice, but this year, experiment with different menu styles (such as floating or sticky menu) and don’t be afraid to display your content in unique and untraditional ways. But do keep in mind that users still need to be able to find important information on your website without searching too much.

 

Mobile Prioritization with responsive logos, Scalable Vector Graphics and Accelerated Mobile Pages

 

Mobile browsing has now officially surpassed desktop and the incredible variety of screen sizes available has pushed designers to think mobile-first. In fact, Google is just about ready to take mobile prioritization up a notch with mobile-first indexing.

As mobile experience takes an even greater priority, we expect to see more mobile-first techniques and tools making their way in 2018, including responsive logos, the use of SVGs and Google AMP.

A true responsive design shouldn’t be limited scaling content up or down. Other design elements, such as icons and logos should also be flexible. Because complex logos are difficult to render on smaller screens, we will see more businesses adopting cleaner, simpler logo designs. An example is the logo redesign of MasterCard –by dropping the shadows and wordmark found on the old design, the logo is simplified to confirm to various screen sizes without losing its recognizability.

And speaking of responsiveness and scalability, another trend we will see is SVG overtaking traditional file forms such as PNG and JPG. SVG, or Scalable Vector Graphics, is a vector image format – it’s comprised of lines and curves instead of pixels. When you zoom in on a vector image, you still see a curve or a line; but when you zoom in on a raster image (ie. JPG), you will see pixels. SVG is essential to providing quality multimedia experiences for users, such as 3D images and 360-degree views, which are quite popular with many real estate and travel websites.

Finally, whether you are designing a new website or retrofitting an existing one, AMP is something to consider. AMP, or Accelerated Mobile Pages, is an open-source project developed by Google and other web giants (including Twitter, WordPress, Pinterest). Centering on a new open framework called AMP HTML, it encourages the design of mobile-optimized content that loads quickly across devices.

While being mobile-friendly is a ranking factor, AMP is currently not. But we do expect it to be in the near future.

Applying this trend on your website: If you are using WordPress, you can refer to Google’s WordPress-specific documentation on how to make your responsive site mobile friendly. In terms of AMP, AMP pages are currently being served only on mobile devices, and only within a special portion of the Google News results. So, if the majority of your site traffic comes from Google News and/or from mobile users, then you can consider getting the ball rolling. There are a number of plugins available to help you, such as Automattic’s AMP plugin, AMP for WP and Glue for Yoast SEO & AMP. For all other websites, you can probably wait until Google releases more information on the exact usage of AMP results.

 

HTTPS

 

Not a design trend per se, but it’s important enough to include in your 2018 website plans. In early 2017, we saw Google and Mozilla marking HTTP websites with a password field, “Not Secure.” Then the warnings ramped up and by Fall 2017, the browsers began issuing a warning for any HTTP websites with a text field. This year, the browsers will kick it up a notch and mark any HTTP website as “Not Secure.” In other words, if you have not yet installed an SSL certificate on your website, your website will be marked “Not Secure.”

Additionally, Google and Mozilla are not the only companies enforcing the change. WordPress is also making their own attempts to force adoption of HTTPS.

Applying this trend on your website: Given the big push HTTPS has received already, you should look to make the switch sooner rather than later. If your website is still running over HTTP, you need to get SSL.

Comments

comments