And then a hero comes along ...

If you know what song the subject line is from without looking it up, good for you! It was one of my favs growing up 🙂

We’re continuing on our #notadesignernewyear challenge by redesigning a site of our choosing.

So far we’ve:

• Picked our project

• Gathered and prioritized our content

• Laid out the main pieces of our design into rows

In today’s issue, we’re laying out our hero, the section under the nav bar, arguably the most important part of our website. We’ll walk through three common layout options for the hero (with examples, of course), discuss their pros and cons, and walk through a real life example from a recent project I launched.

This issue of Not A Designer is brought to you by Erik Kennedy of LearnUI, a REAL designer who used to be an engineer, has created design courses taken by thousands of students, and has his own newsletter, Design Hacks. Make sure to check out his stuff! 🤗

Alrighty, let’s get started!

I recently had to design a hero, that first row of content below our nav bar, for my newly launched project, Big Cash Money 2024. The hero is the introduction to the whole site; It’s the first thing the user sees and can get them to either stick around or leave.

Big Cash Money 2024 is all about reaching big financial goals this year and I wanted the hero to be bold and attention grabbing. But I gotta admit, it was a struggle.

I didn’t really have a process. Instead, I had a vague idea in my head and put pixel to canvas and just started placing things. I freestyled it; something I do not recommend. Since we’re still early in our design journey, it’s much easier to start with more structure and a plan.

The first attempt looked ok, but not great. I kept iterating and, eventually, got it to a place I was proud of, but it took a while.

Let’s break down what was wrong with it, how we can make it better, and what process you can use to design a great hero.

Attempt #1: The Freestyle

I started by gathering my elements. Our hero generally has four elements: an image, a heading, a subheading, and a call to action (CTA).

Here were mine:

• Image: I found a great image of a pig rockin’ some cool shades

• Heading: The title of the project, “Big Cash Money 2024”

• Subheading: “This will be your biggest financial year yet.”

• CTA: A button that said “Apply to join”

Here’s what my first attempt looked like:

It’s ok, but it’s not great. Let’s see what we can learn from it.

A good way to sharpen our design eye is to critique the work of others. So before we keep going, take a moment to examine this design and reflect on what doesn’t feel right about it.

Thought about it? Great! Here’s my analysis:

• Is it the typeface?

  At first, I was stumped by the typeface. I wanted the Big Cash Money 2024 part to feel as loud and bold and fun as the words themselves, so I started with one of my favorites, Cabin Sketch. But I wasn’t sure it was the right pick.

  
  I knew I wanted a simpler typeface for the subheading, something that was super readable, so I went with the classic Inter for that, but I wasn’t convinced that it went well with my Cabin Sketch selection.
  

• Is it the layout?

  In this freestyle, I was mixing layouts. I kinda had a two-column thing going on by positioning my image and heading next to each other, but the subheading and the call to action were both centered. This mixing of layouts wasn’t intentional – it just kinda happened. And I wasn’t sure it was working.

Instead of trying to freestyle my layout, I decided to research a few commonly used layout options and choose one of those.

The Center layout

Here’s a simple, but beautiful example of a landing page for a portfolio site with a centered hero.

This was created by designer Yassine on Dribbble, a marketplace for designers to showcase their work and get hired.

Let’s break it down. As we consider its different elements, I added some questions I ended up asking myself to help me process what I was seeing. Take a moment to use them to reflect on your own #notadesignernewyear project as well.

• Photo

  In this center layout, the photo plays a relatively small role. While it’s the first thing you see on the page, its actual size isn’t very big. It’s pretty easy to set aside and ignore as your eyes keep scanning.

  
  Reflection: What role do you want your photo to play? Is it a big, bold photo that you want to call attention to, or do you want it to play a more secondary role? If the answer is secondary, the centered layout with the top rounded photo might be a good option.
  

