Share this Job

Job Details

Category:IT/Web/Programming > Web Programming

ID:19967

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

Location:Anywhere

Job Description

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.

Job Budget

Type:Fixed Price

Budget:£500 - £750 (Approx $784 - $1,176)

Additional Information

Attached Files: None

Bidding ends:Bidding Closed

Job Posted:11/03/2010 17:42

Bidding activity on this Job

Bids:7

Who has Bid:

Clarification Board

S. N. on 12/03/2010 10:41
We envisage this site utilising the power of JQuery, so please only bid if you can show examples of using this technology in your portfolio.

G. R. on 12/03/2010 11:54
Dear Simon,

Love the graphic design. Nice detailed spec too.

Some of the functionality you have requested could be problematic to implement to a high level of quality across all browsers. Could you be specific about the browsers you'd like to see this implemented in? I'm hoping your response would be Firefox 3, IE 8 and Safari 4.

I'm particularly concerned about dynamic enlargement of the page via AJAX. This in combination with Cufon may well result in some unsightly scrolling artifacts.

Would you consider a more conventional navigation layout? I understand this would compromise your beautiful design. A conventional design would reduce cost and may be a little bit easier for your less web savvy customers to understand. It is also more likely to produce a good quality result. It could still have a little bit of AJAX / JQuery sprinkled on top to give it some graphical oomph.

Regards Giles.

Reply from Client

S. N. on 12/03/2010 12:17
Giles - thanks for your message.

Browsers to be IE7+, FF3+, Safari 4, and Chrome. For people that enter the site on a lower browser than these - we need to display them a user friendly message asking them to upgrade - with direct links off to the main browsers. I do not really want to compromise the design, interaction and overall user experience i am striving to achieve - and want to showcase creative design simplicity, with modern technical WOW (that's the bit i need you for).

Use of JQuery is essential to get the animated transition effects - and clever web2.0 loading is required behind the scenes to load the page in a way that doesn't impact the initial user experience when the landing intro page is displayed. I am happy to take your advice on impact of Cufon once built - to see what impact this has. This is an exciting (almost experimental website) - that will be a huge addition to someone's portfolio if they can achieve it for me - plus lots more development work i have in the pipeline.

I will supply all assets as PSD - and will also slice the images up to your requirements.

S. N. on 12/03/2010 12:21
A good resource of excellent 1 page websites can be seen at http://www.designbombs.com/category/one-page-websites/

S. S. on 23/03/2010 06:48
Dear Simon,

The link to the design files have been expired, can you reload those.

Thanks,
Subhasit

Reply from Client

S. N. on 23/03/2010 08:52
https://www.yousendit.com/download/THE3YUlqQ0NreER2Wmc9PQ

S. N. on 23/03/2010 08:51
New link to Designs can be found at https://www.yousendit.com/download/THE3YUlqQ0NreER2Wmc9PQ

(as other link expired)

S. S. on 25/03/2010 09:01
Thanks for providing the new link.

Please check my bid for other details.

Thanks,
Subhasit