Useful Tips

How to make a banner for the site


February 15, 2018. Published in sections: Internet marketing for beginners. 5113

As a rule, any web project is created in order to make money on it. Otherwise, all activities on the Internet lose their meaning. One of the ways to make money is to advertise on your site. An advertiser develops and places his advertisement on someone else’s web resource for a fee in order to promote a product or service.

A bit of history

For the first time, an Internet banner was released in 1994: it migrated to the Web from print media. In the future, this marketing technique began to develop: whole pages were created, filled from top to bottom with aggressive advertising. Over time, the visitor got used to not paying attention to its abundance - overcrowding of websites with advertising began to be considered bad taste.

How does an advertising banner on a site work?

New customers and buyers

In this case, it is important not the number of people who have passed over, but the quality of the target audience. For example, an online store of down scarves needs not just curious visitors, but buyers. And it’s more logical to advertise on women's web projects, forums, news resources. Shawls will be especially demanded in the winter and before the holidays. Therefore, the seasonality of display advertising in this case is the autumn-winter period.

Traffic growth

Sometimes web resources exchange thematic display materials in order to attract new visitors. The administrator can place banners with links to the pages of his own site. This is done in order to capture the attention of the visitor to any important text.

The benefits of this marketing technique

  1. The price of creating and placing banners is much lower than the cost of scrolling a video clip on TV.
  2. It does not require a huge staff to create material.
  3. Adjustments for the target audience, easy changes to the advertising campaign.
  4. Banner (display) advertising + targeting (targeting a specific target audience) is one of the most effective techniques in marketing.

By formats

  • Simple static picture in raster graphics (JPG, GIF, PNG, etc.).
  • GIF-animation - successive drawings in raster graphics.
  • Flash animation - vector graphics are applied, smooth change of elements, interesting effects, sound may be superimposed.

Too “heavy” images significantly slow down the loading of a web page, which negatively affects the behavior of visitors and the trust of search engines. GIF animations and Flash are heavier than static images, so it is not recommended to oversaturate the page with such display materials. But on the “light” static picture, visitors almost do not pay attention and do not click on it, considering the image to be one of the colorful elements of the page.

By size

The banner size for the site can be any. The main thing is that it dynamically fit into the design, not be intrusive. If an Internet user has a filter for displaying ads, then insert a special stub image of a similar size. But there are standard sizes in pixels, which we will discuss below.

  • 728x90 - "Hall of Fame."
  • 468x60 - "Horizontal".
  • 336x280, 300x250, 300x600, 240x400, 180x50 - “Rectangular”.
  • 300x600, 120x240 - “Vertical”.
  • 120x600, 160x600 - “Skyscraper”.
  • 250x250 - “Square”.
  • 125x125, 120x90, 120x60 - “Buttons”.
  • 88x31 - The Strip.

Almost all of the above sizes are available for placement in Yandex.Direct and Google Adwords.

Signs of a quality internet banner

  1. Boots fast. The user does not have to wait long.
  2. Attracts attention. What is important is not the color saturation or the variety of frames. The picture should stimulate the visitor to further familiarization with the material.
  3. Original. The Internet is full of similar images. Therefore, it is important to interest the sophisticated user with their T&U.
  4. Stimulates a purchase (complete an action). This is the main goal of any promotion.
  5. It is credible. It is especially important for a little-known company. When developing it is necessary to consider the psychology of colors and phrases.

Where should the ad unit be placed

The placement and size of the media are also important.

  • The larger the picture, the more likely it is to click on it.
  • The best block size is 240x400.
  • The upper left corner and the header of the website - this is where the visitor’s gaze begins to slide across the page.
  • The top of the site is the most effective place.
    Animation blocks attract attention, even if they are placed at the very bottom.

Color schemes and texts - important recommendations

  • Red is the color of determination, motivation. But its overabundance can cause aggression to TiU. Its shades (purple, burgundy, pink) are less aggressive, but also successfully applied. Red combined with black allows you to emphasize the importance of something.
  • Orange is a good mood, a motivation for action. It is considered the most effective in advertising, but poorly suited for the background.
  • Yellow - a joy, tunes for sociability, goes well with black.
  • Green - freshness, tone, health. Perfect for background, it is used more often in medical TIU.
  • Blue - peace and tenderness.
  • Violet is the mystery and solemnity of an event. Emphasizes the originality of TiU.
  • Gray is the most moderate color, does not cause rejection in anyone.
  • White is purity. If a non-aggressive banner has a white background, then it does not cause emotions.
  • Black - not suitable for the background, but indispensable as the font color.

Text Send Rules

The picture only “catches” attention. The text is important on the media block, so keep the following recommendations in mind:

  • Reach out to your target audience.
  • Come up with an interesting headline.
  • The text should hint about solutions to the problem.
  • He must intrigue, arouse curiosity.
  • It should describe an interesting plot, as in any commercial.
  • Must have a connection with the graphics on the frames.
  • The words "Login" or "Push" prompts action.
  • The word "Free" intrigues everyone.
  • The text should occupy up to 20% of the rectangle's space.
  • Any numbers are credible.

