Tag

Design Trends

Browsing

By

As we enter a new decade, we look at where design is heading.

A new decade brings new trends, and the evolution of existing ones. Last year saw exciting developments across the spectrum of visual design that will develop and evolve in the new year.

Here, we look at what’s hot in design right now and how we see it developing in 2020, covering everything from web design to fun fonts to graphic design and UI. Here are seven of our biggest predictions for what we’ll see happening in design this year. You heard it here first.

01. Branded animation

With GIFs now part of how we communicate, anyone designing for digital knows that people love movement. Illustration has become big for social media and web design over the last few years, but there’s now growing demand for the illustrations to move as shorter attention spans need to be satisfied.

GIFs can be a powerful way to bring brands to life. In 2020, we expect to see more fully branded motion graphics, from micro-interactions to moving logos to animated GIFs celebrating milestone events on social media.

Animations will also get more continuous. The safety video from Delta Airlines (above) shows the direction branded animation is going in, with one scene rolling into the next through fluid dynamic transitions that evolve and tell a story. The trend to build each scene out of the previous one takes viewers on journeys through a transforming world. And animation doesn’t only live online or on a screen.

Branded animations designed by London-based Animade were an integral part of Mailchimp’s rebranding in 2019, including the monkey logo that winks when you move the cursor over it, but the animators also created this interactive wall art. Interactive illustrations will offer a chance to reinvent communication and tools and engage with illustration in real-world environments.

02. Ultra minimalism

Calendly’s ultra minimalist landing page focuses attention on the call to action (Image credit: Calendly)

Minimalism seems like it will never become passee. It looks clean, sleek and for websites, it reduces loading time and scores better in search results. Services like Slack, Monday and Calendly are aware of this and have been leading the trend for minimalist landing pages that put the focus on the call to action and conversions.

With no distracting background elements, their sites are easy to navigate and make it easy to sign up. The trend is to complement the white space and simple message with an illustration – Calendly uses a modern looking line drawing to add to the clean feel, Monday opts for an animated demo with pots of colour to draw the eye, while Dropbox  dispenses even with the illustration, dedicating half the screen to the sign up form. Other sectors are following the trend, opting for simple and direct approach, which will stay with us in 2020.

03. Combining realism and flat design

design trends 2020

Magdiel Lopez combines realism and flat design to stunning effect (Image credit: Magdiel Lopez)

Recent years have seen a huge trend for flat design, and over the last year, isometric design has been the big thing, led especially by design for cryptocurrency sites, while 3D has been getting better and better. Now we’re starting to see more of a tendency to get the best of both worlds by layering elements of flat design and realistic 3D images. This can be through combining 3D design and flat design or through collages that combine flat design and photography like the beautiful dreamy posters created by Magdiel Lopez.

His work bridges the gap between the simplicity of flat design and the complexity and authenticity of realism, and communicates interaction between the real and digital worlds. The combination of 3D and flat design can also be a way to bring goods to life, such as on the urban trekking shoe company Déplacé Maison website or highlight blended learning experiences like on the Ocean School website.

04. Playing with the elements

design trends 2020

Azure The Oceanic’s site offers an engaging sense of freedom with cursor-controlled play  (Image credit: Azure The Oceanic)

In web design, there’s a growing tendency to play with water, air and light to create engaging effects, which follows a trend in design in general towards rejecting rigid geometric lines and shapes in favour for soft, flowing lines. It’s fun and playful, approachable, easier on the eye and still feels new.

The design and text on the Beyond Beauty project’s website seem to float around the space, conveying the sense of freedom that the project embodies. Expect to see a lot more free-floating elements in 2020 as we say goodbye to gravity. The theme for flowing shapes and lines is taken up also in the use of water and lights, for example, with cursor-controlled shimmer and ripple effects like in this site from property developers Azure The Oceanic. The Barovier & Toso website also uses cursor controlled liquid ripple and shimmer effects to give a sense of mystery and luxury to its products.

05. Heavy but simple fonts

design trends 2020

 CPGD’s site is on trend for 2020 with bold simple text (Image credit: CPGD)

The trend for big and heavy fonts is not going to move easily. With people spending more of their time online on small screens, big fonts are practical, but it’s a trend that extends to the world of graphic design and even packaging, since they also look great and give personality to text. When it comes to thickness, the rule for 2020 will continue to be the bigger and bolder the better, with text taking centre stage and overtaking image and video as the main element.

Designers are using bold or extra bold fonts paired with simple backgrounds or much lighter text to create interesting contrast in a design. Text may even go beyond a composition’s edges, and be split into multiple lines. CPGD, a list of direct to consumer brands, is on trend with a site that uses bigger Helvetica Now Display much bolder than most ecommerce sites, which can often suffer from lots of small text.

Large text is not only for headlines and titles, but sites like that of Germany agency Polar Gold show a trend to beef up the size of the text in paragraphs too, and expect to see more incorporation of movement too like in the bold and playful Piano Trio Fest site.

06. Dynamic live data visualisation

design trends 2020

The Economist showed lived data visualisation based on the reaction of fans during a football match (Image credit: The Economist)

Data visualisation has been a growing trend for years. And there’s much more to come. In 2020, complex live data – like dashboard stats – will become even more immediately available, and designers will need to showcase information in a way that adapts to changes and dynamically animates. In the past year, The Economist’s Reimagine the Game offers visualisation of fans’ reactions in the stadium during football matches providing a kind of timeline of the match  complete with goals and yellow cards. In 2020, expect data visualisations to go dynamic live, interactive and to cover everything.

