Author: Alexandra Yap

Every website has a goal–whether it’s to create more leads or generate sales. To achieve these goals, websites often implement marketing campaigns. One tactic that marketers use for these marketing campaigns is creating countdown timers.

Countdown timers in web design are digital timers that display the remaining time until a particular event or deadline. In this article, we’ll discuss how you can use countdown timers to boost your marketing campaigns.

Why use countdown timers in my campaigns?

Countdown timers are a great tool for marketing campaigns if used properly. Research has shown that using a countdown timer can increase conversion rates. Here are some reasons why countdown timers can make your marketing campaigns more effective:

Sense of Urgency

Having a countdown timer encourages website visitors to take action before time runs out. It will give them motivation to fulfill a goal you’ve set for your website, whether it is to sign up for a newsletter, make a purchase, or completing an action that will be beneficial to the website visitor and your business.

Increase Engagement

Countdown timers can also help to increase engagement with your marketing campaign by creating a sense of excitement and anticipation. You can do this by promising a valuable opportunity by the end of a countdown. As an example, when you have a timer counting down until the launch of a product or a sale, it may have your website visitors eagerly waiting for the countdown to reach zero. This may cause them to explore your website more while waiting for the end of the countdown.

Increase Conversion

By leveraging scarcity, countdown timers can ultimately lead to an increase in your website’s conversion rates. Customers will more likely take action when they feel that they must act quickly to avoid missing out on a valuable opportunity. When you create a sense of exclusivity, it will encourage customers to make the desired action before a timer runs out.

What type of marketing campaigns can i use countdown timers for?

There are a variety of marketing campaigns that you can use countdown timers for. However, it’s important to make sure that the timer is relevant to the promotion or event and that it is not overused, as customers may get used to the sense of urgency it creates. Here are some types of marketing campaigns in which countdown timers can be effective:

Limited-Time Promotions

You can take advantage of countdown timers for limited-time promotions, flash sales, or seasonal offers, like say during a Black Friday or New Year’s Eve sale. By using countdown timers for limited-time promotions, you can increase the number of purchases made during the promotion period.

Product Launches

You can create a countdown timer for a product launch or even a website launch. By starting the countdown several days or weeks before the launch date, you can generate buzz and excitement, and encourage customers to sign up for email alerts or follow your social media channels for updates.

Event Registrations

Countdown timers can also be effective in promoting events and encouraging registrations. By highlighting the number of days or hours left until the event, you can create a sense of urgency and encourage customers to register before it’s too late.

How to create a countdown timer?

It’s important to choose the right countdown timer for your marketing campaign. There are many options available, especially when you’re a WordPress user–from free plugins to paid services, so it’s essential to choose a countdown timer that is easy to install and customize for your website.

We suggest checking out Stackable (of course). It’s the ultimate block plugin for the WordPress editor. Our very own Countdown Block has a lot of design controls that make it easy for you to match it with your website. Let us show you how easy it is to add a countdown timer and customize it to fit the rest of your website.

Here’s an example of a Pricing page without a countdown timer. It has all the typical sections of a Pricing page but if you notice in the video below, it’s currently having a sale. It’s not really obvious that it’s for a limited time only and a website visitor won’t have any information on when it will end.

We should first set a clear goal. The goal could be to increase sales, gain more subscribers, or create brand awareness. But for this page, our goal is to increase sales, to do that, we must create a sense of urgency.

We want to place the countdown timer strategically. An area where it is visible and obvious to customers but where it will not interfere with the customer’s shopping experience. Let’s place it at the top, right before the Pricing section.

Let’s first add a Columns / Container block at the top of the Page Content.

In the Layout picker, we’re choosing the 30 / 70 option where there will be one inner column that takes up 30% of the page width, and another taking up 70% of the page width.

Now, let’s make the whole Columns / Container block full width.

