15: Representational, Abstract, Symbolic

SampleTron

By: IK Multimedia

This is the software interface for IK Multimedia's SampleTron, a virtual instrument which recreates and consolidates the sounds of many analog instruments over the last 50 years into one interface, specifically the Mellotron of the 1960s. The representational, Abstract and Symbolic elements that are evident interact to sharpen the look and experience of this software towards that of an actual organ.

The name of this software is derived from its function as a sampler and the name of the most legendary sample based organ, the Mellotron. The same can be said for the look of its interface with representational elements of organs from the past, namely its knobs, light indicators, keys, and pitch/tone wheels. Their role and impact, like many software interfaces of music instruments, is to bring the user into the familiarity of the abstracted musical interaction. At first glance these representational elements are recognizable as functional tools in both a tangible organ and work well to orient the user of this software interface. These elements interact with abstracted and symbolic elements to give the interface the look and feel of a vintage instrument.

The main abstracted element in this interface is the interface itself. The layout and proportions of the horizontal and vertical lines are there to hone the proportions of the top view of a flattened three dimensional organ. Visualize if you will the shape of an organ, similar to that of an upright piano. Now visualize that the black information screen is the top of the organ, the silver strips with knobs folded inward and perpendicular to the top is the front panel, while the keys remain parallel to the top but lower in space. This is reinforced by the keys being smaller in proportion to the knobs, an abstraction which gives a sense of depth to the parallel planes of the top and keys. While this is a subtle detail it also functions as a visual cue, since the keys are far to small to be played by most grown people. While this aspect speaks to the representational elements within the abstraction of an organ the smaller keys also function as a symbolic element, a locative device within the octave range.

Being most people would find playing an instrument like a piano, where many notes are hit quickly and in unison, with the single click of a mouse impossible and cynical, a hardware devise is typically used but usually only contains a two octave range to the seven of an actual piano. For this reason the the full range of a piano, as displayed within the interface, becomes a symbolic element which denotes both an aural tone and a location. While its impact is not visually obvious, like the other elements talked about, this symbolic element within this design reinforces the abstraction of an experience, playing an organ, one which both the representational and abstracted elements all seek to convey.

14: Representational, Abstract, Symbolic

Representative: Clock of Many Pedals

By: Rafael Assandri

This design incorporates representational flower forms into the look and function of a wall clock. The pedals which surround the digital center piece, in this concept clock, are suppose to function as a time telling piece. With the passing of time a pedal slowly emerges until the circumference of the clock is filled. The function of the pedals in this design is obscure to me, since I don't associate pedals or flowers with time; unless it's time lapse photography. I may be missing the connection here, flowers and time, but daisy pedals and time, coupled together, make me think of some lust filled adolescent longing for the attention of another; a clock for longing (?), is not a time piece I want to look at or use.

Abstract: Magic Carp-Pet

By:John Leung



The silhouette of a carp fish is abstracted into the graphical design of this carpet.  The silhouette of the fish, seen from the top view, can be seen as swimming through water, an implied motion by the various positions of the many fishes tails. Taking this into account the carpet itself becomes a metaphorical lake that these fish swim in. The fish are further abstracted by the use of a moire pattern. Coupled with a special glass table, placed on top of the carpet, an optical illusion of the fish swimming becomes present as one walks by.

Symbolic: Control: Safety Traffic Light Concept

By: Roberto Vackflores

This concept for a redesign of traffic safety lights uses several symbols to convey more information to the mobile citizen other than stop and go. Aside from the green and red colors denoting action or inaction the design incorporates a red cross inside of a square which has come to signify ambulances and medics. When this symbol is incorporated with the red light in conveys that an emergency vehicle may be approaching. This visual cue acts as a kind of siren, that emergency vehicles often use. However sound can be confusing, as far as locating its source. By placing a visual cue at an intersection it becomes clear that an emergency vehicle will be approaching that intersection.

Active Visual Techniques:

 

Repercussion: sharpness, sequentiality, repetition, depth, consistency, transparency, activeness, unity, symmetry (instrument), balance, understatement.

 

