I've been doing a load of work on the website and with Simon's help we have come up with what should be our final design, ready to place into After effects to begin production of the video. This is an image of the final artboard and the following post will run though a few of the different pages on the single page site and what they do as you can see the site follows the four colour code of the four Pledges that users can make to the campaign. This is the central aim of the site, to accept the pledges, send out the Priority Pack and display data about what other pledger's are doing. As I have pointed out before this is the main aim, to get people to realised that they are not alone, and that there efforts are not totally in vain.
This is the landing page or the home page, where the familiar graphic of the halftone earth this displayed with the four pledge icons overlay. It also greets users to the site and summerises the aims of the campaign.
To the right of the page is a faint impression of the icons again, when we put this into after effects to develop the animation these will be accompanied by the priority earth logo and will be fixed to the page. Clicking here will return the user to the homepage. I have also included a simple scroll bar, this will be edited on a different layer with it comes to making the animation so that it moves independently from the page for a realistic effect.
This is the second page on the site, labelled Manifesto. Now this is not truly how the page will look in action as this is just a still image. In the animation and on the real site the Navigation bar will be fixed in position and follow the user down the page on the left hand side, which is empty in this image. The manifesto page simply reads off the manifesto of the campaign, colour coded to whichever pledge it is related too. We have also added these little headers as the users are navigated down the single page site to remind them where they are but also to introduce each new section.
The next page 'pledge' is the largest and starts with an introduction to the pledge system, explaining what will happen when you pledge and what it means. This is an enlarged image of the page which follows...
This is the first half of the pledge page, once the readers have decided what they want to pledge towards they can...
... Sign up to Priority: Earth to receive a printed or web version of the Priority Pack and also enter their pledges into the world map database.
A close up image of the singing up page and some icons on the pledge page.
The next page is the 'Maps' page, this is where users can come and find out what other people have pledged to help with on a global scale. The aim of this page is to increase that sense of a global community working towards an actual outcome rather than a single hippie just trudging on against everyone else. In the animation we would also like to show off the other tabs on this page and display more information when you roll over specific regions.
The final page of the site is the 'About' sections which handles a post word and the contact information for the website.
As is customary at the very bottom of the page is a site-map for navigation back up the page, however remember that in the final edition of the site the nav bar will also be following the viewer down the page also to the left.
Before we settled on the four vertical pledge segments seen on the pledge page, (with the 'Sign' button at the bottom) we messed around with some other ways to sign up to pledges, this was one of the options where the user would select from a wheel which would be gradually coloured in as they selected more pledges. This version died for multiple reasons, firstly it couldn't fit all the information on the page, then it wasn't especially scalable. Its also not very clear that the user is actually signing up for anything and finally it doesn't really have a very satisfying check box system like the one we went for in the end.
No comments:
Post a Comment