Professional Documents
Culture Documents
11 - Chapter 2
11 - Chapter 2
Chapter - 2
Introduction:
Due to globalization, nations are coming closer to each other also different
sector undergoes into significant changes. And marketing sector is also
affected by this and experiencing so many changes continuously. To sell the
product through internet or digital media is known as E- marketing. Types and
size of business organization affects marketing traditionally but in present
scenario, digital technology is a precious addition. E- Marketing is also known
as web marketing, online marketing and e-commerce. E- Commerce helps to
find out the correct audience whom business organizations can target for their
goods and services. It consists of all processes and activities with the
purposes of attracting, finding, winning and retaining customers. Creative
utilization of internet technology is prepared by using various multimedia,
graphics, text etc. with different languages to create catchy advertisements,
forms, e-shop where product can be promoted, viewed and sold. The scope of
E-commerce is deemed to be broad in scope it does not only use to promote
marketing over the internet but also helps in marketing as well through e-mail
85
Chapter – 2 Web Banner Advertising and Its Development
and wireless media. E-commerce also joins technical and creative aspects of
the Internet, including development, design, advertisement and sales. Use of
websites are made by e-commerce in combination with online promotional
techniques such as social medial marketing, search engine marketing (SEM),
interactive online ads, e-mail marketing, online directories, viral marketing,
affiliate marketing and so on. It also creates positive interaction with
customers that can serve as the foundation for long term relationships and
encourage repeat purchases. Due to this web banners ads are highlighted in
online market and also it is the most omnipresent form of online advertising.
Therefore, in this chapter brief outline has been given about the web banner
ads history and the technical development of banner ads which include sizes,
duration, and position, occurrences, measurement, and software tools for
designing the banner ads. Further, this chapter included how to design
appropriately banner ads that people get influenced and want to click and also
the difference between Difference between the design of web banner
advertising and print advertising.
86
Chapter – 2 Web Banner Advertising and Its Development
It is the mini form of hoarding which were traditionally written by hands but at
present time it is printed by plotter on flex or vinyl sheets (Yadav, 2011:163).
But since time has changed digital technology has take over the market and
business, due to this internet came forward to play a vital role in advertising.
Conventional Banner ads also shifted to digital mode and now known as web
banner advertising or banner advertising
87
Chapter – 2 Web Banner Advertising and Its Development
88
Chapter – 2 Web Banner Advertising and Its Development
The following developments about the Web banner ad are considered in this
study
89
Chapter – 2 Web Banner Advertising and Its Development
Andrea defines three different types of banner ads, along with their benefits
which are as follows: (2015: <https://www.20dollarbanners.com/resources/
the-three-types-of-banner-ads-you-should-know-about).
i. Static banner
This type of banner ads contains very simple graphic and texts. Due to its
simplicity a lot of websites and blogs prefer static banner. It takes a good
designer to come up with an effective static banner. The image and text
chosen should not just be attractive but also meaningful. The goal is for the
banner to be simple and not distract the website.
It is cost effective
90
Chapter – 2 Web Banner Advertising and Its Development
Created in a GIF file format, this type of banner is one of the most powerful
graphic design units. This type of banner can also be as interactive as a flash
banner. It is mobile and smart device friendly.
GIF banners can be made by almost anyone. This means that it is relatively
cheap to make. There is no need to pay for designers or programmers.
91
Chapter – 2 Web Banner Advertising and Its Development
have its image, description and click target‖ (Florea, 2016: https://www.
bannersnack.com/blog/ facebook-carousel-ads-examples/).
products through carousal ads and user can explore some of the product
items inside the ads. Size of carousal banner ads is 1080 by 1080 pixel and
advertising agency. I have learnt that uniformity in carousal ads is very vital
because it creates the moods as well as shows the same theme of the ads so
that audience can not be confused by seeing the ads. For example in the
image no. 2.4.a the carousal ads are shown in which it can be seen that in the
92
Chapter – 2 Web Banner Advertising and Its Development
background the elements of design are taken is the same family that is all clip
art and same color. All the banner ads have a uniform background only
products are different. This shows that the company promotes the different
called canvas. Canvas offers a full screen real estate, customized with
images and zoom in to view images in detail. Canvas ads are only
available on mobile. When the user clicks through to the canvas ad brand
content will take over the entire mobile screen. This type of ads scrolls
from top to bottom. Canvas offers different components to tell the story of
like – Full Canvas, Header, Photo, text block, Button, Carousal, Video, and
Product Set. Below there is an example of Canvas ads which I have made
while my project work in M&C Saatchi February. The Brand I have chosen
is BIBA which is an ethnic apparel brand. Here I have made banner ads
93
Chapter – 2 Web Banner Advertising and Its Development
94
Chapter – 2 Web Banner Advertising and Its Development
Image Carousal
In this total video, length cannot exceed two minutes. Designer can have
more than one video in the canvas, but the total time of all videos can‘t be
larger than two minutes. Always use MP4 or MOV format. Video can be
added if required and in text block there are two options of font‘s serif and
sans-serif fonts. Maximum 10 banners can be added in carousal image and
the size of carousal would be Maximum width is 1,080 pixels and maximum
height is 1,920 pixels. Use PNG or JPEG file type.
95
Chapter – 2 Web Banner Advertising and Its Development
Web banner ad occupy more screen space, they run better chances of
grabbing attention and being seen and remembered. Choturou and Chandon
(2000) showed that size moderates the effect of other format variables.
Picture presence is negative for small banners whereas it tends to be positive
for larger banners; Motion seems to have a positive effect for the larger
banners as well. Banner ads come in a variety of shapes and sizes (Chavan,
2011:85-86). The Internet Advertising Bureau (IAB) specifies eight different
banner sizes, according to pixel dimensions.
The full banner (468 x 60) is by far the most popular, but you will see all these
variations all over the Web. These are not the only banner ad shapes and
sizes, either, but they are a good representation of the range of common
banner ads. There is no universal file-size constraint for banner ads, but most
Web sites impose their own limits on memory size, usually something like 12K
to 16K. This is because banner ads add to the total file size of the page they
appear on; therefore, increasing the time it takes for a browser to load that
page. In the image no. 2 shows the all above listed banner ad sizes.
96
Chapter – 2 Web Banner Advertising and Its Development
In past few years it has been observed that Mobile has surpassed desktop as
the main device used for browsing, delivering 63% of all internet traffic and
also mobile ads have seen a major upswing. Mobile ads can be displayed
both when people browsing the web but also directly in apps. So for the
mobile advertising there are four most popular sizes which are dominating the
digital advertising world and 89% of all ad impressions are made up of these
sizes which are as following
97
Chapter – 2 Web Banner Advertising and Its Development
This is the 2nd most common ad size among global list, with 25% of global
impressions also known as a Horizontal Banner. This banner combined with
the Medium Rectangle and covers most of the display advertising needs. This
banner is usually displayed at the very top of websites but also sometimes
shows up at the bottom: (Rask, 2019: https://www.match2one.com/blog/
standard-banner-sizes/).
This is also called a Standing banner; this is the more common of the two
Skyscraper banners with 12% of global inventory. There is a another thinner
version of this ad, simply called Skyscraper, with the size 120×600 that is
intended at websites that cannot accommodate the Wide Skyscraper, but
when choosing between the two, the Wide Skyscraper is the safest choice.
More sites use this banner size than the thinner Skyscraper and it‘s placed
along the sidebar of a website. About 12% of global ad inventory is made up
98
Chapter – 2 Web Banner Advertising and Its Development
of the Wide Skyscraper whereas only 0.2% consists of the thinner Skyscraper
(Rask, 2019: https://www.match2one.com/blog/standard-banner-sizes/). The
Wide Skyscraper is usually used along sidebars on websites and converts
well both as text ads and image ads.
Duration of web ad is one of the aspects which are considered for Web
banner ad designing as well as for cost estimation. Duration is more indicates
ad is displayed for more time period which includes more number of frames or
images or information about the product. This leads increase in designing and
increase in cost of ads. But to make the impact it is necessary to decide exact
duration of ad depending on the product. The duration of Web ad generally
used are-
5 seconds
To catch the attention of the viewer, position of banner ads plays an important
role. For Web banner ad generally used positions are as follows –
99
Chapter – 2 Web Banner Advertising and Its Development
Smita R. Chavan consider the article ―Tips from Yahoo‖ in which the article
suggested that banner burn out after 2 weeks so to attract the user and
increase the click through rate of banner ads it should be necessary to
changing the Web banner ad design after specific interval(ibid).
Page views: When user visits a Web page, it is called a page view.
Page views, are tracked by website monitoring applications to record a
website's traffic. The more page views a website has the more traffic it
is receiving. However, since a page view is recorded each time a Web
page is loaded, a single user can rack up many page views on one
website. Therefore, unique page views are commonly tracked to log
100
Chapter – 2 Web Banner Advertising and Its Development
i. Adobe Illustrator
iii. Flash
iv. Dreamweaver
101
Chapter – 2 Web Banner Advertising and Its Development
ii. Photoshop is image processing software. It has some fabulous tools for
optimizing an image for web. Optimization always based on two goals –
image quality and download speed. Slicing images is a great tool used by
Photoshop for improving the download speed for your web pages. Instead
of loading up your page with the huge pictures that download slowly, you
can slice up your images into byte sized pieces optimized for speed,
appearance and special functions such as links. Photoshop creates the
HTML needed to reconstruct your image on your page. Files in
Photoshop‘s native format, .PSD, can be exported to and from Adobe
Image Ready, Adobe Illustrator, Adobe Premiere Pro, After Effects, and
Adobe Encore DVD to make professional standard DVDs and provide non-
linear editing and special effects services, such as backgrounds, textures,
and so on, for television, film, and the Web.
Photoshop can use the color models RGB (Red Green Blue), lab, CMYK
(Cyan Magenta Yellow Black), grayscale, binary bitmap, and duotone.
Photoshop has the ability to read and write raster and vector image
formats like, .EPS (Encapsulated Post Script), .PNG (Portable Network
Graphic), .GIF (Graphic Interchange Format), .JPEG (Joint Photographic
Experts Group), Fireworks, etc. It also has several native file formats such
as .PSD (Photoshop Document) format stores an image with support for
most imaging options available in Photoshop. These types of files include
layers with masks, color spaces, ICC profiles, transparency, text, alpha
channels and spot colors, Clipping paths, and duotone settings. This is in
contrast to many other file formats (e.g. .EPS or .GIF) that restrict content
to provide streamlined, predictable functionality. Photoshop's popularity
means that the .PSD format is widely used, and it is supported to some
extent by most competing software (Chavan, 2008:93).
102
Chapter – 2 Web Banner Advertising and Its Development
iii. Flash, also known as Shockwave Flash and popularly called flash. Flash
is an animation program that can produce high quality multimedia files.
Adobe Flash Professional is used to create web applications, games and
movies, and content for mobile phones and other embedded devices. It
features support vector and raster graphics, a scripting language called
Action Script and bidirectional streaming of audio and video. There are
also versions of the Flash Player for mobile phones and other non-PC
(Personal Computer) devices.
iv. Dreamweaver can hide the details of pages' HTML code from the user,
making it possible for non-coders to create web pages and sites. It is
available for both Mac and Windows operating systems. Dreamweaver
allows users to preview websites in many browsers, provided that they are
installed on their computer. It also has some site management tools, such
as the ability to find and replace lines of text or code by whatever
parameters specified across the entire site, and a templatization feature
for creating multiple pages with similar structures. The behaviors panel
also enables use of basic JavaScript without any coding Dreamweaver
can use "Extensions" - small programs, which any web developer can
write (usually in HTML and JavaScript). Extensions provide added
103
Chapter – 2 Web Banner Advertising and Its Development
Emilie Futterman writes in her article that banner ads are the most
omnipresent form of marketing on the Internet (Futterman, 2014: https://
thenextweb.com/dd/2014/01/07/design-banner-ads-people-actually-want-
click/#.tnw_3e06Ttzi ). Because of their large quantity, banner ads are, often
but not always, ignored, there is a possibilities that most of the time banner
ads are ignored by the viewers because due to lack of relevance to the
viewer, fear of spam, a virus, popup, or some other unexpected reaction, and
general lack of engaging content. In survey, 43% of respondents said online
banner ads do not look interesting or engaging and 31% of respondents said
they only wanted to click ads when they were in the mood or interested in
looking at them (2011: http://www.marketwired.com/press-release/top-reason-
users-dont-click-banner-ads-they-dont-want-be-diverted-from-their-current-
1504178.htm). For the successful response of banner advertising certain
principles are followed in the time of designing banner ads which are as
follows:
Banner ads are come in variant sizes depends on type of the project,
designers have to create within the specification of the site where they plan to
104
Chapter – 2 Web Banner Advertising and Its Development
advertise, and most sites use a set of common sizes. According to Google
AdWords who is one of the biggest servers of banner ads on the web keep up
with the most popular sizes suggested that wider ad sizes tend to perform
their taller counterparts. Much of this may have to do with placement above
the scroll and because it is more comfortable to read from left to right, rather
than lots of stacked text. So here are the sizes designer should consider first.
728 pixels by 90 pixels leader board (often at the tops or bottoms of pages)
b. Create Hierarchy
105
Chapter – 2 Web Banner Advertising and Its Development
106
Chapter – 2 Web Banner Advertising and Its Development
Button is a smaller version of banner that often looks like an icon and usually
serves to provide a link to the advertiser‘s home page, and it is known as call-
to-action. Software technologies such as Java, Acrobat, Enliven and
shockwave have greatly enhanced the effectiveness of banners and ad
buttons with full motion and animation (Kazmi and Batra, 2005: 327). Cliff
107
Chapter – 2 Web Banner Advertising and Its Development
Allen et.al says about buttons that they are abbreviated version of web
banners. A button is usually rectangular or square and measures about one-
half or one-quarter the size of a banner. Button can be static or animated and
are usually 120X90 pixels or smaller, with the 88X31 pixels button being a
popular button size (Kazmi and Batra, 2005: 133). Connor Turnbull suggested
in his article ―Best Practices for Designing Effective Banner Ads‖ that strong
call to action is the most important element in banner ad which convincing
users to interact with it. The call to action is the initial stage in banner ads.
This comes in various forms like a QR code or even a traditional button that
reveals a website or video when scanned. Therefore, in the time of creating
button in banner ads keep a simple buttons like ―shop now‖ or ―find out more‖
and don‘t include fancy buttons (2013: web. webdesign.tutsplus.com/
designing-effective-banner-ads—web design). Shape of button could also
play an essential role when attempting to design the CTA (call to action)
buttons. Generally, in banner ads rectangular shape buttons could be seen
which is the traditional shape introduced into the digital world a long time ago
and it is popular also but instead of using rectangular shape buttons rounded
corner buttons are also very effective in banner ad because rounded corner
point inward and draw the attention to the inside (content) of the button. A
square edge on the opposite points outward and draws the attention away
from its objects also use the right color for the CTA buttons is important
because colors stimulate a different feeling or mood. It is a very influential
source of information when people are making a purchasing decision.
Physiologists suggest that uses of red colors are good to trigger more
attention (Andrei Florea, 2015: https://blog.bannersnack.com/importance-call-
to-action-buttons-banner/). Call to action button can give a verity of function in
banner. Its main function is to get audience or consumer to the site to do
some activities like adding a product to their shopping cart, downloading
108
Chapter – 2 Web Banner Advertising and Its Development
something, requesting information etc. so for the designers have to design call
to action button catchy which is hierarchically important to the visual design of
banner ads.
e. Focus on Typestyle
Bruce G. et al. suggested that the selection of typestyle for the design in
advertisement is important because type can add or distract from the look,
feel and readability of an ad (1999: 474). Most of the time designers working
with small space in banner ads and are against a lot of competition for eyes
therefore, in this situation one should use strong typefaces that are easy to
read. In banner ads for strong communication two typefaces should be
enough and the headline may go big also bold and colorful fonts to grab
attention of the viewers. Designers may use simple sans serif fonts for
everything and also they could use two sizes in bold type: one for main text
and another for buttons or call to action.
It has known that animation can motivate interaction and draw attention of
users and help to increase advertising reorganization and brand recall.
Detenber, Simons and Bennett suggested that motion also figures
prominently in the world of media, for it is a defining characteristics of film,
video and new media technologies such as multimedia. In addition Reeves et
al. and Keeper stressed that motion could influence human cognitive process
and increase human arousal and attention in television advertising. Motion in
advertising has been positively associated with higher physiological arousal.
Detenber et al. reported that image motion had a positive effect on emotional
arousal a indexed by self-reports. Also, animated motion used in advertising
may influence human cognitive process and increase viewer attention to ads.
109
Chapter – 2 Web Banner Advertising and Its Development
Therefore, utilizing animation and motion into web banner ads can increase
the engagement of the audiences but also it have to be mind that too much
animation can easily distract the user‘s attention( Chang Hyun& Jun, 2007:
Consumer Responses to Creative Platform of the Internet Advertising.htm).
Implementing subtle animation and motion effects is usually a great way of
grabbing attention and increasing interaction though while using the motion in
banner ads. Designer should limit the length of animation which up to 15-30
sec, depending on the size of the unit. According to Connor Turnbull ―simple
animation can be just that little devote that makes someone take notice‖
(Turnbull,2013:webdesign.tutsplus.com/best-practices-for-designing-effective-
banner-ads-web design).
110
Chapter – 2 Web Banner Advertising and Its Development
products. It is known that banner ads are an extension form of every other
marketing campaign and is a very important tool for establishing brand identity
online. As per Mako Lehel Mor, the banner should be designed according to
the message so in order to deliver the right message through the visual
elements one has to invest in consistency: the visual look of the brand should
be created using every tool like the logo, the colors, and the images, in a
consistent style. (Mako Lehel Mor, 2015: https://blog.bannersnack.com/
branding-in-banner-ads/).‖ Thus based on this statement it is important to
maintain the brand consistency in banner ads by using the same colors,
typefaces and imagery across all marketing materials.
111
Chapter – 2 Web Banner Advertising and Its Development
banner ads are designed for clothing retailer, it must show a product item
only. Stick to simple placements as well, with images next to text, rather than
as a part of it because users will only have a few seconds to see what the ads
are trying to show. ―A strong image next to a strong message is designers
best bet‖ (Cousins, 2015: https://designshack.net/ articles/graphics/design-
banner-ads-that-dont-suck-15-design-tips/).
Color is another physical element of advertising layout and can be used with
impact only if its dimensions are understood. Basic principle of advertising
layout design is the same for both color and black and white. The decision to
use color and how much of it can be influence the development of copy and
art and the production of finished print advertisement. The use of color directly
influence the cost of the advertisement but also offer significant advantages
like, it adds attentions- capturing value to the advertisement, it can help in
importing emphasis to important elements in an ads. It can add sense of
realism or atmosphere, it can help easy identification of brand name, package
and trademark and it imparts a feeling of quality and prestige to the
advertisement (Kazmi and Batra, 2004: 386). Similarly in banner ads colors
make a big impact and designer can improve their banner design by using the
right color in the right way. Gregory Ciotti discussed in her article about
psychology of colors in marketing and branding that different colors in banner
ads will influence audience to evoke different emotions. Further reference of
supporting the importance of colors Sofia Andre ascribes ―It is important to
choose colors that represent the brand but also make people feel things that
associated with what the product service is‖ (Sofia Andre: web. 5-ways-
improve-banner-ad-design.com). Kazim and Batra, consider the suggestion of
Michael Glaspire, the author of how to sell anything to anyone, anytime that
112
Chapter – 2 Web Banner Advertising and Its Development
use of colors like yellow, orange, blue and green in banner ads will help to
grab attention instead of red and black( Kazim and Batra, 2004:326).
j. Link Appropriately
k. To Save Properly
This step is an essential part of the design since the audience is not liable to
serve or interested in the banner ads if the files are too large or if they are not
formatted properly therefore, designer should optimize the content for the
smallest file size. The file size of the project should be preferably somewhere
around 150 kilobyte, depending on the size of the ads. After this it must be
saved in a format that works across the web. Common file types for banner
ads include PNG (Portable Network Graphics) and JPEG (Joint Photographic
Experts Group) for static displays and GIF (Graphics Interchange Format) for
animated displays. As the popularity of SVG (Scalable Vector Graphics)
increases, this format is becoming more widely accepted as well.
l. To Keep it Simple
In the last part the most important thing is to keep everything simple. One
should determine the main purpose, the branding, and the call to action. The
more content in the box, the more likely audiences are to confuse and there is
a high chance to loss the viewer attention. Therefore, when it comes about
113
Chapter – 2 Web Banner Advertising and Its Development
banner ads, one of everything is enough i.e. one image, one message, one
call to action and one brand mark.
Apart from the above discussion there are some more points to discuss about
design banner ads, designing banner ads on the basis of particle work while
working in a project at M&C Saatchi February advertising agency under the
guidance of art director Mr. Kaushik Ganguly and Creative Head in digital
advertising Mr. Somyajeet Chakladhar, I have came to know the following
rules and principle that makes banner ads attractive and persuasive, those
are as following:
1. Size of Banner
There is a master size of banner ads which are come in many sizes but the
banner which I have designed have its master size which is 728X90 pixels.
Once the design or art work has done it would be adopted in different size of
banner according to the clients need or space of the websites. This process is
called adaptation. The sizes of the adaptation of banner ads are:
• 300x250 Pixels
• 160X800 Pixels
• 300X60 Pixels
• 800X600 Pixels
Below is the banner ads 2.5.l (i) and 2.5.l (ii) which I have design during the
project is the master size banner ads.
114
Chapter – 2 Web Banner Advertising and Its Development
2. Minimalist Design
Minimalism design aims for simplicity and objectivity. It has also been called
ABC art, Reductivism and Rejective art and its theories have been applicable
in lifestyle (Bradley, 2011: vanseodesign.com). Minimalist design tends
toward more white space, better typography, grid layouts and less color.
Steven Bradley mentioned Mies Vander Roe quote ―Less is more‖ to describe
his aesthetic sense of having every element serve multiple purposes both
visually and functionally. Buckminster Fuller said ―design more with less‖ and
dieter Rams changed it to ―less but better‖. All three are mentioning the same
thing that‘s mean minimalism is to design smarter. In the time of design
banner ads minimalistic design works a lot because in this overcrowded
internet everybody wants to get noticed so designers need to use important
elements in banner ads to make users click (Katai,2016: https://blog.
bannersnack.com/banner-ad-design-ideas/). According to Simonle Le
Bouthillier ―When surfing the web, our retention capacity is reduced to that of
a young child. In such a context and with only second to stand-out the
minimalist principle ‗less is more‘ will make a lasting impression‖ (www.
115
Chapter – 2 Web Banner Advertising and Its Development
3. Rule of Thirds
116
Chapter – 2 Web Banner Advertising and Its Development
Each of these sections will take about 33.33% of the horizontal space and the
same percentage of the vertical space. That‘s why this is known as ―Thirds‖.
On the above fig no. 6 the rule of thirds could be shown where four lines are
drawn two horizontal and two vertical lines. Four intersection points are forms
which are called focal points where the main elements of the composition
should be arranged and also nine equal sections are drawn.
Benefits of the use of rule of thirds in web banner ads are that it may helps
creating stunning layouts that raise conversions and attract visitors to stay
with the ads. It has been considered that applying the rule of thirds based grid
to the layout may help to designer to find out where the accent should be
arranged and what elements are better to place onto that grid.
2.6. Difference between the design of web banner advertising and print
advertising
Print and banner ads are two sides of the same coin. They have a lot in
common but, Janie Kliever in her article ―Graphic Design for Print vs. The
117
Chapter – 2 Web Banner Advertising and Its Development
a. Viewing Method:
The design lifecycle & users connectivity with advertising design. In this the
Janie Kliever wants to explain that in static advertising once a design finalize
and goes for printing, it is not going to change unless a decision is taken to
redesign and reprint. This decision may cost time and money, which is not an
ideal choice most of the times. On the other hand the web banner design
however, can be tweaked, changed or completely redesigned at any time;
also even after publishing on websites with a low cost and less time (Kliever:
https://www.canva.com/learn/print-vs-web/).
118
Chapter – 2 Web Banner Advertising and Its Development
Both print and web design have many common design fundamentals like
typography, images/graphics, shapes, lines, color, etc. Each of these
elements is applied in both the mediums. Also each approach has its own
unique layout necessities. For print, all design elements must be presented
within the constraints of the printing surface, while for the web designers have
almost limitless flexibility to systematize, assemble and filter design elements.
Printed artwork must rally certain standards using parameters like margins
and bleeds, while web banner should seek more responsive in nature to
provide a better experience between different viewing methods, such as
computer screen and mobile devices. Because various browsers may change
a web designs actual layout, to achieve top functionality it requires testing with
different browsers and operating systems.
Size and layout of both print and web ads goes hand in hand. In print design,
the size of the printing surface is one of the most important determinants of
119
Chapter – 2 Web Banner Advertising and Its Development
how the designer would use the available space, what type of design
elements would applied, the amount and size of the text to be used, etc.
However, there are standard sizes for many print ads like letters, business
cards, posters, photos, etc. The possibilities are almost unlimited because
paper and other printing surfaces can be cut into many size and shape. But
for web banner ads even though the size is not a constrain however,
designers are challenged with the diversity of the display devices limited to a
certain number ranging from desktop computer, laptops, tablet and smart
phone. The designs are ideally scaled to fit any devices. This adaptability,
known as responsive design, which has become a norm in web browsing as
people are accessing internet from multiple devices simultaneously.
On the other hand PPI used for on screen display which involves the number
of pixels. For better quality images in web banner design higher number of
pixels per inch should be preferred. Blurriness, distortion, loss of quality etc,
which is known as pixilation, occurs when the PPI is not adequate for
printing or when a digital image is displayed online at a size larger than its
120
Chapter – 2 Web Banner Advertising and Its Development
original pixel dimension. For web banners the standard image quality is 72
PPI, which may be change as more devices are being introduced with high-
resolution displays. Sebastien Gabriel, a designer for Google Chrome,
clarifies that ―Windows computers have a default PPI of 96. Mac uses 72,
although this value hasn‘t been accurate since the 80‘s. Regular, non-retina
desktops (Mac included) will have a PPI of 72 minimum up to around 120
maximum. Designing with a PPI between 72 and 120 ensures your work is
going to be roughly the same size ratio everywhere‖ (Gabriel: https://
www.sebastien-gabriel.com/designers-guide-to-dpi/#). Preparing a digital
image (measured in pixels) for printing (measured in inches, centimeters or
other units) is where the uncertainty often sets in (ibid). An official of U.S.
government resource advising museums on how to best conserve
photographs and other resources suggests that ―PPI and print size have an
inverse relationship i.e. higher PPI value condenses or reduces the physical
size of a print, but increases its quality. This means that, depending on the
characteristics of a specific project, designers need to set a file‘s PPI to
produce the right combination of size and quality that is the acceptable
amount of PPI needed for a quality print is dependent on the size of the print.
Larger prints are generally seen from farther away than smaller prints, so a
lower number of PPI will generally look acceptable visually. Without
magnification, the human eye can‘t differentiate detail in a print greater than
300 PPI. Depending on the printer, the general standard today requires 300
PPI for a quality print.‖ Designers often express the need for a file saved at
300 DPI: they really mean 300 PPI (2008:2, https://www.nps.gov/museum/
publications/conserveogram/22-03.pdf).
121
Chapter – 2 Web Banner Advertising and Its Development
g. File Types: selection of a right format for print and banner designs
Every file format falls into two basic categories: Raster or Vector. Raster
images are made of pixels in digital photos and their quality varies depending
on their resolution. Distortion can happen easily if a raster image is enlarged
beyond its actual resolution is; which is measured in pixels per inch. On the
other hand, Vector images, are not restricted by pixels. Vector refers to
graphics that are based on mathematical equations, allowing them to be
scaled to any size without loss of quality. Below some common file types are
mentioned, their characteristics and types of projects designers use:
JPG (or JPEG): This is the default file format on many digital
EPS: It is the most common for saving vector graphics to save their
PNG: This type of file has high image quality and also supports
2. Print Only:
TIFF: it has high image quality and large file size with compressed
122
Chapter – 2 Web Banner Advertising and Its Development
3. Web Only:
4. Software-specific:
Photoshop.
o Color: color scheme for use in print ads and web banner designs
CMYK, contain four ink colors used by all printers these are cyan, magenta,
yellow, and black. Designers recognize individual colors they want to use in
print design with codes that give the percentage of each type of ink essential
to form a certain color. For example, if one wants to print the same shade of
blue as Twitter uses for its logo; according to the company‘s style guide the
CMYK color code for ―Twitter Blue‖ is 70/10/0/0 which shows 70% cyan ink,
10% magenta ink, and no yellow or black ink. Put the code into the design
123
Chapter – 2 Web Banner Advertising and Its Development
software and the same exact shade of blue that Twitter uses shall get printed.
It‘s important to keep in mind that the colors on the screen may not
accurately showed how the colors will look when printed while working on a
design using CMYK color space. So it is suggested to go through a calibration
process which is necessary to ensure the color translates correctly from
screen to paper. On the other hand RGB refers to the colors when it is
depicted on a digital screen or monitor. Combination of light in red dots, green
dots, and blue dots create visible colors on the digital screen. RGB colors are
represented by three sets of numbers which are ranging between a minimum
and a maximum, generally 0 to 255 that refers to the amount of red, green
and blue light it mixed together to depict a certain color. For example, in the
logo of Twitter the RGB value for ―Twitter Blue‖ is 85/172/238 with 238 being
the value for blue light. Hexadecimal values, generally called hex codes, are
another way to label RGB colors which contain six-digit codes and used
specially to identify and create color while constructing a design with HTML
and CSS.
h. Typography: Selection and Use of Right Fonts for the print design
and web banner design
It has been noticed that while purchasing a font or downloading a free font
online for a print design or web banner design; they come in two categories
i.e. desktop fonts and web fonts. The purchased fonts comes with licensing,
legal and copyright issues with relation to where, how and number of times
the font can be used. Generally, desktop fonts are licensed to a single user to
install on their computer and use in various ways, especially for print designs.
On the other hand Web fonts, have been optimized and created especially for
use on websites using CSS. Choices for designer to select web fonts are
pretty limited but with the help of resources like Google Fonts (free) and Type
124
Chapter – 2 Web Banner Advertising and Its Development
Kit, designers get the web fonts free or otherwise through paid subscription.
Designers have complete control over how the typography looks for print
according to the design while on the other hand for the web banner design
fonts, features like clear look and easy to read are prioritized. Designers
have less control over how the font reflects across different devices and for
enhancing readability designers use content with short paragraphs of text and
also keep space between lines.
Typography isn‘t the only thing web designers have limited control over. Web
design is an interesting platform in which the designers determines a project‘s
initial appearance, although a user can override these choices by changing
browser window size, zooming in or out or adjusting browser settings like font
choice and text size. Whereas, in print designers have more or less complete
control over their projects, customizing, changing, or tweaking up until the
moment of printing rather than users making choices about how the end
product looks, print designers make exact decisions about a design‘s
appearance on the final products. Web designers, on the other hand, have
more ongoing control. If a designer wants to fix a mistake, change certain
elements on already published design or even revamp the whole design; that
option remains open.
Every designer has their own process, their preferred methods and workflow
for putting down a design together. In case of web designs the process may
have more impact on the final product compare to print design. Print
designers recognize that there‘s more than one way to get designs done until
unless the design looks good at the end. Instead for a web designs it is a little
125
Chapter – 2 Web Banner Advertising and Its Development
more complicated on how a site is put together, what‘s there under the hood,
and how it influences the final product including usability (whether visitors
are able to find things on the site, page loading speeds) and visibility in search
engines.
Conclusion:
In this chapter it has been seen that due to rapid growth in online advertising
revenues indicates the viability of web banner advertising as an alternative to
that traditional media. Different technical development of web banner ads has
been discussed in this study where it comes to know that accurate size of
banner run better chances of grabbing attention and being seen and
remembered and also for better visibility position of banner ads plays an
important role. In this chapter it has been discussed that for a an effective
response of banner advertising certain principles are entail in time of
designing banner ads where it conclude that while designing banner ads
design should keep simple where only one message, one image, one call to
action and one brand mark is sufficient to increase the audience click or CTR
(Click Through Rate). At the end by comparing the differences between the
design of web banner advertising and print advertising, the most important
statement that can be made from this study that the web banner design is
very different from the print advertising. The comparison between the two
mediums of advertising design proves that the computer monitor is a
completely different medium from paper. Whereas text printed on paper is a
solid object, text on the hand computer screen is based on light waves. While
screen designing may be regarded as a matter of taste. While comparing
elements of design (form and size, color, image, and text) between the two
media, one of the significant distinctions is reliant on the working areas of the
two media; screen and print. Where the issues of image and text are
126
Chapter – 2 Web Banner Advertising and Its Development
concerned, typescript and images displayed on the screen are greatly inferior
in quality to printed typescript and images. Furthermore, color creation differs
on the web banner and in the print advertising. Certainly all these distinctions
between the print and web banner media do not mean that none of the
principles of design apply to web advertising. On the contrary, successful web
advertising should be based on the same basic graphic design principles as a
design prepared for printed advertising. Besides all these differences, web
banner advertising design has to make use of some new elements because
web ads provide live, timely, viewable and often storable information and
entertainment when the consumer wants it. Increasingly, advertisers are
coming to realize that web banner advertising offers a higher awareness of
their product, easy methods of information distribution including speech and
video presentation, improved ability to craft brand image, and an immediate
direct line between customers and the product. Certainly all these
opportunities are provided by some unique design elements of web
advertising such as interactivity, navigation, and organization of information.
127