ITP Logo Redesign

Exploration & Iteration

I started with pen and paper but ended up doing most of the design exploration in Illustrator.

Photo Oct 19, 4 32 03 PM

Doing iterative design in Illustrator totally new workflow for me. Very convenient for iterating designs…almost too convenient. I definitely spend a lot of time tweaking and not a ton of time starting with a fresh idea.

The design started with ‘ITP’ in a variety of fonts. I took a couple of the ones I liked and stylized them. The basis for the final design is a monospaced font called Inconsolata. Using it is a nod to traditional monospaced programming fonts.

ITP_Logo_Boards-48

Final Design

This was incredibly close to the first version. I found something I liked and tweaked it until all of the elements came together.

Like I mentioned before, the font choice was a nod to monospaced programming fonts. The abstract nature of the negative space only works because it’s borne out of the rigidness of the capital letters of ‘ITP’. This highlights the duality of the program; the complex structure and disciplined academic focus balanced by the creative, abstract, artistic and conceptual nature of a lot of the work.

Also using the interior shape as a mark is a way of making details important, which is something I’m finding is a constant theme in work at ITP. It’s also a recognizable and scalable symbol that could eventually represent ITP without any lettering at all.

Additionally, the small diamond at the base of the logo can be used as a cool, subtle accent.

Note:

  • Each letter is connected.
  • The negative space forms two interior shapes.
  • The interior shape between ‘I’ and ‘T’ is extrapolated to create an ITP mark that can be used in place of, or in addition to the logotype.
  • The stylized angles on the upper bars are identical
  • The angles on the lower bars are also identical (but different from the upper angles).
  • Small diamond can be used as an accent.
  • Colors were chosen based off of NYU guidelines and what I’ve seen around ITP. (The green is from the ITP Camp website.)

ITP_Logo_Boards-41

ITP_Logo_Boards-42

ITP_Logo_Boards-44

ITP_Logo_Boards-45   ITP_Logo_Boards-43

Logo Critique

Adobe

Love it or hate it, for most people in creative fields the name Adobe is synonymous with digital creative tools.

(Except for my Swedish friend Cris, who works in Autodesk Smoke. Which I’ve always thought of as some sort of powerful, mysterious thing. Like alien technology. In any case it’s something I know less than nothing about.)

The Adobe logo isn’t a roaring success or triumph of human creativity. But it is ubiquitous. And so it’s become extremely well known in creative circles. Which makes it easy to play around with while still maintaining its original associations and meaning.

And I do consider that a roaring success.

Original Logo

The original Adobe Systems Incorporated logo was designed by Marva Warnock in 1982. She was a graphic designer and the wife of John Warnock, Adobe’s co-founder and one of only two employees at the time.

adobe-old-logo

Contemporary Logo

Adobe’s current logo is a stylized version of the Marva’a original ‘A.’ They, like any behemoth corporation, have a very strict style guide (which you can download for your perusal and pleasure here). They have several variations of their logo that are prescribed depending on the situation.  The most common version is the two color tag, which is “reserved for Adobe use only.”

From their brand guidelines:

“The red tag logo should be used as an introduction of the Adobe brand on a communication, not as a signature to close a communication.”

Screen Shot 2014-10-19 at 5.00.01 PM

 Variations

You don’t get to be the chief provider of creative software the world over without making a few friends. Not surprisingly Adobe has partnered with creatives to create unique versions of their logo.

by Alex Trochut www.alextrochut.com
by Alex Trochut // www.alextrochut.com

These logos were created by Sagmeister & Walsh on a game show that they created for the campaign.

Here’s their full case study. 

Business Card Design

 

“I’m not a businessman. I’m a business, man.”

-JayZ

Designing for Me

This assignment was a lot of fun for the masochists in the class. Myself included. It was a very specific kind of physic torture trying to design for myself. I’m still not sure if I’ve fully recovered.

I started with a color scheme that I really love (it’s the same as I have on my portfolio site). From there I kept it tight with some creative typography and simple messaging.

Scheme

Color

The color scheme started with this photo by Morgan Maassen.

MorganMaassen_Ocean_28

The relevant thing is that the sharp contrast between the dark blues and the bright orange/pink is stunning. Not relevant, but worth noting is that I love everything about this image. The colors, the motion blur, the crisp outline of the surfer, the way the image translates speed. This image really captures the feeling of surfing for me. I like it more every time I look at it.

Anyway, I took a few colors from this image to use in my color scheme.

Typography

I chose what’s quickly become my new favorite typeface: Monox. I used the  serif light italic version. I wanted the type to have a little slant to it in order to break up the usually knolled corners of business cards. I didn’t want the information to feel like little boxes in a slightly larger box.

Snapshot

Here you can see the font, colors, and design element together before being composed on the card.

SchemeBlock-04

Design

I went through quite a few iterations of the design.

Front

Reverse

Final-ish Design

This is the version I printed for class. It’s fine. I like how simple and understated it is. I kept the messaging colloquial because stuff like “Impactful Results Driven By Collaborative Ideation” makes you sound like an ass and is almost always bullshit.

Card-05

This second version is what I’m going to continue messing around with. It’s definitely a work in progress. But there’s something to the division and odd duplication of this particular serif font that I think works really well.

Card-01

The jury’s still out on the reverse side.

Typography: Serif and Sans Serif

