Exercise+Index

toc

A
[|AgencyNet] analysis here!

Ana Somnia []

Ana Somnia is an interactive experiment by Rostlaub which seems to be a personal project with no direct purpose. The site opens with a small girl trying to sleep and complaining that it s to bright to sleep. When the user covers the light sensor of the computer all of a sudden the sound track changes and the light shuts off and generative animations of the girls dreams begin to fill the screen and never ends. When exposed to light again the girl will wake up and the site will count the number of dreams the girl had and small details of the room will change. Because of the generative coding, every dream is completely unique. For what it’s task is, I feel that the line art and lack of colour suit it very well. I view this site as a perfect example of art direction and coding working as a team, as all the interactions are crucial to the story being told by the site and are not simply added fancy effects.

**B**
Bottle Bell Photography

**C**
[|Chanel]-- ... Website Analysis here InClassExercise [|Crobbo] [|CREATIF]

CREATIF is the portfolio site of a graphic/web design company based in France. I think this site is extremely successful because of its great visual effects as well as its navigational simplicity. The main goal of (most) design companies’ websites is to display their work, and I think this website accomplishes that in an extremely straightforward manner. Right from the homepage you are able to view all of their work, with just one click. This site is also very interactive and engaging for users (through special effects created in Flash). I think that the rollover effect they use to give users a preview of their work is an important element because it allows users to pick and choose what they wish to view. The only think I found confusing about this site was that it does not seem to contain any information about the company or the designers, (other than the brief contact information at the bottom of the page).

[|Carsonified] Carsonified is the website for the eponymous web design studio, although from looking at it you'd swear they did work for print. The site presents information about the team's projects, core values and the sort of things they do in general. By their rather tempting “Jobs” page, you can see that the website isn’t just for potential clients. The first thing that sets the site apart from usual web fare is its brilliant colours, and at the same time a restricted palette for each page. There is also a focus on the typography, which remains consistent throughout the site to tie its pages together. The type is friendly, and large enough to read easily. Nearly all of it is live, too. The type is supported by large and detailed illustrations of stuff (mostly scientific illustrations for some reason) which is a nice break from the web’s usual terseness when it comes to image elements. Content is organized within each topic in different ways on different pages – the pages with least content just have it listed vertically, with headers separating things, but the Team page has a set of links on the side. Curiously enough, the pages are very miserly when it comes to links, with the body text usually containing no links whatsoever. The interactions that remain are fairly conventional, but this in no way detracts from the website’s appeal. Any sort of bizarre methods of interaction would probably be wasted on this site. The site’s structure changes when you go to their projects and affiliates, a nice touch which makes sure the rich colour doesn’t overpower the showcased site.

**D**
Dan Kennedy Photography

[| Donnie Darko Movie Website]

The goal of the website isn't really clear. The goal seems to be purely interaction, engagement and entertainment, but based around the content of the movie. So then i guess the purpose is to further the movie and make it stick in the viewers mind as I believe this was also the promo site for the film. The content follows suit, its based on the movie but it isn't really meant to sort of educate or inform its purely to add a different dimension (a fairly mysterious and endearing one) to the film. The visual design is more like an abstract or artistic layout as opposed to a fairly gridded website, which reflects the content perfectly. Colour, typography, and composition work off the enigmatic and sort of intriguing respects of the content and are very out of the ordinary for web design. The content is rather sporatic and sometimes quite labyrinthine, but this is perfect because it causes the user to explore and engage with the site itself. The interactions are very unusual for web, rather innovative as well. It involves the user gathering information and codes from the site as well as knowledge of the movie which forces the navigator to really engage with the website. The whole website is a surprise really, very innovative and experimental, much like the movie.


 * [] -** Analysis

**E**
[|Emigre] Amazing type founder

[|ecodaZoo] The eco zoo take a closer look at the animals and help them live in a more environmentally way! analysis

Elmwood School

ednacional.com | analysis

[|Ed Fella] - Analysis

**F**
[|Francesco Bertelli] analysis here.

