Skip to main content

5 Web Design Trends for 2018 You Will Want

By January 29, 2018May 21st, 2020Design Tips

5 design trends for 2018

This is part of our ongoing “Design Tips for Clients” series. Whether you’re one of our clients or you’re looking to learn about design, we’ll give you an introduction to color, typography, industry jargon and much more.

It’s that time for yearly reflections and looking forward. One of our tasks in preparation for the new year is looking into upcoming trends that might give our work that extra edge without it distracting from the content. We’ve made a list of five trends that we like and would recommend to a client.


What it is: Using type as your visual focus in a design. It’s hardly a new concept, but it’s one that isn’t utilized a lot as designers and their clients focus on photos and videos as primary visual elements.

Why we like it: From the designer standpoint, the focus on text and font choice is a great creative challenge that can help our clients stand out and strengthen their branding. Using text as a focal point instead of images or video decreases a web page’s download time, which is important for those on a mobile device. We think this trend, if used in the right conditions, could actually live past a typical trend life-cycle and not make a website look dated.


Example of animations and progress bars from 99design.
What it is: Animations are actions that occur in response to a user’s interaction on a page or a preset condition.

Why we like it: Once again, this is not a new feature. Due to advances in browser technology and internet speed, however, using animations is more effective than it used to be. In the past, animations were often misused and distracting to page visitors. Now, animations are being used to improve functionality or add depth to a design. They can be applied to illustrations or graphics to add a sense of eye-catching movement in place of videos that slow down page load time. When it comes to functionality, more designers are attaching animations to scrolling or navigation movements. For example, 99designs has a progress animation that shows a reader the percentage of a post they’ve read so far. If a visitor is limited on time, they use the information provided by this animation to determine if they have time to finish the article or need to read it later.


What it is: A sticky element is an element, such as a navigation menu, that remains visible and accessible while you scroll. It’s common to have sticky headers on desktop and mobile web pages. However, a lot of the navigation on mobile is located at the bottom of the screen. To account for the new device structure, designers are experimenting with moving elements to the bottom of the screen to improve user experience.

Why we like it: While mobilizing websites is pretty much standard, the navigation is still located at the top of most webpages on mobile, though having it fixed in place is not. This change of location could make page navigation a better user experience because it accounts for device structure and user-interaction with the device and the website.


What it is: Thanks to advances in screen technology, designers aren’t limited to web-safe colors anymore. Bright and bold colors are becoming more popular across websites, especially in the form of rainbow gradients. Like animations and illustrations, colors are taking the place of photos and videos as a visual focus in order to improve user experience on mobile.

Why we like it: As with all trends, using bright colors in your design can go wrong quickly. If thoughtfully implemented for the right website, however, bright colors can add an exciting feel to your design that will intrigue visitors and help your client’s brand to be memorable.


What it is: CSS grid introduced new ways for designers to have more control over the positioning and interaction of elements on a web page. This has allowed designers to implement more negative space and non-traditional grid structures in web design.

Why we like it: Irregular grid structures add a dynamic feel to a web page, while the control allowed by CSS grid can improve the use and implementation of irregular shapes. Irregular grids allow certain content to standout with minimal styling, giving a website a modern look and not overwhelming visitors.


Is there a design topic you want to know more about? Let us know in the comments or contact us through email.

Keep up with all the latest developments and projects from Raving Software on Facebook, Twitter, LinkedIn, and Pinterest.