FV: Crazy 8s

The crazy 8s, Googles’ method of wireframing its’ designs is what I used with this project.

Here are the two crazy 8’s I did.

The homepage;

Customising the frog;

Breaking down what the different sections do;

The homepage section is the most important as it where the user will be greeted with content. This page should define the look and feel of the rest of the site, so therefore should reflect all of my research thus far.

HOMEPAGE

HOMEPAGE 1 (above): This homepage sets out the view of the world map for the user to select certain countries that they can visit, this homepage has an icon in the top which contains the profile data of the user. Additional links can be added along the top of this design.

HOMEPAGE 2 (above): This homepage has a much more defined structure as it lists the flags in a grid view for the user but maintains large menu along the top which can contain user data and additional links.

HOMEPAGE 3 (above): This homepage takes the setting of a frogs natural habitat, a pond in which it would live. The frog can sit atop lily pads while signs in the bakcground contain the navigation of the site, and addition content.

HOMEPAGE 4 (above): This homepage is similar to the 3rd one but instead it offers a much more zoomed in version of the frog that allows for a top navigation.

HOMEPAGE 5 (above): This homepage is a lot cleaner, with a black bakcground and frog resting on a branch, it means that the navigation can become the center of attention for the user.

HOMEPAGE 6 (above): This homepage is like homepage 4 but is again zoomed in more. The main difference with this one is that the content portrayed behind the frog can change in a more 3d enviroment, making the homepage much more interactive.

HOMEPAGE 7 (above): This homepage is a standout design where the page is an intereactive game while it also serves as the function of the main menu too. It gives a new breathe of life to something that is otherwise potentially boring for my target audience.

HOMEPAGE 8 (above): This homepage is very simple as it portrays the frog sitting on a frog in a pond, the menu is tucked away in a side navigation, to allow the homepage just be the main visual of the site.

CUSTOMISING THE FROG

CUSTOMISING THE FROG 1 (above): This frog customisation page features the frog on his lily pad with the customisable items kept in a fixed sidebar that the user can scroll through.

CUSTOMISING THE FROG 2 (above): This frog customisation page features much more importance on the character and how it looks with the items, in this version the user can look the the catalog and select items they want to wear.

CUSTOMISING THE FROG 3 (above): This frog customisation page is like the second where it focuses on the character but this time instead of selecting a catalog to look through the user is presented with the flags and the items categorised by their country.

CUSTOMISING THE FROG 4 (above): This frog customisation page puts a lot more attention on the specific items being changed as it zooms on the relevant area of the frog of which the item of clothing is being chamnged. As the user browses the items the flag in the corner changes to be relevant to the item.

CUSTOMISING THE FROG 5 (above): This frog customisation page allows the user a lot mor customisation as it allows them to drag and drop the specific items from a side store of the items.

CUSTOMISING THE FROG 6 (above): This frog customisation page puts much more importanceon the items as the frog is much smaller while the items are much bigger allowing the user to scroll through them.

CUSTOMISING THE FROG 7 (above): This frog customisation page allows for the frog and items to be seen equally,  the frog is shown in a spotlight while the items can be displayed by flag.

CUSTOMISING THE FROG 8 (above): This frog customisation page is the same as the one shown above with just the simple change of showing the frog on a lily pad rather than in a spotlight.

TESTING ON USERS

Once i had complied these designs the testing on the user was soon to begin, what I doscovered was the following;

The homepages were all relevant to the design so picking one was difficult but the homepage being a world map was most popular as it was highly visual and relevant.

The audience thought it would be too much choice to select a country at this section, so here the user should choose just the contininent, then choose the country they wish to visit within that continent. This is done using the two screens above.

The next wireframe to be chosen by the target audience was the 5th customisation screen;

The reason for this as it looks like a really simple layout which is easy to use, with a drag and drop ability for the user.

Other wireframes were less important and relied so heavily on the digital artwork that it made more sense to create digital wireframes, these can be seen here for the digital experience mockup.

 

Advertisement

Current interactive experiences

I am creating an interactive experience online for the user too learn more about the lesser known facts about war. To help me in the process of creating this I am going to research and try to understand how to best capture the user within an interactive site. Parallax scrolling is what we have been told to focus on so I will be looking for mainly interactive parallax scrolling sites but I will also look at others.

http://www.thisisnowexhibition.com is a great example of parallax scrolling being used for a an exhibition website.  It uses images with a flat colour overlay to create a texture on which text is placed upon. The texts itself is kept to a minimum and maximises the potential effect white space can have,  this creates intrigue into the content. There is a section at the bottom of the page where you can select the different designers so that you can see you can see one of their pieces of work and the option to buy it. Again this causes the user to want to see the exhibition so they can see more of the art. This is almost what is required for my brief for creating a interactive user experience, and a very good inspiration for me to start my research.

http://cyclemon.com This website is making good use of modern design techniques and that’s what makes it stand out the most. Flat colours, parallax scrolling make it simple enough to use, there are different sections which all have different bikes and colour scheme. The purpose of the site is to actually sell the artwork which they feature on the site, and this isn’t actually obvious when you are looking at the homepage, it’s only when you click on the shop i con you realise they’re for purchase.

http://www.beatboxacademy.ca/ Is a brilliant sales site for basically a box of stuff to help you learn beatboxing. The entire site can be navigated with the keyboard as it is also parallax scrolling. It’s main interactive feature is the one which you are greeted with as soon as you land on the site, a virtual set of beatbox noises which are linked up to an image of the instrument they represent and they can be clicked on or there is also a keyboard button that represents them. The target audience would be captured by this experience because as a music lover they would be able make the beats themselves with the keyboard and then if they are sold can go and buy the DVD.

http://graphicnovel-hybrid4.peugeot.com/start.html Is another excellent site that tells a story to it’s users with video, sound and parallax scrolling. Story makes the daily lives of many much more interesting finishing at the office and driving home, but instead it’s a spy mission to steal some documents from an office and get home safely.  It’s a completely immersive experience that allows the user to actually get lost in a story rather then just viewing the webpage, it’s a clever sales technique that helps to connect emotions with a product which is what Sigmund Freud started back in the 50’s.