Now, we’ll add in some content on the leftmost column. These are added using Stackable’s Heading and Text blocks. For the copy, it’s important to use persuasive language to motivate your customers to act quickly. For example, “Don’t miss out!” or “Last chance to buy!”. So we made sure to include that in the copy of our countdown timer section to cause some sense of urgency.

After that, on the rightmost column, let’s now add the Countdown block.

Here is how it looks like so far! It looks pretty bland and doesn’t really match the website’s design and aesthetics yet. So we should customize it a bit more.

First, let’s make the block’s content Align Wide by selecting the middle option of the Content Width. You can find this option in Style > General > Content Width.

Now, let’s add a background to our block. While with the whole Columns / Container block selected, go to Block > Background and click the toggle to turn it on.

Now, let’s add a color to this whole block using the Background Color control. We’ve selected this custom minty green in the color picker.

Now, let’s customize the text inside the left inner column. We’ve used the Rubik font for the Font Family and set the Font Weight to 300.

Once that’s done, let’s move on to designing the countdown block. Under the Style Tab, you will find various Settings panels, and the first one is the General panel. It is where you will be able to select what date you want the timer to end. Here, we’ve selected April 5, 2023 and the time to 12:00 am.

Scrolling down the General panel, you will find the control where you can set the timezone the timer will follow. We’ve selected the Local Timezone option so that it follows the timezone that the user is on, wherever they are in the world. We’ve also set the Action on Expiration to Display Message Upon Expiration so that when the timer ends, we are able to display a message for the website visitor. We’ll add that message later on.

The next panel in the Style tab of the Countdown block is the Digits panel where we will be able to customize the numbers in the countdown timer. We’ve set the Typography settings to Rubik font, and the weight to 700.

The next panel is called Labels. It is where we will be able to design how the labels under each number will appear. In the image below, we’ve set the typography to the Radley font, Uppercase transform, and Italic font style.

Next is the Container Background. We’ve clicked the toggle to turn it on and set the Background Color Opacity to 0.4. This will make the containers of each digit appear like the other containers in the page.

Now, let’s add some borders to finish the complete look of the containers. We’ve selected the Solid option in the Borders control and set the Border Radius to 20.

Finally, let’s add an expired message! We’ve added the text: “Sale finished! Thanks for participating!“

Now we’re done with our very own countdown timer section for this pricing page. Let’s see how that looks in the frontend.

That looks great! We’ve covered all bases–we’ve placed it strategically, aligned it with the page’s goal/objective, and created a sense of urgency. Now, all that’s left is to just wait and watch as conversions and sales increase.

Conclusion

In conclusion, countdown timers can be a powerful tool for marketing campaigns. By creating a sense of urgency and encouraging customers to take action before time runs out, countdown timers can increase engagement, drive conversions, and ultimately boost the success of your marketing campaigns.

Whether you’re promoting a limited-time sale, a new product launch, or an upcoming event, a countdown timer can help to build anticipation and excitement, and encourage customers to act quickly. However, it’s important to use countdown timers strategically and sparingly, and to ensure that they are relevant to your campaign and your audience. When used effectively, countdown timers can be a valuable addition to your marketing toolkit, helping to drive results and grow your business.

If you want to create your countdown timers with Stackable, check out our features page to learn more about what you can do with our plugin!

an essential part of web design. A website that provides a great user experience is more likely to retain visitors and convert them into customers. If you would like to improve your website’s user experience, one method that’s worth checking out is adding micro-interactions.

What Are Micro-Interactions and Why Use Them?

Micro-interactions refer to small, subtle interactions that occur when a user interacts with a website or application. These interactions can include things like button animations, color changes, transform & transition effects, or animations and they can be triggered by mouse hovers, clicks, or scrolling. These are great ways to provide feedback to the user or signal an intended action, making the website more engaging and interactive.

Micro-interactions don’t have to be grand or bold, it could be just a simple action but it can create a very big impact to your website’s user experience. To demonstrate this, here’s a side-by-side of a button with just a small change when hovered over versus a static button.

What Are The Purposes of Micro-Interactions?

