KELLY STARK-VAUGHAN
<h1>Project 2: Fusion Evolution</h1>

Project 2: Fusion Evolution

Landing page with video banner

About the project

This was a month long project to create a landing page with HTML and CSS, and include video banner, using Adobe After Effects. The page would also include call to action buttons and a form. The site I chose to design was for Fusion Evolution, an annual belly dance event with world-renowned performers/instructors, classes and shows. The mood was to be dramatic, exciting, and expressive, as it is a dance and music event. It should draw the audience with little tastes of what the event will entail.  

The Project

This was a month-long project for Web 180 at Harper college, to create a one-page HTML page for promotional purposes, including a form, animated submit button, video banner, and 3 CTAs. My 'client' was for Blue Lotus and the audience is the participants of the event.

The Approach:

I began with the proposal(see link) then followed by:

  • The Wireframes
  • The UI exploration
  • The storyboards
  • The video banner
  • The HTML/CSS page
  • Adding compressed video to site banner

Informal Proposal

Landing Page Concepts

The objective was to present a series of concepts of the landing page to the class for critique.

Each one had the video banner header, but with variations in images, and color placement. I loved the one with the red at the bottom but landed on the version with the band of color that separated the top and bottom portions.

The Story Board

First, I chose the theme of the video banner. Since the main events at the festival are shows, I decided to use a metaphor of a curtain being opened to reveal the dancers, whose names slid in and out of the 'stage' area.

I created a series of frame ideas in Adobe Photoshop, which I used to create my storyboard.

The story board contained nine frames for what ended up being about a 10 second video.

The Story Board Components:
  • The timeline
  • Key scenes
  • Timing per scene
  • Transitions
  • Script

Final Learnings

Working on this project was a great experience, in that I used HTML, CSS, and Adobe Illustrator, Photoshop and After Effects to complete the assignment. It was also great to learn about promotional landing pages and their purpose.

In the end, I think I created a landing page that is both an improvement and compatible with the Fusionevolution.com site. While the video was a real challenge, in terms of getting the timing correct, I still really enjoyed this and learned a lot. I hope to continue using multimedia for sites in the future.

View Landing Page

Site Links

Contact
Home
Projects
About

About

Creative multi-faceted designer with experience in textile design, product development, and web design.