As we move into 2024 I’ve been noticing some interesting design trends emerging particularly in hero layouts and at the top of websites. If you’re looking for some inspiration in the new year, here are some of the hottest hero design trends for 2024 that you’ve got to try!

Up until now, we’ve been seeing a lot of simple header lockups with a heading, a description, a call to action button and a full screenshot of an app or software.

Moving into 2024 we’re seeing a lot more creativity happening with website hero layouts.

1. Isolated Component Hero Layout

The isolated components hero is a way to showcase certain parts of an app or software without showing the entire thing. Designers can pull out and isolate certain UI components from the app in order to pull focus.

Thus layout can be treated as a single image combined together and layered with creative placement and positioning.

When you approach this type of design trend, think of it as if you are deconstructing the app to highlight certain features and then reassembling it in a way that tells the story and benefits of the product rather than just showing the product itself.

2. Bento Hero Layout