Matthew Kaney at ITP

(Specifically, Visual Language projects)

Color

Visual Language

Color Visualizer

For my color composition, I decided to play around with Two.js, a javascript graphics library. The visualization is a sort of spiky line graph that moves up and down, and as the lines move up and down, the height of the segments above the middle of the page determines the hue offset, saturation, or brightness.

My color composition is located at this link. Use the left and right arrow keys to change between hue, saturation, and brightness modes, and any other keys to change the base hue.

Code

Instead of drawing every frame (like Processing), Two.js allows you to create vector shapes and then modify the properties of those shapes over time. So, for this, I started by creating two sets of points: one set that ran along the midline of the screen at random distances, and a second set running along the bottom of the window, directly below the first set.

// Points is a 2d array: Row 0 holds all the points along the bottom
// of the screen. Row 1 holds the points that move up and down above
// the mid-line.
points = new Array();
points[0] = new Array();
points[1] = new Array();

// From left to right, pick random values between 0 and the width of
// the animated figure. Create two points at this horizontal position.
for(var i = 0; i <= width - 5; i += Math.random() * 10 + 5) {
	// These points are relative to the center of the screen
	points[0].push(new Two.Vector(i - width / 2, two.height / 2));
	points[1].push(new Two.Vector(i - width / 2, 0));
}

// Add the final two points, so the figure is the exact width of
// the variable 'width'.
points[0].push(new Two.Vector(width / 2, two.height / 2));
points[1].push(new Two.Vector(width / 2, 0));

Then, I created a Two.js object that manages all of the graphics, a container object, “group”, that centers the content

// Create a new Two.js object to hold all the artwork.
two = new Two({fullscreen: true}).appendTo(document.getElementById('home'));

// This group is a container for the art. Move it to the center of
// the screen.
group = new Two.Group();
two.add(group);
group.translation.set(two.width / 2, two.height / 2);

// Now, loop through each pair of vertical points in our points
// array. (That is, points[0][x] and points[1][x])
for(var i = 1; i < points[0].length; ++i) {
	// Make a polygon with this vertical pair of points and the
	// previous vertical pair of points.
	var poly = new Two.Polygon([points[0][i-1], points[1][i-1],
				    points[1][i], points[0][i]]);

	// Now, add this polygon to the container group
	group.add(poly);
}

From there, I keep track of a variable ‘mode’ that is set to 0, 1, or 2, for hue, saturation, and lightness. On arrow key presses, I switched out the mode, and updated the basic hue.

var mode;
var hue;

//This is triggered whenever the user presses a key
function switchMode (event) {
	// First, if left or right is pressed, adjust mode up or down
	if(event != null && event.keyCode == 39) {
		mode = (mode + 1) % 3;
	} else if(event != null && event.keyCode == 37) {
		mode = (mode + 2) % 3;
	}

	// Now, pick the default background color, based on the color mode
	if(mode == 0) {
		// For hue mode, pick a random hue
		hue = Math.random() * 280;
		backgroundColor = hue + ', 60%, 50%';
		var label = "hue";
	} else if(mode == 1) {
		// For saturation mode, medium gray
		hue = Math.random() * 360;
		backgroundColor = '0, 0%, 50%';
		label = "saturation";
	} else {
		// For brightness mode, black
		hue = Math.random() * 360;
		backgroundColor = '0, 0%, 0%';
		label = "brightness";
	}

	// Now, set the background to the background color
	document.getElementById('home').style.background = 'hsl(' + backgroundColor + ')';
}

With a random hue set, the only thing remaining was to update the position and color of the animated graphics. This code is called once per frame:

// Wobble all the points in the array points[1] up and down.
for(var i = 0; i < points[1].length; ++i) {
	// First, use a sine wave to move points up and down
	points[1][i].y = (Math.sin(frameCount * 0.05 + points[1][i].x * 80) *
			 (maxLength - minLength) / 2 + (maxLength + minLength) / 2) * -1;

	// Now, scale the movement of those points based on their distance from
	// the horizontal center, giving us nice high peaks in the middle, tapering
	// off to the sides.
	points[1][i].y *= Math.abs(Math.abs(points[1][i].x / (width / 2)) - 1);
}

// Because we've modified the points, their associated shapes have already updated.

// All that we need to do now is modify the colors for each polygon.
for(var polyName in group.children) {
	// Iterate through each polygon in the group.
	var poly = group.children[polyName];

	// The polygon has two heights: the height of its left side and its
	// right side. Calculate the average height.
	var avgLength = ((-poly.vertices['1'].y - poly.vertices['2'].y) / 2) / maxLength;

	// Now, use that average height to compute either hue offset, saturation,
	// or lightness, depending on the color mode.
	if(mode == 0) {
		var color = 'hsl(' + (hue + avgLength * 80) + ', 60%, 50%)';
	} else if(mode == 1) {
		var color = 'hsl(' + hue + ', ' + avgLength * 100 + '%, 50%)';
	} else {
		var color = 'hsl(' + hue + ', 60%, ' + avgLength * 100 + '%)';
	}

	// Fill and stroke the polygon with this color.
	poly.fill = color;
	poly.stroke = color;
}

