Design, CSS and HTML for a video editor

We are looking for a designer to create a fresh and easy to operate design for our video editor.

AudioImager is a video creation tool. Its basic operations are as follows

1. When AudioImager loads the audio track loads with it.

2. It has two time lines, audio timeline and image timeline.

3. The user can click the play button and start typing tags.

4. AudioImager automatically retrieves images for the user entered tags and add these images to the image timeline.

5. There is a “more image” panel which shows more images for the given tag.

6. It has a video preview panel which shows a preview of the video.

7. It has play/pause, zoom in, zoom out, change tag and publish buttons.

8. Zoom in and Zoom out buttons change the size of the Audio and Image timelines.

9. This version operates as expected in Chrome, Firefox browsers.

Expected User Interface of the Next Version

Given below is a detailed description of the requirements for the new version. Note that you cannot use flash for the implementation.

Lay out

The three initial areas (preview, more images and timeline) need to fit on to the available screen space automatically so that space is used optimally and no scrolling is required. Currently there is a lot of unused space in these three areas. Therefore it is necessary re-design the space allocation to these three areas.

It needs to be cross browser compatible.

The usability should be self evident. That means the layout and design should be very simple and what should be done needs to be easily understood to the user.

The language should be modifiable, so that there should be an additional language button which changes the language.

The help area should initially provide a link to where we’ve hosted help videos (in youtube). Initially when the application loads we can embed the youtube help video in to the more images area.

Color Theme

We prefer a lighter color theme which has more white and blue color combinations without borders. Current version without borders is shown in figure 3. We prefer a similar borderless white color theme.

You have the freedom to select a set of light color themes for our approval.

Look and Feel of the timelines

In addition to current timelines (image and audio) we need a new timeline above all as shown in figure 4. This timeline should show time codes. You can place it right above the image timeline and the gap between time codes should be 0.20 seconds, which is the resolution of our video.

Right now during mouse hover over the images in the image timeline the tag entering text box will aline right above it (Figure 3). We also need to hightlight the user selected image by shadowing the rest of the images in the timeline as suggested in Figure 5.


Add meaningful icons to the buttons. These icons should be well known and self explanatory. For the button tooltip you can add the description for the button. Button colors should match with the color theme of the application.

You can see the current design here:

[url removed, login to view]

and the operating logic:

[url removed, login to view]

Skills: Graphic Design, User Interface / IA, Website Design

See more: zoom, zoom graphic, youtube need editor, youtube html 5, youtube com graphic designer, wp themes design, white space in graphic design, white space graphic design, where two lines cross, website icons png, website design look and feel, website designer tool, we are looking for a designer, video on creation, video editor graphic designer, tooltip html 5, timeline of graphic design, the language of graphic design, the language of design, the icons codes, text for typing, space in graphic design, space icons, space graphic designer, simple design tool

About the Employer:
( 0 reviews ) Aalto, Finland

Project ID: #1098429