Copy these 21 Hero Section Designs

Key Takeaways

I'm about to share 21 hero section examples with you from real websites so that you can copy these layouts isn't it wrong to copy other people's work yes if you're appropriating the entire design or stealing images and especially if it's for a commercial project but copying these layups as a form of practice is a great way to get the skills under your fingers and if you stick around for the whole breakdown rather than just scanning through the images in this video you'll begin to understand why these different layouts work so well the hero section is the most important part to get right because it's the first thing people see on your website before they start to scroll so let's see how these examples are successful at orienting and retaining viewers we'll look at some more interesting and experimental design as we progress but let's start with a standard format how do we Elevate the default text left image right layout on this side it works because the type setting is very well done on that left column of text we can read that headline very clear clearly with big contrast there's a sense of scale between the size of that headline and the type underneath and then the image on the right is actually not just plonked on the right it's kind of this separate thing but it feels more integrated with the headline because it actually goes underneath and wraps nicely around the headline itself and they've kept that whole top section uh compact so then you can see a little bit of of what's below lead you straight into the website and on the mobile it's that standard format of just putting the image underneath that text so we can still have a nice measure line length on the text with this site we still have the text left image right in general but what they've cleverly done is they have a concept they have a a creative idea behind it and that creative narrative that can flow through your site can really help elevate your work so in this case because the company is called Runway it looks like a boarding pass this whole hero section and then they've used those uh rounded rectangles all the way through uh to give it an interesting look because you know a screenshot of a website is pretty boring but putting it within that airplane window really just makes it that much more interesting the centered layout with text just centered on a full bleed image background is kind of a default thing in a lot of templates and often time it doesn't work because the text is competing with the image it's not very legible underneath so what they've done here to elevate a very simple basic uh layout is to make sure there's good clear space for the text so the dark text appears on the light background of the sky and also on the desktop layout the whole shape of the hills there is framing again and drawing the eye in towards that headline unfortunately on mobile they failed to do that um and really they should have just centered all the text there just the same and given it a bit more room uh so that would work more effectively in this example it's similar but they've actually integrated the headline text into the image so they're using the principle of depth by having the text in front of some of the trees and behind others um but it also is a similar sort of proportion and size um to the product that is in the main view of the shop and then to add some interest and this is more interesting on a live site than these screen grabs because the video in the bottom right is playing and then you can click on that uh to see more so it draws your eye uh down there while still having this poster-like look to the main hero section with full bleed images you can also use maybe a bottom row as they've done here so we can really see and appreciate the image because we have the product right at the center of the frame here the thing that we want to see that's the star of the show but then we have almost a bottom row and and the navigation all those other bits are really out of the way so we're focusing on the product and that bottom row has the headline on the left and then on the right again an IM a video that is playing in a window so that we can then click on there to to see uh the full thing that kind of layout they've realized is not going to work on mobile so they've just completely changed it and we've got a real closeup of the product that just becomes kind of a a background element just something graphical and the video now is the full width you could also split your headlines so have part on the left part on the right and the image in the middle this is enemies you could try and copy and they've actually put the primary call to action button the blue button on the left and the secondary one that's white out on the right now on mobile this doesn't work as well or you can't really produce that same effect in that way because you don't have the horizontal real estate but they've just made use of the vertical space and it's still really clear with really high contrast and a very simple user interface on mobile so it still really really works and on the live version of this site these illustrations of the car actually scroll through lots of different types of people different demographics uh which makes it more interesting and inclusive you can also split the headlines in a more compositional type layout try something like this again the navigation is tily out of the way and we're LED towards right in the center of the frame the focal point is the face of the dog but then splitting the headline in this compositional way really just adds some visual interest to the scene it makes our eyes move around uh the layout and on mobile they' found a way of of doing that it's it's just a a center aligned layout but it still works with a little overlap of the illustration over the type what about making the headline the entire hero section that's what they've done here so you really just grab people with that you're not concerned with imagery and how the composition is going to work it's huge big it feels post alike it feels like a newspaper headline and straight away you are communicating your value proposition you could try that this idea of the type being the full viewport with could also be used for a logo as on Lor's website when you scroll they also have a small logo above and a menu appears but right when the s loads we have this video playing in the background but just this huge type gives again this sense of scale and we're seeing this next white rounded rectangle at the bottom which really communicates who they are what they do but it's also encouraging us just to scroll down and see what is there below the fold but this is a very simple bold graphical idea that you can try similarly here it's a poster and in Mobile it actually looks really beautiful because that portrait format is kind of the the poster proportion and you can imagine this kind of poster for an event or a festival on a fly poster around the city or on bus stops digital ads and that works really really well as a nice composition on mobile on desktop I think it's cool too because it's kind of intriguing we know that there's clearly something below here because it's cut off and you can drag your window maybe you've got a a narrower window on screen in the browser and it's looking a bit more like the mobile view in terms of the composition but actually again making the logo or the name just the full width and making it huge and really going for that what we don't want in layouts is too many mediumsized elements we want something that's huge something that's small to give it uh the sense of of scale between the two and then use you know a sensible amount of medium-sized elements with it they've used the same effect on this website for an agency in France and again it's the name it's the logo that is huge but what's different here is we're beginning to see into the projects so on desktop here we can see the first three projects on mobile we can only see the first one but it is encouraging us to scroll it's encouraging us to go further and that's the whole point of hero section you don't want people to leave your website straight away you want them to hang around so how about trying this out where on desktop you just use the whole left side for a logo uh and maybe just a simple proposition there in that line of text below and then on the right you can use imagery or even these layers of the first few pages or sections or projects on the website add different way to split instead of splitting horizontally um or down the vertical middle and having two halves you we could have a top and a bottom and this is for a museum in Amsterdam so as well as this split of the yellow on the top and this brown on the bottom we have a few other interesting things going on on this website one is there's two navigations so we have the navigation at the top with familiar things like visit and about and support and a separate buy tickets button on the top right this is the key call to action that icon is then repeated on the left now the principle of UI is that we don't usually just use an icon by itself usually an icon and a text label together is the best way but you can roll over and expand this menu and I also think that they have done a good job of PR picking pretty familiar icons just looking at this now it appears like we've got like a calendar of events then tickets search location H what would the clock be I'm not sure about that one reminders or usually so that one's maybe a bit unusual versus the calendar but this idea of maybe having some icons that can pop out and then you can see on mobile that works really well because the most important four icons are there at the bottom so it feels more like an app when you're on the mobile website but then you can click the hamburger menu in the middle to expand the menu which is the top Center navigation on desktop and the other smart thing about this is straight away we see although we have the clear explanation of where we are one museum two location so that orients the viewer we also have this what's on Section that we can see below and that's always visible when you first load the website whether on desktop or mobile and that's smart because with something like a museum people return to the website so they want to see that it looks different they want to see that it looks changing all the time but they've still left them El some space in that top half to communicate what they're about and make sure the navigation and and there's quick links in one click into where people want to be maybe if they visit regularly see what's on buy a ticket but also the what's on section is going to be changing underneath so it encourages people to scroll and it feels different it looks different every time the viewer returns to the website every quarter every month or so you could also go for the sort of no hero hero section so if your content is so constantly changing you don't necessarily need that area that explains this is what we're all about which is kind of what we're told is always necessary on a hero section because if you're going to Mom the Museum of Modern Art in New York there's a good chance you know what it is so if you have a website or a company that is very well known to the users of the site and you have content that is constantly changing and people that return to the site periodically so this is same with like a News website they wouldn't spend their whole hero section saying we are a reliable news outlet that seeks to Pro they're not going to go into that they're just going to show you the news and they're going to have the logo at the top so similar with Momo we've got the logo we have got their navigation and it takes up a minimal amount and it's straight into this everchanging content but you could probably pick up even if you'd never heard of Moma that it was uh an art gall rate there's some sort of events going on you can kind of tell by the way these exhibitions are laid out keeping that theme of having the hero section and the main information sort of narrow at the top part of the website this website for diagram we have here again the headline and a by line and then a button with a call to action underneath but these are all into the top third maybe both on the desktop and mobile site it gives us loads of real estate at the bottom they have this animation going on in the background with these planets revolving uh which is just a little bit of interest and Delight as you see this thing moving but they're giving themselves lots of room here and there's lots of negative space though around the headline so that we can be led to it and we can really just grab that and understand that uh quickly so it's a smart way of doing it again it's making that whole area where the type is like that kind of medium siiz element the navigation the small elements and then the large area is for this background video the same format is followed on Cooler's site small items in the nav medium size for the headline and then the large image space is given underneath and kind of similar with glide although what they've done here they've really felt it necessary Maybe client really wants to include a certain amount of text near the top they've managed here to have this little caption air powered no code apps then create business software you actually want the main headline then the by line goes on the right and these columns just notice they're not the same width so you can experiment with things like this where if you've got say a 12 column layout you can use two three columns on on the right and you know nine or 10 on the left and you know different sort of combinations here this might be a eight and a four or seven and a five or something like that so you can kind of have these column layouts and that that kind of move through uh your side taking up a different amount of columns as you go through on mobile they've just stacked the whole thing which is a pretty standard approach and it keeps your line length and reasonable and and your font size is at a a readable level number 17 now I do not like the art Direction really on this image here I think they could have done uh more with this there's a there's a few different challenges it looks a bit strange on mobile with that huge button going right over this model's forehead but I think what is worth maybe copying or trying about this layout is they have these two rows at the top so there's always a space on this Carousel for a headline in a place that makes sense so although maybe the contrast again isn't great I just thought it's another layout you can maybe tray out where it says remedy and then underneath dark spots dealt with and as it Loops through the different images underneath you can see that there's three dots for three uh carousels it changes that headline each time so just having that diff place for it maybe you'd make this a lot larger but just having those horizontal rules the thin stroke lines and a space there where the headline belongs is something that you could try out for yourself what love about this layout for this drink is that we have uh this radial layout so it emanates from the center of the image so all the characters the way the illustration is done and it works great both on mobile and on desktop is they revolve around the can in the center so they draw us subtly into it and obviously the whole art direction of this website just adds that playfulness it uses the artwork from the can within the website itself and if this can was just on a white background it would look a bit flat and it wouldn't suit the personality of the brand but it's a really smart layout just using this whole radial layout where everything sort of emanates or points towards you know some sort of object in the center it's similar here because the code name the product name for this watch acf1 is right the center so that's what we see and we kind of remember and Associate this image but again the principle of scale is used so we have this macro shot of the watch and it's absolutely huge it's so big you know because it feels like it's spilling off the page and then we have this really really small type for the navigation and E even the by line where it reads Sleek design Hightech minimalism on desktop that's really quite small this was screenshot on a big screen but even so it's just those three elements there of large medium small but used in a a smart way so you could try this where you have a large image in the background especially a macro shot like this works uh really well for a sense of scale it's really close up but then with the navigation they've actually put that within a bar so it's a transparent bar on desktop on mobile it's this solid gray background that way your navigation you know the legibility of is isn't going to interfere with the the image and make sure it's always readable uh and then we have the mediumsized you know headline or title and the way this is put together is something you know that would be worth trying out and copying and there's also some nice you know art Direction they've just chosen good fonts and that's all consistent with the the graphic design here another page of their website shows some similar features we've got again that full width textt using the full viewport width for this wrk and then very small type so we have the the the different large medium small elements but what's cool with the macro image here again is it's cut off so it's leading us down we want to scroll we want to see more of the website and you want your design to be in a way that encourages people that they know they can scroll and they want to see more and having to write the word scroll or an arrow maybe shows it's not really working very well because it's not suggesting that people should do that and the final example there's a lot being pulled together here you can see on the mobile version the full bottle and so on desktop we're just seeing a part of it so again that principle where're being encouraged to scroll we've got that full viewport width type for this word iconic here and then it later reveals the next word functionalism so that's their proposition iconic functionalism but there's also some more interesting things uh going on so I like how on mobile you can just see that full title with the bottle in front and it's just a a very graphical again poster like design but on desktop we have actually grids going on with these three columns and there's actually um more columns than that because of the way the navigation you know is aligned to the side but we have these three columns for the type so although there's quite a lot of type here with um this sentence on the left and there's two sentences in the middle paragraph then we have the contact details on the right we're able to take them in one at a time and it's a really good layout I just drawing our eye around it we see this huge word iconic and it might encourage us to just scroll but we can look around and just kind of appreciate that there's very deliberate alignment here with the use of the columns and the use of negative space just allows us to move around the layout so get into more detail try things like this where you've got some things that are full width some things that overlap to give this sense of depth like a bottle on top of the type then maybe you've got a 12 column layout and you use three columns in some points and just making sure your alignment is very deliberate but there's white space around things is definitely something you could uh copy and try out here there's lots more videos on web design and layout here on the channel so make sure you save them for later it might be time now though to stop watching and start practicing so until next time happy designing