Redesign of a sign.

For this week’s assignment, we were told to keep an eye out for examples of good and bad design on signage around the city. I began looking for confusing or wordy street signs, but I quickly realized that New York City’s Department of Transportation has been remarkably comprehensive with its redesign of all the street signs. There was a lot of uniformity, especially in NYC’s subway system. Here’s an example of an ad from the MTA that educates passengers about appropriate behavior on the subway:

1I thought the MTA ad was visually eye-catching, clever, and humorous. It communicated a lot of information in a few words. The left alignment of the text makes the sign more readable. The font choice – Helvetica – is consistent with other signage in the subway system and also makes the sign readable.

As I began looking for examples of less effective signage, I turned my attention to signs advertising goods or services and I found some really interesting examples of bad design.

A truck advertising plumbing services. Although the logo isn’t terrible, the hierarchy of information on this truck makes your eye move around before you can find the important information. I don’t even know what I’m looking for. IMG_1989

An ad on the subway for educational services. The font, the spacing, the choice of photographs and clip art adds up to a really ineffective advertisement. The placement of the “E” and the “L” in “Electrical” makes little sense.IMG_1992

A corner bodega. The sign isn’t terrible, however I think the hierarchy of information could be improved. IMG_1978

I decided to re-design the last sign, which advertises a grocery store that is open 24 hours a day. The store name, Havemeyer Grocery, should be most prominent, followed by the store hours (around the clock). The store offerings aren’t as important to include on the sign. Here’s the revised sign I designed:

Havemayer-Grocery

Portrait of a classmate with p5.js.

This week’s project was an exercise in patience because, to paraphrase the poet Mary Ruefle, I’m just a handmaiden with a broken urn when it comes to writing code. I felt like I learned a lot, though, and I’m slowly developing a process for these assignments.

In our first class, we were introduced to the basic functions in p5.js, function setup() and function draw(). Our assignment this week was to draw a portrait of one of our classmates using only primitive shapes in p5.js (translation: no complex shapes, no animation, no interactive elements).

Here’s a link to the final portrait.

My process was simple: (1) Sketch out the drawing in Illustrator; (2) Create a quick outline in p5.js; and (3) Code like hell.

I found it helpful before even writing a line of code to use Illustrator to make a sketch so I had a better sense of what kinds of shapes I’d be drawing. In terms of color, I used the site Coolors to generate the RGB values that matched the color scheme I envisioned.

Here’s my initial sketch and the outline of shapes I planned to use:

Sketch

Sketch---shapes

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

From there, I started coding.

Overall, I wanted the portrait to be symmetrical so I was doing a lot of math in my head to calculate some of the x and y coordinates for each shape that I drew. Just about all the shapes I drew were various combinations of quad(), rect(), ellipse(), triangle(), and line(). There was a lot of trial and error, since I was pretty much guessing at where different points would be on the canvas.

That proved to be a massive headache since I was constantly trying to remember which line of code corresponded to which shape in the drawing and which coordinate corresponded to which point on the shape. It’s no big deal when you have three shapes, but when you are drawing 30+ shapes it can get messy.

I found it helpful to organize my lines of code with some subheadings: //face, //hair, //shirt, etc. I think that in the future I will create a much more detailed system for labeling shapes in my code.

I quickly realized that the portrait I’d sketched out at the beginning of the project was going to be an ambitious undertaking with the limited tools that were available to me in p5.js (since we could only use functions that drew primitive shapes). It took me longer than I’d anticipated, but I found that I was able to add a lot of detail to the portrait despite these limitations.

Here’s a screenshot of the final portrait:

Portrait screenshot

Overall, the project was an excellent exercise in learning the basics of p5. Here’s my full code:

function setup() {
createCanvas(1000,1000);
background(132,220,207);
}