Francesco Bertelli The website features Francesco Bertelli, an Interactive Director's, portfolio. Pieces range from websites, interactive web pieces, mobile interfaces, and logo designs. His pieces are presented in a calendar like format, organizing each piece chronologically within his career timeline starting from 2001. The goal of the site is simply showcasing his work and variety of approaches to different client’s needs. As well as an overall grasp of the improvements made over the many years. The website is based on a solid grid divided into squares. Each square acting as a link to each series of his work. The colour pallet of the website is thoroughly unified, using a pale grey, white and a couple of shades of aqua. With the limited colours, the aqua stands out and is effective in highlighting certain elements on the site. For instance, each square that has been clicked on will diffrentiate itself from the rest with a thin “X” marked across it, similar to how you would mark the days on a calendar. The typography used is a thin courier face that is used in limited manners, indicating only the title and numeration of each link. While a short block of text accompanies each project, the emphasis is clearly placed on the visuals and portfolio pieces. Together the colours, type and composition all work together to create an interesting visual experience, while still being able to fade out when the emphasis is on the portfolio work. The content is structured through a very defined grid, but offers a very effortless flow from one element to the next. For instance, when selecting a square/link on the main page, the page will automatically opens a slideshow that positions itself to fit the entire page. It makes good use of the “fold” and blocks out any other distracting elements that may take away the experience from the slideshow. From here, the navigation is very simple with a “prev” and “next” link that guides you through the series of work and even the entire portfolio. A solid blue divider divides the slideshow from one project to the next. What works really well here is that the slideshow is placed in between the squares and therefore allows you to scroll up or down from it to quickly access the other links and pick and choose which pieces you’d like to view. Overall, the website is highly interactive for a portfolio that simply showcases work. It allows the user to access the content through many entry points and does so with a nice flow.

feric [] This is Feric's portfolio, he's a designer for animation and film concepts. The background changes once in a while, displaying different works hes done Windows open as small black boxes that floats and draggable. interactive enough to draw my attentions ;) It's actually based on FLASH, but it looks awesome!

**G**
Grip Limited http://2010.archive.griplimited.com/ Google @http://www.google.ca/

**H**
Hidden Heroes @http://www.hidden-heroes.net/ Analysis here

Hearts' Cry Inc. [] Analysis here

[|Head2Heart Campaign]

This is the website for the Head2Heart Campaign. The goal of this website is to provide general statistics that have inspired the campaign, provide information on the campaign and different causes, provide links to the campaign's pages on different social networking sites, and give the opportunity for donations. The entire site is one page that scrolls horizontally along a path. The user is able to click on an arrow to bring them to the next part of the path, which provides a new statistic or statement about the campaign and causes affiliated with it. When clicking through the path, the logo of the campaign, the mission statement and links to donating and social network pages remain in the same place. The overall aesthetic of the website is very playful, looking as if it were put together by a child with bits of construction paper. This is effective because the main causes associated with the campaign have to do with providing water and sanitation to children around the world.

[|Hello Sour Sally]

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, Hello Sour Sally uses a stylized serifed font made to look hand-drawn as well. the body copy uses a transitional serifed typeface to match. It 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.

[|Hellohkimori]

This site is very highly visual, with video playing or shots taken full screen in the background at all times. The goal of the site is to promote Hellohkimori motion design firm by displaying their work upon clicking on the WORKS or ARTS section (some of their work are videos, stills and some of them are images). The option is given to view the site full screen, turning the sound on or off. The typography used for the navigation is fairly minimal, sans serif that is mostly all caps. I suspect that it is so to keep the focus on their work, which uses typography that is very dynamic both compositionally and in terms of the colours. The full bleed images offer a very impactful experience. The way they switch between links is very interesting; it kind of slices them in parts. The content is structured in a drop down menu form, having the options to choose between WORK, ART and ABOUT. Upon hovering these menu options, the screen gets a grey overlay to make the type more visible. At the bottom of the screen there is a menu that floats up, and offers an overview of the project. The smaller type here is not very legible and looks pixilated. Interactions are relatively standard, the images switch by themselves or upon clicking on the arrow. The video starts playing without clicking, which is nice because it does not require any extra effort to launch it and start looking at their work. The unexpected element is their work itself, very impressive and dynamic videos.

**J**
**[|Jim Carrey Official Site]** analysis here

**JK Rowling** interactive fun search and find information within the site! analysis

Joey Ho Design - Slices of Joy @http://www.joeyhodesign.com/ Analysis here

**K**
The Kenndy's http://www.thekennedys.nl/ Analysis here

Kuler [] Analysis here

**L**
Leo Burnett @http://www.leoburnett.com/

