{"id":6086,"date":"2021-04-11T09:24:01","date_gmt":"2021-04-11T09:24:01","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=6086"},"modified":"2021-04-07T09:31:35","modified_gmt":"2021-04-07T09:31:35","slug":"3-essential-design-trends","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/inspiration\/3-essential-design-trends\/","title":{"rendered":"3 Essential Design Trends"},"content":{"rendered":"\n

The best thing about writing about website design trends each month is looking at all the great sites that are being developed. Designers are stretching creatively and exploring new techniques and ways of doing things all the time.<\/p>\n\n\n\n

It\u2019s refreshing and inspiring. This month, some of those trends include a style that nods to brutalism, slide scrolling that\u2019s interesting and fresh, and animated typography.<\/p>\n\n\n\n

Here\u2019s what\u2019s trending in design this month\u2026<\/p>\n\n\n\n

1. Almost Brutalism<\/h2>\n\n\n\n

Brutalism can be a lot to handle and only really works for certain types of projects. That being said, some of the elements of brutalism can be the foundation for an interesting aesthetic.<\/p>\n\n\n\n

So, it\u2019s not surprising that an \u201calmost brutalism\u201d trend has emerged.<\/p>\n\n\n\n

Designers are working with some of the design elements \u2013 slab fonts, simple color schemes with a lot of contrast, twitchy animation, mono typefaces, and overall design patterns that are almost over-simplified.<\/p>\n\n\n\n

The result is a striking design that isn\u2019t so harsh that it turns users away. It\u2019s the right combination of brutalism and usability to create something with a harder-edge feel that people understand.<\/p>\n\n\n\n

Good Garms<\/a> uses a typewriter-style typeface, simple patterns, and one of the most streamlined designs you might find for an ecommerce store. It\u2019s effective and makes you look because it is different.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Dockyard Social<\/a> uses an unexpected color combination with high contrast, sharp shapes, and design elements, and bold slab typography to grab your attention right away. The theme continues on the scroll with new color combinations with equally brutal design elements. It feels a little tight and uncomfortable in places but still highly usable \u2013 exactly what almost-brutalism intends to do.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

ZN Studio<\/a> uses the same big, bold type elements as the previous example with a twitchy-style animation to draw you into the design. The entire design uses clever animation effects with a brutal aesthetic to keep you scrolling.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

2. Beautiful Slide Scrolling<\/h2>\n\n\n\n

You can argue the value \u2013 or lack thereof \u2013 of website sliders as long as you want to. The reality, though, is that, for the most part, they are clunky and get in the way of the content. It\u2019s a lazy option that keeps you from having to make a content choice.<\/p>\n\n\n\n

Not with these beautiful slide-scrolling website designs.<\/p>\n\n\n\n

Each of these designs uses side-scrolling as a design asset. Here\u2019s the trick that makes it work: Slide scrolling isn\u2019t a \u201cfeature\u201d above a bunch of other content. It is how the content is featured.<\/p>\n\n\n\n

These examples show you how to use the trend well and should get you excited about slide (or side) scrolling.<\/p>\n\n\n\n

Eduardo del Fraile <\/a>uses a side scroll to show different projects in his portfolio. In addition to scroll, each element also has a simple and beautiful animation that allows you to see each product he has designed. Everything about the scrolling motion is intuitive, and the site never scrolls vertically, which is where many side scrollers go wrong.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Jo Ash Sakula<\/a> uses a similar concept for the side scroll here but with different design elements. The bold card elements are striking in terms of color, contrast, and design. You know the scroll will move horizontally because a third element sneaks into your field of vision on the right side. It\u2019s simple, clean, and highly usable.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Crimea<\/a> is interesting because it has an \u201calmost brutalism\u201d style design and uses a side-scrolling pattern. The design is bold and almost overwhelming, but the scroll works to tell a nice story with visuals and content.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

3. Typography Animations<\/h2>\n\n\n\n

Web typography can make or break a design from font choice to size and color to animation, every detail with text elements matters.<\/p>\n\n\n\n

This trend explores and pushes the boundaries of animation with text elements in website design. And it is so tricky. The difference between an amazing result and a design fail is a thin line that can be quite subjective.<\/p>\n\n\n\n

Each of these examples does something unique with text and animation together to create just the right feel. The flow for each is seamless and text elements \u2013 while incorporating movement \u2013 maintain readability.<\/p>\n\n\n\n

Visages Du Rhone<\/a> has two layers of animation. The first happens as the words come onto the screen as the color and fade change within the letters. The second is a subtle hover state with a fluid feel for the letters that match the design\u2019s underwater theme. What\u2019s special about the typography animation is that it happens without distorting the letters, something many other liquid text animations do.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Poolhouse<\/a> uses transparent letters with movement in a layer behind the words. What\u2019s very neat here is the additional filtering so that the background motion still works while maintaining the integrity of each letterform. Again, the focus on keeping text readable is what sets this design apart and makes it trend-worthy.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Komnata<\/a> takes a wholly different approach with letters that float and look like balloons. The motion mimics what you would expect from an element that looks and feels like something in the real world. The user doesn\u2019t have to do anything for this motion to take place. The animation might be even more effective if the scroll and pointer did not have a tail that \u201cdraws\u201d on the screen as a distracting element.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

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

The good thing about looking at variations of different trends is that you can see the practical application and apply it to your projects. While you might not move to a full sliding scroll on your website homepage, you could use that concept in another part of the design.<\/p>\n\n\n\n

Experiment, have fun and draw inspiration from trending website designs.<\/p>\n","protected":false},"excerpt":{"rendered":"

The best thing about writing about website design trends each month is looking at all the great sites that are being developed. Designers are stretching creatively and exploring new techniques and ways of doing things all the time. It\u2019s refreshing and inspiring. This month, some of those trends include a style that nods to brutalism, […]<\/p>\n","protected":false},"author":2,"featured_media":6088,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[85,81,168],"tags":[86,82,203,106],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/dockyard.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1Aa","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/6086"}],"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=6086"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/6086\/revisions"}],"predecessor-version":[{"id":6096,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/6086\/revisions\/6096"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/6088"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=6086"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=6086"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=6086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}