Wednesday, July 6, 2011

Implied Motion


The unusual image above shows an interpretation of a dresser whose story is demonstrated through the implication of movement. The off-shooting drawer chunks seem to naturally fit together with flush edges, and the natural human process of grouping (by this, I mean connecting the dots, or drawers) give us an understanding of what once may have been. These ejections diverge outward similar to a kind of explosion, from the base, and the convergence of the solid, bottom portion toward its center add to the over-arching visual of some kind of bedroom-volcano accouterment.
The quirk of this design is reminiscent of an early Disney design. Maybe a fuming anthropomorphicized furnishing who's quite full of being used as storage, literally. This piece finds humor in its strange application of the principle of implied motion.



Here is another example of a seemingly moving object, produced by graduate student Vicki Fu of San Francisco State University. The motion in this lamp is one of growth and spiraling. She accomplished this through the use of sequential light nodes of even space and shape. The blue and white "petals" create lines by proximity, as an example of the Gestalt concepts of attraction and grouping. Not only the spinning, but the climbing action embodied in the tiers demonstrate motion. This vertical ascent can be seen to represent the growth that living beings share. The structural elements wind the way vines or stems might. Vicki made use of this implied motion, along with the contours of each level, for bio-mimickry, to enhance the organic look and feel of this flowery design.

Friday, July 1, 2011

Tone and Color



Pictured above, we have another shot of the StarCraft II user interface. Notice the use of variation in tone and color can aid in the structure and organization of a design. Tone operates on a finer level in this case to distinguish groupings, such as the headline text from the body text, and to dim the images in the background from the shapes in the foreground. We can also see tone working in alongside scale in the instance of the "Achievement" descriptions, where the larger sized label and brighter tone enhance the pop out effect.

Blizzard has also chosen to make use of color to section parts of the screen. The hierarchy consists of a blue-tinted mission objective segment at the top, a green tinted achievements segment at the bottom right, and a red-tinted summary portion in the bottom right. This element, paired with the rectangle shapes literally divide the high-resolution image into smaller chunks to be more readily understood.


Color and tone can be seen working in conjunction in the finer elements. Such instances include the contrasting orange icons functioning as bullets to the side of the achievement descriptors, and the blue-background dots to help anti-alias the numerals on the far right of the mission summary section. Each dialogue has  a header or footer that's tinted to further enhance the communication of the template.

Basic Elements

l i

Saturday, June 25, 2011

Design Syntax Success and Failure


Here we have an example of a successful syntactical design in elegant church seating. They demonstrate a humble use of single-material objects, without ornamentation, as well as the ability to accommodate whatever dimension of religious room that can be made available. These inexpensive to manufacture and space-saving chairs can be afforded to Christian prayer sites throughout the world, without letting their cheap production distort the respectfulness and solemness appropriate in such a setting.






As a counter example, this doorstop in the shape of a cross doesn't quite hold the same grace or respectfulness. The production is cheap enough, but it's more sacrilegious than appealing, and the extra dimensions don't accomplish anything besides requiring more wood material than a single-slab doorstop would. So, while simultaneously alienating the target audience by scuffing a religious symbol, it adds on extra manufacturing to adorn a product that normally would be out of sight anyway.

Wednesday, June 15, 2011

Top-Down Visual Processing





Here's an example of "Top-Down" visual design processing, almost to an extreme extent. The body of a standard Gibson SG electric guitar demonstrates its design worth without the need to even see it. The user, the guitarist, will play the strings by memory, focusing on the neck of the guitar if on the form at all. Despite this, the player will rely on the shape for comfort and positioning, similar to the design merit of a chair. Typical usage is generated from past experience and regularly adjusted touch/audio response, regardless of how impressive these may be to the eyes of the audience.

Sunday, June 12, 2011

Interactions Between the 3 Levels



For this week's blog update, I chose an icon with a representational role and abstract form characteristics: the Peugeot logotype. 

Representational
In terms of representation, the logo is a branding that features a fierce animal at the front of classy automobiles and sitting beside the name "Peugeot". It plays the part of conveying status and reliability the way the Gibson name connotes worth to electric guitar players. In this case, the symbolic and representational aspects of design are inter-related due to the depiction of a lion being a borrowed icon from medieval crests. This is associated with the royal lineages of Europe, as well as the imperialistic dominance of the times.


Abstract
The abstract qualities of the design are communicated best through the medium one finds it in. Shown above at the front of a car, in a shining metal not unlike other auto manufacturers' emblems, Peugeot's design stands out for the sharp contrasts in shape and motion. Note that the color, scale, and texture composition could be found at the front of a BMW, Ford, etc. This serves to enhance the aforementioned contrast and narrow one's focus on the uniquely organic form that strikes a recognizable pose. Where many other companies choose letter forms, regular  shapes, chevrons, and the like to describe themselves, the visual element that most dominates the Peugeot design is the statement of animal ferocity; the symbol of a lion.

Symbolic
Outside of the fact that the chosen design, itself, is a symbol that translates to "Peugeot", the content of that logotype is a symbolic entity which describes the values that the company's products stand for. The lion denotes power and royalty, "the king of beasts", bravery and courage. This symbol, alongside the merits of the vehicle it's been bestowed upon, influences the perspectives of critics and owners to perceive the automobile as to belong in the hands of a similarly characterized driver: a driver of muscle-cars, sports autos, and luxury purchases. Complimented by the pristine metal abstracted from industrial standards and the represented heraldry described above, the Peugeot branding confers that they are the king of autos.

Tuesday, June 7, 2011

Designed Visual Information - Symbolic



Symbol of the Protoss alien race for the hit computer game StarCraft II.


The above form signifies for thousands of players the advanced alien life forms, the Protoss. The shape itself embodies concepts that hark to consistent motifs founds in Protoss artifacts, from golden clothing to building structure, to the lore of their ancient tribal ancestors who held high regard for life energy. Notably, the shape is not of any discernible item or the like, but borrows from the grace and perfectionism denoted in the Protoss themselves. Like many symbols, recognition relies on a required knowledge of the subject matter, and is only instantly recognizable to those who know that the ball of lightning means unobstructed energy, and the golden structure around it shows the structure that comes of it, a technology exclusive to the Protoss.

Designed Visual Information - Abstracted


Abstracted information display for the hit computer game StarCraft II.


Here is an example of abstracted forms found in the case of the Zerg race's technology tree, which stems at the Hatchery building. As players traverse the tiers, they are able to create new units and structures to expand and strengthen their armies. In extracted format resembling the branches of a traditional tree, the enclosed white text shows the units that can be created as a by-product of each growth, like fruit under the leaves of an apple tree. Without getting to involved in biology, the leaves are necessary for the plant to absorb energy to produce offspring in the form of fruit, and so the buildings like the "Spawning Pool" and "Spire" are necessary for the Zerg to produce new army members. Despite the unfamiliar vocabulary, the familiar tree graph remains easily interpretable and helps new players to understand the mechanics of the alien race.

Designed Visual Information - Representational


Representational concept art for the hit computer game StarCraft II.


This highly-detailed piece by Peter Lee was used as reference material for constructing a human ("Terran") colony on a distant planet. It distinguishes itself as a representational design through its level of precise detail which report exactly what pertained to the scenario. Special attention should be paid to the distinct buildings and landscape, such as the mineral formations and smaller robotic vehicles interacting between structures. Because the intended viewer of this image was the team that would generate a three-dimensional depiction of it, the features have to be fairly precise, directly representing the final product. Unlike abstraction or symbolism, which rely on implied knowledge, this image is explicit in its explanation of the information displayed.