Banner - UI Element

The banner or message 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.

‍

‍

Although message 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 Banner
3. Announcement Banner
4. Call to Action Banner
5. Launch Banner

‍

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.

2. Information Banner: Information 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.

3. Announcement Banner: These banners signal the user about an upcoming change on the website - usually regarding new features that are about to be implemented.

4. 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. The container banner should be kept clean in order for flawless web or app design navigation.

5. Launch Banner: Launch banners provide users with CTAs or logo links in the banner container of a new feature that has just been launched. It is an important banner that helps the users get the information they need regarding new products and services. Launch banners need to be precise have a text that can be understood by anyone and maintain a clear design.

There are a couple of aspects to keep in mind when choosing a banner for your website or app. Whether we have an important banner, an alert banner, an error banner, or an information banner, the placement, theme, copy, dismissability, and other factors need to adapt to your web or app design.

• Placement

Any important banner 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. When we integrate an alert banner into your design, we need to make sure that potential users can notice it easily and respond accordingly. However, the placement of a default banner should not interfere with the user’s activity, as it is not as important is not as an error banner would be.

• Theme

In order for an important banner to be used appropriately, it needs to exclusively address one topic. If you have multiple pieces of information to communicate to the users, use multiple message banners. This rule needs to be applied to all message banners, as it will directly affect the user experience.

• Clarity

Banners do not offer complex and large bodies of text - they are straightforward banner 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. An icon banner can be easier to interpret and sustain a clean design compared to a multiple-word message banner.

• Copy

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

• Dismissability

As long as the content of the banner does not contain urgent information, every banner should be dismissible. Make sure that important banner messages do not disappear only in the instance when the error or alert has been resolved. This will ensure a good user experience and a flowless design.

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!