Web 2.0 Clever 1 Page Website Development with simple CMS for managing portfolio

  • Posted
  • Proposals 5
  • Remote
  • #19967
  • Archived
Stefanos C.Atif P.S S.Sanal M.Simy T. have already sent a proposal.
  • 0

Description

Experience Level: Expert
Below you will find the brief for developing a clever, but simple New Website. The general concept of this website is a scrolling one page design with links and interactions that will move the user around the site to various areas of key information. We also require a simple CMS system to be able to add new clients and portfolio when necessary. A detailed description of the page structure and interaction is documented below. This should be used in conjunction with the attached designs (UIs).

NOTE: URL to download images is
https://www.yousendit.com/download/THE1TXRWSWhEbUtGa1E9PQ

About Us
- The about section is a pure text area and will NOT need to be editable in the CMS
- The title will need to use Cufon to replicate the font

Landing segment (large cow image).
- When the user visits the website this is the area that will be anchored to at the start of the users journey. The space scene above will be hidden off the top of the page.
- The introductory text will need to be implemented using Cufon for S.E.O purposes but will NOT need to be editable in the CMS.
- Clicking on the About link will scroll the page up to the top of the page showing the about us section (this is to be a smooth transition, and we would like it to accelerate towards the linked content, and them gracefully slow down to stop at the content). All linked content must always stop at the top of the page.
- Clicking on the contact link will scroll the user down to the very bottom of the site where they will find the contact form (this is to be animated as above).
- On the Some of our Clients wooden sign, we will need the ability to add a thumb image when a new client is added via the CMS, as well as a brief description of the client that slides out to the left of the sign on roll-over (please animate with a small bounce when it is extended all the way). Clicking on the thumbnail logo will slide the user down to the related piece of work.
- When more than 8 clients have been added to the website, pagination should appear on the board allowing the user to navigate through the various pages of clients in a carousel style. When the user gets to the end of the clients the next arrow is disabled so they can only go back this also applies to when the user is on the first slide they can not go back.

Client Portfolio (in the soil)
- This is the area of the site that will continue to grow as new clients are added. This can be achieved by adding a tiling soil image behind the client work example so the area appears to grow seamlessly.
- We require the ability to add a new client and work example as often as we like via a simple CMS system, which will include the ability to add:
> Client Title
> Thumbnail logo image for wooden sign
> brief description of the client for the wooden sign slide out
> Large and small thumb images of the work which is displayed in the mini gallery to the left of
the content
> Text content via WYSIWIG editor where we can format text, add bullets and links to websites.
- When the user rolls over the thumbnail of the image, the large image should be displayed in the area above the thumbs, a rollover state should be added like the one shown in the U.I
- the About and Contact links should always be shown on each client piece and will slide the user to the relevant area of the site
- clicking on the up arrow will move the user up one piece of work, and when clicking on the down arrow will slide the user down one piece of work. The selected work will always be anchored to the top of the page.

Contact Us
- This is a standard contact form including a CAPTCHA form with the facility to load a new CAPTCHA form and read out the CAPTCHA for visually impaired users.
- Clicking on the terms & conditions link will bring up a simple Colorbox pop up window above the main page showing the companies terms and conditions. This will be static and not required to be edited in the CMS.
- A custom type of form validation has been designed where the user is prompted with a friendly message that slides from the right of the page (being pulled out by a mole) and also highlights the empty field drawing the users attention to the error
- Clicking on the "get directions" image will bring up a map pop up (Colorbox) with the ability to "get directions" using the google maps functionality.

General Site comments
- We are keen to leverage the power of Web 2.0 and AJAX to maximize the user experience. This is going to be increasingly important due to the size of the page. We do not want the site loading performance to be affected (by the combined filesize of the site). It should load each of the sections one after another and use an animated preloader gif as it is loading each section. The order of loading should be as follows. Landing page, About, Portfolio (client by client), Contact Us.
- This site should be anchored to the right of the users browser window and the background should seamlessly tile across to fill the width of the browser.
- Google analytics will need to be added to this site for tracking purposes

Additional development (please quote each item separately)

- Twitter integration. We would like to animate in a flying Twitter feed from our account. It will take the form of the Twitter bird in a flying saucer. We dont want it to be associated with any area of the site, but be overlayed to operate independently. We want it to fly into the screen after a predefined time (TBC), and show our latest tweet. The user will have the option to reply, retweet, follow or close. Closing the twitter feed will make the flying saucer fly off.
- Animate the satellite in the space area to rotate around the moon
- Add flashing lights to the UFO's
- Animate the cows eyes to blink and for him to shake his head
- Animate a small fly that flys around the cow landing on his nose (making him go cross eyed) and then flies off again following the users mouse, if they look at the about us section the fly is shot by the UFO with a laser beam
- Animate the Moles eyes on the contact form validation.
- Add smoke coming out of the molten lava at the bottom of the page and rising up just to below the contact form.

We would prefer the development to be done using .NET, SQL Server and to XHTML Transitional. We will be hosting the site also, and will need you to get it set-up.

If you have any questions please contact through the clarification board.

Thanks.

Clarification Board

    There are no clarification messages.