1. Use Micro-Interactions to Provide Feedback

One of the main benefits of micro-interactions is that they provide feedback to the user. This feedback can be in the form of an animation, a sound effect, or a change in color. For example, when a user hovers over a button, the button can change color to let the user know that clicking it will complete an action.

Below is a great example of using micro-interactions to provide feedback where the button required a user to select a size before being able to add it to the user’s cart. We also liked the addition of the website’s accent colors changing to the selected color

2. Use Micro-Interactions to Simplify Navigation

Micro-interactions can also be used to simplify navigation on a website. For example, when a user hovers over a navigation menu item, a drop-down menu can appear, providing more options for the user. This type of micro-interaction makes it easier for the user to find what they are looking for, improving the overall user experience.

The video example above was taken from Sephora’s website. In it, the section moves as you click the arrows but when you reach the end of the slide, the arrows disappear. It’s a very simple behavior that added intuitiveness and functionality to the website.

3. Use Micro-Interactions to Add Personality

Micro-interactions can also be used to add personality to a website. For example, when a user hovers over an image, the image can zoom in or a tooltip can appear with additional information. These types of micro-interactions add personality to the website, making it more memorable and engaging for the user.

We particularly find this example below by Jonathan Morin really creative. It displays examples of the underlined text when it is hovered.

How to Add Micro-Interactions to Your Website

If you want to do micro-interactions to your website, the native blocks in WordPress do not offer much controls for animation and effects. You will most likely need the help of third-party blocks and plugins. We recommend Stackable (obviously).

Stackable is a WordPress page builder with custom WordPress blocks that make it easy to create full websites. With Stackable’s feature-packed blocks, you have all the tools you need to create an effective user experience. Here’s how you can easily create micro-interactions with Stackable:

Below, we’ll show you how we’ve added micro-interactions to this sample website section:

What we first want to do is to add the hover effects to each card. Let’s first select the first column. In the Container Background panel, let’s select the Hover State icon for the Background Color.

Let’s select the Hover option so we can design the hover state of this column.

Now, we’re choosing a new color–in this case, we’re selecting a Secondary color from the color palette.

Now let’s move on to the button. What we wanted to do is for it to lift when the cursor hovers over it. Now, let’s do that. Start by selecting the button first:

Now, in the Scale option under the Transform & Transition panel in the Advanced Tab, set the value to .90.

Now, let’s proceed to the Hover state design of the button. Select the Hover option in the Hover State selection.

In the Translate Y setting, set the value to -8. Leave the rest blank. This will give the button the slight lift when the cursor is hovering over it.

Now, let’s carry on to the last Hover State which is the Parent Hovered state for the button. When this is enabled, the action will be triggered when the cursor is on the parent container, and not the element itself–just like how the button became a bit larger in the previous video.

Let’s set the Scale value to 1 since we set the Scale value to .9 in the Normal state. This will give the effect of the button slightly enlarging when the cursor is inside the container.

We’re done with adding the small micro-interactions to the first column. Now, let’s check how this looks like in the front end.

That looks great! However, we still have to do the rest of the columns so that they are uniform. But don’t worry, when you use Stackable, you won’t have to redo all those steps to achieve the same result for the other columns. You can simply use Stackable’s smart copy and pasting. When you select a block, you will find the Palette icon. Select this and you will be able to copy the style of this particular block.

Now, select the block that you want to paste the styles to. Select the Palette icon again, and click on Paint Styles. You will see that the second column has now inherited the styles of the first column. Just do the same for the last column and you will be done!

Let’s look at the finished product. Now you have a section with simple micro-interactions that will give your website visitors a better experience!

Conclusion

Micro-interactions are a great way to upgrade user experience in web design. They provide feedback to the user, simplify navigation, and add personality to a website. When used correctly, micro-interactions can make a website more engaging and interactive, improving the overall user experience.

They say the only thing that’s constant in this world is change. It’s no different when it comes to web design. Web design is constantly evolving, and it’s crucial to stay up-to-date with the latest trends.

