Color hue test and color composition

Get the code: Processing

Taking the color hue test is a way to gauge your color acuity, or perception of changes in color. A perfect score is 0, which means that you successfully arranged the elements of each color gradient in the correct order. I scored 8 so it seems I am quite colorfully acute.

The other part of this assignment was to create a color composition and alter it in a few ways. Below are my compositions. The first is the original and the other three have been manipulated by hue, brightness, and saturation, respectively.

Final project: Sound Kites

Get the code: Arduino + Processing

My final project for Physical Computing (with Yu Ji) is called Sound Kites. It is an installation/space consisting of sheets of fabrics and materials hanging from the ceiling to a height of about seven feet off of the ground. Attached to these sheets are strings which trigger a soundscape when pulled on.

This project evolved from a few different ideas that we had which centered around using a fan or source of air to create interesting interaction. One idea was to amplify a user's breath by syncing it with a fan. Another idea involved using a fan to float the sheets of fabric in order to produce a buoyant effect. Some of this early work can be seen in one of Yu's blog posts.

After some deliberation, we removed the fan from our project entirely. It wasn't clear what the fan was adding to the experience, and we were able to create the interaction we desired without directly using air in this way.

The circuit is very simple - there are 3 stretch sensors and 3 pull-down resistors connected to an Arduino Uno. Pulling on a string stretches the stretch sensor, causing a change in resistance which is picked up by Processing (working with Arduino through serial). Two different thresholds for the sensor values cause sound to be played either normally or with a phaser effect.

The sounds were found on open-source audio websites like the Internet Archive, Freesound (windchimes), and Behance (i/dex). I edited the three sound files to make their keys more similar, and we only used portions of the files. The sound loops continuously and only the gain setting is affected when a string is pulled, meaning that it would be possible to synchronize sounds to give the user even more complex interaction.

We used the Minim audio library to play sounds through Processing, which caused us problems with the quality of the audio playback when changing the gain. This introduces pops and clicks into the audio which definitely diminished the quality of the interaction experience. If this projects goes forward we will need to explore other options for producing sound.

The project was well received by our class. One interesting thing was that most of the users, when asked later, didn't know where the sound was coming from (computer speakers sitting on a shelf). This pointed to the fact that we had completely engaged them to the point that they didn't even think about the system's operation. This fact was a big achievement for us and will undoubtedly influence our future design decisions for this project and others to come.

Logo analysis & design

I think Chevrolet has a very successful logo. The Chevrolet Bowtie, as its called, is a simple shape which can be used for just about anything. It can be embellished or left plain. It can stand alone or with a title. It's so good that it can be used equally well as a 3-D garnish on a vehicle or a 2-D emblem on a page.

The history of the Bowtie, according to the official Chevy Culture page, is up for debate. There are no less than four competing theories, and each one is speculative at best. The only certainty is that the logo was introduced in 1913 by the company's co-founder, William C. Durant. The possible sources of inspiration include:

• the wallpaper in a French hotel
• an original sketch at dinner one night
• a newspaper advertisement for the Southern Compressed Coal Company
• the national flag of Switzerland

The Bowtie is powerful regardless of its origins, and I kind of enjoy the fact that the genesis of such a successful design has been lost to time. It adds to long tradition of this logo and proves that good design often comes from serendipity, something that I experienced while redesigning the ITP logo.

Obscure ITP logo

Current ITP "logo"

ITP does have a logo but I had to do some serious digging to find it. It's not easily found on the ITP website and maybe that's because it's fallen out of favor. I myself don't really like it - I think it's cheesy and has a weird sense of visual weight. What's more commonly seen instead are the letters "ITP" in a thick sans-serif font. This is a boring, if not uninspiring, representation of a community that puts such emphasis on creativity and communication.

I started by sketching logos and evolving forms which I found appealing. My first ideas included an arrow to symbolize forward-thinking. On its own, this didn't produce great results, but it indirectly led me to considering the "P" as a shape instead of a letter; specifically, a semi-circle attached to a rectangle.

By the second page I had mostly scrapped the arrow idea and was experimenting with ways to pack the three letter shapes together to minimize open space. After sleeping on the designs, I chose to continue with the very last one from the second page.

Once I starting trying colors from the NYU color palette, it was clear that this design had more potential than I originally thought. Instead of having a completely white "T" as in my sketch, I blended the colors where the letters overlapped (using this Color Blender tool).  The result is a much more interesting logo that still has the simplicity of the original design.

The fading not only solved the problem of the top bar of the "T" disappearing off the logo on a white background, but it also lends the logo nicely to single-color applications, which is important so that it can be used in a multitude of ways.

