Visual Communication – Week 9

Developing Final Project Concept

Last week’s feed back in class was really helpful.  For example, the large block color squares were deemed a little overwhelming.  Katherine suggested using one color for the square, for example, grey, and then adding an accent color.  Also, the class thought 6 boxes too much – it made me look too dispersed, and not focused enough.  I agree, so have cut the categories down to three, with an additional one for contact details and resume:

The sections are now:

• legal (incorporating legal work in London, policy work at Harvard)
• museums (work in PR dept at Tenement Museum, classes on museums)
• writing (creative and technical – possibly fitting in Noisy Idiots and thesis work?)
• contact/cv (I prefer cv rather than resume here, the two c’s look more pleasing).

I think in reality, work on online social networks could be abbreviated to research – and replacing the contact square, which -  can be a link at the bottom of the page.

So far though looking more like this:

Visual Communication – Week 8

Pantone – and the intricacies of CYMK vs. RGB

This week we continued to focus on color, were introduced to the hallowed Pantone Matching System Guide.  We also discovered how different a color looks on-screen compared to when it’s printed.

Thoughts begin to turn (as in all classes right now) to our end of semester projects.  For this class, we’re tasked with creating a portfolio website to show case our work.  I’d like to keep mine very simple as a splash page split into several image maps linking to the areas of my blog for each of my areas of interest.  As far as colors go – at this stage I’ve two ideas: 1) very simple grayscale or 2) very bold colors.

For example, each square represents a link to an area of my work:

- Legal/Policy Work

- Online groups/collaboration/Noisy Idiots

- Museums

- Creative Writing

Maybe a square for “about me and contact” and “personal statement”

Here is the bold color version:

Visual Communication – Week 7

Color Theory

This class continues to show me worlds I had no idea existed.  This week – color.  Katherine explained the basics of the color wheel (analogous, complementary) and the basics of hue, brightness and saturation:

‘Analogous colors are colors that are adjacent on the color wheel.

examples: gorilla glue and Underground Seattle

Complementary colors are opposites on the color wheel

example: University of Florida

The Color Purple

Monochromatic color schemes  use only the tints and shades of one color. If you mix white with a pure color you produce tints of that color. If you mix black with a pure color, you get shades of that color.

example: Microsoft Money

Color Triads use any three colors that form a triangulation on the color wheel example New Victory print piece or example: ProPublica

Hue – the color we describe, pure color. Color reflected from or transmitted through an object. It is measured as a location on the standard color wheel, expressed as a degree between 0° and 360°. In common use, hue is identified by the name of the color, such as red, orange, or green.

Value or Brightness – how much light. Relative lightness or darkness of the color, usually measured as a percentage from 0% (black) to 100% (white).

Intensity, tint or saturation – how much color. Strength or purity of the color (sometimes called chroma). Saturation represents the amount of gray in proportion to the hue, measured as a percentage from 0% (gray) to 100% (fully saturated). On the standard color wheel, saturation increases from the center to the edge. To change the saturation of a color, add the compliment color.
Demonstration of how to manipulate these properties in Photoshop and other programs.’

ASSIGNMENT

Take the color IQ test

I scored 40, oh dear.  It’s harder than it looks!

Read: color basic do’s and don’ts

Make two different compositions:
1. a composition that is an optical illusion using the same color blocks but having them appear to be different  because of its color juxtaposition. ( simple example) or  (complex example)

The example above confuses me – and I’m intrigued to know if it’s just me, but does the top right hand of the inner square look darker than its diagonally opposite corner?  If so, why?

The answer:  Having presented to class, the reason is the top left corner of the dark inner square is next to more of the light color brown compared to the bottom right corner.  Hence the top left side of the inner square looks lighter.

2. Make a second composition working using one constant variable of hue, saturation or brightness and changing either one or both of the other variables. (simple example) or (complex example)

In the above example, hue and saturation remain constant with the brightness varied in 10% increments from the outermost square (93%) to the smallest, innermost square (33%).

Visual Communication – Week 6

Branding

This week discussed branding following on from our discussion of logos the week before.  Katherine explains the concept as follows:

