03. DELTA

AIRLINE BOARDING PASS

 

01 Rearranging the componentsTo begin with, I started to rearrange the components of contents according to user-centered experience. The ticket will be divided when they are ticketing from the staff, so this has two purposes. I separated the ticket out for before ticketing and after ticketing.

+Before : The ticket needs to help people to figure out the gate and boarding time.    +After : The ticket should inform to people about flight, seats, and bags.

 

02 Setting Priorities And then, I prioritized the contents to deliver information clearly. Also, I categorized the relevant information together because this will enable people to check it at a glance.

 

03 LayoutLast but not least, I set hierarchy to make intuitive visual graphics by using san serif fonts. I chose to use Helvetica and Gotham with black and grey color because I wanted to make a great balance with the logo of DELTA. The reason why I used Gotham font is to emphasize the user’s information since the font is basically bold compared to other fonts.

 

EXPRESSIVE WORDS

03. Button Switch

Link

03. Button Switch

I wanted to make a beautiful Winter Wonderland. If a user clicks the button, snow is falling down like winter. Also, I wanted to add the changeable BG color, responding actual time with scroll-bar. However, because of my technical ability, I made the simple snowy world by using Button switch.

P5

Github

03. Observation & Labs

Connected Worlds by design-io

Exhibits at the Hall of Science. Photo by David Handschuh

I visited Maker Fair and the Hall of Science last weekend. In the Hall of Science, I interestingly witnessed people who are enjoying Connected Worlds attraction, used by multiple people. The attraction is a large scale immersive and composed of six interactive ecosystems spread out across the walls, connecting together by a 3,000 sqft.

The attraction is surrounded by interactive forest and people can interact with animals and objects by hands. I just thought the interaction was made by the movement of people such as jumping, running and walking. However, the interactive experiences are made by gesture sensing by using MS Kinect. The devices were hanging up with the ceiling and this traced the behaviors of people, sensing with the digital animals in the wall.

Exhibits at the Hall of Science. Photo by David Handschuh

However, there was a difficulty to make multiple interactions with a few people because the Kinect was able to trace only one person each. Also, the device could not offer people to specific interactions because of technical problems.

Although there are some difficulties, the way of interaction and intuitive conversations are really great in terms of usability. Especially, simple interactive ways provide children with enjoyable experiences by responding their behaviors.

Exhibits at the Hall of Science. Photo by David Handschuh

The whole transaction takes almost 10min by offering various creatures and plants based on the health of the environment.

 

Labs

I set up a basic digital circuit which is connected to IDE. The five LEDs that I added are sequentially controlled by the logic that I made. Because of the rule of the digital signal, I used pinMode and digitalWrite(number,HIGH/LOW) to connect with digital IO circuit. Also, I added delay time to make an integrated LED performance.

 

02. An Adjustable Shelf

I have some stuff that I need to use on a daily basis such as earphones, keys, and lines. Since there is no proper shelf to arrange them, I try to untie the knot every morning. Because of this inconvenience, I designed an adjustable shelf which can be recreated by various blocks.

STEP 1 (Line, Polyline, Filet, Point, Divide)

+ Drawing the basic guideline to make the shelf (300X400mm)

 

STEP 2 (Circle, Extrude Surface, Loft) + Designing a module by using a circle.

+ Making a surface to build a shelf.

+ Extruding circle to make the holes of the shelf.

 

STEP 3 (Boolean Union)+ Making holes by using Boolean Union function.

STEP 4 (Extrude Surface, Scale 1D, Scale)

+ Designing blocks which can hang the stuff up.

STEP 5 (Move)+ Putting the two parts together, connecting from the blocks to the surface.

02. Sign

BUS STOP  This sign of the bus stop is really clear because it displays bus numbers with the final destinations. As we know, Manhattan is not only for New Yorker but also for a lot of travelers. When they take a bus, they probably have a concern if the direction is correct or not. But this signage delivers clear direction by displaying the specific district.

 

WALK SIGNAL This is a sign for a pedestrian. The majority of signs is based on visual information. However, there are a lot of visually impaired who are exposed to danger. I believe signage on the street needs to not only deliver correct information intuitively but also help people to be safe. This sign delivers both ways by utilizing 3d dimensional tactile characters. Visually impaired people can probably read the information by hands.

 

BIKE ROUTEThis is a sign for Bike Route. I think the sign is not sufficient for a driver and a biker. In my case, I was not able to recognize where is the route. That area is a really dangerous crossroads, so improper or insufficient signs can cause the traffic accident when a driver turn right. Consequently, I tried to add the colored bike route sign on the road. I believe the sign will be able to convey appropriate boundary for drivers and bikers.

 

ROAD SIGN

This is a road sign for a driver. Although the sign has clear information, the position is not appropriate for drivers. The sign is located on the right side of the road and it would frequently cause very confusing situations to drivers. If the sign would be hanged with the car street light, it would be more effective.

02 Week – An Interactive Artwork of Mondrian

Link

02. Animation

I wanted to design the animation on the artwork of Mondrian by utilizing the functions that I learnt from the last class. Under the basic structure of an artwork, I added some movements and color animations which can be controlled by the mouse. Especially, I truely practiced changeable functions randomly by var or let.