Now that it’s 2023, it’s necessary to start thinking about what latest trends are in store when it comes to web design. In this post, let’s explore some trends that will soon dominate web design this year.

3D Graphics

As technology continues to improve, we’re seeing more and more websites incorporate 3D graphics into their design. This trend is set to continue in 2023, with web designers finding new and innovative ways to use 3D graphics to enhance user experience. From interactive 3D models to fully immersive environments, 3D graphics can add an extra layer of depth and realism to a website. However, it’s important to note that this trend may not be suitable for all websites, as it can increase loading times and require more processing power.

Interactive Content

Interactive content is a trend that’s been gaining traction in recent years, and it’s set to become even more popular in 2023. Interactive content refers to elements on a website that users can engage with. It’s an excellent way to keep users engaged and entertained, making it an effective tool for driving traffic and increasing user retention. Lastly, interactive content can help build brand awareness and establish a connection between users and the website.

Some examples of interactive content include:

Animated Scrolling

Animated scrolling is what you call when elements on a website transition or create motion when a user scrolls through a page. Scrolling effects are not just purely for aesthetic reasons, but could also create a dynamic user flow on your website. Additionally, scrolling animations could be used to emphasize certain elements of your website.

Here’s an example of some simple scrolling animations you can add to a website using fade in and fade out effects:

Animated scrolling may sound very complicated to make, but it’s actually pretty simple with the help of page builders. The above example is actually made using Stackable, a WordPress plugin that turns WordPress into a page builder. Each block has a setting called Motion Effects, where you can add scroll-based transitions without having to write any code.

Micro-Interactions

Micro-interactions are necessary if you want to create an interactive website. These are small functional animations that guide the user while exploring your website by giving visual feedback. Micro-interactions are usually triggered by hovers or clicks on certain elements of your website. It could be as simple as color changes on buttons, or revealing text over images.

The above example was also made using Stackable. We used hover effects for each card, and the content inside of it. We simply used color changes and it made all the difference. Here’s a quick

Minimalism

Minimalism has been a popular web design trend for a few years now, and it’s set to stay that way even in 2023. With users increasingly seeking simplicity and clarity when browsing the web, minimalism offers a clean and modern aesthetic that can help to focus the user’s attention on what’s most important–content. Making a minimalist website can be as easy as using simple typography, taking advantage of white space, and using limited color palettes.

Here’s a great example of a minimalist website that takes advantage of white space and scrolling animations without sacrificing functionality:

If you’re a WordPress user, and you’re looking for templates, whether minimalist or dark, you might want to take a look at Stackable’s UI Kits. We have a library of ready-made designs that will give you the ability to create the website of your dreams in no time.

AI Generated Images

AI Generated Images is the latest emerging trend in 2023. The trend refers to the increasing use of artificial intelligence algorithms to generate realistic images or illustrations, often for use in advertising, design, or other creative industries. If you need images quickly, AI generated images can be a good option. Thanks to advanced technology today, you can now just use tools like Midjourney to easily create assets for your website by typing just a few keywords. If you would like to try generating AI art or graphics, you could join Midjourney’s beta on Discord. Here’s an example of an AI Generated image we requested in their server.

Although there are some debates online that AI-generated art has some ethical concerns such as using pre-existing art and images created by artists to generate the AI art, we still feel like this won’t stop companies and businesses from using AI to create graphics. It’s still new technology and there’s no doubt that AI developers will eventually address this issue.

Conclusion

Web design is an ever-changing landscape, and staying up to date with the latest trends is crucial for creating a successful website. In 2023, we can expect to see a continued focus on 3D graphics, minimalism, and usage of AI Generated Images. By incorporating these trends into your website design, you can create a modern and engaging user experience that will keep visitors coming back for more.

Visual hierarchy is a concept related to visual perception. 

In any given design layout, the way things are placed together and next to each other, help us understand how they relate to each other and to the design, based on their order of importance. 