“Branding is the tangible and intangible elements that identify a company or its products and separates them from the competition. Nike  is an example of  a well known brand.  It has a strong association with speed, agility, endurance and strength in consumers mind. A strong graphic identity is an important element in a brand. The benefit of good branding is that people remember your business and have associative images of it and feelings for it.
Brand creates a promise of:

• Substance

People usually associate branding with larger businesses that have the money to spend on advertising and promotion. If you can create effective branding, then it can make your business appear to be much bigger than it really is.
An image of size and establishment can be especially important when a customer wants reassurance that you will still be around in a few years time.

• Reliability

A branded business is more likely to be seen as experienced in their products or services, and will generally be seen as more reliable and trustworthy than an unbranded business.

• Multiple Products

If your business has a strong brand, it allows you to link together several different products or ranges. You can put your brand name on every product or service you sell, meaning that customers for one product will be more likely to buy another product from you.

Elements of creating a brand:
Articulate the identity and the value proposition to the customer
A classic example is from Wal-Mart’s “Everyday Low prices” or Starbucks Excellent coffee in a warm relaxing setting.

1. Who are we?
2. What business are we in?
3. Who is our customer?
4. What are the unique benefits we offer them?
5. What are the values we represent?
6. Who is our competition?

Make all visual and experience designs true to that identity and value.
Example: Good design at good value proposition of Target.”

Assignment

Having read this BusinessWeek article on branding, think of some new designs for the ITP logo – or alternatively, if you have any logos of your own you’d like to discuss – bring to class next week.

SOKOMUNDI

My friends and fellow ITP classmates, Lee-Sean Huang and Elizabeth Fuller, and Stern MBA ’11 candidate Mayukh Mukherjee and me are competing in the 2009-10 NYU Stern Business Plan Competition with our concept – SOKOMUNDI:  an online community that enables individuals and small businesses to engage in the swapping of goods and services without the use of money.  The word ‘SOKOMUNDI’ is a combination of the Swahili word ‘soko’ for ‘marketplace’ and ‘mundi’ – the Latin word for ‘of the world.’

We are currently in the process of hammering out a logo, its evolution (in draft) is shown below:

SOKOMUNDI.COM draft logo (first iteration)

Elizabeth Fuller

Issues we discussed after looking at these various logos, included mostly the fact that the SMC initials (for SokoMundi.Com) could be perceived more as the word ‘elle.’  To counter this, the next set of sketches were drafted as follows:

SOKOMUNDI.COM draft logo (2nd iteration)

Lee-Sean Huang

The main change is to make the ‘M’ more recognizable as a letter.  We’d be really grateful for feedback.  The colors are currently in use on our website (sokomundi.com) – but we’re open to thoughts on that aspect of the branding also.  The bold colors were picked to be distinctive and playful.

Visual Communication – Week 5

“Your logo Sir gives me goosebumps.”

This week we look at logo design.  In class Katherine outlined the following key points:

Successful logos are:

• Distinctive
• Memorable
• Appropriate
• Practical
• Successful logos are usually clever

Logos can be:

• Typography
• Type and a mark
• Just a mark

We had our eyes opened to the wittiness of the FedEx logo (ever noticed the arrow in there?) and the evolution of the Shell logo through the years.

We read the Paul Rand’s thoughts on logo design and considered the evolution from the terrible to the effective by looking at the changes made to the Amazon logo over the past few years (astounding!).  Finally – we all groaned, and laughed over this one, I won’t repeat some of the comments…

This week’s assignment was to discuss a logo or logos that we particularly admired.  This may raise your eyebrows, but here’s mine:

This is the 6th AT&T Bell System logo – designed by Saul Bass in 1969.  It achieved a 93% recognition rate in the United States.  Why did I choose this logo over all others, even the iconic Chanel interlinking C’s?!

Logo design is highly subjective.  And it boils down at the bottom line to goosebumps.  If a logo inspires a sense of wonder, of aspiration, of wanting to be part of whatever it represents, that feeling of awe when you see it on the side of the building or on a billboard then it is successful.

