Dark Mode UI Components by uinkits
Preview our design system and elements.
Discover a selection of our UI elements and components available below:
00
Days
00
Hours
00
Min
00
Sec
uinkits App Kit
Hey, wanna learn more?
Subscribe to our cool design newsletter to receive the latest in UI/UX design.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
*By clicking "Subscribe," you agree to our Terms and conditions and Privacy Policy.
October 7, 2024
UI/UX Design
3 MIN

12 Principles of Using Banners in Your UI UX Design

Your UI UX design banners should be simple, have suitable colors, use the standard banner size, have buttons introduced suitably, and so on.
By
Gabriel Pana
October 7, 2024
12 Principles of Using Banners in Your UI UX Design

Emerging from the advertising world, banners serve many purposes, one of them being in the UI UX design. A race against time begins whenever a visitor enters a webpage. The goal of the race is to successfully make your banner seen by the users. And as a UI UX designer, you also need to be sure they received the information correctly. It can represent a way to advertise certain products, encourage actions, share directions, spread out information, or even services. 

Yet, no matter the subject, most web pages and apps will contain some type of endorsement or prominent message concerning optional actions. And in the digital world, these endorsements usually come as banners. But how do we use banners correctly in UI UX design?

Best Practices for Designing UI UX Banners

1. Keep it simple

Every UI designer and UX designer should be aware of one of the most frequently talked about rules in graphic design relates to the simplicity principle. Exercising our imagination through complex concepts may be tempting. In the case of banners, we, as UX UI designers, should try to make them as clear and easy to grasp as possible.

Do not get us wrong; copies, backgrounds, buttons, and animations that make up a banner should be far from boring! Often times it is more difficult to create a simple design than a sophisticated one. The reason is simple - it’s harder to convey a message in fewer words and with less intricate animations because we work under more restricted parameters.

So, we should strive to narrow the text down to a simpler form that conveys the message.

2. Choose suitable Colors

Color is the first element that we notice about most things around us. Luckily, there are a ton of color-meaning conventions that have already been predefined. Even though beauty stands in the eye of the beholder, most of us associate each color with similar concepts. A common example of color symbolism is red and themes related to love. So, if we had a dating app, implementing red banners would be a good choice.

However, it is crucial to be very familiar with your target audience. Different cultures and social groups may have drastically opposing perceptions of colors. Let’s look at the color green. In Western cultures, green is usually connected with luck, prosperity, and the environment. On the other hand, China associates it with infidelity.

Study your public very closely before deciding on a color scheme for your company.

3. Use Standard Banner Sizes

Another tip related to banners' graphic design and UI design aspect is their sizing options. According to market research performed by Google Adsense, these are the most popular and optimal banner sizes:

  • 720 x 90px - Leaderboard
  • 300 x 600 px - Half Page
  • 336x280px - Large Rectangle
  • 300 x 250px - Medium Rectangle

4. Use Buttons Appropriately

The buttons of banners have the purpose of acting as a CTA. A successful banner button should increase the click-through rate of your ad. These buttons must be labeled so that users know exactly what they will get if they press it. We should also make sure that the button is easily distinguishable from the rest of the banner, both from the text and background.

The most common placement for buttons is the lower right corner of the banner, as users have already been used to seeing them there. It also makes sense based on how people generally read texts.

5. Design Clear Frames

You have probably heard of the saying, "Looking for the needle in the haystack". If that’s how sour users feel when they are looking for elements on our page, it means we have failed as designers. They have to understand where our banners begin and end without putting in any effort. 

A great tip for designing successful banners is correctly separating them from the rest of the web page or app. If your website has a very dark color scheme, you should choose brighter or lighter colors so that the banner comes forward and is easy to notice. Do not choose a color or outline that does not match the page's overall aesthetic. Even though we want our banners to shine, we must stick to the brand identity when we choose its design.

6. Write Text that is Easy to Read

While we are on the topic of contrast, we should take a look at some tips on writing the text in banners. If our users feel that components as small in amount of text as banners are tiresome, they will stop reading the rest of our page.