function draw() {

//shirt
stroke(33,131,128);
fill(33,131,128);
quad(50,450,80,350,420,350,450,450);
quad(80,350,190,300,310,300,420,350);
stroke(130,150,133);
fill(130,150,133);
triangle(190,300,290,400,220,395);
triangle(310,300,290,400,330,350);
stroke(60,132,131);
fill(60,132,131);
ellipse(232,382,10,10)
stroke(97,61,193);
fill(97,61,193);
quad(120,330,160,312,190,450,155,450);
quad(400,337,350,317,375,450,400,450);

//face
stroke(230,202,171);
fill(230,202,171);
triangle(190,300,310,300,290,400);
quad(190,300,200,270,300,270,310,300);
quad(180,230,320,230,280,300,220,300);
rect(180,160,140,70);
quad(180,160,320,160,300,90,200,90);

//hair
stroke(161,131,87);
fill(161,131,87);
quad(180,230,320,230,280,300,220,300);
triangle(180,230,180,190,199,230);
triangle(320,230,320,190,301,230);
quad(170,185,180,185,200,130,177,115);
quad(200,130,177,115,210,65,267,55);
quad(200,130,267,55,290,90,270,90);
quad(267,55,270,90,300,110,320,100);
triangle(270,90,250,110,260,90);
quad(300,110,320,100,330,140,310,150);
quad(310,150,330,140,320,185,315,185);
triangle(300,105,299,140,315,170);
triangle(200,130,196,155,180,175);
rect(207,149,23,4);
triangle(207,149,207,153,199,160);
rect(271,149,23,4);
triangle(294,149,294,153,303,160);

//face #2
stroke(230,202,171);
fill(230,202,171);
ellipse(175,185,26,50);
ellipse(325,185,26,50);
triangle(200,229,240,229,220,250);
triangle(300,229,260,229,280,250);
ellipse(250,260,33,11);

//facial features.
stroke(133,138,227,100);
strokeWeight(1.2)
fill(222,255,240);
quad(226,168,210,168,203,177,233,177);
quad(274,168,290,168,297,177,267,177);
stroke(86,88,87,190);
fill(86,88,87,190);
ellipse(223,172,8,7);
ellipse(287,172,8,7);
stroke(222,242,200);
fill(222,242,200);
ellipse(225,170,3,2);
ellipse(289,170,3,2);
stroke(133,138,227,0);
fill(133,138,227,110);
quad(203,177,233,177,226,181,210,181);
quad(297,177,267,177,274,181,290,181);
quad(243,230,259,230,267,223,235,223);
quad(267,223,235,223,242,218,260,218);
stroke(133,138,227,100);
strokeWeight(2.2);
line(258,217,258,163);
line(228,181,210,200);
line(272,181,290,200);
line(290,310,280,370);
line(230,313,260,350);

//hands
stroke(230,202,171);
fill(230,202,171);
rect(136,410,68,13);
rect(138,425,70,13);
rect(136,437,70,13);

//hair #2
stroke(161,131,87);
fill(161,131,87);
triangle(186,185,189,163,175,160);
triangle(314,185,311,163,325,160);
triangle(175,140,175,123,165,145);
triangle(210,67,190,79,210,75);
triangle(330,138,338,143,325,120)

//glasses
stroke(71,44,27,230);
strokeWeight(2.7);
noFill();
ellipse(217,175,44,24);
ellipse(284,175,44,24);
line(239,175,262,175);
line(195,175,182,170);
line(306,175,318,170);

}

Combinatorial creativity. Or, why everything’s a mashup.

tumblr_nrlebbS26B1qme9tao1_1280Painting by Kyle Jorgensen. From the Bootleg Bart art exhibit, in which local Salt Lake artists produced art based on the Simpsons character. 

As a society, we are enamored with wrapping our heads around the creative process. In Distrust That Particular Flavor, William Gibson suggests that each of us is developing our own personal microculture: the accumulation of every book we’ve read, every conversation we’ve had, every movie we’ve seen, every piece of art we’ve seen, and every song to which we’ve listened. Design legend Paula Scher echoes Gibson’s thoughts in an interview in which she describes the creative process as a “slot machine” that remixes the collection of experiences you’ve amassed in your life. Combinatorial creativity hinges on our ability to actively cultivate this private microculture.

If we all agree that influence is vital to the creative process, then why do so many people resist a “remix” culture?