The effect of a logo varies as widely as each individual looking at that particular logo does.  In class later I imagine, I’ll be the only one getting quite so excited about the Bell logo, but I grew up with it.  My father worked at their labs in NJ, their papers stamped with this logo above were scattered about our house in the English countyside – to me it symbolized America, and my father’s success.  So yes, that bell in a circle gave me goosebumps.  I wanted that success that to me was encapsulated in that logo.  But there are others too, and for me its mostly to do with that stamp of power and greatness, of strength.  God, I sound like Donald Trump, but as I looked around deciding on my career, these huge logos on the skyscrapers I’d seen traveling: Telstra in Sydney, EY in NYC, Bank of America in Docklands in London – all inspired me.  And that is why I picked the bell in the circle.  Happily you can call me a geek after this post.  I really deserve it.

Visual Communication Week 4

Business cards…

This week we were asked to design a business card as follows:

Business cards incorporate typography, color, layout and sometimes logo We will review the design of business cards and attempt to design our own as an exercise in applying many of the visual communication skills we have covered.

Business card design:
Standard size is 3.5″ x 2″

• A successful card will help others know and remember you. Ideally it should convey a sense of who you are, what you do, or your interests
• Card must be legible

Choices to make:

• Typeface to use. stick with one, two at most and use the variations of weight  available to you. Use weight and size to establish a hierarchy. The most important item should be either larger, bolder, in a distinctive color or set off by more white space – or some combination. Things that are related logically should be related visually.
• Logo or no logo
• Color
• Format: center justify, left justify, right justify, full justify
• Punctuation: for  phone numbers option are dashes and parenthesis or periods or just space

I have a business card already – stating my name, the degrees I have, that I’m a qualified lawyer in England and Wales, my cell phone and NYU email address.  Having had a thought about the content of my cards, I decided it might be an idea to streamline them a bit.  After all, hopefully, the main bits of important information would be conveyed in a first meeting.

This weekend I am in London, and while here am visiting my best friend Tom and his girlfriend Jasmin this evening.  They are both architects with an amazing sense of design.  After dinner on Sunday we spoke about this week’s assignment and decided to have a go together.  I was glad for their help.  Jasmin took the helm with skill in Adobe Illustrator.  We discussed any playful elements of the card that might make me more memorable.  Jasmin asked what is the main thing people associate with ITP?  I replied slightly flippantly – blinkies.  However!  She incorporated the LED electronic symbol on the front of the card, and I suggested a capacitor on the back, as the idea of charge being stored up and with the potential to be released being perhaps slightly witty to indicate potential for creativity and interesting ideas.

We then worked on the typography.  The font is Gill Sans – Jasmin knows it to be a friendly and modern font, I very much agreed.  I found Jasmin’s idea very interesting to put my name in upper and lower case yet the rest of the card in upper case.  To me it initially  seemed slightly confusing, however – when we put my name in upper case as well as the rest of the card, it looked a little harsh and strong, but by putting my name in upper and lower case, it made it seem a little less austere, more friendly and approachable.  It also broke up the overall blocky-ness of the text – as I had tried to cram a lot of information in there.

The final point was the choice of gray for the text other than my name.  Again, this seemed smart – as it broke the text up a bit – and was an interesting design feature.

Huge thanks to Jasmin Sohi for helping me with ideas and the design of this card – it was a really useful learning experience to work with someone so talented in this area.

Here is the finished result, front and back:

Visual Communication – Week 3

Typography 101

Sometimes we’re completely oblivious to things.  This week, I learned I was oblivious to fonts.  I’ve been brought up on a diet of Arial and Times New Roman courtesy of Microsoft, and Katherine Dillon’s class has just blown this all out of the water.  People – there is a whole new world of amazing fonts out there…  I’ve just spent an hour or so lost in the website of Veer, and have been falling in love with a number of new fonts, including this one – its beautiful.

Here is the 411 on typography from Katherine:

Typography is:

1. The art or process of printing with type.
2. The work of setting and arranging types and of printing from them
3. The general character or appearance of printed matter.

