If you recently became a web developer, you probably have a lot to remember. In particular, we often hear the word “banner”, but there are many things we want to know, such as what it is for, whether there are any rules, how the design and size are determined, and how to make an advertising banner. Sho.
Therefore, this time, we will introduce useful knowledge for banner production, such as an overview of banners, banner design, size, and production tips.
What is a banner?
Banner is written in English as “Banner”, which literally means “flag” or “nobori”. In the world of the Internet, a banner refers to an image button on a website. It may seem difficult to explain this way, but it is a very familiar thing.
For example, you may often see images with horizontally long text, photographs, or illustrations on websites. Many people know, and can probably imagine, that when you click on that image, you are taken to another page or another website.
A while ago, horizontally long banners were the mainstream, but now there are a wide variety of banners, including square and vertical ones, and all of these are also called banners.
Banner purpose
The purpose of a banner is to attract the interest of users by designing it with an attractive catchphrase, illustrations, photos, images, etc., to direct users to the linked page, and to make them click and jump to the destination. The goal is to have people jump to the page.
For example, you can place a banner on the top page of your company’s website to direct customers to the special page you want to attract customers to, or place it as an advertisement on another company’s website and place it on the banner with advertising text, photos, illustrations, etc. Do something to guide them.
You might think that text links would be sufficient for these purposes. It is true that text links can lead to people, but banners are large and easily catch the eye on a website, and they can be even more appealing by adding colorful catchphrases and photos or illustrations that make the design stand out. It has the characteristic of being easy to guide.
Even in real life, there are things that have a visual advertising effect similar to banners. For example, a banner or signboard posted in front of a store. Although these are not essential for operating a store, they can help promote the benefits of visiting the store, and in some cases, they can help passersby know at a glance what kind of store the store is. can be conveyed visually.
Also, suppose you put up a sign at the entrance of a restaurant that says “We have started shaved ice.” If a passerby who wants to take a break on a hot summer day sees the banner, he or she may enter the restaurant to cool off and get some shaved ice. If the banner were not there, it would be difficult for passersby to imagine that the restaurant had shaved ice. Also, if you don’t pay attention to a store while walking, you may not even realize that it is a restaurant. In this way, just like banners in the real world, banners on websites play important roles such as eye-catching, guiding, and attracting people.
What are the uses of banners?
As we have mentioned previously, banners have two main purposes: directing users to linked destinations and advertising. Let’s take a look at an overview of each usage.
Information/guidance/eye-catching
Banners are mainly used on your company’s website to effectively attract and direct visitors to other pages you want to lead to. Horizontal banners are typically placed at the top or bottom of a page to direct users to a special feature page whose content changes for a limited time, or to a special page.
Sometimes a small horizontal banner is placed on the side menu of a website and serves as a button to lead to other pages.
advertisement
This is called a “banner ad” and refers to a banner ad that is placed on another company’s site and has a catchy catchphrase or product or service name on it to get people to click on it and be directed to their own site.
Since banner ads are advertisements, we create banners with sizes and visuals that comply with each regulation. There are various types of advertising costs, including those that charge for each display, those that charge for each click, and those that pay a fee when results are achieved. The details of banner ads will be explained later.
What size are the banners?
By the way, we usually look at banners casually, but are there any size regulations? There are no particular size regulations when installing freely on your company’s site. On the other hand, for advertisements, the size is fixed.
Here, let’s learn about the general sizes of banners.
For example, the banner size regulations for Google AdSense, which is famous for banner ads called display ads, include rectangles (medium) with a slightly longer width of 300px x 250px, rectangles (large) of 336px x 280px, and rectangles with a slightly longer width (large). Sizes include big banners of 728px x 90px and half pages of 300px x 600px. For mobile pages, we also have a large mobile banner of 320px x 100px.
There are also smaller sizes such as “88px x 31px” in the world, and it is common to choose depending on the installation location and purpose.
What kind of banner designs are there?
Next, let’s talk about banner design.
There are no particular rules when it comes to banner design. In one word, it’s freedom. However, even with such free design, a pattern is determined to some extent. I’ll introduce some banner sample sites later, but if you look at a lot of banner samples on those sites, you’ll start to see layout patterns. If you memorize the layout pattern, you can use it in your production.
Here we will introduce some banner layout patterns.
1. Vertical/horizontal split layout
Mainly square or square-shaped banners, with a two-part layout that can be split vertically or horizontally. You can make a sharp appeal by placing a photo or illustration on one side and a catchphrase or text on the other side, such as a 5:5, 7:3, or 8:2 split ratio. This layout pattern can be said to be a layout often seen in advertising banners.
2. Layout that arranges multiple elements
If you have a large number of products, there is also a layout that arranges multiple elements. There are also layout methods such as arranging multiple elements around it and placing text in the center, or arranging four elements on the top, bottom, left and right, and placing a catchphrase at the bottom.
3. Full layout
Place a photo or illustration all over the page, and place a catchphrase over the photo or illustration. By doing this, you can bring out the impact of your photos and illustrations.
These are typical banner layout patterns, but there are also cases where multiple layout patterns are combined to create a layout. It is best to consider this as a basic pattern.
About banner ads
If you want to know more about banners, you probably want to start creating banner ads.
Therefore, here we will provide an overview of banner ads.
What is a banner ad?
Banner ads generally refer to display ads. Display advertising is an online advertisement that is placed on a web page in the position where the ad is displayed, called an “ad space.” When users click on this display ad banner, they are redirected to the advertiser’s website and take actions such as purchasing products or services or obtaining information. That way, you can get results from your advertising.
Features of banner ads
Banner ads have various characteristics.
The first major feature is that they have more impact and appeal than text advertisements. By using various designs with images and text, you can bring out the characteristics of banner ads.
What also differs from offline advertisements such as general newspaper flyers and transportation advertisements is that the target audience is narrowed down. Display advertising displays banner ads to users segmented by preferences, attributes, purchase history, etc., based on user data held by the advertising company. Compared to offline advertising, it is characterized by the ability to effectively reach users who are suited to your company’s products.
Advantages of banner ads
Banner ads have many benefits. For example, as mentioned earlier, it has visual appeal. If you want to advertise your product, you can directly convey the product image, so it is suitable for apparel and food-related industries.
Another great benefit is that you can segment and distribute ads. Rather than just blindly advertising, it is a great advantage to be able to target and directly appeal to users who are browsing your website and who are likely to purchase your products.
Segment conditions can be controlled by the advertiser, so it is possible to change the banner design for each segment.
Also, even if the ad is not clicked, it can be seen by many users, leading to increased awareness of the product or brand. Even if the user forgets it on the spot, it remains in the user’s mind, and when they come to the scene where they are shopping for something in the same category as your company’s product, they may say, “Now that I think about it,” the product that was featured in your company’s banner ad. Maybe you’ll remember. This will increase awareness and may lead to future customers.
Banner advertising cost format
Here we will introduce the cost structure for display advertising, a common banner ad. There are four main types:
- impression type
- click type
- Performance-based reward type
- Monthly guarantee type
I will explain each one.
impression type
Impression-based ads charge a fee when a banner ad is displayed. The price is fixed per impression, and each impression costs money. This format mainly corresponds to banner ads on SNS such as LINE, Instagram, and Facebook.
click type
Click-based ads charge a fee when a banner ad is clicked. This means that if a user opens a web page and sees a banner ad, there is no cost to you. How much does it cost per click?
Performance-based reward type
Performance-based advertising is a type of advertising in which a fee is charged when a user clicks on a banner ad and then purchases a product or contracts for a service.
The cost is often set at 20-40% of the contract price.
Monthly guarantee type
With the monthly guarantee type, you pay a fixed amount every month, regardless of the number of impressions, clicks, or sales. The more views your site has, the more it will cost.
Banner ads are one of the most important and costly banners. The design and catchphrase of the banner itself must be carefully selected, and quality is also required. You will need to be very particular about this when creating a banner.
Banner production steps
Let’s finally explain how to create a banner in detail. In addition to banners for information posted on your company’s website, there are various situations such as creating banners as advertisements. Here we will introduce the general steps for creating a banner for any purpose.
1. Define your target
First and foremost, it is important to set a target. This is because if you don’t decide on the target, you won’t be able to decide on the catchphrase, image, design, or anything else that will be posted there. Additionally, targeting is essential for banner ads.
On the other hand, if you are having trouble deciding on a banner design, you may be starting production without having a clear target.
And when it comes to setting targets, it shouldn’t be vague. For example, if you are a male businessman, banner production will be delayed. Examples include “a male businessman in his 40s in a middle management position” and “a male businessman in his 20s to 30s who has recently started working remotely.” You may also create a persona that imagines a specific person. Then imagine how this target user will feel when they see the banner, and what actions they will take.
By capturing a specific and narrowed-down target image in this way, the subsequent banner production process will go smoothly. If you are stuck or unsure about the next step, review this target and you will be able to move forward with confidence.
2. Decide on the size
Once the target is decided, it’s time to start the actual work. First, let’s decide on the size.
If it’s a banner ad, the size will be decided depending on where it will be posted, and if you’re going to post it on your company’s website, you’ll need to find out where it’s going to be posted and what size it needs to be. If you are posting on your company’s website, make sure to work closely with the person in charge of web production.
3. Identify the elements of the banner
Once you have decided on the size of your banner, it’s time to identify all the elements that will fit within that size. People often get confused when designing a banner because they don’t know what to layout and how, but they don’t think about it at first, and just identify the necessary elements such as catchphrases, photos, illustrations, sub-catchphs, etc. Masu. This will give you a sense of security as you will know that all you need to do is fit those parts into the banner. You can start thinking about the layout from there.
4. Decide on a catchphrase
If you haven’t decided on a catchphrase yet, you’ll need to decide on the number of characters during layout, so be sure to decide on it early.
Ideally, the moment a user views a banner, they will immediately understand the meaning, empathize with it, be moved by it, and ultimately be intrigued enough to click on it. To that end, a catchphrase is extremely important and is the deciding factor in getting users to take the next action.
Banners basically exist to get users to jump to a desired page, so it’s basic to state what benefits the user will benefit from on the page they jump to.
5. Think about the layout and draw it by hand
Now it’s time to decide on the layout. Bring out all the elements you have identified and decide how to arrange them. Create the optimal layout by referring to the three basic layout patterns introduced earlier.
At this time, hand-drawing will be easier to correct and do. Of course, you can also do it on a PC.
Rather than narrowing it down to one layout from the beginning, it’s a good idea to come up with multiple ideas and try them out, listen to the opinions of multiple people, and change them depending on your target users and timing.
6. Draw the rough in monochrome
Once the layout is decided to a certain extent, let’s draw a rough sketch. Add photos, illustrations, and place text. There is no need to add color at this time. In fact, if you start thinking about colors at this point, you may end up preoccupied with colors and neglect the layout and details. Here, just be aware of completing the rough sketch. Let’s create the foundation for the following steps by drawing and arranging it on the PC.
7. Adjust font and character spacing
For the text, choose the most appropriate font and adjust the spacing between each letter and line.
Carefully adjust the content by considering the ease of viewing, design, and impact so that the target user can immediately understand the meaning at a glance.
8. Decide on the color
Finally, decide on the color. Let’s start adding color to the rough sketch we created. The color scheme will change depending on the main visual photo or illustration, and if it is a brand, the brand colors may be decided.
If you can’t decide on a color, it is said to be a good idea to match the color scheme of the page you clicked on the banner.
It is common to create several patterns for banner designs. It’s good to choose from multiple patterns, and if users don’t seem to respond well, you can replace it with a different pattern. It will be easier to create banner designs if you are flexible from the beginning and don’t limit yourself to just one design.
5 banner sample sites
Banner samples can be helpful when thinking about banner designs. There are many sites that collect and publish banners produced by other companies and actually used in banner advertisements. These sites can help you find great layouts and research banners in your industry.
Before you start producing banners, looking at as many banner samples as possible will help you get a general idea of the trends, which will help you proceed with your production. Here, we will introduce five banner sample sites that you can use as a reference.
1.Banner design archive
There are currently over 2,000 banners listed on the “Banner Design Archive” site. Banners can be filtered and displayed by size, color, and industry, which is very convenient when creating banners.
The 5 most recently posted banners and 10 popular banners are displayed, so you might want to check them out as well.
2. Kitten Banner Design Archive
The site “Koneko’s Banner Design Archive” is a gallery site that compiles “amazing advertising banner designs” from a unique perspective. You can filter banners by color, size, and industry.
3.Retrobanner
On this site called “Retrobanner”, which has
an archive
of more than 8,000 types of banners, you can filter and browse banners by size, color, industry, and taste.
There are many sizes available, so this site is very useful if you want to see a banner design in this size!
4.Bannner.com
“Bannner.com” is introduced as “a banner design gallery that collects excellent banners that can serve as examples for banner creators,” and only posts banners that meet a certain quality. , it can be said that this is a site where you can see carefully selected banner designs.
I think it will be useful when you want to see a lot of high-quality things.
It has a wide range of categories, and in addition to size, you can also narrow down your search by layouts such as “vertical” and “horizontal”, as well as unique categories such as “spring” and “face cutout.”
5.Banner Matome
“Banner Matome” is a site that collects over 20,000 banners, and you will be overwhelmed by the sheer number. You can filter by industry and expression, so narrow down the banners you want to see. There is also a summary page of smartphone banners, which is useful if you want to refer to the design of the smartphone version.
summary
A banner is an image with horizontally long text, photographs, or illustrations on a website, with a link attached, and its main purpose is to guide users to the page they click on. The uses can be broadly divided into “guidance/guidance/eye-catching” and “advertisement.”
Banners come in a variety of shapes and sizes, including square, rectangular, horizontal, and vertical. There are several basic layouts, including vertical and horizontal split layouts, layouts that line up multiple elements, and full-page layouts.
The steps to create a banner are: 1. Determine the target, 2. Decide on the size, 3. Identify the elements of the banner, 4. Decide on the catchphrase, 5. Consider the layout and draw it by hand, 6. Draw the rough outline in monochrome. It is best to proceed in the following steps: 7. Adjust the font and character spacing, and 8. Decide on the color.