General design guidelines

  • If you have a logo - do not forget about it.
  • The design of the font in the form of underlined blue text prompts the user to click on the link.
  • Use design elements from Windows - they click on such banners more often.
  • Do not use flashing, as well as black or red backgrounds.
  • Changing images should not be too fast. A person needs to understand your message.
  • If the background of the rectangle is white, circle it with a frame.
  • Forget italics, small print, and words written in flashy capital letters.
  • Advertising material should repeat the style of the advertised Internet project.
  • Erotic context always increases clickability (not applicable to all advertisers).
  • Images of people attract attention.
  • Create no more than 4 frames in an animated block.
  • The total animation scroll time is no more than 5-6 seconds.
  • If a media ad pops up and is imposed, then the user closes it.
  • Advertising material should lead to a page that more fully reveals its essence.

Programs for creating banners for the site

Depending on the format, appropriate software is used to create the material. If any graphics editor is suitable for the development of statics, then specialized software is needed to develop animation.

  • ADOBE PHOTOSHOP - paid. The most powerful graphic editor. It supports many formats, tools, allows you to use different special effects and achieve high quality images.
  • EASY GIF ANIMATOR - paid. Gives out GIF or AVI-format, allows you to work with both animation and statics. Beautiful effects are provided, frame change, has a large set of tools. 20 discoveries are available for a free test application.
  • BANNER MAKER PRO - paid. Clear interface, simple functions, any sizes of created materials, high quality of finished products.
  • ARTWEAVER - shareware. The Russian program, a graphic editor, has many tools for image processing. You can work with a basic set of functions for free.
  • ULEAD GIF ANIMATOR - shareware. More than 15 plugins, convenient storyboard, synchronization with Photoshop, saving in many formats. You can save the material in HTML.
    ADOBE FLASH CS5 PROFESSIONAL - shareware. A powerful program for developing FLASH animations. It has built-in functionality for the production of FLASH-clips, hundreds of plug-ins, live animation, adding music, supports the FLA format. Has a test period of 1 month, you can find free hacked versions on the Internet.
  • GOOGLE WEB DESIGNER is a free service from Google. A complicated interface, a small number of effects, but a lot of tips in Russian.
  • GIMP is free. Free analog of "Photoshop". Functionally inferior to its predecessor, but zero cost tilts the scales in favor of GIMP.
  • PAINT-NET is free. Works only with statics, nothing more, many features, easy interface.
  • AURORA 3D-ANIMATION - shareware. From statics to FLASH. A lot of templates, a simple interface, fine-tuning the frame change, supports the SWF format.
  • SOTHIK SWF - free. Allows you to create FLASH, has many ready-made templates and pictures.
  • EASY BANNER - free. Software for beginners in design, works with both static and animation, there is an impressive selection of backgrounds and standard images.
  • ALEO FLASH INTRO BANNER - no payment. Works with FLASH, GIF-animation and statics, a lot of template sounds, ready-made animations, fonts. Simple interface
  • ATANI is free. Works with GIF format. The toolkit is very simple and straightforward.
  • BANNER FANS - an online service, without payment. Many useful settings and features. Allows you to draw static media materials, you can create an online banner for the site.
  • ANNERS NACK - an online service, without payment. Extremely simple principle of work, there are ready-made templates. The user can easily select the appropriate ready-made option and make their own adjustments.

The quality of an Internet banner is determined not by how it looks, but by its clickability. Advertising may be imperfect, but if people go through it to your site - it means you did everything right!

What are banners

A banner on the Internet means a rectangular advertising image with static or dynamic (animated) content. A banner can include both text and graphic drawing. The banner is usually provided with a link that activates after clicking on it with the mouse button.

  • Static banners - consist of a static image. They are pictures in JPEG or PNG format. They are characterized by low weight, which does not affect the page loading speed.
  • Animated Banners - Animation created using GIF. It consists of several pictures replacing each other with a given frequency. The weight of the banner depends on the number of images used in it.
  • Flash - in this banner, the animation is based on Flash. She can respond to user actions.

Interactive content can be presented in the form of a game or questionnaire with the addition of sound. Drawings for animation are created using vector graphics.

There are many different sizes of banners for the site. But the most popular of them are:

  • 88 by 31 pixels,
  • 120 by 60 pixels
  • 120 by 90 pixels
  • 120 by 240 pixels
  • 125 by 125 pixels
  • 120 by 600 pixels,
  • 160 by 600 pixels
  • 180 by 150 pixels
  • 234 by 60 pixels,
  • 240 by 400 pixels
  • 250 by 250 pixels
  • 300 by 600 pixels
  • 300 by 250 pixels
  • 336 by 280 pixels,
  • 150 by 150 pixels
  • 468 by 60 pixels
  • 728 by 90 pixels.

Signs of an effective banner ad