Light Blue Optics (product): economy, regularity, unity, singularity, diffusion, understatement.

This interactive projector by Light Blue Optics is an interesting piece of technology since it represents, to me, a whole new direction of interactivity in multimedia. The idea and technology intrigues me more than the actual product, but that's not to say that it is bad design. Just the opposite. Light Blue Optics are the proprietors of this holographic laser projection technology and seek to license this technology to manufactures who have ideas of where to take this technology. With that, its economic, understated form is perfect for presenting this new technology while leaving it open to the possibilities that others can imagine. The head which holds the projection lens is angled for function, while its curved and rounded edges give it a sense of reliability- similar to the design of an external hard-drive. The mechanical components, lens and inner workings, seem almost removable from its outer case, furthering the idea of expanding uses for the technology in other forms. I even like their logo, seemingly a merger of an arrow with an eye.

Not in the tangible product realm are Carla Diana's repercussion instruments. I'm really interested in the direction of online musical instruments, their design in sound, usability and the context in which they're used. These instruments are more wholly imagined than many which I have seen and used. Although difficult to play in a traditional sense, they are well conceived in their range of tone and pitch making for some sonic wanking and plenty of implied melodies to carry on to your instrument of choice. Unlike the Light Blue optics projector, its design is sharp and balanced making clear and consistent use of its functionality, the square shapes to show what areas can be manipulated. The shape is abstracted from that of a stringed musical instrument which is consistent with its sound and it's angled presentation gives it depth and dimension.

I can imagine these two technologies together for making a whole new range of musical instruments.

Week 11: Contrast

This is a clone of a famous guitar effect pedal which uses contrast effectively to draw attention to the exterior pedal surface with a dynamic graphic, reference the inner and exterior workings of the pedal and pay homage to the original design. In general the shape and function of the pedal is pretty simple. The rectangular and flat exterior surface features a dynamic graphic design which is actually a schematic of the inner workings of the original pedal that this pedal mimics in design and sound. Although the inner workings of this pedal actually look and work slightly different, the use of the old schematic makes for a dynamic graphic which effectively draws attention to the pedal, highlighting all of the exterior functions, input, output, on/off, control knobs (for those who can read schematics anyway) while paying an obscure kind of homage to the original design. 

Movement/Motion: Option 2

Here are two examples of the basic element of motion in product and user interface design.

Soundzzz

by designer: Sungwoo Park

Soundzzz is a product designed to use the motion (vibration) of a speaker as a tactile, experiential, aid for the hearing impaired.

The idea is to use vibration to represent sound, adding to a visual experience, by using the sensation of touch to replace hearing. By this standard, and the experience of a person with all senses intact, the tonal range and separation of sounds inherent in a film soundtrack, or music in general, would be represented in some way by vibration, or a system of vibrations.

This system for navigating sound would be difficult to achieve. For one, representing sound by frequency, which is essentially what is happening, is good for effect, but does nothing to differentiate the quality of sound, which is crucial for a film soundtrack and music. Sound has emotive qualities, an A major and an A minor are close in frequency range, producing an almost similar vibration (I would think), but opposite emotive qualities. Soundzzz designer attempts to address this by adding color along with sound. A nice feature, but I'm not sure how it works exactly; what frequency range matches to what color; if there's a range of colors other than the three pictured (brightness factors?), ect. Another problem might be that many sounds happen at once. Overlapping vibrations, I suspect, would be difficult to differentiate. Not that I have elephant skin, but I've been told that people who lack one or more of their senses compensate with sensitivity in the others, making it possibly easier to separate those sounds out. Nevertheless the designer separated the pillow shape into two hemispheres, one with a speaker producing high frequencies and the other with a speaker producing low. The design also seems to make use of areas of the body with sensitivity. The picture shows it being held against the chest and belly with hands and fingertips flattened over its surface; all of which are seemingly sensitive areas of the body.

Although this product is geared towards the hearing impaired, it's not far off the concept of vibrating chairs in a movie theater and could be applied in other experiential and product designs.

Soundzzz



Thereminator

by: Yonac

