The main body of information upon the website will be animated; to ensure the website is clear and legible the layout is extremely simple. Animating the type in an informed way makes the website engaging and appealing.
The welcome page and all rules/small amounts of text will be animated onto the website as seen above - using a typewriter effect. This is informed by the typewriter written LGBT newsletters/zines observed during my primary research - FAN.
I also considered producing a 'warped' effect on the type to represent the unusual uses of typography within the magazines researched. But I felt this was un-nescierily overcomplicating things and the animation was appropriate as it is.
My final title page, does not use the typewriter effect (but this will still be used for the rules). Instead I produced a design more alike that of the physical manifesto. I felt although the website needed to be simpler/more legible due to click-through rates and ease of use that the aesthetic needed to be more similar.
The 'rules' individually will be typed onto the screen one by one allowing the user to fully take them in and agree to each. But the option to navigate (via the nav bar) to the full list of rules is also available. I wanted to make use of the publication design I previously produced and didn't use. From it I produced a 'virtual' publication hi-lighting the full set of rules within the manifesto plainly for people. Its an interactive and interesting way of holding the audiences attention.
My next animated consideration was due to the need for 'user experiance' design. Sometimes due to bad wifi connection (or other issues) websites can take a while to load between page transitions. I wanted each element of this to be considered for the most effective design strategy. I produced a simple loading animation; just to let the user know the website is still active and working its just taking its time. The animation is informed by the symbolic rainbow flag (iconic of the LGBT+ community); but in a monochrome blue.
The next animated page will be the introductions page, this will be typed on, then 3 optional tick boxes appear. The boxes allow the user to tick which creative sector they belong to; it lets the campaign know official statistics regarding the people who have signed the campaign in live time.
I experimented with different transitions to introduce each rule in creative and 'punk' ways. But the typewriter idea was the most informed and wouldn't overcomplicate things too much.
This is the typewriter animation in use for the first rule. As you can see its a quick and smooth on-screen transition. Its well informed, kinetic and instantly appealing in comparison to static websites. I felt this interactivity was important in making a serious topic seem approachable and friendly experiance; rather than a serious bunch of rules demanding to be read.
The second of the rules animated.
Third
Fourth
Fifth
This video shows the transition between the rule being typewritten onto the page and the information scrolling upwards to reveal the tick-box. The site will work so simply that literally ANYONE could navigate it successfully regardless of technological experiance. You simply click the tick box and it turns blue; once again this is an example of User experiance design as I considered how the visual would express to the audience that the website is being reactive to their clicks. Once the box has been ticked the entire page will once again scroll up, revealing the next rule.
Once all of the rules have been ticked/agreed to by the user the page will once again scroll down to reveal the signatures page (shown in this video). This page allows the user to fill in all their details & reason for signing to be published onto the website as a sign of their pledge to the world and LGBT+ community. This acts as mutual promotional benefit to both parties.
It will them scroll lastly to a further navigation page - with some suggested pages to navigate to after signing onto the manifesto. Those include - Why your signature matters (discussion into the cause, research and context behind the campaign & examples of good/bad LGBT inclusive advertising) , Merch store (selling the physical manifestos, t-shirts and badges - profits going to a relevant LGBT charity) and Previous signatures.
This example shows how the Why You Matter page will function - this layout/prototype will also be applied to the previous signatures page and any others added that include a large body of text.
Due to the large amount of body copy used on this page using the typewriter transition animation would be too overcomplicated and overwhelming for the user. For this reason the pages will run on a simple scroll system - not part of the infinite scroll mother page shown in the wireframes.
Full run through - This video shows a full run through of how the mother page/infinate scroll page of the website - shows how all the animations and page transitions will interact with the user and onenother.
No comments:
Post a Comment