Before
I begin designing my banner I must first conduct research into other banners
and in particular “Charity Banners” . I
will clearly explain various elements of an ad such as the use of font and why
it’s positioned where it is as well as the use of images and dynamic effects. I will also explain the key traits which make
the website appeal to a particular audience, these can be traits such as color
scheme and font.
In this interactive banner it basically
consists of a still image of people playing in a park with casual clothes on
but once the user scrolls the mouse cursor over the banner a phone follows the
path of your mouse cursor transforming the image through the view finder.
This kind of banner would appeal to
people who are interested in sportswear so the ad has a clearly defined target audience. The banner also has some cool mini
effects for example adding a scoreboard above the goalie when you scroll over him, this reminds me of an interactive installation created by Chris o Shea called "Out of bounds" in which a user moves a torch around in front of a projection which enables them to see through a virtual wall.
The
utilization of that particular mechanic in the banner would lure in the
audience as it requires interactivity and isn't like a convention ad.
I've
also done some research into micro-sites which are basically a mini webpage
which opens after you interact with a banner. The website “Socialvibe” has loads of micro-sites which have
mini-questionnaires for users to input their opinions on particular things.
simonmainwaring. (2011). SocialVibe: How advertising and social media can change the world. Available: http://simonmainwaring.com/social-networking/socialvibe-how-advertising-and-social-media-can-change-the-world/. Last accessed 17th March 2014.
Here
are some examples:
Some of the key traits of this micro-site
are the huge logo which consumes about half the page. This is
so that the audience knows what is being advertised. The page also contains a
video which is basically a promotional trailer.
The micro-site also contains some interactivity in the way of a
questionnaire.
One of the initial ideas I had for this project was to have
a micro-site expand from a banner, so researching key traits of a micro-site
was very useful.
My initial banner would have a design
very similar to this banner. The banner would consist of a minimal amount of
text as well as a button which would launch the larger micro-site. The banner
would utilize a dynamic transition to the micro-site as well as some moving
objects. The micro-site will need a
pre-loader as the microsite would have a video and large files such as videos and high resoultion pictures normally slow down a webpage significantly or become unresponsive in some browsers.
In another banner which I found the banner consist of a looping
video of someone washing a car but once the user scrolls over the banner a hand
picks up the car, the trigger for this video is a rollover action by the user. I don’t think I’ll use a rollover action for
my animation as my banner will launch a mini webpage with its own interface,
therefore if my webpage launched with a rollover function it would get rather
annoying to the user. A simple “on-hit” function would be a better trigger as
an “on-hit” function which requires a user’s input won’t spam the user
unnecessarily.
I took a lot of inspiration from the old Socialvibe interface which
featured various charity’s here’s an image of the “Whaleman Foundation” page
Research into Construction and Coding in Flash
From the tutorial shown in the following link I’ve learnt the basics of
creating a flash banner in flash.
The tutorial explains things such as creating an invisible
buttons which when clicked on would launch an external site. This is most
common way of making a flash ad banner which basically involves making the
whole interface of the banner a button. However I personally think that, a
flash button which only uses that method and has no dynamic visual effects is
very boring and therefore will likely be ignored by browsing customers. With
this in mind I will try to make my banner capture the eye of as many users as possible.
Ways to Capture my Audience
Some of the ways in which I can make my banner appeal to as many people as
possible Is by implementing things such as sounds, animations and good use of
fonts.
Adding sounds effects to components such as the buttons would likely
capture the attention of users which are panning their mouse cursor around the
page. Another way in which you can capture your audience is by having a clear
distinct logo for your banner, if the banner looks professional it is more
likely to be interacted with by the user as there are many banners on the
internet which are there to con users into revealing personal details such as
their email address ect.
It’s important that the graphics, fonts and color scheme of you banner
follows the same particular theme throughout as this is important to capture
your target audience as well as maintain a professional persona. If you use
bright vibrant colors throughout your banner this wouldn’t really appeal to
older people.
As my banner is slightly different from traditional banners because my
banner is for a charity so I need to influence the audience on an emotional
level.
Human Computer Interaction: Use of color
Source for information: http://web.cs.wpi.edu/~dcb/courses/CS3041/Color-guidelines.html
The overuse of color may result in the banner being harder to understand as
color is essentially information and the overuse of color can cause confusion.
I would initially design my banner with no color and focus primarily on the
navigation and functionality and add color at the end to add effect.
I browsed youtube for tutorials into how to make flash banners and one of
the tutorials which I watched was how to add HTML code to swf files. The reason
I did this tutorial was because it’s important that I know how to scale change
various parts of the swf when it’s viewed in a browser.
The tutorial which I completed enabled masked parts of a banner to remain
hidden in a browser until it is rolled over;
Here is the link to the tutorial: http://www.youtube.com/watch?v=_xWv8kBZsm0&list=UUHEJHNSWjlNIlwbyso6oeNQ&index=22
This was a very useful tutorial for me as I’m planning on having my banner
expand into a full page interface or micro-site. I will keep the HTML file in
my project file and implement it into my finished banner. For more detailed explanation on the
development of this tutorial please refer to the development section in this
document.
I also conducted some research into flash transitions as my flash banner
will dynamically change into a different state. Some of the best transitions
can be found in flash galleries so I browsed the internet for sample code for
these galleries so that I can implement such transitions in to my banner.
In the gallery displayed in this link it has 18 different transition
effects which it randomly makes when changing image.
No comments:
Post a Comment