How to design a portfolio hero section recruiters CAN’T ignore

Most recruiters decide in under 10

seconds if your portfolio is worth their

time or not. And your portfolio's hero

section is their first impression. So,

in this video, I'm going to share five

heroes design layouts that you can use

to make your portfolio stand out and to

get you one step closer to finally

landing that design job. Before we look

at those five different hero design

variations, I wanted to first take a

moment to talk about what should

actually be in the hero section of your

portfolio. Because it doesn't matter how

beautifully designed your hero is if it

doesn't include the right elements, then

your hero won't be able to do its job

effectively. So, what are those

elements? Let's break them down. One of

the first elements you'll need in your

hero is a headline that tells people

what you do and who you are. This is one

of the first things that people will

read when they land on your portfolio

for the first time. So, don't over

complicate it and try to be poetic. Keep

it simple and make sure that your

headline is readable. If you want, you

can even include a sub headline that

adds some additional context or a touch

of your own personality. Number two,

show your work. It's the main reason

people come to your portfolio. So, don't

hide your work or make people scroll to

see it. Show it above the fold in the

hero. Third, you need a clear call to

action somewhere in your hero,

especially if you're looking for work

and are trying to get hired to land that

design job. Number four, you can even

include brands that you've worked with.

Again, this one is optional, but if

you've worked with big recognizable

brands, then you can include the logos

of those companies or even write out the

names of those companies somewhere in

your hero. And this will instantly add

some credibility and social proof to

your portfolio. When all of these

elements come together, your hero is

able to do the job that it was meant to

do, which is to capture attention and to

convince people to stick around and

explore your portfolio further. All

right, now that we've talked about the

elements that you should include in the

hero of your portfolio, let's now take a

look at five effective hero design

layouts that you can use as inspiration

for your own portfolio. The first layout

I'm going to cover uses a classic bento

grid layout. It's broken into three

sections with the top block spanning the

full width of the grid. It includes all

the essential hero elements we talked

about earlier. A clear headline, a civil

CTA, and a teaser of their work. What I

really like about this one is how clean

and balanced it feels. It's not

overdesigned or trying too hard. It just

works. Another thing that makes this

hero design good is how it leads with

the work. It's at the very top of the

page and it's one of the first things

you see when you land on this portfolio.

Notice how the video takes up the most

space. So, it immediately pulls you in.

Then your attention naturally moves down

toward the headline. It's a small

detail, but it creates a nice visual

flow. This next hero takes a clean,

straightforward approach. It leads with

a simple headline and right below that

there's a carousel of their work. This

layout is a good example of how to use

white space to make your hero section

easier to scan. One thing to note here

is if you're using device mockups for

your project thumbnails, be sure to

scale them up because when they're too

small, it becomes harder for people to

actually see the design work in the

screen. like in this case. This next one

takes a different approach with a really

simple two column layout. On the left,

there's a sticky vertical navigation and

on the right there's a grid of projects

that instantly shows her work. Even

though it's not a traditional hero with

large headline and a CTA, it still works

really well. The left side gives you

quick context about who she is, while

the grid on the right immediately teases

her work above the fold. And I love how

she's using the videos here. Again, it's

a great way to draw attention to her

work and makes the whole section just

feel more alive. The next hero example

here uses a classic centered layout. His

work sits right in the middle of the

page, sandwiched nicely between the

headline and the sub headline. It's

simple and balanced. Centering

everything just draws your focus to the

work immediately. It's right there front

and center. The brand names at the

bottom of the Hero are a nice touch as

well because they add some credibility

and social proof. I just wish the text

were a bit larger and the gray was a bit

darker because it's currently hard to

read. Again, the layout is pretty

simple, but all that white space makes

the hero feel modern. And being that

he's using a limited color palette, his

work in the middle just pops and stands

out even more. If you're thinking about

using a centered layout like this, it

also helps to have something peeking up

from the bottom of the screen. That

small visual cue just encourages people

to want to scroll and explore more of

your portfolio. This last hero uses huge

editorial style type that immediately

grabs your attention. Like the other

examples, it also checks the boxes we

talked about earlier. There's a clear

headline, a CTA, and a couple projects

teasing their work above the fold. I'm a

big fan of this design personally,

especially as someone who loves

editorial style layouts. But if you're

going to use a layout like this that

leans heavily on typography, you have to

make sure you spend some time finding a

good font. Otherwise, the design will

feel off. And I also like how they've

indented the headline here. It has a bit

of visual interest and style, but it's

something to use carefully because too

much indentation can make the text

harder to read. But if you do it in a

conservative way, I think that it could

work really well. All right, those are

the five hero design layouts that you

should use as inspiration for your own

portfolio. I'll leave a link to all the

portfolios I shared today down in the

description below if you want to check

them out. And if you enjoyed this video,

I wanted to also remind you about my

framework template, Loi. It's designed

to help product UIUX designers just

[music] like you build a portfolio that

stands out and cuts through the