wtchang_Project_3_Exercise_1

Hello Sour Sally! | http://www.hellosoursally.com/

Hello Sour Sally is an interactive flash site where you play Sally, a hand-drawn little girl in a fantasy world of frozen yogurt, sock monkeys and flying elephants. It showcases a lot of visual elements that inspire the user to stay and interact within the game. The goal of the site is to showcase Sour Sally US Premium Non-Fat Frozen Yogurt (aka Fro-Yo), as well as the plethora of toppings they have available. It also encourages people to sign up for a Sour Sally Lovers card, most likely to encourage brand loyalty.

The site utilizes a lot of pencil illustrations and stylized interactive imagery. To match the overall aesthetic, the site uses a stylized serifed font made to look hand-drawn as well. the body copy uses a transitional serifed typeface to match. The site combines both structured text (that uses a grid) with speech bubble text that has no clear baseline. This successfully generate interest from the user, as it helps to integrate the photographic images of the product with the hand-drawn aesthetic of the interface. The “homepage” follows a stylized 2D platform game format, which then allows a box to pop up in the middle of the page that depicts the main content of the site. The interactions are fun and interesting to explore.

Wonderwall | http://wonder-wall.com/

The site presents many of the projects that Wonderwall has worked on. An interior design firm run by Masamichi Katayama, the website acts as a portfolio for his company. The front page consists of a brief background of the firm, navigation and a fluid grid structure. The goal of the site is to present his firm’s works in a way that is easy to use, appealing and representative of the physical 3D forms that the majority of their projects take. Wonderwall utilizes black and white type to tie the works together, and the banners over the project pictures range from a bright red-pink to orange, green and blue. When a picture is clicked, the colour of the box expands to fill the screen and you can find out more information about the product. Hierarchy is achieved through weight and size of type, as well as the employ of majuscule versus minuscule. This allows emphasis to be drawn to the title (larger size, heavier weight, majuscule), and then flow down to the smaller, sentence-case type.

At first glance, the grid structure at the top of the homepage looks very conventional and clean. However, the odd angles of the pictures in the fluid grid hint at its surprise feedback, expanding outwards into 3D forms when the mouse hovers over one of the project pictures. Although it may become annoying to use when examining projects for information rather than aesthetic value (i.e. searching for content), the interactions do reinforce the whole concept behind interior and product design, which is working on 3D form and aesthetics.

The way that the site transitions through image galleries is slightly unexpected. Rather than doing a flat transition such as with a standard lightbox, the entire background shifts as if the image is one side of a cube, and the cube is turning.