07. AR and VR finally go mainstream

design trends 2020

AR and VR offer whole new design mediums (Image credit: Getty Images)

It’s been a long time coming but VR is finally coming into the mainstream and is expected to become  one of the most consumed technologies of the next few years. What’s exciting for design is that more than being a trend, virtual reality offers a whole new medium to design for. UI and UX within VR is huge area in which to explore not only how we touch a screen but how we move around inside it.

Expect big opportunities in holographic 3D design and virtual reality e-commerce solutions, while AR will increasingly offer more demand for digital animation, with magazines like The New Yorker bringing pages to life through our phones’ cameras and Apple and Google introducing their own AR development platforms, ARKit and ARCore. And whatever happens in the areas of VR and AR is also bound to have an effect on wider design.

By

Sourced from CREATIVE BLOQ

By Carrie Cousins

All three of this month’s essential design trends have to do with typography. And the trends showcase some pretty stellar ways to use beautiful type to create user engagement and make a great first impression.

One common theme among these designs is that all of the typography styles are highly readable. If you plan to work with a more trendy or funky text element, choose a typeface that users won’t struggle to read. The trendy technique is the trick with these designs, not the typeface itself.

Here’s what’s trending in design this month:

1. Just Type Above the Scroll

While a great image can help draw users into a design, sometimes the right words and space are the ticket.

The key to making the most of this design trend is to refine your message. The words need to be simple, say something meaningful and create value for the user.

So how do you do it?

  • Start with a key phrase. It can be your mission or a value proposition for users. Tell users what you bring to the table and why your website will be important to them.
  • Pick a simple typeface that has the same mood as the messaging for longer copy blocks.
  • If the text block is short, such as with Types of Type, consider a funkier type option to draw users in.
  • Make the most of space. Note that in each of the examples below, text has plenty of room to breathe, making it easier to read at a glance. Space can also help draw the eye to text, and can balance text elements if you don’t want to center them on the screen, such as Design Ups.
  • Use color to help add visual interest. Bright, trendy hues can help draw users into the design. Color can also help set a mood that correlates to messaging.

When working with a type-heavy design, don’t force it. Sometimes you won’t have enough text to fill a full “screen.” Less+More and Type of Type use color blocking to create multiple panels that are sized perfectly for the text content therein.

less
designups
types

2. Text in White Boxes

With so many bold visual elements in website design projects—and so many responsive breakpoints to deal with—white boxes are re-emerging as a container element for text. White boxes with dark text inside can ensure readability when it comes to messaging on top of photos, video or illustration where there is color variance.

And while this trend might sound a little, well…sloppy or lazy, it actually looks great when done well.

You can’t just slap a box anywhere on an image and hope for the best. White boxes need to be placed strategically so that they don’t cover important parts of the image and so that users do move to them in the course of looking at the design.

White boxes need to be big enough to contain a reasonable amount of text and you should have a plan for this element on smaller screens, such as allowing everything in the text box to drop below the main image. Don’t try to put a text box over an image on smaller screens because you’ll end up with a box of text that’s too small to read or the box will cover most of the image itself.

If you pot for the white box treatment, have fun. Each of the examples below use white boxes in completely different ways.

Do Space cuts a white box into the bottom corner of the image so that most of the image is visible. The white box bleeds into the white space below so that it almost looks like it comes up out of the panel below. This technique helps connect the main slider to the content below (and can even encourage scrolling).

do-space

HowIt uses circular blobs so that the white text boxes better match the tone of the background illustration. This subtle shift in shape, so that the boxes appear more fluid helps connect the elements so that the boxes and background have a consistent feel. You don’t want white boxes for text to feel like they are haphazardly placed on the background. (That doesn’t work and won’t help create a cohesive feel for users.)

howlit

Macaulay Sinclair has more text than the other examples using one part of an image-panel grid to hold the text element. Here, the image behind the white box serves no information value. It has a color and movement scheme that looks similar to other images and mostly serves to create cohesion between the text element and rest of the design.

macaulay

3. Typography Cutouts

No one ever said that text has to be a series of solid filled letters. More designers are opting for typography cutouts that feature a color block over an image so that the image comes through clear lettering.

This technique can work with still or moving images and with full screen overlays so that only a small amount of information comes through letters (almost to create a texture) or with more of a block-over-image-style with more of the background image visible.

The trick to making this work is the right typeface. Letters have to have thick enough strokes so that the image or texture in the background is visible. You can’t do this with a thin or condensed font with any consistent success.

This technique also works best if the number of words and letters is fairly limited. Stick to one to three words with 10 or fewer letters or use very common words that users will know at a glance.

Danbury uses a bright text cutout as a draw to encourage users to engage with the video call to action. The entire orange box is just a giant button.

danbury

Fusion Winery uses a background video of a vineyard in the lettering. What’s great about this design is the triple layer effect: Video background below white text cutout below a product image.

wine

The Kaneko uses an unidentifiable image as the fill for letters. If you opt for this style, keep this background simple as done with this design. There’s just a touch of color and texture that draws the eye to the text on the stark canvas.

kaneko

Conclusion

The collection provides inspiration for those projects that might not have a great image or video, so that you can still find a way to create something that users will respond to. Don’t be afraid to use text as a visual and informational element in this design.

What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Twitter; I’d love to hear from you.

By Carrie Cousins

Carrie Cousins is a freelance writer with more than 10 years of experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with Carrie on Twitter @carriecousins. More articles by Carrie Cousins

Sourced from webdesignerdepot.com