{"id":3801,"date":"2020-02-21T11:13:00","date_gmt":"2020-02-21T11:13:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=3801"},"modified":"2020-02-21T11:24:07","modified_gmt":"2020-02-21T11:24:07","slug":"design-trend-mixing-realism-and-illustrations","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/inspiration\/design-trend-mixing-realism-and-illustrations\/","title":{"rendered":"Design Trend: Mixing Realism and Illustrations"},"content":{"rendered":"\n

There\u2019s a new trend in website design that mixes real images with illustrations and art elements in interesting ways. And it\u2019s quirky, unique, and beautiful!<\/p>\n\n\n\n

It\u2019s a mashup of visual elements that don\u2019t seem like they go together at first, but when done well can create a stunning aesthetic that is highly engaging and delightful.<\/p>\n\n\n\n

Here, we\u2019re going to look at examples of this design trend and different ways of mixing realism and illustrations for maximum impact. Some of these sit within fairly corporate designs, and others are completely playful and entertaining. It\u2019s a wide range of applications of a thoroughly unique and interesting trend.<\/p>\n\n\n\n

Mixing Visual Elements in Cards<\/h2>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

Greenhouse features a blog-style format that uses cards for each content block. Within the cards are visual elements \u2013 some photos, some illustrations.<\/p>\n\n\n\n

The result is a beautiful mix of content types and visual styles that keeps the page fresh and interesting. Bold use of color for illustrated blocks is equally eye-catching, almost forcing users to scroll through content.<\/p>\n\n\n\n

It works because the framework is simple and mixed elements seem to match perfectly, while providing ample contrast for engagement.<\/p>\n\n\n\n

Illustrated Overlays<\/h2>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

One of the easiest ways to dabble in mixing realism and illustrations is to create an illustrated overlay. It works almost exactly like using a logo over a photo.<\/p>\n\n\n\n

Malai uses this technique with a split-screen design (also a pretty trendy element). The illustrated overlay helps connect both sides of the design creating visual flow and harmony.<\/p>\n\n\n\n

The illustration is rather intricate, but as an element that\u2019s just white, it feels elegant and does not get in the way of the design.<\/p>\n\n\n\n

3D Effects<\/h2>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

More designers are experimenting in a territory that\u2019s somewhere between reality and illustration. The three-dimensional elements throughout the design for Plink, look realistic.<\/p>\n\n\n\n

The illustrations move in a real way and you almost have to look twice at artwork to see that it\u2019s not an image.<\/p>\n\n\n\n

This style is an increasingly popular way to show something hard to photograph or otherwise portray visually and animated elements help it along to increase the opportunity for user interaction.<\/p>\n\n\n\n

Photos and Illustrations Side-by-Side<\/h2>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

Photos and illustrations can be used in frames throughout the design together. In this example of the design trend, each type of visual is in a \u201cphoto\u201d frame or box and treated the same way, whether it\u2019s a picture or illustration.<\/p>\n\n\n\n

It\u2019s a lot like the card example above, but with a different twist.<\/p>\n\n\n\n

Griflan uses this concept well and even uses more illustrations that photos. It creates a flexible website design framework where images and illustrations can be changed out quickly without a complete redesign.<\/p>\n\n\n\n

Layers and Motion<\/h2>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

Illustrations might not always be super obvious. As part of a logo or in the case of Be Grand, the illustrated element is a cool pointer\/hover circle that seemingly dances across the screen \u2013 and image.<\/p>\n\n\n\n

Small animations bring it all together in the simple homepage design.<\/p>\n\n\n\n

\u201cAlmost\u201d Illustrations<\/h2>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

A trending website design trick has been to use a glitchy effect with elements to draw attention. Combine this with an illustrated background for an out-of-this-world effect.<\/p>\n\n\n\n

Boda Borg does just that with two photos of a family that \u201cglitch\u201d back and forth over a quest-themed illustration. It\u2019s fun and light and definitely makes you look at the design.<\/p>\n\n\n\n

Background and Foreground Layers<\/h2>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

Mixing photos and illustrations can be as simple as layering.<\/p>\n\n\n\n

Canneseries uses a photo of a trophy that looks almost like an illustration with background illustrated elements and icons with similar illustrations.<\/p>\n\n\n\n

It\u2019s hard to tell the difference between real and illustrated elements and that\u2019s perfectly OK with this type of design scheme.<\/p>\n\n\n\n

Simple Illustration with Images<\/h2>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

Combining photos and illustrations can be simple. Elements should be designed to help draw users into the design and provide valuable information that enhances their experience.<\/p>\n\n\n\n

Neueform uses an illustration that pulls the eye down the design. It represents a microphone and connects to the content for the design.<\/p>\n\n\n\n

Hero Partners<\/h2>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

You can use illustrations or animations with images to create a cool hero image area that breaks standard design patterns. It\u2019s a new aesthetic that uses the same kind of space and aspect ratio in a new way.<\/p>\n\n\n\n

Something as simple as breaking up space can make the entire design more visually interesting. It disrupts what the user might expect.<\/p>\n\n\n\n

Mondial does just this with an animation \u2013 maybe not so much of an illustration, but it is close \u2013 and scrolling images that connect to the headlines below. It makes you look and read through each different piece of content before moving on thanks to the perfectly timed speed of content blocks.<\/p>\n\n\n\n

Combining in a Single Element<\/h2>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

Combining a real image and illustration to create one element can be stunning.
Constance Burke does this fabulously and might be one of the best examples of this style of imagery that you\u2019ll find.<\/p>\n\n\n\n

It\u2019s well thought out and executed and matches the content perfectly. The latter is what makes this so effective; the trend is used in a way that makes the content better.<\/p>\n\n\n\n

Subtle Illustrations<\/h2>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

You don\u2019t have to go all out to use this trend. One of the visual elements \u2013 image or illustrations \u2013 can be rather subtle.<\/p>\n\n\n\n

FourSeasonsHyrda uses a subtle moving illustration inside a giant drop cap, layered over a video to create interest. What\u2019s particularly nice about this technique is that it creates extra white space to help draw your eyes through the design so you read the content. Color and contrast contribute here as well.<\/p>\n\n\n\n

Conclusion<\/h2>\n\n\n\n

Do you see this trend as something you could use for projects? The trick is to plan out how the elements will interact with each other. Realism and illustrations must be intertwined so that the effect has an intentional feel to it.<\/p>\n","protected":false},"excerpt":{"rendered":"

There\u2019s a new trend in website design that mixes real images with illustrations and art elements in interesting ways. And it\u2019s quirky, unique, and beautiful! It\u2019s a mashup of visual elements that don\u2019t seem like they go together at first, but when done well can create a stunning aesthetic that is highly engaging and delightful. […]<\/p>\n","protected":false},"author":2,"featured_media":3812,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[85,81],"tags":[86,82],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/02\/plink.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-Zj","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3801"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=3801"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3801\/revisions"}],"predecessor-version":[{"id":3813,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3801\/revisions\/3813"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/3812"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=3801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=3801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=3801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}