Ideas for BAM Teknopolis

  • Left or Right?

#Projection #interactive #machineLearning #kinect/Max #2Dspace

Inspired by the quote on the wall of the staircase at Tisch Building: All human beings move, closer to machines. The appearance of human figures gets shifted or changed based on their relative location to the camera. One example of the visual representation is written below:

if (stay in the middle){
    show exactly what they look like; 
else if (move to the right){
    gradually turns to a cyborg;
else if (move to the left){
    gradually turns to a hmmmm monkey;
  • Never move forward

#VR #CAVE #immersive #3Dspace

Create an immersive space (either in a cave automatic virtual environment or wearing VR headsets) where people can only move backward.


Terms on Universal Principles of Design

4 Words: Closure, Good Continuation, Law Of Prägnanz, Proximity


The principle of closure states that whenever possible, people tend to perceive a set of individual elements as a single, recognizable pattern, rather than multiple, individual elements. The tendency to perceive a single pattern is so strong that people will close gaps and fill in missing information to complete the pattern if necessary.

The elements are perceived !1ollstlCillly as a single pattern first (circle), and then as individual elements

When simple, recognizable patterns are not easily perceived, designers can create closure through transitional elements (Le., subtle visual cues that help direct the eye to find the pattern).

Closure can be used to make us perceive objects or patterns using the smallest amount of information. Our minds are so eager to fill in the missing information that it can be done with very few elements. Use closure to reduce the complexity and increase the interestingness of designs.

Creating Effective Closure:
  • Positive and negative space
    This can be achieved by looking for the hidden forms in the negative space of a design or within type. Additionally, removing elements from the foreground can create interesting negative shapes, and in doing so, simplify a design.
  • Contrast
    Create a strong contrast between the foreground elements and background. As always, black-and-white creates the best contrast, but you can also experiment with complementary colors for strong contrast as well.
  • Color
    Color not only adds life to a design, it also can be used to reinforce relationships, especially if using abstract shapes to represent forms.

    Reducing elements and using negative space simplifies NBC’s current logo (the right one)

    Negative space forms the forward-moving arrow in FedEx’s logo

Good Continuation:

It asserts that aligned elements are perceived as a single group or chunk, and are interpreted as being more related than unaligned elements.

Our mind chooses the path of least resistance, perceiving lines as continuing along their established direction. The ability to accurately perceive objects depends largely on the perceptibility of tile corners and sharp curves that make up their shape. When sections of a line or shape are hidden from view, good continuation leads the eye to continue along the visible segments.

Create Effective Continuation
    • Avoid disruption, or use it to your advantage.
      To encourage movement, avoid elements in your design that might disrupt the established direction of movements, such as too much white space between elements or large graphics or images. Conversely, you can use disruption to focus attention on an important element or to signify the beginning or end of a section or grouping.
    • Ensure good alignment and consistency between elements.
      Make sure that the elements establishing direction are aligned well and consistently styled. Poorly aligned or inconsistently styled elements will either undermine the direction of movement or cause the eye to lose the established direction.
    • Use cues to suggest direction.
      For horizontal scrolling, such as we saw in the App Store, indicating that there is more to see to the left or right to help establish the direction of movement.

This linear arrangement of the rows and columns of these various apps makes the app icons seem more related than other elements on the screen, such as the time display, the battery indicator. Continuation can be used to imply a direction to follow when space is limited. Play this short video to see it in action.

Law Of Prägnanz:

It asserts that when people are presented with a set of ambiguous elements (elements that can be interpreted in different ways), they interpret the elements in the simplest way. Here, “simplest” refers to arrangements having fewer rather than more elements, having symmetrical rather than asymmetrical compositions.

Both sets of figures are interpreted as Simple overlapping shapes, rather than a more complex interpretation – e.g., two inverted “L ” shapes and a square, and two triangles and a five-sided polygon

Therefore, minimize the number of elements in a design. Note that symmetrical compositions are perceived as simpler and more stable than asymmetrical compositions, but symmetrical compositions are also perceived to be less interesting. Favor symmetrical compositions when the efficiency of use is the priority, and asymmetrical compositions when interestingness is the priority.


It asserts that elements close together are perceived as a single group or chunk, and are interpreted as being more related than elements that are farther apart.

The grouping resulting from proximity reduces the complexity of designs and reinforces the relatedness of the elements. Conversely, a lack of proximity results in the perception of multiple, disparate chunks, and reinforces differences among elements.

Proximity is one of the most powerful means of indicating relatedness in a design.

White Space

White space guides the user’s eyes in the intended direction, creates contrast and makes a lasting impression.

Hype Type Studio business card

The card above is a good design example which makes great use of proximity as the information is all related. Take note how the studio name and its descriptive text are grouped together, which makes perfect sense as these three lines all have a connection to each other — the name of the business and what the business does. Now look at the second paragraph — this contains all the contact information about the business.

Creating Visual Hierarchy

Hierarchy is conveyed by the way in which elements are grouped and sub-grouped. For example, a grid-based layout, with appropriate gutter sizes, allows for plenty of room between sections, and in many cases, it forces the designer to implement principles of proximity without even thinking about it.


Good And Bad Design

Good Design: The MTA MetroCard Vending Machine

New York’s iconic ticket vending machines, designed by Antenna Design and featured in the Museum of Modern Art, have always delighted the design appreciator in me.

MTA Vending Machine
  • Clear digital and physical mapping: The mappings inherent to the interface and physical structure strongly contribute to the machine’s usability.

Touch screen – Black

Cash & coins section – Green

Metro Card section – Yellow

Credit/ATM Card Section – Blue

Change/ Receipt – Red

  • Instant feedback: Every press of an on-screen button results in an immediate change in screen state (like flashing effect and moving texts to the top menu bar), letting users know that their inputs are resulting in actions.
  • Low risk of making mistakes: Various slots each have unmistakable physical clues for how to operate the machine. Insertion areas for ATM cards, MetroCards, and bills all feature distinctive shapes that do not permit the accidental insertion of the wrong object. The coin slot is designed to accept only coins. The receipts fall into a compartment with a hinged outer door, which clearly permits dispensing as opposed to insertion. There’s also an image of showing which direction we should insert the metrocard in for refill.

Bad Design: The Washington DC MetroCard Vending Machine

  • So much information on one machine, no hierarchy, overwhelming to userS. Ticket buyers are confronted with an overwhelming amount of information yielding an unguided flow of user interaction, causing traffic jams at the machines.

  • Price chart hard to read, causing back up at the machines.
  • Does not have multiple language options
  • New farecard amounts automatically start at $20.00, users have to manually adjust the price in the window to the fare and click all the way down to the price they want.