Feedback on End of Semester Project

Some great feedback on my project in class this week.  Lots of ongoing work…

• Change the color of the header to grey – perhaps slate grey
• Think about changing site name to Just White Noise to mirror the URL
• Have the lettering for the header as an outline – to mirror the ‘white noise’ element of the name
• Feedback on style of site was good overall, I was told it matched my personality well
• Suggested I move the buttons in the top left hand corner to below the title
• Also suggested I change the color of the buttons to make them pop more
• Suggested I make the twitter feed just a feed, and not linking to twitter.com, instead keeping the user on the site

Super helpful – thank you!

End of Semester Project – Completed!

Well, in beta anyway….  And you’re looking at it right now. Wow, it was harder than I anticipated.  I orginally planned to apply a new portfolio theme to my exisiting blog, but discovered since I was using wordpress.com rather than wordpress.org I couldn’t upload themes.

I then decided that the name of the blog should be changed, as catherineatitp was only going to be valid until May.  Whitenoise.com or whitenoise.net would have been perfect – but both were taken.  Justwhitenoise.com though was available and after asking people for their opinion, it seemed ok for the job.  The Residents gave me some really helpful advice on hosting and I went with bluehost.com, $145 for 3 years sounded pretty decent.

Next, a theme.  Ok – not so easy.  Partly because after 12 weeks of introductory graphic design, I’d become my own worst enemy.  Am now picky about typography, anal about color, choosy over layout….  So the course was definitely a success.  I picked one (lynquist) but it wasn’t WP widget compliant.  I bought one from themeforest.com (thank you for the recommendation Nien, but it arrived without the CSS stylesheet).  Finally deciding on  this one (from Dreamweaver Gratuit).  I am a huge admirer of my friend Lee-Sean Huang’s site, and you can see I clearly took some inspiration from him.

I wanted to keep my intial concept of being able to click on the areas of my work, you’ll see this in the top left hand corner of the site, and also maintained the blogroll element of my old site.  In addition, I downloaded a twitter plug in.

Initial feedback has suggested I get rid typewriter font for the dates and use san-serif font on the rest of the site, but that the site has a ‘pop-art, mod vibe.’  Thanks LS.

Thanks to ITP Residents John and Corey for their helpful advice this week.  This is an ongoing project, however, the course has been fantastic for laying the groundwork.

Final Project – continued development

Hello from Tampa Airport when I sit, by the boarding gate to JFK, preparing for this evening’s class.  I have just finished my daily NYT Tech Section reading, and was very happy to see the news of ITP lecturer Nick Bilton’s new gig as lead writer for the NYT Bits technology column.  In reading the article though, I came across Nick’s website which is great inspiration for mine.

The color scheme is gray, with the image links becoming colorful when the user scrolls over them.  His squares and division of the page also are akin to the look I’m going for. The page looks uncluttered despite the large amounts of information on there, and the division of his specialisms are also good pointers as to how to order my site.

This week I’m working on the pages directly behind the main page.  At the moment they are split into:

- legal/policy

- creative writing

- online social group research (Noisy Idiots)

- museums/memory research

In class, Nien showed us his new blog made using a Wordpress portfolio theme.  This week I’m going to look into seeing if this is a viable way of getting a site up and running by next week.

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:

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:

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%).

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.

“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.

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:

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.