Color Compositions using P5.js

First part of this assignment was an online color test wherein I scored 8 on the scale of 0-100, 0 represents a perfect color perception accuracy.

Screen Shot 2015-10-21 at 9.13.51 PM

Next, it was a great exercise to develop mathematically derived compositions using p5.js. Following links and screenshot show the final compositions that I created: It is a series of uniformly arranged equilateral triangles that act as individual pixels on the screen. Size of triangles changes with the position of cursor. The parameter (hue, saturation or brightness) changes from the center to the edges of the sketch, forming a radial gradation.

Hue variation sketch (The code is available here):

Saturation variation sketch (The code is available here):

Brightness variation sketch (The code is available here):

Business Card

As the typographic representation and subsequent logo design came out really well to my satisfaction, i decided to use the same design for my business card. The first prototype included a horizontal (landscape) orientation with gray print on white paper. I tried making prototypes with wood sheets as well.

cards_prototype1

I am glad I could show these to Katherine and my batchmates. Although the card looked good to me as a composition, there were few plausible suggestions that I received from the class-

  1. The orientation can be changed to vertical (portrait) format.
  2. It might look good if the logo and the text on the back are aligned in some way.
  3. Back of the card has too much information. Perhaps it needs to be summed up in a fewer words.

I made new designs for the card and the results look better than the earlier ones:

verticalCards1

verticalCards2

Next, I used a psd template that allows one to create mock up stationary graphics:

stationary_mockup

A Logo for Myself

I started this exercise with sketching using pencil and paper. The focus was on creating graphical logos that follow grids, look balanced, and represent my initials, DD.

iteration1

iteration2

Soon after playing around for a while with different iterations for letters D and D, I realized that the visual representation needs a strong conceptual backbone of my character, interests, and background. I started writing a paragraph describing myself and this was the most difficult part. Finally I went back to the Statement of Purpose that I wrote while applying for the master’s candidature at ITP. This statement talks about my background, interests, and vision I have for future of myself as well as future of cross-disciplinary design. In that statement I described myself as a well-rounded individual with background, achievements and interests in the domains of art, design and technology.

In the next round of iterations I tried implementing this description with the typography assignment, and results were much fascinating.

Mylogo-01

I decided to use circle for encapsulating the typography, to represent progress and union of three fields: art, design and technology. The typography looked a little disconnected from the circumference and hence I tried stretching the two stems of ‘d’ and ‘h’. I feel the result looks balanced as it couples the circle with the letters, and also represents an open, accessible personality rather than an egocentric individual. Next I tried different levels of gray and finalized to use 70% of it. I intentionally avoided use of colors because of two reasons. First, I feel that colors these days have clear association with what a logo is about: Blue is finance and tech, Green is connectivity and social platforms, and vibrant colors for sports and entertainment; however I wish to keep the logo well-balanced. Second and most important, black and white looks classy and somehow I associate it with the handcrafted, pure, unadulterated qualities of objects.

So I decided to go ahead with this logo as it offers a (almost) balanced composition that follows a grid of golden ratio circles and uses clean typography.

Mylogo-03

Mylogo-02

I also tried using this logo for making laser cut wooden badges:

badge1

badge2

Logo Analysis

For the logo analysis assignment I decided to study Royal Enfield logo that was recently redesigned in 2014. Royal Enfield is more-than-a-century-old motorcycle manufacturing company that started in 1890 in Worcestershire, UK. The company saw many substantial events from the 1900s, such as the use of term Royal permitted by Crown, use of the motorcycles in the wars, shift of operations to India, and reincarnation of the brand in last two decades as it gained tremendously popularity with Indian youngsters. With help of unconventional TVC ads and introduction of new motorcycle models, the brand placed itself at a wonderful intersection of handcrafted aesthetic qualities from India and heritage of machinery from UK.

I feel the new logo beautifully completes the story as it takes away the old-styled visual identity but still maintains the same attributes. Following is the image of the latest logo: (variations are designed for print, web media, and vehicle surface stickers)

new logo

Following are the images of the latest logo (right) and the one before that (left):

sidebyside logos

Earlier, the crest and the seal on the motorcycles looked like these:

oldcrestseal

The new crest and seal are redesigned as seen in the image below:

newcrestseal

Following is an image of the oldest logo that I could find:

RE_old_logo

 

The new logo definitely fits in the current trend of flat design with basic colors, and it is interesting to see a vehicle manufacturing company exercising it. The graphic still makes use of ‘royal’ palette: red and gold. The curves in the wordmark make the design look more unobtrusive and friendly. The elements such as the flared serifs and R-O ligature in Royal are elegant and much refined than the mechanical and decorative graphic of the old logos. Being visually heavy, the new logo flaunts the fact that these motorcycles are powerful machines. The downward bulges at E and D in Enfield make an abstract contour of wheels and therefore of a motorcycle.

The logo is designed by Codesign, a leading design studio in India. I have met Rajesh Dahia— the founder of Codesign— and to my understanding he is an excellent graphic designer when it comes to designing visual identities with a touch of ‘Indianness’.

Typography and Expression

Defining myself typographically was a great exercise towards understanding characters of a few fonts, along with giving some serious thought to how I want to project my name graphically on print/ web media. First three are the explorations with Serif fonts.

Didot: This is my most favorite font in the serifs. It has a sincere and formal appeal with neoclassic/ modern style.

didot

Georgia: This is an extremely readable typeface and sets a powerful baseline. The text therefore looks solid and based on concrete thoughts.

georgia

American Typewriter: It is less formal as compared to the first two, and it will look great as a branding typeface for handcrafted products.

americantypewriter_american typewriter

 

