MAT 190 Blog Post: Design Exploration

Square Circle (http://www.sqcircle.com)

Square circle is a design agency located in the United Kingdom. Their web site is typical of most design agencies websites, in that it highlights their work and provides a means for potential clients to communicate with them. However, unlike most web sites for design agencies Square Circle's web site presents a deliberate environment in which to present its content. This environment consists of a round table strewn with multiple elements of office work in a brightly lit room. Within this environment are representations of ordinary objects commonly found in businesses and homes that have functions similar to their real-world counterparts. For instance, the contact form consists of a pad of paper with highlighting.

Dynamic movement in the site starts from a wide view of the table, with the user's view going in close to the various sections.

As far as the placement of items on the table is concerned I noticed that there were five main 'piles' of stuff, which represent the content sections. However, the items in each pile are arranged haphazardly underneath and on top of each other; this gives the objects an organic, authentic feeling, like someone just tossed the stuff before going home for the day. There are gradients used on the magazines and book objects to give the appearance of physical, glossy paper reflecting light. many of the objects are very detailed, such as an opened envelope with a canceled stamp and torn sides. The colors are very bright and remind me of the original Toy Story film. Some of the visual elements give me a clue as to the target audience of this website. The filled coffee cups and iPod ear buds seem to suggest that this design agency is looking to do business with companies that want to design content for for young and middle-aged middle and upper-middle class adults.

Some of the sections have a clear call to action. For example, in the portfolio section a message on a sticky note states "Like our work? Get in touch..." Even more interesting than this is that, in the contact section, the user can dial a simulated rotary phone to leave a voice mail via Skype.

The navigation for this site is also quite dynamic. There are three main ways to navigate-- by zooming in and out onto and from the table, by dragging the mouse near the sides of the frame, and by a more traditional pop-up menu. The benefit of this multi-tiered navigational system is that it appeals to those who have highly refined mouse skills and also to those who are more used to normal means of 'click' navigation. As well, these different types of navigation give the user the option of having a media adventure (where they feel like they are traversing and journeying across the table) or of just getting the information quickly (by using the pop-up menu).

One section that I found particularly interesting was the section for the video clip. Compared to the other sections this section is an anamoly because it is mostly filled with empty space. The area for the actual video is very small, and is displayed in an iPod interface. I expected all of the buttons on the iPod graphic to be operational, but only the play button would work (similar to a real iPod, I guess... LOLZ!)

From experiencing and interacting with website I took away a few things...

1. When creating simulations of objects deliberately try to recreate their actual textures.

2. Think about lighting and shadows, and how light and darkness values can affect the message the designer is trying to convey. Also consider if parts of the visuals will have unusually dark and light areas.

3. When creating interactive objects based on real objects let the user know that they are interactive. An example of this was the sticky note next to the rotary phone that said to dial the phone to leave a voice mail.

4. In an organized site such as this not everything has to be tilted. With the iPod graphic I initially thought it was odd that it was orientated completely straight. I then realized, however, tht watching a tilted video would be an odd experience, and may be kind of painful to watch.

5. Give the user different ways to navigate the site. Navigation does not have to be just a way to get to the content; it can also be part of the interactive experience and contribute to the message being presented.

Por Liniers (http://www.porliniers.com):

This Spanish language site from a designer in Argentina bridges the chasm between art and design. Compared to Square Circle, the environment is smaller, but no less intriguing. This environment is a desktop in a darkened artist’s studio. A single lamp in the corner provides light. There are several elements that add to the realism of this environment. The mouse cursor is a thick, stubby pencil; when the cursor hovers over an accessible content area a paperclip and slip of paper with the content title appears to unfold from underneath the pencil. Content transitions in by way of a hand appearing off stage and placing books, drawings and comics near the front center of the desk. While this is happening the user can hear the sounds of shuffling paper.

One aspect I particularly liked about this site was that the desktop background looks extremely realistic. It has stains, graffiti, scratches, gunk and coffee stains. It appears that the designers very carefully combined textures, shapes and fill patterns on this background to give it an authentic aged look. Just this background sends the message that a lot of creative work has been done at this desk.

The animation in this site is very engaging. The transitions with the hand bringing in the content fit very well with the content. This gives a sense that the environment continues off of the stage. The animation for the book samples involve actually turning the pages. When the cursor hovers over a page that can be turned a small animation of the paper curling plays, which indicates to the user that this element is interactive. All of the other content areas have different animations, indicating that they are a pathway to content.

I noticed that the shadows on objects seemed very realistic; sometimes they seemed to veer away from the edges of objects, which I have never seen in visual design before.

Another nice touch to this site is that the lamp can be turned off. When the user does this a character pops up on the screen and looks around briefly before disappearing. There are few different versions of this animation.