Logos

Visual Language


41266

This week in visual design, we’ve been discussing logos. To begin, I’ve been poking around at the history of the DC Comics logo.

Variants collected by Comics Alliance.
Variants collected by Comics Alliance.

As a popular comic book publisher, DC has always had a clear visual identity, drawing on the stars and swooshes of their superhero titles. The most iconic is probably the 1976 “DC Bullet” logo, designed by Milton Glaser. In 2005, DC rebranded, replacing the logo with a much more dynamic swoosh that I feel is a bit over the top.

Two years ago, they rebranded again, revealing a new logo designed by Landor. When a single black and white version of the logo leaked, it met widespread criticism—the logo was too boring, the gradient looked bad, it lacked the excitement of the comics it came from.

DC Logo Variations Today

DC Logo on Comic Covers

Once DC announced the rest of the brand, I think these fears were unfounded. There are still problems (the gradient is pretty obnoxious), but the logo’s simplicity (a geometric “D” folding back like a page to reveal a “C”) makes it a great canvas for all sorts of experimentation.

In particular, the logo looks fantastic on the cover of comics. Tucked in the corner, with the logo’s left edge flush with the comic’s spine, the page metaphor becomes even more obvious. In the exact same corner of every DC title, the logo can subtly echo the color scheme of the page while standing apart—providing a simple, understated constant in an otherwise loud, changeable composition.

The second part of the assignment was to design a new logo for ITP, something that could represent the program both to people familiar and unfamiliar with the program. According to the creative brief, the logo should “reflect the rigor/seriousness of the program but also the creative and experimental nature of the program”.

Sketches

After sketching out some ideas, I settled on the idea of “connection”. To me, the philosophy of ITP is all about making unconventional connections—between skills and viewpoints, between different disciplines, and between different technologies. I decided that the logo would be a series of juxtapositions—chance combinations of different icons representing aspects of ITP. I settled on the “t” as a plus sign that anchored the brand across logo variations.

Logo Type Experiments
A few type variations. I tried to not use Century Gothic (as this is my third week in a row to use it), but in the end, I couldn’t resist.

After figuring out the typography, I began hunting down icons from The Noun Project. Based on the weight and position of the “i” and the “p”, I established boundaries to ensure that all of the icons I chose would subtly reflect the proportions of these letters.

Quadrant of Logos

I don’t intend these variations to stand on their own. Rather, I see them being presented alongside the logo (see above), or in an more interactive context (hover over the logo to the left). At smaller scale, I feel like the wordmark could also stand on its own.


All the icons came from the Noun Project, which licenses their icons for free under Creative Commons, with attribution.

Computer by Daniel Shannon. Microchip by Arthur Shlain. Puppet by Juan Pablo Bravo. Drill Press by jon trillana. Tree by Ferran Brown. Yarn by Marie Coons. Cell Phone by Joris Hoogendoorn. Handset Phone by Juan Pablo Bravo. Television by Alexandria Eddings. Radio Tower by iconoci. Bacteria by Maurizio Fusillo.

Business Cards

Visual Language


11694

Business Card

For this week’s visual language assignment, we were asked to design some sort of calling card or business card. My design is above. I like the visual contrast between the television static imagery and the clean, geometric black and white text. The composition is based off of a simple half-inch grid, which defines the edges of the two white text boxes. The text is set in lower case Century Gothic, one of the fonts I chose last week.

Animated Business Card

The card is double-sided, with identical text on each side, but different static images. My original plan was to attach a thread inside each card, so it could be spun like a thaumatrope, giving the illusion of moving static. On the left is an animated simulation of what this would (theoretically) look like. Unfortunately, in practice, I couldn’t get it spinning fast enough to make a convincing illusion. In the end, I left the cards double-sided, without adding the spinning mechanism.

Typography

Visual Language


41504

Abril Fatface

Abril Fatface, a modern serif with very high stroke contrast. I like the flourish on the “y” and the way the double “t” joins. When it comes to serif type, I have a deep love for slab serifs. They have some of the respectability of serif typefaces, but with a more modern appearance, I think.

Charis

If I needed something not as loud, I might use a face like Charis SIL. It’s still a slab (or very close to one) and has very clean shapes, but it’s the sort of typeface that would work well for setting a large block of text.

Chunk

At the other end is something like Chunk, a heavy slab serif that’s great for titles and headings (even at pretty small sizes).

Century Gothic

Century Gothic, a lovely geometric sans-serif. It’s upper-case letters are hit or miss (in my opinion), so I set this in all lower-case. I like geometric typefaces a lot—this one sets up a nice contrast between the round shapes (like the “a” and “m”) and the straight lines of the “t” and “h”.

League Gothic

Another good sans-serif: League Gothic. It’s tall and thin, but not in a way that looks off. I particularly like the way that the top of the “a” curves around in what appears to be a perfect half-circle.

Avenir

Finally, another of my favorite geometrics is Avenir. It’s not as stark as something like Futura or Century Gothic, but it still retains enough of those straight lines and perfect circles to be interesting.

