Disney Fantasyland Flash Website

This is a Flash site which is up to the highest standard. Even down to the last detail, from smoke in chimneys and small birds flying across the screen, this is a great site to be inspired by and to take note from.
The interactivity is great, with a rush of purple mist flowing over your screen when you rollover the title banner being a highlight. With an array of subtle ambient background sounds, interesting use of video to show the story and a change in scenery, the interface gets more fun as you begin to explore.
Although this has little to do with my project, it shows the potential of Flash and how it can be suited to sites such as this compared to HTML. I would have to say that the only downside to this site is the length of loading time, however that is being highly critical. It certainly is worth the wait for admirable rollovers and beautiful, vivid visuals and colours.

David Mach - Research/Inspiration

After looking into putting images into a seperate background image, my attention was drawn to the way David Mach creates his pieces.
Obviously his pieces are done as collage/art, however its interesting how all of the images aren't meant to properly sit nicely in the scene. The aim is to show it is intentionally done to make the piece more interesting rather than to make it look polished and professional.
The quirky, abstract work he has produced is very playful and you can spend a long time looking at different parts of the piece as there is so much going on - this is a part of it I really enjoyed.

Here is some examples of his work that I have been studying.

Interesting Interaction

I found a site with a selection of playful, interactive code. These are some of the pieces I found interesting and inspiring. http://d3js.org/

http://bl.ocks.org/mbostock/1062544  

As you move the mouse over the piece, there is a constant stream of colourful circles which follow you. They gradually fade out, meaning you can try to make interesting and playful shapes.

http://mbostock.github.com/d3/talk/20111018/collision.html

The particles in this piece are repellent to the mouse, meaning the user can create holes and play with the direction of the mass colourful particles.

http://www.koalastothemax.com/

The site starts as just a solitary circle, however as you rollover the circle, it breaks into four seperate cirlces. This is continuously happens until it begins to produce an image of a koala.

Parallax Scrolling Research/Examples

http://whiteboard.is/

Whiteboard has all information displayed on one page, and you navigate by scrolling down the interface. The page is broken down by plain background colours and then images, which I feel works well.

http://fk-agency.com/

This website has a great interactive interface. You are able to click a button to go down to the level of information you want, before being able to drag and scroll from left to right to find the information.

The colour scheme used is great, and there are mini animations for a lot of the visuals, which animate with a mouse rollover.

This interface is of a high standard, and has really inspired me to create a good looking parallax interface.




http://www.head2heart.us/

This interface shows how buttons can be used to move through the site. If you click on an arrow, you are automatically taken through the parallax to the chosen part of information. I found this site to be creative and fun, which I think my interface will have to take on board considering the theme I am doing.

Parallax Scrolling ActionScript 3

http://www.lextalkington.com/blog/2009/12/simple-as3-parallax-system-engine/

Value Your Friends Website Interface

I found this on the FWA and it is a really nicely designed site and interface. The visuals, which show locations and animals, is what I am looking to create for my user interface on African Wildlife. The visuals are crisp and defined with a very simple backdrop location. 

You are able to add animals to the location, sit nicely in the scene - something which I have struggled to create when producing my user interface. I am going to look into creating depth within my project to make it look more professional, like this site has produced.

I am also going to take inspiration from the neat transitions between pages, the crisp buttons and rollovers and the typography used. The interface feels very contemporary and modern, which I found very user friendly and enjoyable to use.

Research - CBeebies Game

Although this is aimed at a very young audience, I have found that it is similar to what I could create for my African Savanna Flash Interface. I have looked into creating an interactive savannah where it is possible to click on the animals to find out the information about them.

http://www.bbc.co.uk/cbeebies/andys-wild-adventures/games/andys-wild-adventures-game/

The images of animals, which were moving slightly, could be clicked on in order to find out small pieces of information about them - which was given in the bottom left screen. The movement was slightly crude - however for a child's game it did not matter.
The square around the animals told the user what they were clicking on - this acted like a camera lense which I liked.
There was also a range of sound effects and music which I have been planning to use in my project, which I think worked well to make the experience more fun and enjoyable.

Rollover Estudio AGraph

http://www.estudioagraph.com/eng.html

I was really drawn to this site's neat interface which used a rollover that I was planning to use in my African Graphic User Interface. The bottom information panel pops up when the user hovers the mouse at the bottom of the screen.

I have also realised that it is important to get the information text the correct size when producing this interface. The first design I have created did seem to have rather large text, so it may be a good idea to reconsider the sizes, once putting the site in a browser.

Rollover - Polar Gold & Column Five

http://www.polargold.de/#news

Polar Gold
This site has great rollovers for its navigation. When the mouse rolls over each button, a mix of colours  wave inside the typography. Even after the mouse is not over the button, a flash of colours wave through all of the typography. It is really subtle and sometimes can go unnoticed  but this makes it very intriguing for the user - who tries to spot it each time.

http://columnfivemedia.com/

Column Five

Button rollovers here are very creative and interesting. Each have a mini graphic which moves when the mouse rollovers it. They are very fun and playful, which I really found made the interaction more enjoyable for the user.

Impressive Graphic User Interfaces

www.dontclick.it

This is an interesting website, which only allows you to open parts of the website by rolling over the buttons, rather than clicking. If you click, a fuzzy screen comes up.

www.morganstanley.com/matrixinfo
A very futuristic looking site, that gives the impression all information is hovering, as you navigate through the site.

Sagmeister and Walsh (http://www.sagmeisterwalsh.com/)
A very professional site, where users can navigate and click buttons, which look to be on the floor of the office. It is a great idea to use real life, parts of images as buttons - for the user to uncover.

www.mohsensamiee.ir

A small, but unique interface, which gives users a chance to move and rotate everything on the desk. All information is shown in the notebook on screen and the IPhone can be used to contact the owner of the site. A great use of interactivity all round.

Graphic User Interface Research

The brief set is to create a User Interface for a theme of your choice. I have chosen to design an Interface on information on Africa - perhaps Endangered Species or the native Wildlife.

National Geographic Interactive Whale

African Wildlife Foundation

Natural History Museum Fernao Cardim

WWF Website

WWF Ipad App