In the era of scanning and skimming through content, it’s vital to catch the eye of the potential customer. Even if you have a good product or service and an excellent copy, without proper presentation, it risks being passed by a potential customer.

The team behind the innovative website builder Tilda continually researches the best practices of web page design to apply in our product. Together with Icons8, we decided to share ways of applying icons in landing pages to make your offer visually outstanding.

The article is full of examples. We provide links to all examples, so you can take a look at real pages, get icons from examples and even try them out easily and for free with a landing page builder.

So, let’s get started!

Make a List Look Good

Structured information is easier to read and memorize, that is why lists are a part of web page design language HTML. We use and see lists every day: features, services, advantages, why to choose us, how it works, plans and options.

The simplest way to use the web page estate effectively is to spread your items horizontally. Here is an example:

icons in web designIBM Watson landing page

However, without visual anchors and lack of contrast visitor skims through that list. If a designer didn’t spend the time to decorate that block, why a reader should spend his time to consume that information? Is it so important?

Let’s compare 2 ways and you can tell which one is more memorable and friendly.
A structural block of facts without icons:

icons in web design

Or a structural block of facts with icons:

icons in landing page design

As you can see visual information representation is more eye-catching, that is why Apple uses it.

web design footerFooter block on iPhone X landing page

Make unordered lists look nice

The obvious way to make a list look nice is to use a checkmark:

web design best practicesStripe’s partner program page

landing page designFitness coach landing page template by Tilda

Highlight features

If it’s hard to find metaphors for your items simple bold ordering will help.

 

landing page design tipsA basic landing page template without images looks better than a simple ordered text list.

To get number icons easily search for “number 4” or “circled 4” on Icons8.

circled icons pack

Even if you can put items in the order consider emphasizing items with a horizontal list.

lists in web designA tour landing page on Tilda uses big dots and horizontal items instead of a simple list.

If you don’t want to bother with the creation of a circle in any graphics editor just search for “filled circle” on Icons8 and recolor it easily.

filled circle icons

 

Give emotional touch to advantages

Visual metaphor catches the visitor’s eye and helps understand the meaning of your message.

landing page templateAdvantages block in Tilda’s company landing page template

Give visual synonyms to services

web design tipsOne of the standard services blocks in Tilda Publishing

Let’s quickly redesign the world-class consulting company website.

Here is the page section before redesign:

web design tipsBooz Allen Hamilton expertise page

And here is the redesigned version with icons. We will use Windows 10 style icons. Which one do you like more?

web page design tipsRedesigned services block for Booz Allen Hamilton

Apply branding color to your icons

Take an extra step and colorize icons for your landing page like this:

icons in web designXero landing page

landing page ui designIntercom live chat landing page

landing page interface designStripe partner program page

Icons8 has multiple color schemes for any icon. Colorization dialog allows you to change any color of multicolored icons.

icons8 editorIcons8 different color styles for the icon in the right column.

icon editorIcons8 recolor module dialog, where you can change multiple colors of an icon.

Add some weight to the icons with background shape

Sometimes there’s not a lot of words in your list of advantages, but don’t worry, just add a background shape to each icon to make them bold and consistent.

landing page designTilda’s apartments landing page template

Shopify uses circle shapes to unify different form of icons on their home page:

features landing page

Use flexible background configuration in Icons8 to fit your style.

icons8 editor

Separate Blocks

Visual anchor of a section

If we think about page sections as a big portion of our offer it becomes clear that these parts are actually lists, so why don’t to catch a visitor’s eye with icons for each section?

web design tips and practicesA web service landing page template section uses an attachment icon

landing page ui design tipsA vacancy landing page uses circled number icons as a section divider

using icons in web designLocation icon used in a conference landing page template

icons in landing page ui designMultiple icons together (cup, heart, croissant) on a coffee shop landing page

Original divider

Everything new is well-forgotten old 😉 Originally used in book design, text breaks aren’t often seen now, probably only in long reads:

