Category Archives: Uncategorized

Printing Code: Typography

This assignment was difficult for me. Here’s the brief:

This week you’re going to design a word. Pick a word and make a typeface around it. The important thing is that you draw the letters using some kind of rule-based logic. Look at the examples I showed in class, and try to come up with your own typeface system – even if it’s very simple. Your goal is to convince me that you can make a typeface that is better constructed in code than in Illustrator.

So I started thinking about what I wanted to design and decided that I needed more constraints. I chose to make my font using negative space – designing around the letters instead of designing them. I took the visual of an audio equalizer as a loose inspiration.

I chose the word “FUTURE” to design since I wanted my type to look modern, clean and, well, futuristic.

I started creating my system of letters. Each letter consists of 3 columns and each column consists of between 2 and 4 bars to create the negative outline. I then drop these into a vector with a column of space after each one.

Screen Shot 2014-02-26 at 6.04.50 PM

At this point, it looked like something I could have very easily done in Illustrator. It just looked like a kinda-crappy pixel font. But since I had set up the letter system to be dynamic, I was able to play with the weight of the letter, the height, spacing and angle of each column. I liked that I was able to adjust the properties easily.

DSCF5691

Overall, I think it came out ok. I had a hard time with this assignment and I’m not sure the final output is really indicative of the work put in. But I like the grey on grey in different shades.

Code on Github.

Visual Design Assignment – What I like

Our first Assignment for our Visual Language class is to identify an example of design that we enjoy and then analyze it using the design principles we learned in class.

I love the minimalist posters created by Justin Van Genderen. (more here) I had seen these before starting this class, and only knew that I loved the simplicity and cleanliness of the design. After analyzing them more deeply, I see that he’s adhered to many of the design guidelines we discussed. I like all his sets (especially the star wars and space series) but for this exercise, I’ll focus on the Space Race – Astronaut series and this photo of the Gemini project:

 

 

 

Color

Color was used sparingly and thoughtfully throughout the design. There actually is very little of it. The background of the main image is a dark blue that looks a bit transparent, allowing the texture of the background to come through, almost as if it was screen printed onto the paper below. The texture of the paper is also interesting, lending an aged appearance to the entire work.

Typography

Although I couldn’t identify the typefaces used in this poster, it looked like there were only 2 used: 1 for the title “PROJECT GEMINI”, and another for the body. The heading for the body text looks like the same font as the body, but just bolded. (EDIT: Whatthefont.com identified the title as ITC Avant Garde ExtraLight, though the body text was too small to analyze) This is something that I learned from our first class on the principles of typographic design: use only 1 or 2 fonts max. I’ve fallen into this problem before, thinking I need many different fonts to look interesting. I definitely see that keeping it to 2 has the desired clarity the designer was looking for.

Layout

I was surprised to see after I started drawing overlays that his columns were not quite the same width. What was consistent, however, was the whitespace. The gutters between the columns were the same size, and there was a consistent border all around the poster. I also really liked the fact that the space capsule itself is made using negative space.

Processing catch-up post

I haven’t posted any of my ICM homework to my blog yet, so this post will take care of it in one shot! Here are a few of the projects I’ve worked on recently.

Sparks

Move the mouse inside the window to create sparks!

Equalizer

The inspiration for this one was an equalizer. I ended up spending way to much time thinking about the math of the line heights

Symmetry

click inside the box to start drawing.