For example, if something is in the boldest, brightest color, it appears as the most prominent, and thus more important. Similarly, if something is larger than everything else on the screen, we consider it the most important. 

On this website, the company logo takes up the most space, reiterating our subconscious understanding that this is the most important part of this section. 

Then, the words ‘Personalized Aviation’ stand out, but in a smaller font. Telling us that this is important too, but we all know which is the hero text. 

Understanding these relationships between different objects on the screen helps our brains understand and process information much more quickly and accurately. White space, a staple of minimal design, especially aids the process. 

If there were no visual hierarchy, no order to how things are organized on the screen, we wouldn’t be able to comprehend much. 

Either everything will look too similar, and the brain will be unable to latch on to anything of significance. 

Or, everything will be too loud, overwhelming our processes and making us mentally check out of the experience. 

Both these scenarios are bad for business, and design. 

How Does Hierarchy Make The Design Better? 

The fundamental job of any graphic design is to communicate. As simply and intuitively as possible. That’s why hierarchy and minimal design go hand-in-hand, whether you are creating a logo design or a web page. 

Through visual organization, we help users look at the similarities and differences among design elements so users can understand the message behind the web page. 

Here’s how hierarchy helps us achieve that:

• Helps highlight the sequence of design elements, so we can understand their order of importance.
• Makes the layout easy to scan. 
• Guides the user attention.
• Informs the user journey. 
• Communicates the intent of each element and the overall web page. 

Examples Of Visual Hierarchy, Both Good And Bad:

Since human beings are visual learners and we are dealing with a visual design topic, it’s better to actually see some examples of hierarchy in action. To learn what to do, and what to steer clear of. 

Let’s start with the horrible hierarchy first. 

Examples of Bad Visual Hierarchy: 

• Berkshire Hathaway: a complete absence of hierarchy

The site looks just like an index page. Nothing stands out and it seems like no special effort has been done to make the page look interesting or readable. 

• Yale School of Art: entirely too much is going on

There’s a lot of mish mash of things going on. Where am I supposed to look first? What is the most important thing on this page? 

Considering this is a site for a school of arts, it’s not doing much to inspire confidence in its artistic talent. If it weren’t Yale, would you even give it a second thought? 

Branding-wise, the design raises questions on what the school can deliver. Hierarchy wise, it’s a confusing mess. 

• Suzanne Collins: opportunity lost

Except for the writer’s name, and the book cover in the middle, not much stands out. 

The picture of the writer you see on the top-right corner, apparently there’s a rat in the picture, too. But you can’t see it. If the picture were larger, centered on the page, it would have made some impact. 

Instead of a bestselling writer’s professional website, this looks like an amateur’s blog. 

Now some nice websites with great visual organization. 

Examples of Good Visual Hierarchy:

• Spotify Design: similarities and differences

Information is communicated through elements that are similarly sized and highlighted in similar colors. Under each picture thumbnail, you can see the Listen call-to-action highlighted in black while the tags are in green. 

Even at a glance, you can spot these groupings and make sense of the objects. From here on, wherever you see white text with a black background, your mind will know it’s a CTA button. You’ll either focus on it or move quickly forward to find something else that you may be looking for. 

• Swab the World: simple gets it done

Visual hierarchy makes minimal design that much more effective. 

The homepage contains the company tagline in large, cap-sized letters. No way you can miss it. The text animation a bit lower on the page helps you understand the meaning behind the tagline. 

• Garoa Skincare: stacked images communicate a message

Images are an important element to organize on site. Here, the rich, textured images of forestry are used as a background to highlight the bare-faced models and their lush skins. The contrast makes you appreciate the unblemished facial skin that much more, which is the entire purpose of this section. 

Principles Of Visual Hierarchy

Hierarchy comes with its own set of tools. We have some of the most common ones —- size, scale, color, and contrast. But, there are also textures, style, and repetition. 

Let’s see how each helps organize our designs. 

Size and Scale