Like any other type of content, the headline and the body of text must have different sizes. The choice of the fonts should also make sense in relation to the overall aesthetic of our page, and it should be easy to read.

7. Integrate Animations

The human eye is developed to react to motion. This may come off as a no-brainer, but inserting animations into your banner can greatly increase engagement. Motion added to a banner will 100% be harder to miss compared to one that only contains still imagery. Besides this, animation boosts the chances of users revisiting your banner if they feel they missed something.

If you choose to implement an animated banner, you should ensure it is not too distracting from the other information it accompanies. Animations should support an idea, not obliterate it by being overly present. 

8. Maintain Brand Consistency

"If you’re selling to everyone, you’re selling to no one." 

When we are working with advertising banners, every UI UX designer should know that it’s important to remember that the ads we send out match our brand identity and message. For example, if our brand were very PG-13 and formal, displaying a banner alongside an animation showcasing people smoking cigarettes would be very inappropriate.

The visual aspects and the written content of our banners should align with our brand values and goals. If anything, a banner should be another contribution to positioning ourselves on the market. 

9. Prepared Landing Page

A recent study published by WordStream showed that only 48% of marketers develop a new landing page for each of their campaigns. We should learn from our mistakes and understand that landing pages have high visitor-to-lead conversion rates, which can make our banners all the more efficient.

Even if this implies a few extra steps, preparing a landing page for our users to click on banners is a great marketing strategy.

10. Keep formats up to Date 

The speed with which a banner will load on a page is crucial. Whether our banner signals an error or is meant to carry advertising material for a product, we need it to reach our users quickly. One method of ensuring that is by keeping the sizes of the files on the smaller end. Google Adwords advised that banners do not exceed 150 kilobytes. 

Another helpful tip would be to stray away from anything outdated. For example, Flash Ads are becoming a thing of the past, so they should be avoided.

11. Logo Placement

Whenever a user sees our logo, our chances of our brand identity solidifying in their minds increase. Banners are great design elements where logos can be easily integrated. The placement of the logo should not be randomly assigned. Instead, we have to figure out what position makes the most sense visually and size it properly so that it does not overshadow the rest of the banner content.

12. Call to Action

Call-to-actions are an essential component of any banner. The main role of the CTA is to act as a bridge between the banner and the conversion rate. It appears as buttons that lead users to our end goal. We should make our CTAs as clear as possible by using easy-to-understand and familiar wording. 

uinkits – Our Figma Design System and UI Kits

We at uinkits understand the importance of great user experiences and creating amazing UI designs. That’s why we’ve developed a Figma UI Kit with design components that include these essential UI elements that enable you to design intuitive and user-friendly interfaces effortlessly.

“You press the button, we do the rest.” – Kodak.

Inspired by this iconic tagline from Kodak, we believe in simplifying the design process for you. Our Figma UI Kit, uinkits, is a complete design system with UI components that allows you, as a UI UX designer, to create your products as quickly as pressing a button.

Our design system includes UI components, icons, variables, cards, buttons and everything you need for your design process. All you have to do is take your UI design component needed, and you’re ready to use it in your designs!

Full Verison of Uinkits System available here.

Upgrade to UI PRO version of Uinkits Systems to unlock 23.000 UI components.

Discover Uinkits System!

Full Verison of Uinkits System available here.

Upgrade to UI PRO version of Uinkits Systems to unlock 23.000 UI components.

By
Gabriel Pana
October 7, 2024

Similar Articles

Discover a handpicked selection of UI/UX articles that offer valuable insights, best practices, and the latest trends in digital design.

Subscribe to our
uinkits Newsletter

Subscribe
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Stay in the loop with all our latest updates, articles, free design goodies, and other cool stuff. Don't worry, we won't flood your inbox with spam!
Photo cover for blog newsletter by Uinkits System

Start Designing Amazing Projects
Get Your Uinkits System!

At uinkits, we're all about the awesome possibilities of design. Join us now and let's shape the future together!