I wanted to point out a potential new trend that I’m noticing in the web design industry, specifically on dribbble.com. There are eight different designs I’m going to show you that take hero sections to a new level in terms of layout. And at the end of this, I’ll also reveal a design I literally just created this morning, showing you what that design might look like across different eras, from 2011 to now.
Examining the Current Landscape
Let’s take a look at these examples. If you enjoyed this video, check out designccourse.com, where you can learn UI/UX, CSS, and more with my custom interactive platform that makes learning fun and easy. I’ll link these examples in the YouTube description, so you can explore them on your own if you wish.
Dynamic Designs Redefining Hero Sections
Here’s a great example of a pretty modern approach to a landing page hero section. What makes it stand out is its dynamic nature – elements scattered creatively, typographic heaviness, bold type, and a vibrant color palette. It breaks away from the traditional left-right hero section.
Another example showcases solid design with a focus on topography. While it might present some UX challenges, the overall layout is interesting and dynamic.
Breaking the Mold: Not Your Typical Hero Section
In the past, hero sections were often centered and stacked. However, the current trend is shifting towards more interesting uses of white space, color, and topography. Designs are becoming more dynamic, like the one with an animation that adds a unique touch.
While some designs may seem a bit busy, they all illustrate the purpose of this new trend – a departure from the typical left-right hero section.
Planting the Seed for Design Trends
I want to plant the seed for you to stay on top of current trends. While you don’t have to incorporate these trends into every project, think of them as new ingredients that can add freshness to your designs.
Evolution of Hero Sections: Then and Now
Now, let me show you a design in Figma that reflects the evolution of hero sections over the years.
The 2011-2013 Era: A Familiar Pattern
This is what we saw a lot a decade ago – a typical hero section with a centered and stacked layout featuring a watermark photograph and text.
A Fresh Take in the 2017-2019 Era
Fast forward a few years, and we see a more dynamic approach. Two columns, one row, a fresh take with more emphasis on dynamic design.
Current Trends: A New Perspective
Now, fast forward to what I’m seeing today. Designs are even more dynamic, with a one-row three-column approach, asymmetry, and the use of marquee banners. The transition is clear, and the industry is moving towards more unique and fluid layouts.
Are traditional centered and stacked hero sections completely outdated?
Traditional centered and stacked hero sections are not outdated; they simply represent an earlier design era. The evolution of design trends doesn’t make previous styles irrelevant. Depending on the project and its goals, a centered and stacked hero section might still be a suitable and classic choice, especially if it aligns with the brand’s identity.
How important is user experience (UX) in the context of these new design trends?
User experience (UX) remains a critical aspect of any design, including the new trends in hero sections. While pushing the boundaries with dynamic layouts and unique elements, it’s essential to maintain usability and ensure that the design enhances, rather than hinders, the user experience. Conducting usability tests and considering conversion rate optimization can help strike the right balance between innovation and functionality.