The effectiveness of the advertising banner posted on the site depends not only on the popularity of the site. To a greater extent, its effectiveness depends on the level of implementation of the advertisement itself. A quality banner must meet several key criteria:

  • Attract user attention - but this does not mean that the banner should be too bright and blinking. Such advertising will cause the visitor irritation, not attention. The content of the banner should unobtrusively “hint” to the user about his presence. Therefore, when selecting an image and text for it, the psychological factor should always be taken into account,
  • Arouse interest - banners for the site should arouse the user interest in the object of advertising. A product or service should be served not only with taste, but also original. Use of light wit and humor is encouraged:

  • The motivation to click on the banner link is achieved through the effect of some mystery and understatement,
    nested in the content of the banner.
  • The motivation to order a service or purchase - first of all, depends on the content of banner advertising. It should show the best aspects of the object of advertising or the benefits that the user can get from its acquisition.
  • If the banner is designed to increase brand awareness and increase its image, then the advertising content should inspire a sense of trust in the consumer. But do not cause negative associations.

Patterns to consider before placing a banner on the site:

  • The larger the banner, the higher the likelihood of the user clicking on it. The most effective size is considered to be 240 by 400 pixels,
  • The banner banner placed on top (in the header) has the greatest effect. It can also be placed at the side or bottom of the page, but the performance here is slightly lower,
  • Animated banners are able to quickly attract the attention of the user - intuitively, the human eye responds to movement.

Creation and placement of an advertising banner

Before you insert a banner on the site, you need to decide on the place of its placement. In this case, you need to consider the size of the banner and the available space on the pages. Having decided on the location of the ad unit, you can embed the banner code in the html page.

The code for most banners matches the template:

  • a href = "/ link to the advertiser's site" - the address of the resource to which the user will click on the banner,
  • title = "title" - the text displayed in the tooltip when hovering over the banner area,
  • target = "_ blank" - sets the rules for displaying the advertiser's site after clicking on the banner link ("_blank" - opens in a new window),
  • rel = "nofollow" - prohibits search engines from processing this link,
  • img src = " to image" - sets the path to the image displayed in the banner,
  • alt = "alternative text" - the text that will be displayed in the banner if its image is not loaded.

But it is not necessary to develop a banner yourself. To do this, you can use special online generators. To generate a banner code on such a service, you need to fill in several fields and click on the button:

  • Development of a regular GIF banner - from $ 25,
  • Creating a banner based on Flash - $ 70-150,
  • Resize - approximately 50% of its initial price.

But if you are a little tricky, then you can create a simple banner on your own. Here is a miracle after ten minutes of manipulation with the html code and image in Coreldraw:

If you make a little fancy with the code and add a couple of event handlers, you get a banner with a changing picture. The image in the banner changes while you hover over it.

Here's what happened:

Creating animated and video banners

Let's look at an example of how to make an animated banner using the Ulead GIF Animator program.

In the File menu, select the Animation Wizard item. In the window that appears, set the size of the future banner. In the next step, load prepared images:

Ulead GIF Animator allows you to save the created banner in different formats. Including how the video:

How to make a banner online:

  1. Open Canva and choose your favorite banner template - one of thousands available.
  2. Add your photos or select from the built-in catalog. Adjust the colors, insert labels, call-to-action buttons and other elements.
  3. Download the banner and put on your page.

Load all elements into the program for creating banners

You put a lot of effort to succeed. The moment has come to tell your story to the whole world. Now the beautiful banners that you observed on other resources become your reality.

And the main news is that the banner design will not be simply copied from someone else's: it contains your vision and details that are recognizable at first sight. Engage your illustrations and logos by loading them into the vault and dragging them into the layout. And then awaken in yourself a real artist! Canva will allow you to change the media files, choosing for them the shades that match your plan.

Grab the perfect size banner

Focus on your project and what you know and can do. And forget that Facebook covers should be 851 x 315 pixels and standard banner sizes on Twitter should be 1,500 x 500.

With the Canva designer, you can make a banner online for any platform and instantly save high-resolution images in the desired format: JPEG, PNG, or PDF.

See how convenient internet marketing has become

A banner on a site is the first thing people see when they enter it. Therefore, a good impression at the start is very important. And no website promotion is needed when you want to visit it again: originality is the best advertisement!

А представьте, что имея непревзойденный дизайн, от которого все в восторге, вы можете его воспроизвести разные виды баннеров снова и снова для социальных сетей, рассылок писем или других диджитал-сервисов.

Их не понадобится рисовать с нуля: несколько щелчков мыши – и картинки новых размеров ждут своей очереди на установку.

Как сделать баннер

Для работы в интернете очень часто требуются познания в области дизайна. It’s easier for those who use Photoshop with “You”. But what about the rest? The correct answer is to learn. But learning the art of working with Photoshop in one day will not work, and pictures and images are needed today.

There is another option - to order this work to a professional. But the professional should be given clear instructions on what should be the result. To find out what the terms of reference for the designer should be, the first time you yourself will have to briefly get into this unfamiliar area.