Next three are sans serif typefaces and appear relatively newer and bolder than the earlier ones.

Helvetica: I could not resist myself from writing my name in helvetica! The typeface is unobtrusive, and blends universally with the secondary graphical or lettering elements.

Helvetica

Impact: This font clearly stands out, but it is not as mature as helvetica.

impact

Oswald: This typeface projects a meticulous, careful and yet serious image. I also chose to use only lower case letters here in order to get rid of visually heavy uppercase D in my first and last name. This forms a confident x-height between the baseline and the mean line formed by lower case d.

Oswald

 

Next, I did some explorations with the above six typefaces and made a few typographical compositions. The focus was on making use of negative spaces, creating balance between two words, and juxtaposition of five-lettered first name with five-lettered surname.

name_explorations-03


 

The next part of the assignment was to typographically create expressive words. I worked on names of different dog breeds as expressive words (beagle, bulldog, german shepherd, chihuahua, boxer, labrador, siberian husky) and here is the result:

dogs

 

Signage Research

Prompt: Go outside and photograph 3 examples of unsuccessful signage and 1 example of a sign you like and post all 4 images to your blog. Choose one of your unsuccessful signs and redesign it. Come to class prepared to present and discuss your examples.

The assignment turned out to be a tricky one. I realized that most of the signages and branding graphics seen outside lie in a gray area, in the sense that they are neither complete failures nor perfect examples of visual design. I liked following graphic very much- it was a board outside a barber shop. It has simple, clear message and minimal graphic that quickly maps to the identity of a barber shop.

barber

 

Three examples of unsuccessful signages:

  • I saw this metal cut board at entrance of Hudson County Community College. The sketchy representation of the Statue of Liberty makes it utterly unsuccessful. Looking at this branding as a potential applicant who wants to go to this college, I would seriously question the integrity and quality of education offered here.

hudsoncommunity

  • NYC subway is a great source of both good and bad signages. The navigation mostly works, but there are little details that are difficult to understand especially to the outsiders who are not aware of the context. Following sign is supposed to represent water pipe access in case of fire, but I could not understand it until I walked up to the signage and saw the pipe access unit below it.

fire

  • The next one is from a street shop. It presents two messages that create a degree of confusion because of their juxtaposition. Message A is you won’e get loose cigarette in this shop. Message B is don’t smoke here. A and B are simple and direct when seen separately. When placed together, they compete: Does the shop management actually prohibit you from smoking here? Do they sell cigarettes at all?

cigarettes

I tried to redesign it with following changes:

  • The two messages need to be independent of each other.
  • ‘No loose cigarettes’ can work just fine without a hierarchy of words, and without the exclamation mark.
  • In order to establish clarity, putting text message along with No Smoking signage might help.

cigarettes_new

 

 

Design Analysis

I clearly remember that I started taking interest in design as a tool that addresses problem solving. After last few years of practice and attempts towards understanding how design as a discipline evolved with time, I am now more curious about the other side of the coin: aesthetics and storytelling. Visual Language Class is therefore a perfect place for having discussions and sensitizing myself to the trends in graphic design, typography, and compositions.

As a response to the first assignment, I analyzed visual design elements in the reward postcards that a player gets on successfully completing subsequent levels of the game Two Dots. It is an award winning addictive game based on a simple theme of connecting dots on smartphone screen, with a narrative that associates this theme to a story of two brave explorers. The postcards are designed by UK based illustrator Owen Davey. The designs are simple, clean and consistent; and exhibit an excellent sense of grid, typefaces and colors. All postcards have a characteristic color palette with low saturation hues, flat design illustrations, and attractive textual elements.

 

twodots
Images from http://www.owendavey.com/Two-Dots-Postcards

 


 

twodots_analysis.001

This postcard makes apt use of elements such as dry leaves and sunglasses, and warm colors to represent ‘The hottest nature around’.

 

twodots_analysis copy.001

It has clear division of illustrations on upper two-third and text on the lower third of the space, which makes an interesting composition. Helvetica Bold for the secondary text establishes a hierarchy.

twodots_analysis copy.002

The elements stand out because of the weight of their forms. Identity of a postcard is directly established with the use of a frame around the picture. Contours of the two characters (or two brave dots as they are called in the game) and the leaves are ‘unobtrusive’, and tone down the heat.


 

 

twodots_analysis.004

The use of less saturated colors continues to make an impression! I also like the flat design illustration style that has recently become popular among web designers.

 

twodots_analysis copy.003
An explicit three column grid establishes an organized structure, and that goes really well with the title ‘Tesla Labs’.

twodots_analysis copy.004
This postcard has a scientific and somewhat formal look to it because of the serifs. The font used for the text is Clarendon. Unlike the first postcard, this composition has all the text concentrated in the top left corner which leaves plenty of space to capture the narrative through illustrations.

twodots_analysis copy.005

Use of warm orange stripes creates layers and portrays depth. The first thought I had was ‘There’s something going on inside behind those bars’. The orange space stands out because of the blast and cracks that originate from the suitcase.


 

 

twodots_analysis.008

This postcard uses a cool palette, smooth forms and clean text in Helvetica.

 

twodots_analysis copy.006

I like the way the grid and the negative space are interlinked, as they create a gigantic scale to represent ‘the tallest waterfall’. There is so much happening in the top right corner and a contrast is established with a dry appearance of the bottom left. The upper one-third of the composition is visually heavy and looks to be in motion, as opposed to the lower two-third space which is stationary and monotonous. Same relation is established with the waterfall on the right side and dull, static negative space on the left. Interestingly, on the intersection of windy weather and flowing water are seen the two brave dots, all set for a new adventure. The user, having already gone through some postcards, can clearly see the two characters in this context.