February 14, 2019
Design Trends to Look Out for in 2019
Digital design as a whole has changed drastically over the last few years. In the last decade we've seen the emergence of responsive design which has changed the industry completely. Now in 2019 designers and developers are challenged with keeping each site unique and fresh all while adhering to what works best for each device and screen size. Take a look at a few design trends I think will evolve in 2019 or stay on the rise from years before. All of these trends are continuing to evolve and adapt as technology within the digital industry rapidly changes from year to year.
Split-screen layouts
Split-screen layouts are becoming increasingly popular in web design and UI development as they offer a great way to divide crucial content, images or graphics on a page equally. Options can include any type of content but some of the more common approaches are to divide the website with any combination of a hero image, text, call-to-action or graphic. Check out our recent website launch for the eCommerce website, Qualitrol, where the image is on the left and the marketing message, value proposition and call-to-action are on the right of the screen. This website also features a large search bar under the main two sections designed to aid users who visit the site looking for a specific part or product.
Micro-interactions
It is no surprise that micro-interactions will be on the continual rise in 2019 all throughout the digital industry. They are easy to add to any device and don't require much load time or extra code because they are generally pretty small. Micro-interactions are also a fun way to make your site or application unique and more personalized and with as many websites that are out there, this is key. Micro-interactions tend to add that extra flair to ultimately deliver a sophisticated and overall polished appearance which will help you outperform your competition visually. Check out our recent launch for, Street King, which shows many different micro-interactions throughout the user experience.
Custom Infographics
Sometimes an accurate photograph can simply not be created or found for a section or part of a site that needs some kind of visual enhancement (ie: just boring text based content). In this case, a custom illustration or icon can be useful to help illustrate your information or content. Let's say, for example, you are wanting to display some interesting statistics or facts on your website but aren't happy with the way it looks because it is simply just text-based content. In this case you probably aren't going to be able to find or create the perfect photograph to pair with each statistic so it might make sense to create an infographic or custom icons for each part. Using this approach will allow for a visual way to show the information and allow crucial parts to stand out and the less important parts to sit back.
Geometric Shapes
While not exactly a brand new element in 2019, the geometric shape trend is something to continue to watch out for. We've seen it in architecture, home goods, fashion, jewelry, album art and many other types of design so it's no surprise it's hit the world of web design strong. Some good news for designers and developers interested in dabbling in this realm is that modern CSS makes it much easier to create many of these shapes. A bonus of using CSS to create these is that they are much smaller than using images and you can animate them using key frames.
Organic Shapes & Artistic Elements
Quite the contrary to geometric shapes as we just went over previously, organic shapes and artistic elements are on the rise in the digital industry. A few examples I've started to notice pop up as this trend increases are: custom illustrations, quirky or unique photography, natural textures whether scanned in or digitally created, weathered or cursive fonts and nature-inspired color palettes. I'm excited to see this trend grow and see designers going back to the basics and reliving their studio art days from college. A few sites I think that are embracing this trend well right now are: Anthropologie, Lilly Pulitzer, Birchbox, Leader Bag Company and Grover.
Multi-Colored SVG Fonts
Multi-colored SVG fonts have become increasingly popular over the last few years. They allow a flair and uniqueness to a site brand or any marketing collateral that regular one-color fonts just simply cannot do. With that being said, these font files tend to be larger than regular standard fonts so they need to be used wisely and sparingly on a website. A few of my favorite fonts from this movement include: Gilbert which is a font inspired by the Rainbow Flag and is completely free to use, PopSky which was inspired by Russian Constructivism and architecture and lastly I'd like to mention the font, Aires, which was inspired by 20th Century Argentinian art. Overall, I expect these fonts to continue to develop and be used as a main design element in both digital and print design applications that need some extra flavor or color.
The downside to using Multi-Colored SVG fonts? They have a few legibility issues since, along with the multiple colors, they tend to be more graphic and ornate in nature. Here are a few tips when using these:
Mobile UI without Buttons
This might seem odd to visualize at first but many interfaces are adapting to the web trend of no buttons on mobile. Instead, the swipe feature and small micro-interactions are being used. Instagram is a great example of a website and application which virtually has no buttons. Instead of buttons on Instagram, the user navigates different icons and micro-interactions which trigger the next steps. While I don't think buttons will ever go away completely in web design, as they are too critical for certain types of websites, I do think we'll see a continual rise of touch-based trigger points being used on sites as a replacement.
Split-screen layoutsSplit-screen layouts are becoming increasingly popular in web design and UI development as they offer a great way to divide crucial content, images or graphics on a page equally. Options can include any type of content but some of the more common approaches are to divide the website with any combination of a hero image, text, call-to-action or graphic. Check out our recent website launch for the eCommerce website, Qualitrol, where the image is on the left and the marketing message, value proposition and call-to-action are on the right of the screen. This website also features a large search bar under the main two sections designed to aid users who visit the site looking for a specific part or product.
- A bonus to using this type of layout: They tend to be responsive-friendly in nature as long as you are okay with your screen stacking at smaller sizes.
Micro-interactions
It is no surprise that micro-interactions will be on the continual rise in 2019 all throughout the digital industry. They are easy to add to any device and don't require much load time or extra code because they are generally pretty small. Micro-interactions are also a fun way to make your site or application unique and more personalized and with as many websites that are out there, this is key. Micro-interactions tend to add that extra flair to ultimately deliver a sophisticated and overall polished appearance which will help you outperform your competition visually. Check out our recent launch for, Street King, which shows many different micro-interactions throughout the user experience.- Tip: One tip I do recommend when applying micro-interactions to a website is to not go too overboard with a lot of different effects. Pick and choose a few styles or approaches to use and apply universally. Micro-interactions should enhance great design and not be a distraction to important links, call-to-actions or other crucial doorways on the site.
- Bonus Tip: Micro-interactions are a smart and simple way to make an eCommerce site stand out. Whether adding a little animation to your buttons or images, it's a fantastic way to give your site a visual boost and enhance the overall user-experience and flow.
Custom Infographics
Sometimes an accurate photograph can simply not be created or found for a section or part of a site that needs some kind of visual enhancement (ie: just boring text based content). In this case, a custom illustration or icon can be useful to help illustrate your information or content. Let's say, for example, you are wanting to display some interesting statistics or facts on your website but aren't happy with the way it looks because it is simply just text-based content. In this case you probably aren't going to be able to find or create the perfect photograph to pair with each statistic so it might make sense to create an infographic or custom icons for each part. Using this approach will allow for a visual way to show the information and allow crucial parts to stand out and the less important parts to sit back.
- Tip: Keep fonts, color palettes, line stroke and illustration style similar throughout the site so each infographic or illustration look uniform with each other. Place them side by side for comparison using art boards or something similar in your design tool of choice.
Geometric Shapes
While not exactly a brand new element in 2019, the geometric shape trend is something to continue to watch out for. We've seen it in architecture, home goods, fashion, jewelry, album art and many other types of design so it's no surprise it's hit the world of web design strong. Some good news for designers and developers interested in dabbling in this realm is that modern CSS makes it much easier to create many of these shapes. A bonus of using CSS to create these is that they are much smaller than using images and you can animate them using key frames.
- Tip: CSS Tricks offers a great resource into how to create some of these shapes here.
Organic Shapes & Artistic Elements
Quite the contrary to geometric shapes as we just went over previously, organic shapes and artistic elements are on the rise in the digital industry. A few examples I've started to notice pop up as this trend increases are: custom illustrations, quirky or unique photography, natural textures whether scanned in or digitally created, weathered or cursive fonts and nature-inspired color palettes. I'm excited to see this trend grow and see designers going back to the basics and reliving their studio art days from college. A few sites I think that are embracing this trend well right now are: Anthropologie, Lilly Pulitzer, Birchbox, Leader Bag Company and Grover.
- Tip: These types of design assets can take a long time to create and you also need to account for any revisions. So it's important to plan for these types of assets at the very beginning of the design phase to ensure timeline and goals are met.
Multi-Colored SVG Fonts
Multi-colored SVG fonts have become increasingly popular over the last few years. They allow a flair and uniqueness to a site brand or any marketing collateral that regular one-color fonts just simply cannot do. With that being said, these font files tend to be larger than regular standard fonts so they need to be used wisely and sparingly on a website. A few of my favorite fonts from this movement include: Gilbert which is a font inspired by the Rainbow Flag and is completely free to use, PopSky which was inspired by Russian Constructivism and architecture and lastly I'd like to mention the font, Aires, which was inspired by 20th Century Argentinian art. Overall, I expect these fonts to continue to develop and be used as a main design element in both digital and print design applications that need some extra flavor or color.
The downside to using Multi-Colored SVG fonts? They have a few legibility issues since, along with the multiple colors, they tend to be more graphic and ornate in nature. Here are a few tips when using these:
- Tip: Use these fonts on solid backgrounds so they don't distract from the legibility and letter-forms. See the examples on the white background above.
- Bonus Tip: Use these fonts sparingly to avoid slowing down your site.
Mobile UI without Buttons
This might seem odd to visualize at first but many interfaces are adapting to the web trend of no buttons on mobile. Instead, the swipe feature and small micro-interactions are being used. Instagram is a great example of a website and application which virtually has no buttons. Instead of buttons on Instagram, the user navigates different icons and micro-interactions which trigger the next steps. While I don't think buttons will ever go away completely in web design, as they are too critical for certain types of websites, I do think we'll see a continual rise of touch-based trigger points being used on sites as a replacement.