• Heading 

  We talked about our typical hero having four pieces – heading, subheading, image, and call to action – and in this layout, the star of the show is definitely that heading. In fact, it’s more of a full-on sentence than the few short, punchy words that usually make up a heading.

  
  Reflection: When it comes to your content, what kind of heading do you have? If you have a bold statement or a powerful thought you want to grab your users with, maybe a center layout makes sense.
  

• Height

  Another consideration is height – how does this layout affect the length of your page? Because the atoms are stacked on top of each other with every atom taking up its own row, the hero ends up being rather tall.

  
  Reflection: If you have just three of four sections on your page, maybe that’s not a big deal. But if you have more than six, that’s going to end up being a ton of scrolling for your users. If conserving space is important to you, this might not be the right layout. How many things are you stacking in your website?

So what do you think?

Left-align, background photo

This is another hero from Dribbble designed by the team Nija Works.

While I’m generally not a fan of putting the call to action on the opposite side of where you’re reading since it breaks up the flow, I think this is a great example of what effect a full-image layout can have on a site.

Let’s unpack it.

• Photo: Using a photo as the background really makes you focus on the image. It’s not just that it’s a big photo, it’s that it takes up 100% of the space. That means that the subject of the photo captures your attention while the rest of the photo sets the tone for the whole site.

  
  While I’m looking at the woman, the fields of grass in the background are also putting in work – they set the color scheme rooted in green and natural colors and give me a whimsical feel.
  

  Reflection: Is center stage the role you want your photo to play? Is the subject worthy of that kind of focus and attention? Do you want the rest of the photo to set the visual tone for the site?
  

• Heading: Because of all of the attention the photo takes, the heading feels like more of a caption to the photo than its own idea. It feels more secondary, far less important than in our center layout. If you want to draw attention to your photo and treat the words as supplementary, making it the background might make a ton of sense.

  
  Reflection: What role do you want your heading to play in relation to the photo? Is it more of a caption or should it be the main focus?
  

• Call to action: Such a heavy emphasis on the photo means deemphasizing everything else on the page, including the call to action.

  
  With such a gorgeous photo, I feel like I’m looking at a magazine more than a website, and the way I interact with magazines isn’t by clicking – it’s by browsing. As the user, this layout makes me more inclined to keep scrolling and take everything in. I feel less ready to click on the call to action.
  
  Reflection: How important is the call to action to you? Is it ok if you end up encouraging people to browse instead of click?

So what do you think about this left-align, background photo layout?

Two-column classic

Lastly, we have the classic SaaS hero. This one in particular was designed by Ahmad Fawaid. You’ve got two columns, one for your text and the other for your image. It’s simple, it’s clean, it gets the job done.

Let’s break it down.

• Heading

  In this layout, it’s the heading that gets your attention first. But unlike the center-aligned layout, I don’t feel the pressure to fill the space with a long, thoughtful sentence. There’s less room, so I can paste something short, like a title, and it still works.

  
  Reflection: What kind of heading are you working with? Long and flowy, or short and sweet?
  

• Graphic

  The image feels like less of a focus and, instead, serves to balance out the space – you give the reader some work to do by offering text to read, then you treat their eyes to a nice image. The image should still be good, but it’s more secondary.

  
  Reflection: What role does your image play? Is it the star of the show, or more complementary?
  

• Height

  Because I’m utilizing two columns, I don’t have to worry too much about a height that’s too big. My elements are placed side by side, which means a shorter height and valuable space saved.

  
  Reflection: Is space saving important to you or do you have more flexibility in that department?

For more hero inspo, go to Dribbble and search “hero section.” You’ll find tons of great examples from really talented designers, and you’ll see that most heroes are some variation of the three layouts we discussed above.

Think about your goals for your site, what you plan on using for your heading and image, and pick the best layout for your hero.

Before we get back to our project, a quick break!

I’m super excited about Not A Designer’s January sponsor, Design Hacks, a newsletter run by incredible designer Erik D. Kennedy. Design Hacks helps you create better designs. It features short, original UI/UX tips & tactics. It’s read by over 50,000 people from Apple, Google, Stripe, and more. Check it out here.

Back to Big Cash Money 2024. Which of these layouts should we try?