In a Harper’s article entitled “The Ecstasy of Influence,” (h/t Harold Bloom) writer Jonathan Lethem tackles the complicated subject of plagiarism in art. While acknowledging the role that copyright law plays in a market economy, Lethem falls into the same camp as Gibson and Scher, advocating the type of “open source” culture in literature and art that exists in jazz/blues music, for instance.

We are ultimately shaped by the writers and artists who came before us, argues Lethem. When some of the notes or coloring written by others leak out into our creations, it’s a normal part of the creative process. He puts it so eloquently:

“Finding one’s voice isn’t just an emptying and purifying oneself of the words of others but an adopting and embracing of filiations, communities, and discourses. Inspiration could be called inhaling the memory of an act never experienced. Invention, it must be humbly admitted, does not consist in creating out of void but out of chaos.”

One of the major ideas underpinning postmodernism is that nothing is truly original. Everything is parody or imitation of something else. Probing this idea further, Lethem argues that most everything that’s ever been written or said is plagiarism. We receive everything secondhand, drawn from hundreds and hundreds of other sources that are imperceptible to us.

On an anecdotal level, my first introduction to some of the best pop culture and film was through parodies that appeared on The Simpsons (who can forget the brilliant Kubrick love letter ‘The Shinning’?!) My first brush with classic literature was watching a dog play Cyrano de Bergerac, Faust, and Tom Sawyer on the television show Wishbone. When I’m working on a visual project, my first impulse is to flood my mind with poetry, art, and photography.

So again I’ll ask the question: Why resist an “open source” culture?

Screen Shot 2015-09-09 at 1.24.46 AMArt by Alexa Hall. From the Bootleg Bart art exhibit.

The ethics of creative license can get murky. Artist Joy Garnett shares an interesting anecdote in which she was accused of copyright infringement for modeling a painting on a documentary photograph without giving attribution. The photographer in question – Susan Meiselas – offers up her side of the story. The man in the photograph was a Sadinista rebel hurling a bomb at the Somoza national guard in 1979. Meiselas says that she doesn’t object to reappropriation of the image, but she does object to the degree to which duplication has decontextualized the photograph from its original meaning.

“History is working against context,” she says. “We owe this debt of specificity not just to one another but to our subjects.”

Although combinatorial creativity is inherent to art, artists enter a gray, murky area when they choose to riff off of others’ work. When it comes to telling stories from cultures that differ from our own, context matters.

My undergraduate studies were focused on a specific geographic region and culture – the Middle East and Arab culture – and so I’m sensitive to the ways in which Western cultures have chosen to represent (and misrepresent!) conflict in the Middle East. Often when dramatic images from the news circulate, they are ripped from their context and therefore lose their meaning. For instance, this week the Internet reacted to shocking pictures of a Kurdish refugee child whose body had washed ashore in Turkey. While many articles sought to educate the public about the Syrian refugee crisis, the images themselves converted the boy into an emblem, a victim of broad conflict in the Middle East.

So where does that leave us? I’m not certain. Like Lethem, I’ve been influenced by writers and artists in my own creative work and I think that as a society we should continue to cultivate a “remix” culture. On the other hand, I want the art that is being created to add to the conversation, not detract from it.

Principles of design.

Here’s an example of a website that I thought exhibited many of the principles of good design we discussed in class. The site was designed by Alt Group for Silo Theatre, located in New Zealand, for their 2012 season.

Here’s what the site looked like:

11

Grid. The site has a proportional composition, with elements organized according to a regular grid pattern.


33

Composition: There is a lot of negative space on the site, which eliminates some of the visual “noise” of the information presented. In terms of layout, the Silo logo is most prominent, located in the top left corner. The main menu is also easy to identify. As you scroll down, you can find more detailed information about individual productions.

66

Typography. The typefaces used here are clean, sans-serif fonts.

77

