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.