Attempt #2: The Two-Column Classic

I’m going to go with the two-column classic and see how that feels.

Hm, let’s dissect it piece by piece.

• CTA: The call to action is pretty standard – slightly rounded border, bold text, good contrast. That looks just fine.

• The image: The pig looks great and it’s sized at the same height as the copy on the right so everything aligns well. No issues there.

• Text: The juxtaposition of that heading and subheading are really bothering me. The problem we identified earlier about the typefaces is super obvious now that we put them right next to each other. Those typefaces don’t go together at all!

But it’s not just the typefaces, it’s the font sizes too.

If we look at the previous examples of the three layout styles, we’ll notice that there is a drastic size difference between the heading and the subheading. The heading is pretty large, drawing all the focus, and the subheading is closer to a paragraph-styled 18px.

Here, we’re using 64px for the heading and 32px for the subheading. That might sound like a big difference, but it’s not different enough, creating competition between the two. It’s not clear what you’re supposed to pay attention to – they’re both pretty loud.

This is where we take a step back and ask a deeper question, a content question – what is the most important thing to communicate to the user, “Big Cash Money 2024” or “This will be your biggest financial year yet”?

I would say that, since the url is bigcashmoney2024.com, they already know the name of the project. By the time they get to the page, the name isn’t actually all that important.

But that subheading? That’s the message I want you to remember. That big, bold declaration of how great this year is going to be. It gets you to think big. It gets you excited, hopefully excited enough to apply. That’s the good stuff.

So what do we do with that?

One thing we can do is get rid of Big Cash Money 2024 entirely and just make it part of the header and promote the subheading to be the new heading of the hero.

Let’s try that and see how it looks.

I don’t know about you, but I think that looks so much better. It’s cleaner, more focused.

That Cabin Sketch typeface for the title definitely doesn’t work for small font sizes, so we’ll need to change that, but since that’s now part of the header, we don’t have to worry about that right now.

So let’s assess where we are.

We’ve decided that we want to focus the user’s attention on the new heading – that big, bold statement that hopefully will entice people to apply. That’s the most important thing.

If we’ve determined that message is top priority, is the two-column layout the best way to bring that message home?

Based on our earlier analysis of the three layouts, the center layout is best suited for when we want the heading to really stand out.

Let’s give that a try.

Attempt #3: The Center Layout

That center layout helps us focus on our message by deemphasizing our image, and while I love that pig, it did feel like it was taking up a bit too much space and attention in our two-column layout. I want it to play a more supplemental role.

Let’s try a center layout and see how that looks.

Ahhhh, much better. That big, bold message commands your attention, and the pig adds a touch of personality without drawing too much focus.

But the one thing I want to change is the heading’s typeface. It’s just too bland compared to the personality and fun of the pig. We need to bring some funk to the mix, but still make it readable.

Luckily for me, I’ve already researched and picked six typefaces that have a touch of flare without sacrificing readability.

My favorite in that list is Anek Bangla. Let’s see how that would look.

Perfect. That touch of flare really goes a long way!

This final hero design looks much better, but it took a while to get here.

How could we have shortened the process?

Instead of freestyling my design, here’s what I can do next time instead:

1. Gather all the content I wanted to include in the hero

2. Determine what the most important element was (for me, it was the new heading)

3. Decide which of the three layouts best caters to that element (the center layout emphasizes the heading the most)

4. Try it out and see if it works

5. Iterate from there

And just like that, you have a step-by-step process for approaching your next hero section. If you want a hero section that spices things up a bit, check out Erik’s twitter thread of ideas for making it really stand out.

I hope this breakdown and analysis of the hero was helpful. Let me know what you think!

So, what does your hero look like? If you’re taking on this challenge, send me your wireframes, I’d love to see them!

And if you’re interested in applying for Big Cash Money, make sure to apply before it closes this Friday, Jan 12.

Next time, we’ll look at laying out the rest of the page and maybe get into grids and spacing. 👀

Happy designing!

❤️ Saron