Supercharge your SEO! Subscribe to our newsletter for the latest SEO tactics & best practices

Listing Items, Shadows, Alternating Sections, Font Selection

Updated March 31, 2017
No Comments

Tim Brown

Tim Brown is the owner of Hook Agency, an SEO and Web Design company focused primarily on driving traffic and leads for small businesses, roofers and construction companies.

Picking up where we left off before students work, we’ll continue to design the rest of the page, and consider what is the next set of important information to display following the hero unit, and some tips for standard practices for design that will highlight that information well.

Highlight Key Services or Information:

A standard practice on many site following the hero unit is to highlight a few primary pieces of information or services. For the example of a social media agency I’ve chosen 3 services.

Start by creating a box for each and align and space them evenly. Start with white boxes, and then add in some photography. We want to create contrast between the background so I’ll darken this gray background.

Keeping up with web trends:

In this example I use some drop shadows to help make the design pop. Shadows were out of style for awhile because earlier in web design there were a lot of more extreme uses of bevels and gradients etc. (skeuomorphic design) and then design went to more of a flat look. Now it’s popular again to subtly use shadows and transitions.

Image Selection:

The images you choose matter a lot, because these are key images in telling the story of your company or organization. The point is to help make a visual connection to the information being highlighted. In a later video I’ll cover icons that can be used in this space as well.

Fonts & Text:

It’s hard to master using a lot of fonts, so I recommend for beginners by starting with just 2 or 3 fonts.

Hook better leads with hard-working digital marketing

We help small businesses get more traffic and leads with Professional Visibility™ through web design & SEO

Free Marketing PlanGet a Free Demo
Ready to hook better leads and save time with hard-working digital marketing? Start the Conversation

Try to keep these short and introductory, just like the hero unit. You can write more about them farther down the page.

You want to get into the mind of the potential customer and think about what their goals are. So this is a good opportunity to quickly show the value propositions.

Increasing Importance:

I like to have a softer sell at the beginning of the page, and make a harder sell towards the bottom. if they read all the way down, that indicates they may have more interest that they want to contact you.

Alternating Sections:

For visual interest, alternate section backgrounds and font colors. A common convention is to alternate images, text and buttons from left to right.

You really want to be able to feature a good amount of content when it gets further down the page you don’t want it to be just images because you want there to be something for search engines to index and you want there to be enough information so that somebody can feel like they are being educated about the service so they don’t go looking for information elsewhere and discover a competitor.

Get a Free Instant SEO Audit


Watch this quick video to see how savvy businesses save time and hook better leads:


  • Don’t overwhelm yourself trying to make typographic choices, stick to just a couple of fonts to work with, and styling those for their purpose on the page.
  • Alternating styles using color and placement in each page section will help to distinguish the sections as well as create visual interest to the user.

Related Posts

Tim Brown

Tim Brown is the owner of Hook Agency, an SEO and Web Design company focused primarily on driving traffic and leads for small businesses, roofers and construction companies.

Leave a Reply

Be the First to Comment!

Notify of

Want to hook better leads with hard-working digital marketing?

Get a free consultation now