Design The Perfect Hero Section (With Example)

your role as the designer is to save the world well actually it's to help your clients make more money but if they're saving the world and you're helping them you're saving the world however if the hero second on your client's website sucks people will not stay over 90 of people leave the website because what they see in the first 15 seconds the hero section sucks and so the world is doomed today i'm going to show you how to create the perfect hero section so that you can help your clients save the world and have other clients chasing you to help them do the same make sure you follow all the steps so the dark side doesn't win step number one is to clarify who should care and why the goal of a hero section is to help people who land on the website understand what is this website who are these people is this for me why should i care about this so to be able to answer all these questions we really have to get to know our clients so we have to ask them all these questions what are you selling why did you start this business who are you trying to help what are what are your goals with this website what do you want people to do on this website we usually call this a strategy session in this conversation we're trying to figure out what are the goals of our clients we gather all of this information and we have to distill it into a very very clear value proposition which is usually a sentence or a sentence and some words afterwards and some kind of a call to action which is the goal of what we want people to do on the website but most importantly on the hero section the first thing they actually see on the website and so let's take an example let's say that i'm trying to help a rebel organization trying to fight an evil empire and save the galaxy well i have to talk to them and ask them okay why are you doing this why are you trying to save the galaxy why do people care about this what do you want these people to do and they're probably going to tell me well because we want freedom we want our kids to grow up in a safe universe and we're our goal with this website is to recruit people into our organization so we want them to join the rebel alliance now that i know these things now i can go ahead and start putting them as content as value proposition into our website which leads us into the second step in the process which is creating a wireframe now the goal of the wireframe is just to take the big pieces of content and put them on the website so that we can see what we have to work with we're not trying to design this we're not trying to make this pretty we just want to know what is the content that we have to work with before we're starting to make things pretty and do actual visual design so i'm going to start up figma and i'm going to open up a new canvas and then i'm going to write down the value proposition that i got from my clients in this case it's your universe it's time to save it which basically means we're trying to save the universe and write a little bit of copy telling them something like we are the rebel alliance um is fighting to get rid of the evil empire join the resistance to create a better future for your children basically explaining what they do and why you should care about them and add a little button with a call to action in this case it's going to be join now so this is what we want now apart from this we're also going to add a logo because people want to know who owns this website what is this organization and we're going to create a quick navigation so people know what else is on this website so maybe our ships our mission maybe donation and maybe another call to action to join now because this navigation is going to stick with us as we scroll through the website and here we're going to have an image i'm leaving space for an image i don't know what the image is now a lot of people worry about layout at this point should it be on the left should it be centered now at this at this point it doesn't really matter we're not trying to solve the design so i just want to show you we can have different layouts but it doesn't really matter right at this point i just want to see the content that we have on the website show it to my clients and say okay are we good is this the value proposition are you aligned with it okay we can get started with it so this is the first step and now we can move into the next step in the process and so the third part of the process is coming up with a creative concept if we want the hero section to be powerful both communicating again what is this but also creating some kind of an emotional reaction from the people who we are trying to sell to or recruit in this case so we want to have some kind of a powerful image to go alongside with this now in this step we just want to think about the different concepts for the visual that we're going to have on this website so what i'm going to do is i'm going to just duplicate what i have here and try to think about a bunch of ideas and i'm just going to list them down so one idea and i'm just going to very roughly draw it up with shapes right so and one idea can be maybe show a ship flying away from a burning death star right this is going to motivate people we can win the bad guys so this is just a very rough sketch that's going to be on the right side and we're going to have the content on the left side that helps me to understand whether we have space enough to explain the concept whether there's going to be space to put the text next to the image so they don't overlap and people can actually see it and just kind of to quickly brainstorm now it's always good to have multiple ideas never just go with one idea so another idea can be maybe a parent hugging a child happy with the death star burning in the sky yes we can win the bad guys so let me just very quickly with shapes say maybe the parent and child are here and the star is in the background then this can be the layout um let's come up with another idea right so let me duplicate this once again and maybe here we're going to go with something like show the team of rebels show the people that you know you'll be joining so motivate you by showing the great people that's on our team um so here we have a team of happy rebels so these three ideas they can all work and now that really depends on you know the budget that we have how are we going to create these images there are multiple ways right we can go ahead and photoshoot we can buy stock images so it really depends on our budget and it really depends on the client but now i've got three creative concepts i can go ahead and share them with the clients get their feedback ask them what do they think about them what do they resonate with most and once i get approval for this we can go ahead and execute on one of these ideas and this leads us to the fourth step in the process developing the imagery so at this step the client has approved our first concept right so we're going to have to go ahead and develop these assets now in your case you might be buying stock photography or commissioning a photographer or a 3d artist in my case i'm just going to use free images from the internet just for practice these are not my images and they're not copyrighted to me but i'm going to go ahead with the first concept of a ship flying away from the death star i can find here some rebel ships and i'm going to open up photoshop to create some kind of a composition now i'm going to bring basically the design from my figma and i'm going to invert it because i want this to be on a space background so the background is black and i'm going to start positioning now having the text here is going to just help me to make sure that the composition is right and i'm not putting the images below the text so that they're you know hurting the legibility of it so i'm going to bring burned death star i'm going to put that in the background and now basically this is kind of like the the image making phase of things right now i can really be creative and try to play around with things maybe i want to bring in stars background this is really where you get creative and start creating like nice imagery so i can play around with it i can also try to add flames or explosion to the death star in this case to be honest i couldn't make the explosion work um so i ended up just going with a composition where the ship is actually bigger than the star itself because i actually think that you know we're trying to motivate them to join the the rebel ships so now let's make the ship more epic and the star more in the background i feel like this is a much better composition that can motivate people to want to join us all right so now that we have the image ready i'm going to bring it back into figma and it's time to move into the next part in the process which is actually the design process so depending on the client that you'll work with maybe they already have some assets right in this in this uh example well the the rebel alliance already have a logo and they already have a color right it's a red color so i'm just going to use them they don't have you know typeface they don't have a font so i'm going to play around with a bunch of fonts to try to look for a font that it feels rebelly feels a little bit bold and after playing a bunch around with a bunch of fonts i came to use titling got it which is a font that i like feels kind of bolden in your face which is pretty good for rebel alliance and now i can start using this to actually do the design apply the colors apply the typography make sure that we have good hierarchies and people can focus first on the content and then on the imagery for the second button i'm going to make it a ghost button meaning it's only an outline so that it doesn't grab as much attention as the main button and basically now we have the design now the hero section already looks pretty good but let's not stop here let's move into the sixth part of the process which is optimization if we really want people to take action and and convert meaning to actually sell and actually get them to join we're going to have to use some psychology tricks in here or not tricks but principles right and so we're going to use things that are going to make it more appealing for them to accomplish the goal of the website which is to join so the first thing that we can do is we can go ahead and for example add the word join for free yay it's free to join the rebel alliance so making something free is going to make it more appealing now we can use something like social proof to show that other people have joined as well right we can do something like ob1 and 4000 others have already joined the rebel and add some of their photos people are always more inclined to do what other people have done before them to feel like they're not at this alone so by adding this people are going to be more influenced to take action and perhaps more likely to join the last thing that i want to do is to add a little bit more social proof and show them that this rebel alliance has been featured on the news so again by using social proof to show that other people have given credit to this organization before and add a bunch of logos of maybe tv stations that everybody knows this is going to help build credibility for the organization and is more likely to have people want to join us because again we look credible and trustworthy now that we've done that now we have a perfect high converting powerful good-looking hero section for our website now if you want to practice yourself if you want to try practice your photoshop skills and your figma skills you can download the resource of the project that i was working on in this file and you can practice yourself and of course this was super super quick way of a process that usually takes around three months building a whole website for clients so if you want to dive deeper into this process that we explore we have a free workshop and i'm going to link to that below the video i hope you enjoyed it let me know in the comments below what you thought about this video i'll see you in the next video peace out [Music] you

Channel: Flux Academy

Views: 84,960

Keywords: become a web designer 2022, freelance web designer, graphic designer job, web design, web design freelance, web design business 2022, web design freelancer, web design business, web design 2022, web designer career, web design school, ran segall, Flux academy

Id: LJbkLdtEW00

Length: 12min 24sec (744 seconds)

Published: Fri Aug 05 2022