Illustration with simple Flash animation for webpage header

Winner
Contest winning design

Want to win a job like this?

This customer received 3 banner ad designs from 1 designers. They chose this banner ad design from neboica as the winning design.

Join for free Find Design Jobs

  • Closed - Design Selected
  • Guaranteed

Banner Ad Design Brief

Context:

Our website offers a wide range of magazines covering ‘hobby’ and specialist-interest subjects – for example:- cars, motorbikes, railways, aviation, cycling, boating, modelling, sports, etc. We require a webpage header image to convey this fact, and show a selection of actual magazine covers in the form of a simple slideshow effect.


Outline of design required:

The design required will take the form of an illustration that will act as a background to our existing avatar character. The avatar will be centrally placed in the foreground of the image, and is holding a magazine up towards the viewer; consequently, this is where the viewer’s attention should be focused - the background illustration should be drawn in a way that supports and complements the avatar character in the foreground, rather than distracting attention away from it.

The avatar figure itself cannot be altered or re-drawn in any way, but it’s position and size can be adjusted as necessary (note: in the example image, the avatar has a white outline and a drop-shadow – both these elements can be removed if required). Obviously the style of illustration used for the background image should match that of the avatar character. More generally, the whole image should convey a sense of ‘fun’, and be seen as personable and approachable. The style should be clean, simple and colourful. Colours should be limited in number and not too strong or bold. Block colours would be preferable to fades and shading.

I have created an image myself which shows the type of scenario I envisage. In this case the background illustration shows the avatar character’s ‘hobby shed’, which is surrounded by evidence of various different hobbies. IMPORTANT NOTE: this is meant to be an example only – please do not simply recreate this image. See attached image. “Designcrowd_Example_Image.jpg”. Also see attached Photoshop file of Avatar image itself: "Designcrowd_Avatar.psd"


Text:

The text shown in the example image is there to indicate positioning only; ie. the ‘top left’ and ‘top right’ areas of the background illustration should have a plain, light-coloured area upon which text can be later added. The text itself could be part of the image if absolutely necessary, but preferably would be added by means of Flash/XML or as an HTML layer, in order to be editable.


Flash component:

There are two Flash components envisaged – the first is ‘essential’ whist the second is ‘desirable’ only.


Essential Flash Component - ‘Slideshow’:
As will be seen in the example image, the avatar is shown holding a red rectangle towards the viewer. This rectangle should be replaced by images of magazine covers, each of which appears in turn, with a transition effect of some sort between them. Included in this brief are some example magazine cover images that can be used for testing purposes only – the images used in the final version should be controllable by us in one of two ways:

- Flash component displays a sequence of say 20 images defined in an XML file, which we can edit. After the last image the sequence starts again. Or:
- Flash component load images from a defined folder location on our web server; images chosen at random, or by sequential filenames. We can control which images appear by uploading them to the web folder

The ‘transition’ between images can be chosen by the designer. It could be as simple as a fade-out of the top image, to reveal the next image in the sequence. A more sophisticated transition would be the top image ‘peeling forward and falling down’ in some way, disappearing from view as it drops. Note that the original images to be used are currently around 175 x 135 pixels in size, but could be resized to a new fixed size if required. See attached images: “Designcrowd_Example_Cover_01.jpg” and “Designcrowd_Example_Cover_02.jpg”. More similar images are available here: http://www.payhost.net/Designcrowd/Designcrowd_Example_Cover_03.jpg (up to '_20.jpg')


Desirable Flash component – ‘Background Animation’ – This would be entirely at the designer’s discretion, and might involve moving clouds, aircraft / birds / insects flying about etc. This animation should be subtle and minimal, and we do not require to be able to control or edit this component. An example of the sort of ‘subtle’ animation required is shown in this stock Flash component: http://activeden.net/item/tree-summer/86210


Technical Notes:

The example image is shown here in the context of the webpage on which it will be used; actual image size required is 950 x 182px, background is white. Edges of image could ‘fade away’ if desired, rather than having a hard edge as shown in the example. See previous notes about text and avatar elements.

In this example image I have shown some ‘hobby’ items – gardening equipment, football, surfboard, model aircraft, car wheels, aircraft propeller, old railway sign, bicycle. These are examples only – please use your own ideas.


Possible Future work:

If this project is successful I may extend the concept to other pages of the website, which will require different background images for the avatar character, depending upon the context of that page.

Target Market(s)

Target customers are mostly male, all ages but predominantly older. 'Hobby' and 'Enthusiast' types. Often quite traditional - generally NOT web-savvy / design-conscious / early-adopter types.


Look and feel

Each slider illustrates characteristics of the customer's brand and the style your logo design should communicate.

Elegant
Bold
Playful
Serious
Traditional
Modern
Personable
Professional
Feminine
Masculine
Colorful
Conservative
Economical
Upmarket

Requirements
Must have
  • Design must match style of existing avatar character
Nice to have
  • Slick use of Flash
Should not have
  • Design should be an cartoon-type illustration - not photography based

Files
Download all files - 2.3 MB
Payments
1st place
£130
Participation payments x 2
£15
Total
£160

Project Deadline
20 Mar 2011 14:00:00 UTC
Language