10 Design Website Design Trends of 2018
1. Animated SVGs
Scalable vector graphics (SVGs) are composed of mathematical ratios, not rasters or pixels, giving us much more flexibility as graphic designers than image formats like JPGs, PNGs, and GIFs. Freed of the need to depend on resolution and HTTP requests for their success, SVGs look as great on a laptop as they do on a mobile device.
Forget static imagery. Animation is trending in a big way as consumers want to interact with their devices in new ways. SVGs we can animate fit the demand perfectly. They give designers flexibility and control in creating fun and functional interactives. Far from being “extra,” animation continues to be integrated into the form and function of web pages.
Animation is also changing the way we communicate with clients. Instead of trying to explain an end product to the client using static mock-ups, we’ll increasingly come to clients armed with realistic animations and high fidelity prototypes.
2. Bespoke Illustration
Design prototypes can only take us so far; at some point, if we want to reach users with art, we have to involve artists. Bespoke illustrations are a way to add a whimsical, but very human, touch to web design. Animation, header images, and even icons can all benefit from the touch of a professional illustrator.
3. Big Bold Type
As web designers, we’re rediscovering typography. Big, bold type is quickly becoming the star of the virtual page. With this trend, designers are rediscovering aesthetics like combinations of vertical and horizontal text and text that overlaps with images.
Don’t be surprised to see full-sized and full-page letters show up, and look for the return of the more decorative fonts. Serif is making a comeback, not only to mimic handwriting in signatures, but also in paragraphs and even headers. Another throwback that’s making a comeback? Proportional fonts that mimic the look of typewritten letters.
4. Bold Bright Colors
A natural response to the return of bold text, statement-making colors are a way to add individuality to stripped-down web pages. Bold gradients are one way to mix colors in an aesthetically pleasing way.
It’s not just that designers are using more colors, but that we’re reintroducing bright colors, colors that mimic nature’s showiest displays. The idea of “web-safe” colors is a thing of the past. As technical improvements make monitors and device screens better at rendering colors, no color is off-limits anymore, no matter how vivid and saturated.
We talked about the advantages of SVGs over GIFs, but cinemagraphs are a whole new breed of GIF. They’re cinematic in quality and they loop smoothly, without that annoying “hiccup” effect of the traditional GIF. We’re starting to realize that a realistic moving image is one way to grab – and hold – the viewer’s eye. At least one company has already debuted the full-page cinemagraph.
6. Focus on Natural Language
Designers are taking an interest in real, human language and conversation the way it plays out in the real world. As AI technology gets better, look for interactions between users and bots to get more conversational. This could mean more integration of content strategists and writers into the design world, as well as an intensified focus on user-created content. Even the dreaded comments section is increasingly being seen as an opportunity for engagement and yes, even content.
7. Full Width Grid Layouts
2018 will go down as the year we finally solved some of the layout problems that have been plaguing web designers for as long as memory serves. The introduction of Flexbox went a long way toward making visually-minded designers happy, but it still doesn’t make creating full-width layouts very easy.
The new CSS grid tool, on the other hand, was specifically designed for full page layouts. While the full version isn’t available yet, we can start familiarizing ourselves with it now – and look forward to a future where full-width layouts are easy and intuitive for even the most visual of thinkers.
The big brands are starting to experiment with the best ways to display their content. For some, it’s UI cards (think Pinterest), but for others, it’s going to be broken and asymmetrical layouts. Grid design ties right in with some of 2018’s other trends, like the return of big, bold text.
8. Increased Integration Between Design and Coding
The trend toward increased integration between development and design has been in works for a while now. While once, developers handed off massive packets of dry specifications and static images to designers, developers’ output has become increasingly visual. Collaborative tools for developers and designers to share are now available, and communication between the two has never been easier.
Increasingly, the lines between coding and design will blur as code-free design tools become ever more sophisticated. Expect to see more rapid prototyping tools come onto the scene, and expect these tools to increasingly allow designers to launch new sites right from the prototyping tool.
9. Mobile First
In 2018, we’ll continue to design for the small screen first. Because of the restrictions of the small screen device format, mobile first design forces us to be innovative and stay true to the brand’s most essential core message. It makes us eliminate all but the strictly necessary.
While this trend isn’t necessarily new for 2018, we predict we’ll see more companies optimizing their mobile sites with mobile first design in mind. Since Google has started penalizing sites that aren’t optimized for mobile, the incentive for mobile first design to blow up in 2018 is there.
10. Virtual Reality
The web isn’t great at rendering VR at the start of 2018, but by the end of the year it could be a whole different virtual ball game. More companies are deciding to invest in VR-compatible devices. Sure, right now the main focus is still on the gaming community rather than web browsing, but all of that may soon change. As the technology improves and more huge companies hop on board, expect to start designing for VR environments very soon.