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.


Fan Group Observation

A fan tweeting about the signing event

So the both of us went to attend a book signing for a YA author named Ryan Graudin, held at an indie bookstore called Books of Wonder. Jade has no previous knowledge about this author, while Shannelle’s very familiar with the fandom, but she wasn’t expecting it to be so small. There were about 20 people attending. She was following a Twitter called YA Book Events NYC, who had been live-tweeting the event as well sharing updates like how the event was starting a little later than advertised, or pieces from the talk. From the angle of the photos, we guessed that she was one of the two people sitting at the front in the second column of seats, which didn’t really matter, as they were friends.

Shannelle found out about this as she was lining behind a relatively well-known book blogger, known as Alexa, and the two people we were guessing to be the YA Events tweeter went up to her, along with someone else, and started chatting about books. Shannelle managed to hear Alexa complimenting someone else about her readings speed, and she even saw one of them hand over an advanced reader’s copy (ARC-cheap editions of a book sent to media for review purposes ahead of the publishing date) of Batman: Nightwalker over to Alexa. Since the author’s Marie Lu, it’s definitely an ARC that’s very, very in-demand.

Fans waiting in line for signing
Taking selfie with the author

So arguably, these are the big-name fans, and we’re guessing they’re in the middle-aged demographic. We didn’t really spot someone who looked like a teen (what does a teen even look like?), although there was a middle-aged man, and including us, we were definitely the smaller players. Again, since it was small, there wasn’t really a chance for people to assert their hierarchy, like people waiting in line before Hillary Clinton’s signing event at Barnes and Noble in Union Square. From Shannelle’s previous years being in the online fandom, she argues that those are far better group cohesion activities, especially with how people show off the ARCs they receive from publishers, and offline activities like signings can be a way to show off hierarchy–I was at this event and you weren’t!–if the author is big enough.

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.