Identity system

 

 

 

 

 

 

Spotify : Consistent use of green, the typeface and the  logo across websites, flyers and gift cards makes the spotify one of the good Identity systems. Also the object edge curves and shapes are consistent across different print and web materials. what I like about spotify is the color and typeface used which makes it unique. Also the way green is used makes one associate this shade of green with spotify.

 

 

 

 

 

iVOMAT: iVOMAT uses white and greenish yellow across all the print and web materials. Arrow shape that separates theses two colors makes a unique shape that is used consistently by iVOMAT. This arrow looking shape is used even in the letterhead footer and logo. What I liked the most is use of the shape across the different forms. Also the shape is used in different ways like in log and in footer in different sizes yet maintaining the ratio and color combination which makes it unique.

 

 

 

 

 

 

Apple: Apple uses the custom typeface which is used across different products. And this typeface uses the particular gray hue which adds to the uniqueness. The gray shade is even used in hardware like macbook and iPad.  the apps i iOS uses a particular curvature and it is the same in dialogue boxes, apps and even iphone edges. What I like the most about apple identity system is the consistency across their products including hardware. Also the use of typeface across different platforms lke iOS and iCloud and iTunes.

 

 

 

 

 

 

Apartment therapy: Apartment therapy uses different color across different media. Orange logo and blue letter on business card. The typeface used in logo is different from that of letterhead. The main design aspect for an identity system is consistency and which was missing in this. Also I did not like the way typeface is used as it is different in different places. even the shape and corners visiting card does not match with the website.

 

 

 

 

Southern Comfort : It uses different typeface and color combination for the same product which makes identity system a fail. Southern Comfort uses white background and red font and sometime the colors are interchanged on same product. The outline around the text exists on some labels and absent on others.  As shown in the picture the fire symbol is used in all angles possible; which makes not so unique about the image. Also this design lacks repetition and consistency.

Landing page – Photo essay

 

 

 

 

 

 

 

 

The impressive design in this landing page is the opacity and the use of background image. It is black and white while the green bar in the foreground make is the text visible. The transparent layer above the green bar gives a classy and modern look to the landing page.

 

 

 

 

 

 

 

This landing page has made a good use of color and foreground-background  concept. The menu looks different yet clear and the green line indicating the menu which is active gives a rich look. Also the placement of video player and the dialogue box gives a 3-D effect

 

 

 

 

 

 

 

 

The good design aspect of this landing pages is the background-foreground look being represented via sticking login box. Also the logo color makes it stand out while the rest of the page is just black and white.

 

 

 

 

 

 

 

 

This is more of a information intensive home page where a lot of information is being conveyed via graphs and charts. The tile layout of displaying can be used for SUCCESS landing page as it make easy to navigate.

 

 

 

 

 

 

The tile layout o this page make more appropriate for SUCCESS program land page because it makes easier for student to select the option they want. Also the color distinguishes the category from the others. mixed use of large images and tiles along with color combination makes the design ideal for SUCCESS program.

Scale – Graphics Design the New Basics

The author explains the concept of scaling and how scaling affect the images and letter forms. The vector images and letterforms can be enlarged to any size without losing the quality where as bitmap images get pixelized when enlarged. The concept of relativity applies to scaling as well. We expect certain object to be of certain size and scale and it is important to represent the scale ration on the web as well. the main three concepts that make a graphics resemble with the real world is the scale, depth and motion; and the combination of these three will make a graphics look more realistic.

As a user experience designer it is important to have an eye for scales and use them wisely. One of the way to use the concept of scale is to place the objects and scale them with respect to the importance of that object in that particular scenario. The other way is to use the realistic scales related to the other objects around. For example a big flower with a mountain as a background may not fit well in terms of scale. As human relate the things we see on a graphics to the real world it is important to have the right scale related to the other objects around.

Source: http://hcc710.files.wordpress.com/2013/03/scale.pdf

Designing print materials of different scale

Robin Williams talks about the design guidelines for print media and Identity system in whole. One of the important features of identity system follows the principle of repetition. There must be an image or a typeface or a style that is consistent across different graphics in a system. He also explains where the objects need to be placed in print media; for example do not place the text in extreme corners of a business card. The other important thing that matters is the alignment of the contents and being consistent with the same kind of alignment across different print formats like business card, letterhead, booklets etc.

Though the principles of alignment and consistency holds good for both print media and electronic media, print media has the limited real estate compared to the electronic media and also it is not as flexible in terms of changing the design whenever required is considerably week in print media. One of my favorite is the power of cropping; cropping can give a different perspective to an image and it can also create its own identity. As a graphics designer it is very important to be consistent in using the typefaces and shapes across different materials and hence building a unique identity system.

Source : http://hcc710.files.wordpress.com/2013/03/print-design-compressed.pdf

Grid photo essay

 

 

 

 

 

 

 

 

 

 

 

The use of grid varied from one column grid to multiple row and multiple column grid based on the type of media it was used. A car sale hand out had many rows grid where as a form had single grid layout. One of the main trend I noticed is that Magazine where less picture was used had two grid layout where as picture intensive handout had mixed grid. It is interesting to see that in the magazine article the placement of image, the main article and a sub articles are placed on the same page with wise use of grid layout.

Gestalt principles applied in graphics design

The blog is a well crafted explanation of gestalt theory with respect to web design. Gestalt grasp the “totality” of something before worrying about the details. following are the principles related to gestalt.

• Proximity

The concept underlying the concept of proximity is grouping. When we have a group of objects, we tend to see them as forming a group.

• Similarity

Group things perceptually if they appear similar to one another.

• Prägnanz (Figure-Ground)

Difference between foreground and background to differentiate the object from background.

• Symmetry

Symmetrical objects are easy to comprehend and  the principle of symmetry tells us that when we look at certain objects, we see them as symmetrical shapes that form around their center.

• “Common Fate”

We assume the related things do the same and hence fate of one of the entities applies to all in the group

• Closure

comprehending the meaning of incomplete object by closing the incomplete objects which themselves doesn’t have meaning themselves.

As Michael Tuck  points out the best design comes when proven theory works in harmony with art. The concept of “totality” is so relevant to graphics designers since a real world is recreated on a two dimensional screen with all properties of a three dimensional world. I can relate to how we remember faces and places; we remember as a whole picture and part by part. though the above principles are widely used in web pages today, Applying them correctly and building web pages for humans does require good understanding of gestalt theory.

 

Source :

http://sixrevisions.com/web_design/gestalt-principles-applied-in-design/

Making and Breaking the grid

Reading the same article gave me a different perspective of grids. Amazing to see how one of the great design techniques (grid based design) was conceptualized during industrial revolution and evolved to what it is today. The article explores how the grid based design was applied in different parts of the world across architecture, furniture and industrial design, book design and how it translated to modern day grid based graphics design. It is interesting to see how Moholy and Herbert Bayer applied the grid concept in typography and which changed the way typography was approached.

When i see  a website the first thing I notice is the grid structure used and it is all because of this article. I had used grids to design logos for the technology group in the company I had worked for and never really thought of the advantages of grids. While reading the article I correlated the grid principles to the work I had done and they are indeed clear, efficient, economical and continuous . In fact we used grid layouts for designing web pages intensively and never really studied the basics of grids; as we see grids in everyday objects the “the grid thinking” comes naturally for designers. Now the windows, kitchen, and even the car tires are grid based and I have started noticing different grid patterns  the every object I see, every webpage I go to.

Source

Timothy Samara, “Making and Breaking the Grid”

Color Game

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

Good uses of typefaces