This is music application for Apple products which uses the motion of a persons finger over a touch sensitive screen to navigate the quality of sound. It synthesizes the sound of a theremin, a radio frequency based, analog instrument used to make just about every eerie sound in radio and television in the 1930s and beyond. It uses the movement of a users finger over the touch sensitive screen to generate changes in sound: volume, pitch, effects, ect. The navigation aspect in the application is the performance of the user. In this respect, visually speaking, the app. is successful in my opinion. One of the challenges in playing an actual theremin is learning to hit the right note, since it uses the proximity of a persons hands in space, from two metal rods, to control pitch and volume. With this app. the notes are marked on the screen, while criss-crossing green lines on the x and y axis showing the user exactly where they are in the spectrum of sound. The downside may be that the finding-the-note quality inherent in playing a theremin may add something to the performance. However, this navigation is perfect for an iPhone app. where people understand touch functions. And there's even a "touch free" option that allows the same controls over sound by simply moving the devise around!

For more info go to iTunes and search Thereminator.

Dimension/Depth/Space

Here is a three dimensional display created at the Institute for Creative Technologies, USC. The display uses a high speed camera and a revolving mirror to create a projection of any object giving it the appearance of three dimensions. The objects, a running person in this picture, are presented at about a quarter of their true scale and can be viewed with correct perspective from 360 degrees. The images are believable in tone, but lack color, giving them a monochromatic green or blue look. The images move at a tell tale 20 frames per second and the miniatures are confined to the respective space within the revolving mirrors. Nevertheless, this impressive piece of technology is sure to drive a leg within many disciplines of design.


ICT Graphics Lab

Tone and Color: Interaction Design

This is an experimental sound installation currently being exhibited at the Gray Area Foundation for the Arts. I'd say this is an example of an interactive design that uses sound stimulation and visual stimulation to engage the participant. Since the experience is an aural one, I think it makes good, simple, use of tone, color and shape in its composition.

In this example tone is used to define the area in which the user must stand to hear the projected sounds. It is created by a light source shone through a transparent, half-dome shaped object producing circular rings of various tone on the floor.

The interaction of tone with the basic element shape is apparent here. The projection of circular shapes on the floor defines the many areas within the room where one can hear the various sounds projected from overhead. The varying tones also seem representational of an aural experience, since sound and light are both waveforms and the radiating shapes of various sizes could be seen as a visualization of sound bouncing off the floor.

While tone serves a general locative purpose, color and shape are the primary communicators of where a participant should stand to best hear the sound installations. Large red dots are placed directly under the domes overhead, which aside from projecting light, are projecting sound compositions. Dots are a basic element which can communicate location and denote content.

Coupled with tone, color and shape are used to communicate to a participant that these areas are of interest. This is primarily important, since, in this example, one might walk into a silent room and wonder what the star track chamber is all about.

SoundSpots
By: Rob van Rijsijk and Jeroen Stijbos

Basic Elements in Interactive and Product Design Unearthed

Being an interdisciplinary major with interests in interactive design and product I've chosen examples across these areas to illustrate three examples of the basic elements discussed by Dondis.


This is a multi-touch interactive display made for OTICON by WHITEvoid interactive art and design. There are many basic elements active in this display. The most apparent are the bubbles which contain icons, representing various things, which can be dragged into the yellow containers to produce written information about a subject. The bubbles, which are 2D circles made to appear 3 dimensional with the use of tone, are essentially dots when perceived from far away. Here the dots create space and dimension within the display using size, shape and tone. This makes them effective as pointers within this informational system, as well as leading the eye and maintaining interest in the display.


Here we have a lamp which sits on the floor made by designer Albertine van Iterson. What I find particularly active in this floor lamps design are its lines. Its lines, angled at about 30 degrees from the floor and arranged in a cone shape, give it a dynamic appearance, as if light was shooting out of it. It reminds me of an old gramophone cone, which was used to amplify sound before speakers were invented. Ironically, the lamp doesn't seem to produce much light, but I thought it was an excellent example of what lines can communicate, even if they can't deliver.