First, I made moving circle objects on the basic structure to eliminate the original frame because I wanted to change to various colored works. And then, I added an appearing white screen with falling colorful snow to make a transition. Lastly, the artwork is continuously changing when someone is clicking the mouse on the work.

– Main Functions : var circleX,Y / let r,g,b = random(number) / mouseX,Y / var x = random(0, width);

Here is the sketch for you, Tri it!

Github

 

01. A Coffee Mug

I usually start every morning, drinking a cup of coffee by this mug. When I came to NYC, I immediately bought this cup at the Bookstore to drink coffee on a daily basis. Although I designed a bunch of architectural projects by utilizing Rhino, I would like to focus on designing industrial products and appliances to create interactive products like IoT. Consequently, I started to create an ordinary product to looking into its usability.

 

STEP 01 (Line, Curve, Polyline, Offset, Fillet, Point)+ Drawing outlines by using polyline and curve functions.
+ Editing points to design the smooth shape.

 

STEP 02 (Revolve)+ Revolving lines to make the shape of the Mug.

 

STEP 03 (Arc, Sweep 2 Rails)+ Drawing four-arc to make an outline for the handle of the cup.
+ Sweeping 2 rails with the four-arc to make the rough handle.

 

STEP 04 (Text, Pull Curve)+ Texting the Logo of the cup by utilizing Text function.
+ Extracting the curves from Text.
+ Pulling the curve to a Surface of the mug by using Pull curve function.

 

 

 

01. Design Analysis

THE MARTIAN

THE MARTIAN’s Poster delivers an Interesting and curious story. I think a well-made graphic design should deliver an intuitive and imaginable narratives.

First, the Mars has quite a harsh environment where we can’t live. So we always need to wear a spacesuit to survive. Also, Matt Damon’s expression tells us how he is missing the Earth. Those components tell us Matt is in the Mars and he probably wants to go back to the Earth.

Dominant color is dark brown because of a background image. I think It delivers gloomy mood. I extracted the color from impallete service.

The font is Bourgeois which belongs to Sans Serif. I think it conveys modernistic and futuristic mood. Due to the dark background, the font is white in order to have highly readable typography. Also, to make a hierarchy, Medium is used on only the main title.

Two pictures compose the basic layout. First one is the Mars, the Second one is the main character. Matt is a really famous actor who can guarantee big box office in the world. That’s why he is on the poster. I think Title and description are centered on the poster to make a balance with these pictures.

1week_Martian

01 Week – Mondrian

Link

01. Introduction and Drawing

I’m fascinated with artworks of emerging artists.

This summer, I designed a social art service called BBuzzArt as a UX designer. The service is an art social platform and art-market which can globally connect between emerging artists and art-lovers. I truly believe that the service will be a helpful incubator and healthy ecosystem for global emerging artists.

I have a plan to create an interactive museum by using a bunch of painting and photograph on winter show. So I would like to focus on designing interactive image-transition system. Although I’m not sure yet, I will probably try to extract Pantone colors and objects from artworks by using HTML color data and google image recognition system. The data will be a great source to design artistic transition called data visualization.

In the ICM Wiki page, I like to admire NYC Street Trees, Urban Layers, Jennifer Steinkamp and teamlab.

 

 

     

The first work is an artwork of Mondrian.

I set up Canvas (500×520) because the work is not square even though it seems an exact square. Plus, I sketched basic composition with four-narrow rectangles to make a proper proportion. Also, I added sub-lines by drawing short lines. And then, I filled the lines in dark gray color and added no-fill function.

After making a composition, I designed colored rectangles. I measured an exact point from existing lines to draw main objects. I found out the color from HTML color picker (). Consequently, I filled in four colors by using color function.

Github Link >

 

+ Problem & Solution

A drawing artwork was not easy compare to designing that by using Adobe. Actually, it was the very first work because I’ve never used coding tools before. To make a better output, I need to eagerly understand how to code and practice various works.

01. What is interaction?

Now, we live in the connected world. The world is built by advanced computer science tech by using a specialized language. The language enables us to interact with people, creatures and artificial objects, so we can converse with them regardless of a language barrier. Although I agree that interaction is a conversation as the author’s opinion, I would like to emphasize that interaction is “communication” between people and objects or entities that provide the functionality of these actions in the context.

I always communicate with them in the real world. I wake up at 8 o’clock by clicking alarm button on an app and this automatically tells me today’s weather. I commute to ITP by checking PATH time schedule on iPhone. Google map shows me a variety of ways to get there. At the lunchtime, my friends and I order meals on Uber eats while the plants I grow are also having enough water, light, and nutrients with a smart garden device. After class, I frequently work out at 404 fitness to check my health condition with a wearable device. And then, before bedtime, Awair which is a smart air conditional device informs me air condition of my room and I control air condition by utilizing the app to have a good night’s sleep.

Those actions and behaviors are interaction which can not only communicate with devices and services, but also artificial objects, and creatures by connecting incognizable health condition, imperceptible air condition, and inexpressible plants. In this process, communication is connected by “body language” called physical computing. Some creatures and objects tell their conditions or opinions with a movement. Designed sensors and technologies immediately detect the movement and convert to a specialized language to connecting their communications.