Hero section · First screen

What should go in a hero section?

A hero section needs just three things: what you do, why customers should choose you, and what they should do right now. From the first screen alone, customers should be able to decide whether to keep reading or get in touch.

Adding more doesn't make it better. The more elements you add, the less each one stands out, so it's a good idea to separate what must be there from what can move further down.

You include your type of business and area because of customers who arrive from search. When someone who searched "Mangwon-dong cake" sees those same words on your first screen, they're confident they've found the right place.

Do customers really judge you by the first screen alone?

They don't look only at the first screen, but it is where they linger longest. In an eye-tracking study Nielsen Norman Group published in 2018, about 57% of viewing time went to the area above the fold, before any scrolling.

The same study found that the first two screenfuls took up about 74% of viewing time. Customers do scroll, but the further down they go, the less closely they look.

So the first screen also has the job of giving people a reason to keep scrolling. Customers only go on to read your prices and reviews further down once the first screen convinces them you're the right place.

That doesn't mean you have to cram everything onto the first screen. Customers scroll when they see a reason to, so if the next section peeks in at the bottom of the first screen, they'll naturally keep going.

How do I write a hero headline?

Write your hero headline in the words customers use when they search, fitting your type of business, area and strength into one sentence. Plain wording that's understood instantly gets read more than clever phrasing.

Follow the steps below and most businesses end up with a usable headline. Don't try to get it perfect on the first try; write two or three versions and compare them.

If you try to fit every selling point into one line, the sentence gets long and nothing sticks. If you have several strengths, put only the one you're most confident about on the first screen and explain the rest one by one in the sections below.

Once the headline is set, it also helps to match the words in the page title shown in search results with the words on your first screen. When what customers saw in search matches what they see on arrival, they're less confused.

1. 01Write down what customers might search for when looking for a business like yours. (e.g., "order cake Mangwon-dong," "layered cut Hongdae")
2. 02From those, make a short, large headline that includes your type of business and area.
3. 03Add one small line of description about one thing that sets you apart. (e.g., "Same-day orders available," "1:1 consultation before every treatment")
4. 04Write the button text as the action the customer will take. (e.g., "Ask about a cake order," "See open times")
5. 05Put it on a phone screen, and if it wraps onto too many lines, cut words.
6. 06Show it for 5 seconds to someone who doesn't know your business and ask, "What do you think this place does?"

Will a big photo or video on the first screen slow down my website?

It will if it isn't handled properly. The big photo on the first screen is usually the largest element on the screen, so it feeds directly into LCP (the time it takes for the largest content to appear), the metric Google uses to measure loading speed.

According to web.dev, an LCP of 2.5 seconds or less counts as "good." The basics are to resize the first-screen photo to fit the screen, convert it to a lightweight format, and not set it to load late (lazy loading).

Speed comes out slower on phones than on computers, and slower on mobile data than on Wi-Fi. To see the first screen the way customers do, turn off Wi-Fi and open the site on your phone.

A background video sets the mood, but the large file size weighs on phones using mobile data. If you use one, keep it short and prepare a still photo to show before the video loads.

How should the first screen be set up for different types of business?

What customers want to check on the first screen differs by business type, so pick your photo and button to match. Below are setups small businesses commonly use.

Use photos taken at your actual business whenever you can. Stock photos look clean, but if the place looks different when customers visit, it can actually hurt their trust.

On phone screens, a tall photo can take up almost the whole screen and push the text and button out of view. Cropping separate photos for computers and phones keeps both screens tidy.

It's fine to change the first-screen text and photo for seasons or events. But if every change means asking your web agency, it gets tedious, so check in advance whether you can change them yourself in the admin panel.

• Cafe: a photo of the space or a signature drink, "Hand-drip cafe in Yeonnam-dong · Open daily 10:00–22:00," and a "Directions" button.
• Hair salon: photos of real styling results, "3 min from Hapjeong Station · Low-damage perm specialists," and a "Book by stylist" button.
• Craft studio: a photo of hands at work in class, "Weekend one-day pottery class," and a "See this month's schedule" button.
• Online store: a photo of your best-selling product, "Handmade granola, baked in-house · Nationwide delivery," and a "Shop products" button.

What are common first-screen mistakes?

The most common mistake is showing only a big mood photo and leaving out the text. You know your business, so a photo seems like enough to you, but first-time customers can't tell right away what kind of business it is.

Another common problem is auto-advancing slides that make important text disappear too quickly. It's also common for the button to look fine on a computer but get pushed below the screen on a phone, so always check on a phone.

Be careful with popups that appear the moment someone arrives. When a promo window covers the screen, customers are busy closing it before they even see what your business is, and Google also lists popups that cover content as an example of a poor page experience.

Starting with one photo and a headline instead of slides is also easier to manage. If you want to show several photos, you can add a separate gallery section below the first screen.

What should I ask my web agency when reviewing the first-screen design draft?

When you get the draft, ask your web agency the four questions below. Getting answers based on the phone screen means fewer fixes after launch.

• Is the button visible on the phone's first screen without scrolling?
• Will you check the file size and loading speed of the first-screen photo?
• Is the text over the photo easy to read even on a bright photo?
• If there are slides, can customers pause or swipe them themselves?