This week I explored typography by typesetting my name in three sans serif fonts (which is my general preference) and three serif fonts.

Sans Serifs

First up is Roboto. I really like this typeface. It’s got clean lines. It looks modern. And it’s easy to read. I chose the condensed light version because otherwise the repeated round shapes of C, O, and tend to stretch out the name too much for my liking.

RobotoCondensed

Next is Helvetica Neue Light. Again, a really clean, modern typeface. I used all lowercase because  there’s an interesting contrast in the height difference between the Ls and the Fs and the rest of the letters.

HelveticaNeue

This font is Gestalt. It’s ultra-modern? Post-modern? Übermodern? Either way it’s very cool. I really like the contrast between the geometric forms, the parallel lines and the round shapes.

Gestalt Linear Medium

 Serifs

Monox. An updated version of a classic monospace typeface. Meaning each letter takes up the same amount of horizontal space. This works especially well for my name because there’s not an overemphasis on the first letters of each word. Also there’s a nice difference in shape between the C and the O, which can get repetitive sometimes.

MonoxExtraLight

Big Caslon. A very classy serif with a decently sized contrast between thick and thin strokes. I like the details in this font, like the horizontally symmetric serifs on the C and the similar flag-looking serifs on the L and R.

BigCaslonMedium

Finally we have Klinic Slab. A less serious, but very charming serif. I set the name in Italic because the skew highlights the parallel lines of the L and Fs nicely.

KlinicSlabLightItalic

Family Portrait

Collection

 

Visual Language Week 2: Signage and Information Systems

This week I read the six-part Slate article The Secret Language of Signs found some signs that were successful and some that were complete failures and disgraceful embarrassments  and I fixed up one of the more pathetic signs to my liking.

I also rediscovered an incredible resource for icons called The Noun Project. Which is where I got the lovely icons adorning this post.

Broken    icon_37330 Signs

Useless. Contextless. Factually erroneous. Illegible. Irrelevant. Confusing Misleading. Ugly. Outdated. Creepy. Smelly.

These are just a smattering of insults I’ve personally hurled at bad signage. Yes, some of them are hurtful and, one could probably argue, childish. But so what? Poor signage and thoughtless information systems are frustrating timesucks (note to self: add “frustating timesuck” to list of insults for in/animate objects).

Chances are if you’ve noticed signage it’s because it caused confusion or problems. Good signs are like fine service at a restaurant or international spies: their job is done properly if you don’t notice them doing it.

Here are a few examples that I spotted this week of poor signage.

“The Foreigner”

Before you call me jingoistic or insensitive, please keep in mind that the assignment was to observe and report bad signage.

ReorderYouPhone_edit

Spelling and grammatical errors can render an otherwise fine sign laughable.

 “The Novel”

Here’s a scenario: I’m new in town. I arrived in NYC on a red eye in the early morning hours before color’s breathed into the sky. I’ve barely had time to change clothes and grab coffee. But here I am on the subway. I’m focused on one thing only. Which is getting where I’m going. I don’t have time for a litany of do’s and don’ts which seem like common sense to 99% of people.

Here’s another scenario: I’ve lived in New York for over a year and a half and I’ve never even noticed this sign before I was literally assigned to look it.

RulesofConduct_small

It’s too much information for a sign that’s trying to convey a simple code of conduct. (That’s why I’ve taken the liberty of re-designing it below.)

My Fix

Sometimes simplicity is the ultimate complexity.

RulesofConduct_Edit_1

I understand that this doesn’t explicitly cover all of the rules laid out on the original sign. And that’s kind of the point. This covers a broader and yet somehow more specific set of rules. The short, to-the-point copy is even more no nonsense than the long list. It’s also not so patronizing.

In any case, here’s the paradox: the people who need to understand that sign are the least likely to read it.

Attributions:
Broken Light Bulb by Gregory Sujkowski from The Noun Project
Sign by WARPAINT Media Inc. from The Noun Project
Sign by Murali Krishna from The Noun Project

A Visual Analysis of the Last Cover of Transworld Surf

September-2013-Cover_crop copy

This is just one (and happens to be the last) example of the re-design that was undertaken for Transworld Surf by Wedge & Lever. You can see their case study here

Grid

Sept2013Cover_grid2

The cover’s grid is broken into four equal vertical columns and three major, but unequal, horizontal rows. Plus there are a few equally spaced gutters dividing and padding the space between sections. This white space gives a super clean, stark look to the cover. Which was appropriate because this was the magazine’s final issue. (Hence the image of an intense wipeout. At least they still had their sense of humor.)

Hierarchy

Sept2013Cover_hierarchy

1. The first thing that catches your eye is the big, blue image of the guy going over the falls. The implied motion of the image draws your eyes down to…

2. The high contrast “Party’s” that’s cut off. Looking at the cover you catch a glimse of the red at the top too and your eyes are drawn back up there to the iconic Transworld Surf logo and the realization that the “Party’s over.”

3. Despite being so small, this bit of type actually stand out and gains some gravitas because it’s given so much white space. Plus there’s finality in the simple visual reference to a headstone.

Typography

 Din OT Black is my guess for the logotype. (Based on a tip-off from a font search site.)

I’m guessing some lucky art director whipped up a custom font for “Party’s over.”

Color

Sept2013Cover_color

The main colors are high contrast: white, black read. The other colors come from the blues and the greens of the photo.