A typeface refers to a group of characters, such as letters, numbers, and punctuation, that share a common design or style. Times New Roman, Arial, Helvetica and Courier are all typefaces. There are over 300,000 typefaces.

Fonts refer to the means by which typefaces are displayed or presented. Graphic designers choose typefaces for their projects but use fonts to create the finished art. Typefaces are selected. Fonts can be purchased at type foundries.

Character, which is any individual letter, numeral or punctuation mark. The capital letters are called caps, or uppercase (u.c.). Small letters are called lowercase characters (l.c.) Numbers are called numerals or figures.

Type Families The different options available within a font make up a type family. Many fonts are at a minimum available in roman, bold and italic. Other families are much larger, such as Helvetica, which is available in options such Condensed Bold, Condensed Black, UltraLight, UltraLight Italic, Light, Light Italic, Regular, etc. The univers font comes in a large family of over 30 options.

Classifications of type:

• Serif (old style, transitional, slab serif, modern)
• San serif – typically uniform in stroke width.
• Script
• Decorative

Got that?

Ok – so having listened to Please Explain: Typography, The Leonard Lopate Show I was ready to try this week’s first assignment:

Assignment 1

Create 6 examples of your name choosing font preferences with at least one example of serif, san serif, decorative and script: example. I kept in mind my name is a little tricky with a curvy C and a strong W.  They don’t naturally match too well together.  Here are my attempts.

Assignment 2

Create 2-3 expressive words: ppt example

I chose the words ‘boing’ and ‘roar’:

In the above example, I made the ‘g’ appear to be falling off the page – to emphasize the action and movement of the word.  I kept the letters light – as if they could indeed leap off the page.

This example made me think of lions, jungles and then bizarrely a military-esque font.  Perhaps fighting in the jungle, the roar of battle.  The text gets larger to depict the increase in volume when someone/something roars.

Visual Communication Week 2

Where are we going again?

This week we look at terrible signs.  For various reasons: do they make sense, do they look nice, do they tell you what you need to know? We were shown a number of examples from last year’s class – from the sublime to the ridiculous, the offensive on the eyes to the comedic.  My three examples are all from a recent trip to Cambridge, MA – my neigborhood for the summer.  All seen on a walk to the Central T-station along Mass Ave on Wednesday morning.

Weirdo Records

Issue: Am I a weirdo if I like the records in this shop?  Because I don’t want to be a weirdo!  Its in the name – perhaps more than the sign itself.  How to remedy – new name?  However, it may all be deliberate, and I just might be old….

Judd Brothers

Issue: The word “Brothers” seems out of synch with the lines above and below it due to the speech marks. It doesn’t sit appealingly.  Would the solution be to center the text in this case?

Central T-Station

Issue:  You can’t see the sign from ground level!  Its lurking down there, at the bottom of the stairs – but who would know.  Ok – admittedly, there is another entrance nearby and you can clearly see ‘Central Outbound Braintree’ but – not here, you wouldn’t know until you were down the steps!  Solution – to put the sign at ground level and not at the bottom of the steps?!

Finally – the reading in preparation for the week’s class is BusinessWeek’s The 10 Commandments of Web Design – stated as follows:

1. Thou shalt not abuse Flash.

2. Thou shalt not hide content.

3. Thou shalt not clutter.

4. Thou shalt not overuse glassy reflections.

5. Thou shalt not name your Web 2.0 company with an unnecessary surplus or dearth of vowels.

6. Thou shalt worship at the altar of typography.

7. Thou shalt create immersive experiences.

8. Thou shalt be social.

9. Thou shalt embrace proven technologies.

10. Thou shalt make content king.

With these rules in mind – I’ll begin to think about how to redesign my blog….

Visual Communication – Week 1

I bet this is the only time people.com has been part of an ITP assignment….

This course is going to be challenging for I was born without the graphic design gene.  Happy to admit it.  Same for cooking and the ability to program microprocessors (worrying given where I am right now).  That’s not to say I have no sense of taste – am usually dressed ok, and can put a room together, but as soon as it goes on a page  – whether online or not, something. goes. wrong.