Lastly I chose a classic flashlight. Not sure of who made this, they were pretty common and are an iconic shape for the object. What I find particularly active about this design is its shape, specifically, how it may communicate something about its use. Essentially, with this flashlight, we have a succession of four circles connected by lines (thinking in AutoCad terms); two larger circles make up the lens housing and two smaller circles make up the handle. Of course it may be hard to visualize the circles from this picture, however the highlighted and darkened tones on the handle implies the cylindrical shape. The circle is suppose to be associated with warmth, endlessness and protection. I find it interesting, the idea, that an object, whose primarily made up of circles, may in some way communicate protection. Especially in this case, where the object may allow you vision through a dark room, the night, or especially, through a pitch black room filled with cacti and modern furniture.

A6_Visual Syntax

As an interdisciplinary major I'm interested in application development as well as the devises for which the software is intended. Here is a example of a web page designed for people to download software applications for their iPhones. The visual syntax of the composition is clear in communicating this. The page is divided evenly along the vertical "felt axis" with two columns of information on the left and one perceived column on the right containing an image. The header divides the page unevenly along the horizontal axis, making use of font size, color and placement of the text, in the upper left, for stress and sharpening, while the larger area below makes up the specifics of the the "what" within the page. A large image of the device for intended use and application are prominently displayed making good use of size and asymmetrical placement within the horizontal and vertical "felt axises" to stress and sharpen the purpose of the page and content. Text speaking of the application and device makes use of similar size in column width and proximity to the image. Other specific information is grouped by size, color and proximity in a smaller column size. A button, of similar shape to the product, and with an icon of the device, is differentiated by its size and color, proving a link, as well as information as to where the application can be downloaded. Overall a good use of syntactical guidelines.

A5: Searching For Literacy In "Unemployment" Images

Responses:

People in lines: seeming to converge, in secession, short people, tall people, men, women. Disorienting composition: Bodies without heads, no ceiling, no ground, no beginning of line, no end of line. Clothing and accessories: suit jackets, street jackets, casual jackets, purses, pockets, embroidered pockets. Body language: shrugged shoulders, hands in pockets, fisted hand, uneven weight distribution, folded arms. Part of a side of a mans face, looking forward. Representation within body language: bored, impatient, frustrated, anxious. Symbolic representation: Blue shirt; blue collar worker. Pin-stripped suit with white collar; white collar worker. Purses; women. Perspective; eye level looking down.

We're standing in a line somewhere, behind several men and women in suits. To our right and directly in front of us is an older, bald man in a pin-stripped suit and white, collared shirt. He seems to be starring ahead, like us, at the other people in line. A raising fist, of a man a few people ahead of us, is captured mid gesture. Maybe he's about to scratch his ear, or give someone a fisted hand greeting, or attempting to compress a lump of coal into a diamond while dancing robotically; it's hard to say. A man directly in front of him in a blue, button-up shirt and gray slacks, seems to be fidgeting with something in his pocket. Ahead of him is a person with a gold embroidered design on the back pocket of their denim pants, an abstract s-shaped, squiggly-line, ending in a spiral, which resembles the number nine. Another line of people in suits seems to be converging into our line to the left. Again to the right, and visible a few people in front of us is a monochromatic woman, red hair, peach suit and matching purse. She seems to have her arms crossed, by the way her shoulders are positioned and her head tilted to the right, maybe trying to look over the shoulder of the tall man in a dark gray windbreaker, directly in front of her. An extremely short woman in a black parca-type jacket and black purse stands in front of the tall man. There are about ten people in this image, standing in two lines, seemingly impatient and bored. Where is this line going? It's quite disorienting, there is seemingly no end to the line; by this I mean there is no beginning, the front of the line is obscured by people and there are is no counter, or door, or signs to denote a purpose for standing in this line. On top of this, there seems to be another line converging into ours, adding to this sense of disorder and purposelessness.