Color. The color palette on the site is very minimal. There are only three colors: black, white, and pink (hex #f3ccde). In researching Silo Theatre further, I found that every season the theater kicks off a new branding campaign with a different color. For instance, this year the site is using a palette of black, white, and yellow (hex #ead863).

88

Overall, I loved the site concept, the clean composition, and the simple color palette.

Physical interaction.

tumblr_m31sp34PRP1r2ysm3o1_1280Robert Irwin at Pace Gallery. “Red Drawing, White Drawing, Black Painting.” 2009. Source.

How do we define physical interaction?

According to Chris Crawford, interaction is a cyclic process that requires two actors, human or otherwise, who alternately listen, think, and speak. In this way, physical interaction can be considered a kind of two-way conversation. Interactivity, he argues, is a deliberate behavior in animals that developed millions of years ago in order to help humans better retain information about their environment. Crawford is quick to clarify that not every encounter is interactive, however. For instance, reading a book is participatory, not interactive, because it is a one-sided communication.

While this definition might seem fairly straightforward, many designers contend that it might be too narrow. In his piece “A Brief Rant on the Future of Interactive Design,” Bret Victor suggests that many interactive designers are too quick to abandon the tactile in favor of the visual. Victor argues that our interaction with everyday objects can be considered interactive because they offer us physical feedback. Holding a cup of water, for example, is a tactile form of physical interaction that gives us more information than interacting with an app on an iPhone.

I tend to align myself more closely with Victor’s definition of interactivity – after all, we are constantly receiving physical feedback from our environment that engage all of our senses, not just our vision. I don’t think designers should be so quick to dismiss all these other types of encounters as forms of physical interaction.

What is good physical interaction?

Regardless of how you choose to define interactivity, good physical interaction needs to be intuitive, engaging the various “languages” that humans already use to interact with the world, whether that be auditory, visual, or kinesthetic. A good interactive designer aims to minimize the memory load and the amount of mental effort humans need to put into the interaction.

In his book, Crawford argues that interactivity engages the mind more powerfully than any other form of expression. Research seems to back this assertion, as it’s been proven that interactive classroom environments help students better retain information.

What about non-interactive digital technology?

Most digital technology is to some degree interactive. However, I agree with Crawford that there are many experiences we have branded as “interactive” that aren’t really two-sided interactions. Reading a Kindle might require the user to swipe, but it’s otherwise pretty non-interactive. Watching a movie in a movie theater or on Netflix doesn’t require much interactivity.

In the future, we’ll witness the emergence of new forms of technology that turn what was once a non-interactive experience (for instance, watching a movie) into an interactive, participatory experience. Several films at Sundance last year explored this new form of storytelling, including “The Source (Evolving)” and “I Love Your Work.” I think we’ll continue to see artists deconstruct the interactive/non-interactive binary.

Introductions.

11024706_10152931009226097_4759372392274667250_n

Illustration of me by Jaryn Bunney.

Hi guys, I’m Becca. Welcome to my head. This blog will serve as a repository for ideas, projects, and works in progress undertaken during my time at NYU’s Interactive Telecommunications Program (ITP).

Everyone I’ve met this week through NYU’s ITP program has one thing in common: We’re interested in too many things. In fact, many of us wear our cross-disciplinary backgrounds as a badge, putting our faith in the complex web of ideas to which we’ve hitched our wagons. This week I’ve had conversations with students in my classes who are neuroscientists, circus performers, graphic designers, industrial designers, physicists, marketers, and filmmakers. We’re all over the board — one of the reasons I know I’m in the right place.

My academic and professional background is varied. I obtained a B.A. in Arabic language and Middle East politics, with a focus on tribalism in the MENA region. Since then, I’ve spearheaded several oral history projects in New York and Utah, volunteered with Arab refugee communities, done freelance work as an illustrator and designer, worked to develop content strategy for a marketing department at a tech company, and with most of my evenings and free time, I write as much as I can.

I’m interested in understanding the kinds of collective stories that are told in communities. I want to explore the relationship different cultures and communities develop with their physical environment and landscape. During my time at ITP, I’d like to develop tools and projects that explore participatory storytelling in its many forms. I’d also like to spearhead some transmedia projects that explore these ideas.

My goals this semester are to (1) get uncomfortable every day; and (2) allow myself to become okay with building something before I’ve totally mapped out a conceptual framework.