The professional website of Leo Burnett, a Toronto based advertising and design agency. Given that it is essentially a portfolio and work website the bulk of the content has to do with the projects the firm deals with in order to attract new considerations for work as well as give a little background abut the agency itself. In terms of aesthetics its fairly austere and simply chic; mainly greys and blacks, as well as being fairly rigid in its use of an orderly grid. However, the website incorporates fairly subtle but very endearing interactive elements which serve to make the site interesting to navigate, but not to take away from the work itself. The content is fairly structured, there is a categorization going on based on the important functions of the site, work and philosophy. This is achieved with simple anchor links that direct users to basic categories (eg. "Our Clients." The interactions are pretty subtle, they're fairly conventional as well, nothing too ground breaking in terms of interactions but its to be expected as the site is mainly about clarity and displaying the agencies work. The fact that a lot of the content actually is interactive is pretty surprising given a lot of design agency sites or designers personal sites are fairly basic and straight forward. This adds to the experience which I think is meant to strengthen the idea of their firm being concerned with experience and the end user.

Lego Star Wars Promo Site []

This is the promotion site for the newest Lego Star Wars video game. Its goal is to promote the game, and it does so using the same type of interface as the game itself. The visual design is very interactive and is in constant motion. While the interactive part of the site uses the middle section of the browser, it is anchored at the top by a stationary menu bar, and at the bottom by the logos of the various companies involved, as well as its rating. The colour scheme of the anchors adopts the traditional colours of Lego blocks, and they all adhere to the same basic block shape. The content is structured in an extremely interactive way. As the promotion site is a game, you have to navigate through the different planets of the Star Wars universe using the keyboard, where you collect coins to unlock various promotional content, and learn the plot behind the game. Using the arrow keys to move back and forth, jump, and using the spacebar to shoot, you travel through the different planets until you reach "unlocking stations" where you must enlist the help of another user to unlock the prize. You can use the Storm Trooper icon at the bottom to change your appearance and team, and it also doubles as a loading symbol, by providing a countdown to 100 when you are loading a new section. What is really interesting, is that there is more than one section of gameplay. If you click on any of the menu bars at the top, each one leads you to a separate set of levels, where you can unlock the content that you are most interested in. This website itself is quite innovative. It catches your attention for a good amount of time, drawing you into the game. The only bad thing is, I am not sure whether or not you can bypass the gameplay to get to the information itself.


 * [] **

**M**
MACDESIGN [] Analysis here.

Magnetic North []

Mike Perry-- Portfolio... Website Analysis here [|Mike Perry]

Monoface Mono is an advertising agency based in Minneapolis. The agency lives by the motto that "simpler is better." The "Mono"face site lives up to that motto by presenting visitors with a fun and simple Flash application that allows them to sculpt a Mr. Potato Head style face that contains 759,375 entertaining possibilities. The purpose of the website is to introduce people who work for the agency and create an interactive interface that can entertain users. The layout and colour of the website is very simple and clean. They used very minimal colour scheme with white background and blue type. However, dynamic interface and images make the website fun and interesting. A user can click certain parts of the face and change them and create a ‘new’ face. Also, one can shuffle through faces and choose a face. The website is very interactive and innovative. It’s fun for users to navigate around the page and interact.

Moodstream Moodstream is a hypnotic website brought to you by the folks at Getty Images that offers a brainstorming tool designed to help get your creative juices flowing. By simply tweaking the mood sliders you can adjust a stream of images, footage, and audio that can help inspire your creative direction. This website is a very user-friendly and interactive website where a user can change the mood of the website. The website is very visual and interactive. One can make their own moodboard by choosing images and scroll through different categories to find images, videos and music they like.

[|M&M's Bare All] analysis here!

**N**
[|The New Rainbow Warrior] analysis here Nikon Space and Size Website Analysis Here

Paul Neave portfolio []

This is site of interactivity designer Paul Neave. Rather than show work he has done for clients, his goal is to entice the user to play with his site to showcase his talent. Instead of projects done for clients, he created a series of small experimental mini-games to let the user have fun. The visual design gives a very strong flavour of what Paul Neave personal taste is, but because it is so overpowering that a client may wonder if he can ‘speak’’ any other kinds of visual languages. Although he uses colour very well, he has issues with creating a clear hierarchy in his typography. In his navigation menu, the ‘home’ and ‘twitter’ button are given the same treatment as the same as the links to his projects, leaving the user confused on where to look for contact information. Overall I think the use of interactions and play to show his talents is very unique and successful.

N.Design

**O**
Onno Van Wensen [] Analysis here.

Orman Clark []

**P**
Phase2 Design Studio [] Analysis here

**R**
Reserved's [|Website] analysis here.

Record Tripping: A illustrative, simple, and whimsical site. []

This website is basically an interactive game that uses the scroll wheel on the mouse as the controller. The goal of the site is to entice the viewers into playing the game, and perhaps to provide a bit of a relaxer from their hectic workday. The site is very simple, as it uses one background colour that has the texture of wallpaper, with the game placed within a grey and brown picture frame on top. The viewer is instructed through a quick and easy to understand tutorial using only the space within the picture frame. It then turns you over to the game, where you can play through the various levels. The levels themselves are very whimsical in their content. In one, you are blowing seeds into flower pots, and in another you are controlling a rolling barrel - which in itself is a maze - trying to get a small silver marble out. What is interesting, is that as you play these games, you are using your mouse as a digital record scratcher, creating the various sounds. However, you do not need to have the sound on to play the game at all, as it is also quite interesting on mute. The simple layout of the site allows the content to take priority, and enhances the experience.

[|RESN]

RESN is the portfolio site a new media design company based in New Zealand. I find this site effective because of its impressive visual effects. The visuals/interactive elements that they decorate their site with show the company’s great talent/originality/high quality of their work. Although the visuals on the site are a bit overpowering, I still think the site is effective because its navigation and typographic treatments remain simple and to the point. The site is filled with various surprises that I feel enrich the user’s overall experience. The interactive features on the site are extremely innovative, and unlike anything that I have ever seen before. I think this site is inspirational because it is designed in a way that allows people to easily remember the site even months after viewing it for the first time.

**S**
[|TheSelby] Photography & hand written type! Sasquatchmusicfestival | analysis

[|sugarrhyme] http://www.sugarrhyme.com/

**T**
Trackmyt [] Analysis here http://www.expeditiontitanic.com/#

The Sum @http://www.thesum.ca/ Analysis here

**V**
[|Vivienne Westwood] This is the website for UK-based designer, Vivienne Westwood. When entering her website, you are given options along the bottom toolbar of the page and in the form of photo rollovers. The purpose of this website is to introduce the designer's back story, her past collections, online shop and contact information for further questioning or career opportunities. Each page has a similar theme of collaged photo rollovers. The photos presented on each page show different runway models, accessories and Westwood herself. When you rollover each image, the category is written in white, sans-serif text with a filled in colour silhouette of the photo. Each page has the same background, toolbar, and logo in the same place to keep consistency. The composition of this website is effective because it is very characteristic of the designer, who is known for her eccentric personality and designs. Also notable is a clock with spinning arms that comes up when each page is loading. This clock is representative of the designer's current Worlds End project, which can also be accessed by the bottom toolbar. Overall, this website has easy usability and effectively shows the personality of Westwood.

**W**
Wing Chen This website features Wing Cheng's personal portfolio, displayed in a playful accordion fold out of her sketchbook. It uses coherent visuals, all hand-drawn like sketches that. Each page documents a quick sketch of what the project was and a short blurb on the details. Clicking on the sketches brings up a lightbox that allows you to browse through the details in each series of work. The typography is well incorporated in the design, a hand written like feel that matches that of the sketches. What works really well is the navigation on the right that divides the different categories the artist has worked in. Clicking on them auto-scrolls to the specific part of the sketchbook that highlights work under that category. It's great that the contact section wraps up the entire portfolio and is the last page of the sketchbook. The contact form allows you to type in live text within the sketchbook-like visuals. Overall, the integration of photographic elements and hand-drawn elements work really well and give off a sort of intimate feel about the site that provides a really personal experience of viewing the artist's work.

[|Wonderwall]

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.

[|World of Merix Studio]

World of Merix studio’s website drops the visitor right into a world map. Before the studio eve tells you anything about themselves, they let their global clientele speak for itself. Any links you click show their information without leaving this map screen. There is very little actual text in the site, and the map holds up the website very nicely. The site uses dark colours contrasted with bright foreground elements such as the studio’s orange logo. The layout on the various tabs is fairly conventional, with a column of text and an image gallery, and the tabs themselves are organized both above and below the map. The map itself can display cities and web resources as well as their clients, which helps it retain its appeal (and thus the appeal of the website) a little while longer. A very nice touch is a time zone tab that shows the viewer when the studio will be open, reflecting its international nature. There are no surprises, which would not be suitable to a website clearly oriented towards business-minded professionals.

[|WRANGLER]

**#**
2advanced Studios Analysis Here