2019 is here! Along with the new year come new trends and directions in the web design industry. With ever-evolving technology, designers and developers have been pushing (and even breaking) the boundaries in really exciting ways.
Here are 5 trends that we think will dominate in 2019:
1. Speed
According to Google, 53% of mobile site visits leave a page that takes longer than three seconds to load.
Source: Think With Google, Google/SOASTA Research, 2017.
Typically, this is looked at as a problem to be solved in the development phase of a website, not design. While developers do have the responsibility to code efficiently, the weight of this problem doesn’t fall entirely on their shoulders. Web and visual designers also need to think ahead to how their work will impact the speed of the website they’re crafting.
In general, the more layered and complex a design, the more elements that need to be loaded. Starting out with a more minimal, smart design can help avoid a lot of problems that will affect your website’s loading speed.
In 2019, designers will be even more focused on what they can do to lighten the development load and make sites as fast and efficient as possible without sacrificing design.
2. Video
Video continues to be huge and won’t be going anywhere soon. Whether you use video as a background element, as a resource for your customers, or for people to learn more about your company, it’s hard to go wrong. A quality video can take your website and branding to an entirely different level. Oftentimes, an image and copy can’t achieve what a video can. As the ability to compress and use videos on websites gets more efficient, we’ll definitely be seeing new ways to use them.
Examples:
Seedlip Drinks: The background video helps build the story and character of this brand in a way that images wouldn’t be able to!
Jveb Studio: This studio’s brand video on the homepage showcases their work in a really fun way with their video. Notice that it also only plays as you hover over it!
MAI LAN Pumper Music Video: This music video is actually interactive!
3. Pushing Design Boundaries
a. Breaking the Grid
The “grid” has been the designer’s guide for websites for quite a while. Structure and order have been our mantras. However, as coding technology continues to advance, it allows designers to experiment with how content is presented. Unexpected and asymmetrical layouts are becoming a lot more popular and will continue to be a trend in 2019.
Examples:
Times Talks: There’s definitely no strict grid here, and it’s amazing!
Rezo Zero: This is reminiscent of a print layout, and I love that we can do this on web today!
Puree Maison: This site breaks the grid in some spots and sticks to it in others resulting in a visually intriguing layout.
b. Organic Shapes
Along with being able to take liberties with the grid, designers are pulling away from the typical shapes you see on many websites. Instead of using circles, rectangles, squares, and straight lines only, designers are pulling inspiration from more organic sources. 2019 will bring even more curves, angles, and overall fun in websites.
Examples:
CrowdRise: CrowdRise uses lots of organic curves and shapes in their graphics, giving the site a friendly, human feel.
Zenbu: As you scroll down the page, you see so many curves that make you want to keep exploring.
Mawla: There are so many different shapes, but it doesn’t feel overwhelming–it feels fun!
Conspire: Wild shapes! Wild shapes everywhere!
c. Overlapping Elements
Another boundary-pushing trend is intentionally creating overlapping elements on the page. This technique can help boost visual interest on a page and give depth to a website that you wouldn’t get otherwise.
Examples:
Taproot Agency: The use of overlapping elements and shadows gives this website a very 3-dimensional feel.
Timeless Living: This is a good example of text overlapping images–the light and bright images ensure the text is still legible.
Stripe: The angles and tilted images at the top make this site stand out.
4. Micro-Animations
Micro-animations are small animations triggered by a user’s interaction with a website or app. For example, when you hit the Like button on a Facebook post, there’s a small animation of the hand. Even though you might not even notice the animation, it’s a small thing that enhances your experience with the website. Another example would be animations that are triggered as you scroll down the page. These types of micro-animations tend to be more noticeable and sometimes can be overwhelming. When done thoughtfully, though, they serve their purpose to guide and delight the user.
Micro-animations are everywhere, and in 2019, we’ll continue to see them popping up on sites that didn’t previously have them, as well as websites and apps using them in new ways.
Examples:
Powderkeg: Hovering over each project in our portfolio brings up more to see.
Filament Ag: At the bottom of the home page, when you hover over the photo boxes, they darken and the button fills in. These are pretty simple micro-animations, but they’re really successful at giving the user obvious feedback when they hover over something they can click on.
Mailchimp: Hover over the logo 🙂
KOOX: As you scroll down, the animations are subtle and quick, but very delightful.
5. Accessibility
Over a billion people (or roughly 15% of the world’s population) have some form of disability. Many of these disabilities impact someone’s daily life–and that includes using the internet. If your website is unusable to 15% of the population, you are missing out on a huge audience. Not only that, but it’s the right thing to do to lower barriers of participation and make room for everybody.
Some of the most common accessibility issues are:
- Color contrast ratio: If there isn’t enough contrast between important items (like the text and the background), many users may not even be able to read it.
- Ways of navigation: Many people may use only their keyboards to navigate a website (by using the tab key and/or space bar). An accessible site should easily allow for this.
- Plays well with modern browsers and assistive technologies: Your website should render well in all modern browsers and should work with assistive technologies like screen readers.
- Easily understandable and consistent: The overall language should have clear formatting that is easy to read. Your website’s navigation should be the same throughout the site.
Accessibility in web design has been gaining more and more traction during the last few years. 2019 is going to be the year that many companies start seriously auditing their existing websites for accessibility issues, which is a great first step. Even better, we’ll also see more companies start their website from scratch, with accessibility in the forefront of their goals (which is referred to as Inclusive Design).
Final Thoughts
These are by no means the only exciting things that will be happening in 2019! Trends come and go and most of them only make sense in certain applications. It pays to be thoughtful about your own brand and website when deciding what makes the most sense for your audience. For example, big and flashy micro-animations will not be suited well to a healthcare website. Improving accessibility, however, could be crucial.
Our team is excited to see what 2019 brings to the web!
