Color Game

Inspiration#4 – Way the nature picks color

 

The article came across lists all the color used in an image and it is interesting to observe color pattern of objects around. Humans are hard wired to understand and associate color pattern that are found in nature since our brain has evolved observing colors in nature for millions of years. It makes more sense to see how nature picks color and what kind of color combination exists. For instance this image has analogues color and follows monochrome pattern. I.e the same hue with different intensity. Analyzing these color pattern will explain what color combination we tend to like in different environments. Flowers, trees, insects, plants follow color certain color combination and this tool will help in identifying colors used and the way they are used. I would never have noticed these patterns if If I had not taken HCC710 class. Now it easy to relate to differentiate between matching colors and the odd colors based on what we see in nature and the way colors arranged on the color wheel.

Source: http://design-seeds.com/

Inspiration#3 – Selective Coloring

As we move from black and white to colored graphics there exists a creative intermediate called selective coloring. Selective coloring is nothing but coloring only a part of a graphics/image and keeping rest of the graphics black and white.  As it automatically drives viewer’s attention to the colored area and there’s no other colors to balance the composition, using this sort of effect must be very precisely tuned in saturation, colored area/elements and contrast, to get away from the very tiny border between elegance and mediocrity. I believe both sides are sampled here, what is nice for viewers.

Though color is a vital piece in a graphics, sometimes less is more when conveying a specific message via graphics. Producing a selective color graphics is an art by itself as choosing the color and part of the image needs an eye for colors. It’s a chance we have to pay attention in details we usually let aside in everyday-life! They emphasize the meaning of the picture itself. Selective color can bring in emotions like liveliness, happiness to the graphics and bring n the focus on a particular object in the graphics.

Source :

http://www.thingography.com/Photo-Index/SelectColor-Flowers/SC-Flowers/scf7.htm

UMBC SUCCESS

Class work

 

 

 

 

UMBC SUCCESS – 1

In this design UMBC is in “Arial Rounded MT Bold” typeface and SUCCESS is in “Bauhaus 93”. It is a simple design with more importance to SUCCESS. Bauhaus 93 is a thick typeface which highlights SUCCESS. It has a unique “E” and “C” shapes which make the word stand out. The typeface has a bonding look which in this case applies to strong commitment from UMBC towards success of SUCCESS.

UMBC SUCCESS – 2

In this design “UMBC” is in “ORC A extended” and SUCCESS is in “Lala Bauhaus”. This is more of a professional looking design where two San typefaces are used. Even in this design the focus is on SUCCESS. Though UMBC looks small compared to SUCCESS it’s well kerned and this makes visible even from distance. The SUCCESS looks like it’s is made from tiny pieces and this signifies strength and unity; SUCCESS is indeed students united for a cause.

UMBC SUCCESS – 3

In this design “UMBC” is in “Android” and SUCCESS is in “Devil Breeze”. This is a unique looking design where UMBC is embedded in the SUCCESS; in other words UMBC is part of success. Both the typefaces gel well and UMBC fits well between “CC” of success. This even indicates unity and tight bond between UMBC and SUCCESS. The Android font make UMBC look pretty interesting; the four letters face four directions and they look alike.

 Description – 1

This design uses “lala bauhaus”, ”MoolBoran”, “Levenim MT” and ‘’Bauhaus 93” typefaces. This is a simple looking design with focus on clarity. The text is divided in to three parts; first the SUCCESS which stands out at the top; the full form of the first part with italic and bold which also stands out; and then the remaining text. “4-year” is highlighted since its one of the unique features of the program. The spacing between the sections also makes it easy to differentiate the sections which makes the whole text more readable.

Description – 2

This design uses “lala bauhaus”, ”Papyrus”, “Old School United Hairline Ital” and ‘’Rockwell” typefaces. Even this design is split in to four parts with typefaces and fonts differentiating each other. “SUCCESS” is in the centre that separates its full form on the top. Papyrus typeface is naturally first lettering uppercase which suits well in this design. Third section is a light typeface which is given little less importance.  Again the last part is bold and stands out. This design looks neat and clean with clear separation of sections

Description – 3

This design uses “Trebuchet”,  ” BatmanForeverAlternate” and “Old School United Hairline Ital” typefaces.  This a different looking design compared to other two. The first section describing what the program is all about and the last part shows the departments/organizations involved in the program. The centre portion is the main part with SUCCESS and the full form associated with each letter. This is more readable and separates each section and highlights what is needed.

Colored Version

 

 

 

 

 

These colored versions of “UMBC SUCCESS” and Descriptions are improved in typeface selection, size of different parts based on the peer review. Also adding color to the existing design opened a new dimension and this lead to selecting different typeface and fonts.

