Banner - UI Element

What are Banners in UI Design?

The banner is an essential digital design component that displays important and brief messages targeted toward users. Banners are usually positioned in highly visible areas, occupying the entire width of the top of a page or of the mobile phone screen.

Banners present the user with a choice between following its initial purpose or dismissing it. Regardless of the choice, the user will need to perform an action. It is important to remember that only one banner should be shown at a time.

Types of Banners in UI Design
Banners by uinkits

Types of Banners in UI Design

Although banners come in different shapes and sizes and have various purposes, the basic anatomy of a banner remains the same. Four key elements constitute this UI element, namely: visuals, container, text and CTA. 

According to their purpose, there are five main types of banners that are widely used on websites and apps:

  1. Default Banner
  2. Information al Banner
  3. Announcement Banner
  4. Call to Action Banner
  5. Launch Banner

When To Use Banners in UI/UX Design

  1. Default Banner: These types of banners are very common and they are used to display general information that is not critical or urgent. It usually showcases additional information that can be dismissed.
  1. Informational Banner: Informational banners display contextual data that is related to the section that the user is navigating. They can inform users about details such as upcoming maintenance of a website.
  1. Announcement Banner: These banners signal the user about an upcoming change on the website - usually regarding new features that are about to be implemented.
  1. Call to Action Banner: CTA banners invite users to perform a certain action related to the website or app. They have the role of persuading users to engage in different things, such as registering for a newsletter
  1. Launch Banner: Launch banners provide users with CTAs or logo links in the case of a new feature that has just been launched.

How To Use Banners in UI Design

There are a couple of aspects to keep in mind when choosing a banner for your website or app.

  • Placement

Banners should be placed in a place where the users can easily see them. However, the importance of the banner message should also influence the placement of it on the page.

  • Theme

Banners need to exclusively address one topic. If you have multiple information to communicate to the users, use multiple banners.

  • Clarity

Banners do not offer complex and large bodies of text - they are straightforward messages that are meant to convince the users to perform certain actions. This is why banners need to be visually as simple and concise as possible.

  • Copy

In the same manner, the text of the banner has to be accessible and easy to understand. A banner, no matter what purpose it has, should get the idea across to every user who encounters it.

  • Dismissability

As long as the content of the banner does not contain urgent information, every banner should be dismissible.

Use the Banner UI Element in Your UI/UX Design With uinkits

Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find banners and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!

So, get your uinkits package and start designing now!