{"id":1093,"date":"2018-11-01T08:25:35","date_gmt":"2018-11-01T08:25:35","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=1093"},"modified":"2019-05-09T01:52:20","modified_gmt":"2019-05-09T01:52:20","slug":"nov-2018-three-essential-design-trends","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/inspiration\/nov-2018-three-essential-design-trends\/","title":{"rendered":"Nov 2018 – Three Essential Design Trends"},"content":{"rendered":"\n

When looking at good design, We often look for things that are not totally obvious. There\u2019s an instinct that we like something before we know why. That\u2019s the common thread among this month\u2019s three essential design trends.<\/p>\n\n\n\n

From animations that delight<\/strong> and take projects to the next level, to white space that makes a design so approachable<\/strong>, to dark color overlays that enhance readability,<\/strong> these trends contribute to better user experiences<\/strong>.<\/p>\n\n\n\n

So here\u2019s what\u2019s trending this month in design –<\/h3>\n\n\n\n

1. Next-Level Animation<\/h4>\n\n\n\n

Nothing makes you want to click around and engage with a website like a delightful animation.<\/p>\n\n\n\n

While full-screen video is still one of the most popular animated effects of the year, other opportunities for animation can be just as impressive. Use animation to bring attention to certain elements, create the scene for your story and grab user attention or prompt continued engagement with an interesting way to navigate a design. Each of these techniques is used in the examples below (you should definitely click through each to see the animated effects in action).<\/p>\n\n\n\n

What makes a good animation? Here\u2019s how each of these designs takes animation to the next level:<\/p>\n\n\n\n

Mistretta Coiffure<\/a> uses a water effect over still images so that the whole background seems to be right below the surface of a pool. Text elements are static to ensure readability. The effect isn\u2019t overwhelming and it\u2019s something that feels unique to the content of the website for a salon\u2014which uses a lot of water.<\/p>\n\n\n\n

\"mistretta\"\/<\/figure>\n\n\n\n

Wonderland<\/a> uses animation in a more interactive way, meaning users have to engage to activate it. Each of the photos in the row across the bottom of the screen serves as a secondary navigation element. Hover over any one and it pops up into a larger element and impacts the background as well. This instance of a cool hover animation can help encourage users to interact more with the design.<\/p>\n\n\n\n

\"wonderland\"\/<\/figure>\n\n\n\n

Naturalis Topstukken<\/a> takes a completely different approach\u2014every card in the design is part of the complete website. User-controlled animation allows you to drag and drop elements on the screen to enter different parts of the website. It almost feels like a game. The design is highly engaging and for those that don\u2019t quite \u201cget it\u201d the screen scrolls on its own after a few seconds to encourage that first click.<\/p>\n\n\n\n

\"nautralis\"\/<\/figure>\n\n\n\n

2. Large White Margins<\/h4>\n\n\n\n

One of the most dramatic\u2014and easy\u2014ways to draw attention to a design or specific element is through appropriate use of white space. While many designs have trended toward more packed full-screen designs recently, there\u2019s a growing shift back to open space.<\/p>\n\n\n\n

And there\u2019s a reason for it.<\/p>\n\n\n\n

This technique and design make content the focus for users. Elements surrounded by white space are obvious focal points. The simplicity and balance of such as design is easy to engage with and isn\u2019t overwhelming to the user.<\/p>\n\n\n\n

Maybe one of the best things about a design with so much white space is that it feels approachable. The clean white space in the design does draw you in.<\/p>\n\n\n\n

Think about some of the color associations of white\u2014purity, light, goodness, perfection, cleanliness, safety\u2014all of these are inviting and welcoming feelings that come with an open white background.<\/p>\n\n\n\n

Looking at the examples below from Panda Monk<\/a>, It\u2019s Alive,<\/a> and Centros<\/a>, it\u2019s easy to see how this feeling comes from each of the designs. It\u2019s as if each website is inviting users to engage and learn more.<\/p>\n\n\n\n

\"pandamonk\"\/<\/figure>\n\n\n\n
\"itsalive\"\/<\/figure>\n\n\n\n
\"centros\"\/<\/figure>\n\n\n\n

3. Dark Color Overlays<\/h4>\n\n\n\n

One of the website design trends that\u2019s been popular is use of dark backgrounds in design projects. That trend has extended to the foreground with dark color overlays on images as well.<\/p>\n\n\n\n

While this technique can look cool and help emphasize brand colors, there\u2019s another key reason for using dark color overlays. This technique can help make text elements more readable over photos or backgrounds elements with varying light and dark colors.<\/p>\n\n\n\n

Each of the examples below uses this concept in a slightly different way:<\/p>\n\n\n\n

Lafayette Grande<\/a> frames an image with a dark color overlay with a double-stacked navigation menu using brand colors. It creates a solid frame that then drives users down to the main headline.<\/p>\n\n\n\n

\"layfayette\"\/<\/figure>\n\n\n\n

Julius Silvert<\/a> uses a full screen video b-roll background where all of the images have a mostly transparent dark color overlay. On scroll, the overlay darkens to a mostly saturated box so that text is easy to read while the video still runs in the background. This is a great solution to the probable presented by moving images\u2014it can be tough to find a good place to put text elements so that they are easy to read at all times. The dark color overlay solves this problem nicely.<\/p>\n\n\n\n

\"julius\"\/<\/figure>\n\n\n\n

Scalzo Design<\/a> uses a dark background plus dark color overlay on images to draw users into his portfolio. The overlay shows that there are visual elements to explore but maintains a focus on the words first, before users get too deep into visual content. This leaves users with the information that Scalzo is a designer first and showcases the work second for a strong first impression.<\/p>\n\n\n\n

\"scalzo\"\/<\/figure>\n","protected":false},"excerpt":{"rendered":"

When looking at good design, We often look for things that are not totally obvious. There\u2019s an instinct that we like something before we know why. That\u2019s the common thread among this month\u2019s three essential design trends. From animations that delight and take projects to the next level, to white space that makes a design […]<\/p>\n","protected":false},"author":2,"featured_media":1094,"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\/2018\/11\/Mistretta-Coiffure.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-hD","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1093"}],"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=1093"}],"version-history":[{"count":2,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1093\/revisions"}],"predecessor-version":[{"id":2270,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1093\/revisions\/2270"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/1094"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=1093"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=1093"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=1093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}