Two unexpected things came out of this.  The first is that the overlap of the "I" and the "T" looks like it could be the dot of the "I", which is a nice effect.  The second is that this design makes the "I" and the "P" stand out significantly. With the unique approach to Intellectual Property taken at ITP, this seems to be particularly apt.

AMS & Aerogel

During class we took a tour of NYU's Advanced Media Studio (AMS) and their 3D printing systems. We saw some models produced on the various systems, many of which were printed in 24-bit color. They have MakerBots, of course, but they also have some "professional"-grade laser printers including the ProJet 7000 which prints at a resolution of 4,000 layers per inch.

After we returned to ITP, Peter pulled out some aerogel, which was truly incredible. It feels like styrofoam but weighs almost nothing, and is semi-transparent. It was probably the strangest material I've ever seen and touched, and I couldn't stop taking pictures. Neither could anyone else.

Experience: Exchange Place

I received my experience invitation from Jason Sigal back in October and had yet to go through with it. Today I decided it was finally time for action, so I took the F to the A out of Brooklyn and arrived blocks away from the World Trade Center PATH station, the first stop on the journey.

Jason provided a series of audio tracks to accompany different parts of the experience. I was impressed by the production quality and appreciated the minimalistic sound design he used combined with his own voice, giving me information and instructions.

I arrived at the PATH station but it was impossible not to stop for a moment to take in One World Trade Center. Because of its height it was literally impossible to capture the ground and the top of the building in a single frame. Jason's helpful narration assured me I was in the right place, and guided me into the station so that I could catch a PATH train to Exchange Place, in New Jersey just over the Hudson River.

At times Jason included sounds that he himself had recorded in the exact same location, and it was strange to hear recorded sounds that matched the environment I was in, but that did not match temporally. Also, his narration invoked imagery of a friendly futuristic robot, as did the minimal sound design I mentioned earlier.

There was a track meant to be listened to every place along the way, including in the PATH train, and on the escalator exiting the Exchange Place station.  Above the escalator there is an installation of neon lights by the artist Stephen Antonakos, which I found rather uninspiring.  I appreciated Jason's curation of this exhibit, but I felt that the lights did not do anything for the space; they seemed haphazardly arranged and lacked cohesiveness, mostly relying on the shock value of neon in a public space.

After exiting the PATH station, I was directed to the Katyń Memorial, a statue memorializing Katyń massacre of 1940 in which the Soviets murdered around 22,000 Polish prisoners. There were flowers on the steps of the monument, and I witnessed at least one person cross themselves as they paused to respect the victims.

Looking back over the Hudson River gave me an amazing view of downtown Manhattan. I may have put this experience off for far too long but I was glad that the day I chose was bright and crisp, though cold. It was interesting to compare One World Trade Center to the Empire State Building (seen in the second photo above).  The difference in distance makes it appear even smaller than it actually is compared to the newest addition to the city's skyline.

Jason provided me with a ticket for the NY Waterway ferry between Exchange Place and the World Financial Center ferry terminal. He also included music for the ride. I was instructed to look for the Statue of Liberty, which I found directly in the beam of the setting sun.  I also looked back at Exchange Place and noted how sparse the skyline looked in comparison to that of Manhattan.

The last stop was a visit to the Irish Hunger Memorial.  This may have been my favorite part of the trip, as it was a very unique architectural experience and something which I had never seen before. It's meant to raise awareness of the Great Irish Famine of 1845-1852 which killed millions due to starvation.  The last picture is an example of how unique this place is - you can frame a photo that appears to have been taken somewhere in the hills of Ireland, yet you are standing in the financial center of the world.

This experience was carefully crafted and I thank Jason for taking the time to put it all together. The short trip made an impression that will last much longer than the hour or so it took in reality. I was able to see new things, revisit old things, and all the while be personally guided by precise narration, intriguing insights, and a general feeling of positivity.

Business card design

My business card design is quite simple but I think the contrast it creates is quite striking. On the front I used Arial Bold for the letters of my name. I set them off the left side of the card so that part of the letters are obscured. My goal was to make them legible while adding a unique design element to my name.

The back features my basic contact information set vertically on the right side of the card. I wanted to match the general aesthetic of the front but use the opposite of the card for contrast.

The grainy background is the kind of paper on which I would ideally print my cards.  It has multi-color paper specks that give the card texture.  Also, the text is not black; it is actually a dark gray, as pure black seemed too harsh.

Typography and expressive words

I set my name in six different fonts (three serif and three sans serif) to explore which font styles I prefer. It became clear that I prefer a relatively simple font style, regardless of whether or not it has a serif. Also, I discovered my penchant for large x-heights, as almost all of these fonts have this characteristic, and that my name lacks letters with descenders so it's hard to comment on the baselines.

I really like the third on the list, Big Caslon, because the capital A has a very distinctive glyph with a slant on the top. It makes the first letter of my name stand out nicely.

