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:
IBM 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:
Or a structural block of facts with icons:
As you can see visual information representation is more eye-catching, that is why Apple uses it.
Footer 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:
Stripe’s partner program page
Fitness coach landing page template by Tilda
If it’s hard to find metaphors for your items simple bold ordering will help.
A 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.
Even if you can put items in the order consider emphasizing items with a horizontal list.
A 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.
Give emotional touch to advantages
Visual metaphor catches the visitor’s eye and helps understand the meaning of your message.
Advantages block in Tilda’s company landing page template
Give visual synonyms to services
One 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:
Booz 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?
Redesigned 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:
Xero landing page
Intercom live chat landing page
Stripe partner program page
Icons8 has multiple color schemes for any icon. Colorization dialog allows you to change any color of multicolored icons.
Icons8 different color styles for the icon in the right column.
Icons8 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.
Tilda’s apartments landing page template
Shopify uses circle shapes to unify different form of icons on their home page:
Use flexible background configuration in Icons8 to fit your style.
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?
A web service landing page template section uses an attachment icon
A vacancy landing page uses circled number icons as a section divider
Location icon used in a conference landing page template
Multiple icons together (cup, heart, croissant) on a coffee shop landing page
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:
And Tilda Publishing has a whole range of them:
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.
Lever pricing page
Algolia pricing page
Toggl plans block
Digital Ocean pricing page
One 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.
Hero image in Realtimeboard blog post consists of icons
Sprout Social use icons almost in all article previews
Auth0 chose the minimalistic way of illustration for their articles – one icon
Heap Analytics uses icons in some blog post previews to show the type of a content
Tilda’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.
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.
Even with clean custom made photos Square uses icons to illustrate the meaning of the links in the list of landing pages.
Among many CTA blocks and forms, Tilda has a button with icons for popular cases like downloading a file or watching a video.
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.
Quickbooks 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:
According to Hubspot getting a comment is much harder than a “like”.
But even a “like” button is worth of designer’s attention. Would you rather click on a button with an icon or without it?
With Tilda’s vote block you can customize images and use feedback icons from the Icons8 library:
Make ordinary look attractive
Icons add a taste to any dry content.
A 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.
Baremetrics uses geometric shape icons for each big feature in their product
Tilda’s summer camp landing page template uses tent icon on the cover block
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 Vlad Korobov from 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.