This is an interesting image to find in reference to "unemployment" for its symbolic content.  In searching with this word, I found many images of people, with distressed and blank expressions on their faces standing in long lines at, implied, government agencies. The emotional content relates personally, whereas the lines are representational of amount of people affected and bureaucracy.  Here we have only body language, clothing, accessories, and gestures to piece together what the photographer may be implying with this image in reference to unemployment. If we take the blue and white collar shirts to be symbolic references to social economic classes, the fist to be representational of being hit, and the emphasis on purses and pockets to represent money, then one way to read this image might be, that all social economic classes have been hit financially by the poor economy, therefore needing unemployment- a disorienting and disembodying experience which has no end in sight (?). Depressing. The upside is, this could be a picture of the lunch line in any metropolitan area; or it helps to add to the title, making it "Unemployment Benefits Extended".

Feature Channels

The Dumpster_by: Golan Levin, Kamal Nigam and Jonathan Feinberg.

http://artport.whitney.org/commissions/thedumpster/

The dumpster is a visually dynamic, interactive, curiosity machine which makes excellent use of the feature channels discussed in class. The byline calls it "a portrait of romantic breakups collected from blogs in 2005". In effect, it's a multi-dimensional data visualization which uses color, size, motion, and spacial layout to display similarities in terminated relationships that were posted on the web in 2005.

These "breakups" are deemed similar by language used, demographic and emotional content and are represented by color, size and proximity. The multi-sized and colored circles displayed on the screen bounce into action once the Dumpster is initiated. Each circle is representative of the overall data, some 20,000 entries. When you scroll over the circles, the cursored one, changes color from orangey-red to pink with a blue surround, as well as increasing in size. This is effective in differentiating between what can be selected and the rest of the bouncing, vibrating circles. Once selected the circle turns yellow with an orange surround and increases in size as well. At this point several colored pixels appear to the left of the screen. This shows similar breakups within the overall data, with the brighter pixels being closer in search criteria: language used in the breakup; sex and age of the author; and "emotive words" (?). Further as soon as a circle is selected the circles that enter the center screen become the data represented to the left. The size of these circles shows the length of the post and the color and proximity to the chosen post relates to their similarity in search criteria.

The bar graph below the central screen of bouncing balls is a timeline which relates to the data on the left. It shows a timeline broken up by weekday, month and date and displays what could be  selected bar by enlarging the scrolled over bar within the graph as well as changing it's color. Above the enlarged bar is the weekday, month and date and the number to the left of the date represents the number of entries for that day which is further represented by the height of the bar within the graph. When scrolling over the data (pixels) to the left, the bar graph data becomes active, displaying the details of this macro view, while the blue box under the cursor shows the general area of pixels which are being scrolled over. The ID number, age, sex, and number of matches of the active pixel are displayed in the bottom left corner along with a blow-up of the area.

Super interesting project. Too bad my interest in the content is really limited. The interactivity is great except that the data can't be chosen, for some reason (?), from the timeline. This seems like an obvious thing to do. Then I could see how many people were dumped on the same days I was!  The overall display is visually engaging to the point of turning my mind to mush just watching these balls do their thing, making effective use of read and discussed "feature channels".

Top-Down Visual Processing

My understanding of top-down visual processing is that it's part of how we understand what we see in real time. It's a goal-based visual activity which uses several fixation points to surmise the function of a thing or how we interact with it.
Being an interdisciplinary major, I've chosen a product for this exercise whose function is highlighted by its written labels. Featured here is Akai's LPK25, Laptop Performance Keyboard. The label, displayed prominently in the upper left corner clarifies the manufacturer and function of this plastic object, however it's not the most prominent fixation point; that being the white and black keys which immediately denote it as a musical instrument with just over two octaves in range. Other fixation points would be the square buttons which give insight to the functional capabilities of this keyboard. First and foremost, that it's electronic, not acoustic. And second, it gives some insight as to the sounds this keyboard is capable of, via the colored labels. These also coincide with the labels above the keys, giving insight to the inner workings of the unit, how it processes and allocates the sounds. The unit is powered via USB, which gives insight to it being a controller, meaning it has no sounds of it's own, simply plays the routed sounds off the software programs from the computer it's hooked in to. I should add that it's size makes it very portable, a quality which abstractly aligns it to being used with a laptop.