The expressive words were difficult to design but by the third one I felt more comfortable with the idea. I think my fractal-themed word design is by far the best.

Final project plan

Description

My final project (with Yu Ji) is an interactive system that allows a primary user to amplify both their breath and image. The primary user will blow into a sensor controlling one or several fans, and the speed of the fan(s) will mimic the strength of the user’s breath. The primary user’s face will also be projected onto to a screen behind the fan, making the interaction more personal.

The other users (people in front of the screen/fan) will work together with the primary user to make musical tones by putting objects directly in the stream of air created by the fan. The exact interaction and physicality has not yet been decided.

Timeline

Tuesday, November 12, 2013 
Project plan and bill of materials

Tuesday, November 19, 2013
Prototype with all components (blow sensor, fan, screen, camera, and ?)

Tuesday, November 26, 2013
Finalized design and implementation with two-way interaction

Tuesday, December 3, 2013
Project done


Testing plan

1. Build prototype
2. Test prototype with friends/colleagues
3. Incrementally test while finalizing interaction design
4. Test final version

Bill of materials

Box fan	$18.88
Nicer piezos	? x $1.50
Borrowing a lot of stuff	$0.00
TOTAL:	$18.88 + ?

Success and failure of signage

This week I made a record of signage which I encountered that was confusing, misleading, badly designed, or all of the above.  I found several examples but the ones below are worth further analysis.

I found this advertisement a few years ago in a bus station in upstate New York. The tagline "Is getting to work getting to you?" isn't that bad but the design is over-the-top wacky. It's clear that the company, Centro, is probably involved in the transportation industry, but there is no additional information and the ad is highly forgettable.

The awning of Park Slope restaurant Istanbul Park Turkish and Mediterranean Cuisine has a potentially great design that is poorly executed. The spire atop the dome in the picture to the left of the name represents the letter "I" but to passerby it simply reads "Stanbul".  The ultra-decorative typeface only serves to distance this text from the "I". Additionally, the full name is "Istanbul Park" but "Park" is in green and obscured by a tree.

This sign, which I found in Cold Spring, New York, features instructions for crossing the street. However, it seems vastly more complicated than it needs to be. The typefaces, iconography, and layout do very little to guide the reader to any logical conclusion. Because most of us are too familiar with crossing the street to require literal directions, it is easy to overlook this confusing sign.  That's why I chose to redesign it.

I started by standardizing the typeface (using Arial). Then I eliminated the confusing iconography and verbiage in favor of non-repetitive icons and simple phrases like "When hand is flashing...".  I also included plenty of negative space to reduce the cluttered feeling, and I removed the section about the timer because I felt like a countdown timer is a fairly intuitive thing, given the context.

My design could certainly be improved but I think it's already much better than before. If I continued this redesign I would take a longer look at the bottom section.  There are eight signs per intersection (two pointing to each crosswalk) and perhaps the arrow is more clear that simply "to cross right".

The sign above is one that I like.  It is a traffic sign in a residential/park neighborhood in Melbourne, Australia, warning drivers to watch for aged people crossing the street.  My parents got a kick out of having their picture taken below it, and it has a special place in family stories about our trip there.  It is an ordinary sign, even ugly, but it has sort of transcended its intended role.

Final project prototype

This is a small prototype of my final project.  The full-size object will have miter joints so there will be no visible seams.

Also, I may change the design a bit.  I think the thick band of acrylic looks very nice but I plan to experiment with an extremely thin band as well.  There will be a light source inside so that the band of acrylic glows.

Design analysis: AmazonSupply

For my design analysis I chose AmazonSupply, an industrial supplier operated by Amazon.com.  My current work outside of ITP is in a similar industry, and the design practices associated with this kind of industry are usually very bad.  However, AmazonSupply sets the standard for such a website.

The home page has five columns - one for navigation and four for product grouping - that keep the information organized.  The header content is split over the first column and then centered over the remaining four columns.

As far as negative space is concerned, there is not that much room to breathe.  One of the hallmarks of this industry is to pack in as much information as possible.  AmazonSupply uses the grid system combined with a white background to make the content stand out through contrast.

The two primary fonts are Verdana and Arial, used for the product category links and the vertical navigation menu, respectively.  I could not identify the other fonts in use (in blue and green boxes) although part of this is the AmazonSupply logo.  Regardless, all fonts are sans serif which gives the page a clean feel.

Finally, the color system is very simple which adds to the clean feeling.  Besides black and white. there are only six colors used: two blues (#2161BD, #6391D4), three shades of gray (#2E2E2E, #484848, #BFBEBE), and a gold for link hover (#CC7A00).

To summarize, adherence to a strict grid, use of similar typefaces, and a basic color scheme make AmazonSupply easy on the eyes and easy to use.