“Text breaks—those places where the author wants to insert a space, but not a new chapter or section—lots of authors use them, and they often create problems for book layout.“ (8 Solutions to the Text Break Dilemma)

However, the part separator is one of the Medium formatting options:

page divider

And Tilda Publishing has a whole range of them:

page dividers on landing page builder

Basically, any simple shape in material style (filled and flat) like 3 dots or asterisks, leaf or stars could be a part separator.

 

Clarify pricing plans with metaphors

Pricing plans is a very popular block type on landing pages. It’s very important to communicate pricing clearly to a potential customer, that is why companies use icons for the better separation of pricing plans.

web design pricing plansLever pricing page

web design pricingAlgolia pricing page

web design landing pageToggl plans block

landing page design practicesDigital Ocean pricing page

pricing plans landing pageOne of Tilda’s pricing plan block encourages a creator to specify an icon of each column

Don’t Be Boring

“You cannot bore people into buying your product” (David Ogilvy, an advertising tycoon)

Construct attractive hero images

If content marketing is king you want your articles to outstand because sometimes an article is a landing page.

design tools and tipsHero image in Realtimeboard blog post consists of icons

blog images made of iconsSprout Social use icons almost in all article previews

icons in web designAuth0 chose the minimalistic way of illustration for their articles – one icon

web page designHeap Analytics uses icons in some blog post previews to show the type of a content

web design landing pageTilda’s repair service landing page template has a cover image made from icons of devices

To create a simple preview of your content for social networks consider Cosmic Pedro by Icons8 or Emoji Pics Composer by Amplifr.

cosmic pedro icons8

landing page design tools

Create meaningful clickable buttons

Buttons are a crucial part of any call to action block in landing pages. Many marketers prefer clean big CTA buttons without distraction. Chances are you have many buttons on the landing page and they would better be different and have clarity on what happens after clicking on them.

A simple arrow means another learning more page.

arrow icon in web design

Even with clean custom made photos Square uses icons to illustrate the meaning of the links in the list of landing pages.

landing page design process

Among many CTA blocks and forms, Tilda has a button with icons for popular cases like downloading a file or watching a video.

web design tools

File type icons could be used to show what kind of the file the user will get or what type of the media content will be shown by the link.

web design iconsQuickbooks landing page uses circled play icon for the watch video button

Get positive feedback

For any product or service, a customer feedback is a signal if a business does things right or wrong. Collecting customer feedback might be not easy, but you should ask for an assessment of the work/newsletter/article/product. Here is how Medium does it with an applause button:

icons in button design

According to Hubspot getting a comment is much harder than a “like”.

social approvement in web

But even a “like” button is worth of designer’s attention. Would you rather click on a button with an icon or without it?

feedback icons

feedback without icons

With Tilda’s vote block you can customize images and use feedback icons from the Icons8 library:

feedback icons

Make ordinary look attractive

Icons add a taste to any dry content.

landing page design iconsAirbnb careers page

icons in landing page designDropbox landing page

landing page designA contact block in cafe landing page template by Tilda

Use Icons as Logos

Sometimes you don’t need a logo but the page looks solid with it. Many small businesses or sub-products of big brands have a simple logo for differentiation and just to be clear.

icons used in logosBaremetrics uses geometric shape icons for each big feature in their product

landing page design summer campTilda’s summer camp landing page template uses tent icon on the cover block

Conclusion

Creation of attractive landing pages may not require huge efforts if you have just some inspiration and a couple of good tools:
– The icon library with search and icons customizations like Icons8
– Webpage builder with a good blocks library like Tilda Publishing

Try to apply the cases from the article on your current or the next landing page, measure conversion and tell us about results!

Find it useful? Share with those who may use it too.

About the author: this is the guest post by the Tilda Publishing team, the creators of the easy-to-use and elegant website builder.

Check the useful tips on choosing effective images for landing pages and read why favicon is vital for website usability.

Have an interesting article to share with our readers? Let’s get it published.