While every designer has their own personal tastes, every year there are thousands of websites built that are undeniably user friendly, creative and innovative. We’ve put together some of the most innovative websites, web design trends, web technologies, and design techniques that were popular in 2018. We can’t wait to see what the web has in store for 2019.
Design Trends
Broken Grid Layouts
One of this year’s more innovative web design trends was the broken grid layout. This unique layout is extremely effective at breaking up the monotony of the traditional 12 column website grid layout. It allows for brands and businesses to bring attention to specific messages, images, videos and more to really tell a brand story in an effective way.
The name broken grid layout may be a bit misleading as the design will still conform to a grid of sorts. In a broken grid layout, design elements will extend or shift across gutters and columns. You could also think of a broken grid layout as an overlapped grid layout or an offset grid layout.
With the rapid adoption of CSS grid, web designers now have more opportunity to create designs that are less like the traditional fixed column design, and more like traditional print design. Broken grid layouts are not the right fit for every brand, but was absolutely a prevalent design trend across the web in 2018.
Interactions & Animations
In 2018, more and more websites were designed using intricate SVG driven web animations, as well as animations are driven by user interaction. With canvas and Javascript animations being fairly widely supported at this point, developers have become more and more comfortable with using these technologies to create interactive, innovative websites. In addition to using vanilla Javascript to animate SVG elements, a number of Javascript libraries were created for developers to use, for example, Vivus.
Subtle animations like directional fade in animations (for example fade in and up), were also very popular for text and image elements. These animations are also typically triggered based on the users scroll position, so as they scroll down a website, the elements will appear into view. This technique is an excellent way of breaking up the monotony of heavy content pages into image and text blocks. User interaction like hovers and clicks are also a popular method of triggering various website animations. Making the web a more interactive place seems to be the general direction that innovative web design is moving for 2019.
Web designers also began utilizing various creative page transitions in websites recently. These page transitions are also typically triggered by website scroll position, or Waypoints, but can also be triggered on a click event. Page transition animations can be something as simple as a quick sweep state-change animation, however, many designers got quite a bit fancier. With geometric deconstructions, various zoom and fade based transitions, interactive video transitions, and so much more, it is clear the web is no longer being treated as a static canvas for designers. You can see even more great examples of this at Design Rush.
Minimalist Navigation
Another popular design trend for 2018 was using minimalist navigation. Minimalist navigation is similar to using mobile-friendly navigation in a desktop view. This means that unlike traditional websites, the website navigation is not inherently visible at any point, but is triggered by a menu toggle of some sort, in many cases a hamburger icon.
This trend was driven by a number of factors including mobile-first design, responsive design, and an overall push towards minimalism in web design. Minimalist navigation not only allows for a website to have a cleaner, less busy, header area, but it also allows for web designers to build more robust, logical website navigation utilizing a full screen take over. When designers have the ability to utilize the full viewport for their navigation they can construct website navigation that acts more like a website index or table of contents than traditional header navigation ever could.
And while there may still be some users that are confused when presented with minimalist navigation, most internet users understand that a hamburger menu indicates a navigation trigger. So when it comes to user experience, there should be no concern about confusing your users, or whether or not they’ll be able to figure out where your website navigation is.
Full-Page Video and Background Video
One of the most popular and innovative web design trends for 2018 was utilizing full-page background video in place of static background images. Background video adds texture and motion to the user experience, which really grabs the users attention. Video backgrounds also give websites a really fresh and unique look. While many brands and businesses out there are recycling a lot of the same stock photography on their websites, a video background will be something unique to your website.
Background video can be served as either HTML5 video or streamed from a service like Youtube or Vimeo, however, you should take a few things into consideration. First, you should consider the size and the length of the video. You don’t want your video to be more than 15-20 seconds and should be as small in size as possible. Remember, this video is not one that the user should necessarily stop and watch, but one that should be used in place of a static background image. You should also make sure your video has a high enough quality. You don’t want to cheapen the look and feel of your website by using subpar video assets or video editing.
Background video can really bring a website to life with little to no additional coding necessary, which has made it an unbelievably popular and innovative web design trend that will only continue.
Typography
Serif Fonts Gain Popularity
Prior to computers having retina screens and browsers really implementing solid font support, most web designers stuck to using sans-serif fonts. Sans-serif fonts ensured maximum readability as well as flexibility in the design. As technology has continued to improve, and user experience has moved to the forefront of design, we’re beginning to see a much more elaborate use of typefaces in web design.
Serifs are great because they can be used for headline fonts or for body fonts. If you’re looking to create elegant looking titles and section headlines, there are a number of serif fonts that will fit the bill. For example, you can find a few of our favorites like Playfair Display and Lora on Google Fonts. If you’re looking for something that is extremely readable, there are a number of extremely clean serif fonts that will give your website that clean print look. Many designers also like to mix their heading and body fonts, one a serif and one a sans-serif.
Text-Driven Design
Another innovative web design trend many designers began more regularly using in 2018 was text driven design. The true core of any website is its text content and, more importantly, its message. Many designers have begun taking this to heart and are constructing entire designs and layouts using nothing but text and white space/dark space. While images do help communicate a vibe and a feeling, nothing will ever be more powerful than words when trying to clearly communicate a brands message.
Justin Jackson, an internet entrepreneur and popular bootstrapper, wrote a popular piece several years ago called “This Is A Web Page” that does a great job of really capturing the importance of a website’s content. Max Kaplun’s portfolio website is another great example of truly excellent typographic web design. As you’ll see, his homepage is simply a brief professional bio, stylized to be visually appealing and to bring attention to the most important aspects of the content.
Frontend & Backend Web Design Technology
CSS Grid
If nothing else, 2018 was the year of CSS grid. As CSS grid becomes more widely supported by browsers and devices, more developers are beginning to incorporate it into their innovative web design projects. CSS grid allows for web designers to create user experiences that conform to a more traditional print-style grid. It also provides for a much more flexible and usable grid system than Flexbox does.
This does not mean that CSS grid is here to replace Flexbox, in fact, it’s actually the opposite. CSS grid becomes even more powerful when combined with Flexbox. For example, you could create a simple 3 by 3 grid with CSS grid, and then use Flexbox to center the items within each grid element. As web design becomes more innovative and creative directors become more adventurous, these and other CSS technologies will continue to evolve and improve. As a result, powerful, effective web design will continue to drive the Internet, and really all online business, forward.
JS libraries
Over the past several years Javascript has become one of the most popular languages on the web for both frontend and backend development. As a result, many developers have begun creating a variety of Javascript utilities, Javascript tools, and Javascript libraries. These tools help simplify web design for other developers as well as to continuously move the needle as to what makes web design innovative.
At this point, if you have user experience need, chances are there’s a Javascript library for you. There are libraries that perform basic utility functions, like dynamically truncating text, and libraries that perform more complex functions like animating SVGs or monitoring user interactions.
One of the most popular Javascript libraries for the past decade or so has been jQuery. According to BuiltWith, about 86% of the top 100,000 websites in the world are currently using jQuery. As a library, it simply makes the syntax for vanilla Javascript a bit more simplified. For example, instead of requiring a lengthier function to animate the opacity and visibility of an element with vanilla JS, there is a simple ‘.fadeOut()’ function that can be applied to any element.
As Javascript continues to drive some of the most innovative web design on the Internet, I’m sure we will only continue to see more new and interesting technologies being created with this language.
Web Design Inspiration
Here are a few more examples of some of the more innovative designs of 2018 of the types of innovative web design we detail above.
PlaygroundIT – Broken Layout Design
Conspire Agency – Typography and Shapes
Byzantium – Whitespace Design, Javascript & CSS Animations
Parkbench – Illustrations, Geometric Shapes, Whitespace
Beyond The Frontier – SVG Animations, Interactive Frontend Javascript, HTML5 Video
Innovative Web Design In 2019
Web design has come a very long way since the early days of the Internet. And as web designers continue to push the envelope when it comes to design, layout, and technology, it will only continue to progress. As design trends change, new styles are introduced, and new tech becomes available, web design best practices and websites at large will only continue to become more impactful and usable.