Here’s the whole set. In general, I want my typography to be visually distinctive without being too decorative or over the top. I think this set of typefaces strikes that balance well.

Names

In addition, here are a couple type treatments designed to express certain concepts: blinds, dissonance, and angle.

Expressive Type 2

Signage Found in New York

Visual Language


39942

For my second week of Visual Language, we were assigned to look around New York for examples of good and bad signage.

Fire/Police Call Box
The engraved text on the button reads “Push”. That unfortunately didn’t show up in the photograph.

First, and example of some really well-done signage. This call box is probably 30-40 years old, but the instructional design very much holds up. The use of large text and iconography is clear, and the instructions are concise. Additionally, there is an excellent hierarchy of information. The complete instructions are printed out at the bottom for a casual viewer who has time to leisurely read. However, someone who is in a hurry can figure out what to do first without reading anything, at which point they receive a reminder of the next step. This philosophy—making sure that viewers get the information they need when they need it and not before—is key to good signage.

Below, were a few examples of signage I found that were poorly-designed, misplaced, unclear, or some combination of the above. As it turned out, all of my examples involved arrows. I think arrows are so brilliantly simple, but so easy to completely mess up when one’s not paying attention. And when that happens it (apparently) bothers me.

ATM

For example, the ATM is not down there. The arrow immediately misdirects attention and should have been physically cut off the sign. To be fair, I think this reflects poorly not on the store but on the ATM company, who for some reason decided that this sign would be best hung directly above the ATM. In most cases (such as this one), I can’t imagine that placement would be ideal. And, besides, a bright red “ATM Machine” sign without an arrow would convey the same message hung above the ATM, and would ultimately be more flexible.

Door Opens Outward

More strange arrow choices. To start with, which door? The one the arrow’s pointing to? That’s obviously not the case. It must be the other one, then. However, that door’s opening is protected by the wall between the buildings, so it’s unlikely to catch anyone by surprise. Indeed, it’s impossible to both read this sign and be in the path of the door. And again, the arrow: does the door somehow open past the arrow? And why is a straight arrow used to illustrate a curved path?

No Smoking

And finally, it seems like a terrible idea to use the word “this” and an arrow in such close proximity if they don’t refer to the same thing. It’s a simple sign, but the strange layout of content makes it much more confusing than necessary. (And, given that it’s probably a mass-produced sign, here in the doorway of an NYU building, there’s no reason it wasn’t better designed.)

No Smoking Revised

Here is the same sign with my revisions. Bold type with plenty of negative space pulls the eye toward the main message. The secondary message about the air intake is placed at the top of the sign (which makes sense spatially), but in a less visible manner. In addition, I removed the “above”, because the arrow communicates that unambiguously.

Graphic Design Analysis

Visual Language


23368

Areas of My Expertise

For my first assignment in Visual Design, I’m going to discuss the cover of John Hodgman’s The Areas of My Expertise. This book is loosely based upon the structure of an almanac, but filled with absurd information, made-up trivia, and other such nonsense. This book launched Hodgman’s career of film and tv appearances (particularly on The Daily Show and as the PC in the “Get A Mac” ad campaign), and eventually led to two followup volumes.

At the time, though, Hodgman was mostly an unknown writer and humorist, and the design of this book does an excellent job of setting the tone for what to expect.

Image from The Old Farmer's Almanac
Image from The Old Farmer’s Almanac

The design draws inspiration from the Farmer’s Almanacs from about two centuries ago—with lots of text, complete sentences, and variations in font size–while pushing this aesthetic to its absurd limit. In addition to the main information, every bit of available space is crammed with text: Lists, notes, descriptions, and even (in small print) the full text of the book’s introduction. At the root, the design is a humorous illustration of the tension between information and confusion. The various text and figures that crowd the book’s cover attempt to inform, but the end result is a chaotic mess. This conflict between sense and nonsense reflects the book’s absurd, deadpan humor, as well as its overabundance of content—charts, footnotes, captions, asides, digressions, appendices and the like. Whether you find this approach to the cover intriguing or off-putting says a lot about whether you’ll enjoy the book.

Basic Grid Structure
Grid Structure (Click for Animation)

The composition of the page is ultimately pretty basic. The cover is subdivided, first horizontally, and then vertically, and then horizontally, and so on. Like the cover itself, this structure is somewhat arbitrary, with heights depending on how many lines of text will fit in a space. However, even for something so intentionally crowded, the design makes sure that you can understand the important information. First, the color scheme is very simple: a bright blue and orange, as well as white text. The colors contribute to the cover’s visual loudness, while dividing the content between important (orange) and not (blue).

Color Scheme

The text, meanwhile, is mostly set in medium weight Futura, with different sizes indicating different levels of importance. Most dramatically, the author’s name is more than twice as large as the next-largest text, allowing it to stand out from the sea of letters. Most importantly, the title receives a unique type treatment. It’s set in a different, condensed typeface, is even larger, and has a solid black drop shadow (the only black on the cover). Because of this font change and use of black, the title immediately commands the viewer’s focus.

Type Detail