Size is one of the things we notice first. To draw attention to a website element, make it large. Headlines, for example, are alway the largest component on a site. Then, it’s usually call-to-action buttons. Both these elements require our attention and are so highlighted on the basis of scale. 

The font size of the body copy, thus, is usually smaller. Subheadings are smaller than the main headings. And so on.

Color and Contrast

Color is another important element that not only draws attention but adds meaning too. Sites usually go with bright pops of brand colors in their CTAs, highlighting the color even more using white text. 

Colors that are bright, and contrasts that are more striking attract us before muted and subdued shades. When designing your websites, keep the rich colors to highlight the elements and softer shades for background and stuff. 

Even when your design element is smaller, like a CTA, bright colors help highlight its presence.

Empty or White Space

You want to make something noticeable, without resorting to size or color? Surround it with ample white space. 

Remove everything else from its vicinity and let it shine alone, center-stage. 

White space, or negative space, is the presence of empty space around an object. Just by being surrounded by all that nothingness, the object becomes prominent and impactful. 

It’s important to note that white space does not literally have to be white. You can fill that space with a solid block of color and the effect will be the same, perhaps even more pronounced, if you play the contrast right. 

The Rule of Thirds

To draw the eye along a certain path on the web page, designers work with grids. Grids help organize things with more intention and purpose. According to the Rule of Thirds, the design section is divided into a grid of horizontal and vertical thirds. 

The icon, image, or element that you want to draw the eye to, is placed either on points where the four lines meet (ideally) or on the lines themselves. The idea is to distribute the elements in a ratio of 2/3rd to 1/3rd, instead of dividing the space in half. 

Placing important elements according to the Rule of Thirds not only improves the visual hierarchy but also makes the composition more breathable and interesting. 

Alignment and Layout

There are two major ways we create site layouts: symmetrical and asymmetrical. Both help us achieve a balance of web content. While the perfectly symmetrical pages look neat and ordered, it can become difficult to retain that perfect throughout the site. Especially when we are talking about things like logo designs. They always cannot be perfectly symmetrical.

Asymmetrical layout makes the design appealing and balanced at the same time. Introducing an element of unpredictability, it helps keep user’s attention rooted to the design and communicates the brand message without weighing down the layout.

Repetition of Elements

Another way we communicate importance and organization is through repetition. When the brain sees the same or similar element spread throughout the website, it starts to group them together, assigning a common meaning to the group. 

In the Spotify example above, we saw that repeating the color green across tags helps the user associate that color with tags exclusively. Whenever we see anything highlighted in that shade of green, we’ll have no trouble spotting them as different tags/genres of music. 

Proximity and Similarity of Objects

When things are placed together, we consider them part of the same group. 

Think of a navigation menu. Each button on the menu leads to a different page but because they are next to each other on the navigation bar, we consider them part of the navbar – not individual buttons. 

Anyone looking at those buttons understands them to be part of the group. 

It’s the same thing with CTA buttons. On well-designed websites, the call-to-action buttons are all designed and sized similarly. So even if they aren’t close together, the design similarities help us connect them as being together. 

The proximity and similarity of objects help make visual hierarchy more branded and sophisticated. 

Textures and Style

Things that are textured — such as prints and patterns —- seem more prominent than simple, solid backgrounds. 

When organizing your website elements, you can also consider textures and styles to highlight stuff. 

Not only highlight in the order of importance but also to make something appear more interesting, rich, and intriguing. 

Conclusion

While visual hierarchy is primarily an organizational tool, it’s usefulness doesn’t end there. It also makes the design framework more intuitive and organic. When you follow principles of hierarchy in visual design, you create design spaces that are interesting, clean, ordered, and purposeful — and never boring. 

Effective visual organization always aids engagement and improves user journey. 

To make it work for you even more, ask your non-designer friends when you do your first hierarchy sketch. Ask them what they see first, what leaps out to them, and what makes them confused about the layout. 

That will not only tell you how critical hierarchy is to design but also how beautifully it hides in plain sight, consistently aiding the design objectives.