Colored Version for Parents/Students

 

 

 

 

The description for parents consists of professional looking fonts and light colors for the elegant look. Also it is in the format what the program is about, full form of SUCCESS, and finally the departments associated with the program. The logo for parents (second image) grabs their attention at the first look and when looked in detail it shows the program is focused towards success and it is supported by UMBC. The description for students has a catchy typeface that attracts kids. Same goes with the logo as well, the typeface and color may be appealing to students.

Final Version

 

 

 

 

 

The final version has minor changes in typeface selection and color. Based on the feedback changed the color of “C” to darker shade to make it clearly visible. in the third image font of UMBC is changed to thinner font as the earlier version was too thick.

Color Theory

The Article “Graphics Design – The New Basic” explains the basic terminologies and the properties of color such as value, intensity, tint, shade and saturation associated with it. It’s amazing to see how a color can express so much; Colors can Hide, expose, differentiate things and they also describe mood of the scene.  Though color has different meaning in different culture, and the color trend changes time to time, a vocabulary has been established to communicate the color and its properties.

The color wheel is helpful in identifying contrasting versus analogous colors. Opposite, near opposite are contrast colors where as adjacent colors are analogous and they have minimal chromatic difference. Terms “value” describe the luminance or tone while “Intensity” is saturation of a color. These properties are contextual and they look brighter or lighter depending on the color it is used with.  Important to note that the color models used in digital media and print media is different and they use color models additive and subtractive respectively. It’s interesting to note that the color mixing happened even in our eyes and CYMK model used in printing uses the tiny dots of colors that gets mixed in eyes when we see it. Color is one of the great abilities humans have and it’s been one of the basic communication elements for millions of years.

Source

“Graphics Design – The New Theory” – Ellen Lupton, Jennifer Cole Phillips

‘I’ – for Instrument

 

 

 

 

 

I – for instrument was insprired by piano keyboard where all the keys looks like an “I”. The shape “I” is common in many instruments such as piano keys, screw driver, pencil, flute etc. In this sketch drumsticks looks like an I while a pencil with a dot in the front looks like “i”. Flute is an another instrument that has “I” in it. Not just Music instrument even in tools like screwdrivers have the “I” shape.

Letteform – V2

Letterforms assignment was much easier compared to keyforms as there were more options to choose from and the concepts were pretty simple. “Active” letterform of version one had a “g” enlarged and horizontally oriented to make it look like eyes; the feedback was to make them look like the eyes are looking at a corner to show the activeness. Reoriented the letters inside the eye to bring in the effect. The other concept where I modified significantly is “grouping” where grouped based on the curves and edges and which I think is a good improvement compared to version one.  Even in the “random” letterform the version two changed significantly compared to version one. In improved version, the randomness is considered in font size, orientation of the letters and placement of the character.

This exercise definitely taught how to choose typefaces and made me learn the specific characteristic of various typefaces(ex: typeface with serif looks like it has a feet  when enlarged and hence giving the impression that this typeface is more stable compared to sans). The exercise also was a test of creativity and also challenging to come up with designs under constraints.

Letterform – V1

weekly inspiration#2 – Skewed Icons

Grayscale skewed icons above are a great example of design with constraints (black and white in this case). The things to notice from graphics design point of view are use of shape angles, using minimal colors, using real object shapes, use of icons for the informal look etc.
When we look at the icons closely the icons are slightly angled and that gives a unique look to the document its being used and it stands out. They both serve the purpose of conveying the meaning and grabbing the attention. The other interesting observation is the use of black; a black wave stroke on the coke cup gives a unique look to the icon. The tilted dustbin lid, melting ice cream are the classy examples of realistic representation of real objects jus with black and white. The most important things about icons in general are the message they convey with their shape; the umbrella, address book, pencil are the real world objects translated to icon and they serve the purpose well. Overall the concept of skewed icons is a great example of creative design.

Trends in the use of typefaces

Never in my life gave so much attention to typeface and never really noticed the various typefaces around. When looked at signboards or a label in a grocery shop it was a different perspective altogether. As I started clicking pictures and tried understanding what typeface group they belong to the one thing I notice is more of Serif fonts are used in printed form of text.  The medicine boxes are the most boring typefaces while I saw a lot of new and innovative ones in fast food/chocolate boxes.

The sign boards and the section label in stores and the luxury products are more of sans which are much clear to read while other consumer products like clothing have more of stylish fonts. Kid’s products were more of curvy and fancy fonts to attract children. A lot of times the product designers tend to showcase the product in the product name itself by having the typeface that matches; for example the image above with “plum”. Overall a very good experience to look at things from a different view point.