In short, I am in desperate need of this course.

Here is the site for the course, including details of this week’s assignments.

Adrian Shaughnessy’s A Layperson’s Guide to Graphic Design gives an overview to the history of graphic design, or visual communication as it is often called.  The skilled work of a graphic designer can often be overlooked, as if done well, the message is conveyed without realizing how the viewer has been affected – we taste the fine wine from the beautifully designed glass we are drinking it out of, without necessarily noticing the glass – the phrase ‘quietly good design’ from the design critic Alice Rawsthorn sums this up well.

This week’s task is to analyze a web page from a design point of view, considering the grid (the spacings of the objects on the page and how they repeat), colors, layout, typography, consistency and usability.

I picked a website I read daily – and which, is certainly quite, uh, bold in terms of its color usage: people.com.

Here is the page:

Grid Lines

First I tried to see if there was any kind of repeating layout spacing patterns, this is what I saw:

The red horizontal grid lines divide the page into four and the main picture of AnnaLynne McCord of 90210 fame divides the page horizontally into three large sections.

Finally, and with the most difficulty, I tried to see any more repeating, smaller grid lines.  Am not sure at all if I’ve spotted this correctly, but here are some additional green horizontal grid lines.  Due to the irregular spacing of the links in black at the top, I was unable to divide the page any further vertically.

Colors

The Dillon Thompson Macaulay Honors Site Analysis assigned as an example to show us how to analyze a site suggested they reduce the number of colors used in their site to match with their branding colors more.  The people.com site has an incredibly bold color scheme, very contrasting and bright colors are used.  I counted 8 different colors – with some of them, such as the green horizontal dividing line above the picture of pregnant Kendra only appearing once.  The reason for the colors seems to be ‘IMPACT’, ‘LOOK AT ME’ and ‘ZING’.  Also – the main reason probably that people look at the site is perhaps to see the pictures of the celebrities, the color may be used to amplify the images?  Overall, this site does not want to be neutral, so the bold and contrasting colors would be chosen to make it really stand out.

Layout

The main piece of branding (the People logo) appears in the top left-hand corner, it is not particularly prominent.  In terms of navigation, there are black link buttons to take the user to other parts of the site, and information (celeb stories) appear mostly down the left hand side of the page.  Interaction with the audience is taking place in most parts of the page, from an iPhone app on the left hand side, to games and videos on the right hand side.  Every bold, bright (back to the color again) section seems designed to capture the user’s interest to delve futher into the site.

Typography

Most of the site appears to be in the same Arial-esq font, with the main variations being in the use of bolding or capitalization.  To show a separate theme such as ‘STYLETRACKS’ or ‘STYLEWATCH’ a different font appears to have been used.  Most of the main text is in black, with headers most likely to be in a very contrasting color to the background.

Consistency

To me – it all seems completely jumbled up, but then, that’s part of its charm, its consistent in its brightness, craziness and loudness!

Usability

To someone who has not used this site, I think it could be quite difficult to navigate, simply because of the sheer volume of content on the main page.  However, things are well labeled, and they certainly make it clear when they have some hot gossip or juicy pictures.  The main bit of the site I go to is the news section, which is tucked away a bit on the left hand side, perhaps making the top stories more central in the page would help with this.

Visual Communication

Course description from the ITP website:

Instructor: Katherine Dillon

“We see information before we read it – and often we see instead of read. Effective technologists and storytellers embrace the importance of visual design and understand the many tools available to convey and manipulate the user experience. These tools include everything from the layout and packaging of the written word to photo editing, information graphics, illustration, typography, animation, color and spatial modeling. This course provides an overview of the tools available and, through a series of practical exercises, enables students to understand the implications of their use. The goal of the course is to provide students with the practical knowledge and critical skills necessary to effectively consider visual design as an important and inevitable component of their work. The goal of the course is to provide students with the practical knowledge and critical skills necessary to effectively consider visual design as an important and inevitable component of their work. This class is especially recommended as an introductory course for people without training in the visual arts who might waive ICM or Physical Computing.”