Visual Design | Brett Peterson

Visual Language: Color

Let’s start with a test:

The task is to arrange the colors from one end to the other in order to create a seamless gradient. The lower the score, the better. How’d you do? Here’s my score:

I did pretty well! I found that if I stopped looking at the individual colors and looked at the whole range, It was much more apparent which colors were in the wrong order.

The next part of our assignment was to create a sketch to explore 3 different aspects of color: hue, brightness and saturation. I created a pixel mirror that would use only 1 of the three from the original pixels and set the other 2 values to a constant number. Here’s the original, reflecting the correct hue, brightness and saturation:

Here’s what happens when you keep the brightness and contrast constant and only reflect the hue of each pixel:

Here’s brightness:

and Saturation:

The sketch I made will cycle through these when the user clicks the mouse, and the value for the other 2 variables is set by the mouse’s y position. Here’s a video:

http://vimeo.com/55553932

and here’s the code:

https://gist.github.com/4279216

Visual Language: Logo Design – Part 2

The next step of our homework assignment was to create a new ITP logo. I had been thinking about this all during the weekend so when I sat down with my pen and paper today I was ready to go. I started with brainstorming ideas about what ITP means to me and others. I wrote down things like Creative, Flexible, Technology, Art, Experimental, etc. I was very inspired by the flexible systems in my last post so I got to work.

I first thought about the typeface. I initially wanted to use the negative space, so I knew I’d need a chunky one. I decided on Helvetica Bold for the iconic shape and the weight. I then started thinking the flexibility. ITP stands for a lot of things to a lot of people, and everyone’s experience is slightly different. I wanted that to show in my logo and give users the ability to customize their logo for different use cases (such as business cards, etc.) Here’s what I came up with:

pdf here for more options.

as I was making the pdf and scrolling through, I loved the way it looks as it flipped through the colors so I made an animated gif of it (Click to view):

Visual Language: Logo Design – Part 1

I really enjoyed this assignment to study logo design a bit. We were asked to find a logo that we liked and feel is successful. In thinking about modern logo design, I remembered a few that I really liked that were flexible and changed depending on the many different circumstances a logo is used for these days. After some searching I found this blog post from last year:

http://www.bbmg.com/news-its-how-we-live/2011/03/dynamic-identity-systems-trend-or-an-evolution-in-the-principles-of-logo-design/

A few of these I think are really successful (Brooklyn Museum of Art, City of Melbourne, Museum of Arts and Design) and a few I think are pretty terrible actually (Bay Area Library Information Systems, MIT Media Lab) – yet all logos are flexible, changeable but still consistent. I particularly like the Brooklyn Museum of Art logo.

This logo was created by 2×4, a design firm here in Manhattan back in 2004. I love the color. These 8 designs around the standard “B” show the different aspects of the museum and the diverse content there.

Next up: my ITP logo redesign

Business Cards – first version

Front:

Back:

I really like the pixel caricature I use as my avatar for my email and other sites, so I wanted to include that with a friendly greeting on the front. I wanted to use a vertical format, but knew that my long name (and email, and website…) would pose a problem. I decided to solve it in a couple ways; first, I put everything at an angle to keep the font size large, and make it a bit more visually interesting. I also combined my name, website address and email address instead of writing it out 3 times. That did, however, introduce a bit of confusion with the twitter handle, so I added the twitter bird to make that more clear.

The “code + design” was an addition to remind others what it is that I do, or am interested in. I made a version without it as well. I’m trying to decide which I like better.

I wanted to keep it very clean and to the point, but I’ll definitely make a few more versions before I finalize this.

Typography

For this assignment we were asked to set our name in six typefaces; 3 serif and 3 sans serif types each. The choices are supposed to be used to describe us or parts of our personality. We were also asked to create expressive text – words that describe themselves. Here’s what I came up with:

name_and_expressive_words – PDF

Can you tell why I chose these words? Which do you think best represents my personality?

And here are my expressive words:

Bad Signage

This week’s assignment was to find examples of ineffective signage around our neighborhood and then to redo one as an example. Here’s what I found:

Some signs were very hard to read like the one below. What’s the name of this salon? I have no idea.

Then there were signs that were crammed full of words. What is “EMILY” up there for? Why is it covering the address? Just confusing.

This next one hits close to home because, well, it’s close to my home. We live on Summit Street. I’m not sure where that other name comes from, and I’ve never seen any address with “Monsignor Delvecchio Place” so I’m not sure why they need to share a sign. The only real effect of such small lettering is that most cabs and food deliveries drive right by it.

Here’s the beauty that I’ve decided to redo. This sign is taped (rather poorly…) to the door of a delicious deli. Their meats are actually delightful, but I wouldn’t believe the sign.

So here is my design. First, I’ve replaced the hand-written sign with one using a couple nice typefaces. I made the background colorful to still be eye-catching, although maybe not as much as the neon green. The items are lined up and given a slight bit of color, enough to stand out from the title. Take a look below and comments welcome

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.