![3 Essential Design Trends, October 2023 1 Carrie Cousins.](https://www.webdesignerdepot.com/assets/ui/avatars/_44x44_crop_center-center_none/carrie_cousins.jpg)
Today we go over 3 Essential Design Trends
![](data:;base64,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1' style='background:transparent'/>” sizes=”(min-width: 770px) 49.4vw, (min-width: 1020px) 55.8vw, (min-width: 1170px) 61.3vw, 94.5vw” srcset=”https://www.webdesignerdepot.com/imager/assets/posts/featured/design-trends-header-october_fdc69fe0c71b74e8bae1eed2ab8cd73c.jpg 1480w, https://www.webdesignerdepot.com/imager/assets/posts/featured/design-trends-header-october_8b18c7289f30a32ee8037aa94083771f.jpg 1050w, https://www.webdesignerdepot.com/imager/assets/posts/featured/design-trends-header-october_a1049a2aff88ee9ada8c1b1c3fdca69d.jpg 740w, https://www.webdesignerdepot.com/imager/assets/posts/featured/design-trends-header-october_a301dae254912f020a6fa82f7a16ae51.jpg 550w” alt=”3 Essential Design Trends, October 2023.” width=”160″ height=”104″ /></picture></div>
<p>Even if they look good and follow some <a href=)
Here’s what’s trending in design this month:
1. Text Above the Hero Image
This website design trend, featuring text above the hero image or video, can look a lot of different ways. In the examples below, you’ll see this range, from images that are still fully visible to those that sneak below the scroll.
This design style also has a totally different vibe between desktop and mobile devices. On a desktop, the image can get lost sometimes, and the visual sharpness seems lacking. On mobile devices, the focus on messaging drives home the importance of the words. There’s also the difference in how these groups of users interact and scroll, with a desktop user potentially missing the main message to get to the image or video, while it is hard to miss on phones.
Taste uses an oversized, stacked bold headline on a rather stark background to ensure you read the words before moving to the video tucked into the scroll. The only real color or motion on the home screen is the rotating menu button – a quite different navigation element. The big “TASTE” letters seem to break some design rules as well.
![](data:;base64,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1856 1280'/>” sizes=”(min-width: 770px) 49.4vw, (min-width: 1020px) 55.8vw, (min-width: 1170px) 61.3vw, 94.5vw” srcset=”https://www.webdesignerdepot.com/imager/assets/posts/inline/teste_545eb6857f0f5100049383eeefd9a5ee.webp 550w, https://www.webdesignerdepot.com/imager/assets/posts/inline/teste_f5e9dbcd6968c539240d66d9a7068393.webp 740w, https://www.webdesignerdepot.com/imager/assets/posts/inline/teste_ebc4e931feca303daecd0e525a2a2d70.webp 1050w, https://www.webdesignerdepot.com/imager/assets/posts/inline/teste_24ee7cd68eac241bdecf3b61c0c5b583.webp 1480w” alt=”taste” width=”1856″ height=”1280″ /></figure>
<p>Lusion balances text about the hero image with an almost full-screen animation that’s scroll interactive. While there seems to be good eye flow, you might totally miss the main headline and go right for the more interactive part of the design. (The liquid hover is pretty slick.)</p>
<figure><img decoding=)
![](data:;base64,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1856 1279'/>” sizes=”(min-width: 770px) 49.4vw, (min-width: 1020px) 55.8vw, (min-width: 1170px) 61.3vw, 94.5vw” srcset=”https://www.webdesignerdepot.com/imager/assets/posts/inline/sintoni_545eb6857f0f5100049383eeefd9a5ee.webp 550w, https://www.webdesignerdepot.com/imager/assets/posts/inline/sintoni_f5e9dbcd6968c539240d66d9a7068393.webp 740w, https://www.webdesignerdepot.com/imager/assets/posts/inline/sintoni_ebc4e931feca303daecd0e525a2a2d70.webp 1050w, https://www.webdesignerdepot.com/imager/assets/posts/inline/sintoni_24ee7cd68eac241bdecf3b61c0c5b583.webp 1480w” alt=”Liz Portfolio” width=”1856″ height=”1279″ /></figure>
<h2>2. Side-by-Side Storytelling</h2>
<p>This isn’t really that unusual of a design device – side-by-side design elements have been popular off and on for a while – but it is evolving in terms of technique and display.</p>
<p>The challenge and trend that seems to be growing is that designers are overlapping elements in the side-by-side <a href=)
Sometimes this works beautifully, such as in the first example below. Other times, this can lead to severe readability challenges.
The Midnight Post Book is a website that’s for a book, making it a great example to showcase a storytelling device. With the main illustration to the left and the text to the right, there’s a clear reading flow and a nice balance in the design.
![](data:;base64,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1856 1279'/>” sizes=”(min-width: 770px) 49.4vw, (min-width: 1020px) 55.8vw, (min-width: 1170px) 61.3vw, 94.5vw” srcset=”https://www.webdesignerdepot.com/imager/assets/posts/inline/midnight-post_545eb6857f0f5100049383eeefd9a5ee.webp 550w, https://www.webdesignerdepot.com/imager/assets/posts/inline/midnight-post_f5e9dbcd6968c539240d66d9a7068393.webp 740w, https://www.webdesignerdepot.com/imager/assets/posts/inline/midnight-post_ebc4e931feca303daecd0e525a2a2d70.webp 1050w, https://www.webdesignerdepot.com/imager/assets/posts/inline/midnight-post_24ee7cd68eac241bdecf3b61c0c5b583.webp 1480w” alt=”The Midnight Book” width=”1856″ height=”1279″ /></figure>
<p>Café Del Mar is one of those examples where the sides bleed over a bit. Readability doesn’t become too much of a concern here, but gets a little tricky at some breakpoints. It’s also a lot for the user to digest with a funky typeface, side-by-side design with moving images, an interesting separation element (the zig-zag), and colors without a lot of contrast.</p>
<figure><a href=)
![](data:;base64,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1856 1280'/>” sizes=”(min-width: 770px) 49.4vw, (min-width: 1020px) 55.8vw, (min-width: 1170px) 61.3vw, 94.5vw” srcset=”https://www.webdesignerdepot.com/imager/assets/posts/inline/coffee_2023-09-23-214112_dqhm_545eb6857f0f5100049383eeefd9a5ee.webp 550w, https://www.webdesignerdepot.com/imager/assets/posts/inline/coffee_2023-09-23-214112_dqhm_f5e9dbcd6968c539240d66d9a7068393.webp 740w, https://www.webdesignerdepot.com/imager/assets/posts/inline/coffee_2023-09-23-214112_dqhm_ebc4e931feca303daecd0e525a2a2d70.webp 1050w, https://www.webdesignerdepot.com/imager/assets/posts/inline/coffee_2023-09-23-214112_dqhm_24ee7cd68eac241bdecf3b61c0c5b583.webp 1480w” alt=”Cafe Del Mar” width=”1856″ height=”1280″ /></a></figure>
<p>CCL Hospitality Group takes the most traditional approach to side-by-side storytelling but has a twist of its own with a non-standard video shape on the right side of the screen. While it looks great, video composition and placement here was probably way more difficult than it looks.</p>
<figure><img decoding=)
![](data:;base64,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1856 1280'/>” sizes=”(min-width: 770px) 49.4vw, (min-width: 1020px) 55.8vw, (min-width: 1170px) 61.3vw, 94.5vw” srcset=”https://www.webdesignerdepot.com/imager/assets/posts/inline/detech_545eb6857f0f5100049383eeefd9a5ee.webp 550w, https://www.webdesignerdepot.com/imager/assets/posts/inline/detech_f5e9dbcd6968c539240d66d9a7068393.webp 740w, https://www.webdesignerdepot.com/imager/assets/posts/inline/detech_ebc4e931feca303daecd0e525a2a2d70.webp 1050w, https://www.webdesignerdepot.com/imager/assets/posts/inline/detech_24ee7cd68eac241bdecf3b61c0c5b583.webp 1480w” alt=”DC Tech Portfolio” width=”1856″ height=”1280″ /></a></figure>
<p>White Stone incorporates plenty of design effects and elements into a seemingly simple aesthetic. The part here that’s different is the overlapping video blocks and almost haphazard placements of elements on the screen. Tack the giant headline and animated mouseover effects onto that, and there’s just a lot to take in visually.</p>
<figure><img decoding=)
Each of the trends and examples here are in the spirit. While they might work for the content therein, there may not be a practical application for other projects. That’s for you to experiment with and decide. Have fun!
Comments are closed.