~ Pink Manifesto - Website wireframes ~

Creating wireframes is all about simplicity in design to ensure the website runs as smoothly as possible. Considering my website will contain a fair amount of animation and kinetic design the generally working of the website needs to be all the more simple yet effective. 

I did some initial sketches of what I felt were the most simple yet editable/adaptable wireframe layouts. The more simplistic the more easier they will be to edit according to different content being added to the site/updates as the campaign develops.

From the sketches I developed digital designs that my web prototypes can then follow.

Simple title page/rule page - centrally aligned type with sidebar. All type that uses this simple type on wireframe will feature animation - type will be animated on using a typewriter effect - simplicity is key not to overcomplicate things.

Due to the manifesto being a set of rules you need to agree too - I decided to set up a tick box system. Once the user/reader ticks the box to agree to a rule the page will automatically scroll downwards to the next rule and so on.

The next wireframe will be for a scroll/information page. Different from the other pages as due to large amounts of text being present the page will not be animated. Instead the page will be set up simply allowing the user to scroll through the information.

Lastly the navigation/shop/image layout this page is a simple, minimal and clearly navigable layout for all the pages with images and nav options. 

Most importantly is the mother wireframe which will hold all of the individual pages as part of an infinite scroll layout. Starting with the intro page, auto-scrolling via the ticking of boxes through the rules, down to the signature page and finally options to navigate to find out more info. The entire website will also feature a fixed navigation bar on the right hand side, so if someone wants to re-navigate half way through they can do so without backspacing. The nav bar will appear slimline until clicked on when it will slide out revealing the options.

The wireframes are an integral part of the web design process. While prototypes inform the web developers of how the website should look aesthetically; the wireframes are a simple effective way of translating how the website will function.