blog home

Organize a design by hierarchy

Posted by Jen in design & art on April 5th, 2010

hierarchyGood graphic design is always clear in its visual hierarchy, in which important elements are emphasized and content is organized logically and predictably. A hierarchy in a graphic design can be generated by the page layout, size of the elements, contrast, color, shape, position and so on.

Hierarchy is a very important part to form a good design work. Usually we want the element representing the most important information to be the first in hierarchy. This could be the headline text in bold, with strong contrast color to the background, or an interesting image with big size, saturated color or unusual shape to be appealing to the eyes. Elements on top level of hierarchy are to give the audience a summary or principle concept of the message that the design is trying to express. Then the secondary level elements are in the supporting role to give more details or explanations for the headline information. Overall, to achieve a successful design with appropriate hierarchy, we need to be aware of the readers’ expectation and habits. Elements are supposed to be ordered in a logic hierarchy with pleasing visual balance as well. Only then, the message in the design work can be conveyed smoothly and clearly to the audience.

typography poster for Hidden Villa Farm

Posted by Jen in design & art on March 16th, 2010

hiddenvillafarm_posterThe poster I designed for a famous bay area farm - Hidden Villa Farm.

The fonts I used reinforced the intent of the poster. Type is used to its extremes; I also set up contrast between the sizes and weights of the type on the page. I had various options to visualize the concept with type. The type interprets the message visually, it isexaggerated, and contrasted with the intent of the verbal message. The message is repeated, and I mixed typefaces for emphasis.

UI14 playback 2 - Why Amazon’s so successful

Posted by Jen in design & art on November 14th, 2009

amazonJared Spool is indeed a user experience expert with knowledgeable and in-depth insight of consumer oriented industry and web design. In this impressively interesting featured talked, he revealed those hidden secrets in Amazon that made it so successful. It all started from the amazing reviews of this currently available Tuscan Whole Milk, 1 Gallon, 128 fl oz. Take a look at the reviews at the bottom of this product, which is even not available now. You will feel it’s so amazing that so many people are just sticky, addicted and constantly contributing to Amazon. Here is some data to show how attractive this website is: The number of visitors in December 2008 is 71,431,000, rank of all website in traffic is 8; Revenue in 2008 is $19,166,000,000, which is 29% increase over 2007. So why is that? Here are some highlights of the Jared Spool’s talk:

  • Engage your users by delivering great content
    • User commentary enhances the experience
    • Putting in a system to “bubble up” the most interesting or useful
      content can dramatically improve the experience
    • Only a small percentage of visitors will participate
  • Don’t fear trying out new ideas
  • Eliminate tool time while delivering confidence (Goal time vs. Tool time - Goal time: When the user is improving the outcome of the experience; Tool Time: When the user is moving forward without any improvement in the outcome of the experience)
  • Never forget the business
  • Caution is warranted
    • Be careful when emulating features
    • Some experiments don’t pan out
    • Not all use cases are equal

Firefox 3.5 and some interesting articles about CSS3

Posted by Jen in coding front-end, trends on August 28th, 2009

ff35Firefox3.5 was released a while ago, yet lazy I just updated my FF today. And the direct reason for that is I read two interesting articles, both talking about some fancy CSS effects to the text - one is about the fancy text gradient/shadow effect, one is about text rotation. Both didn’t work on my FF3.0 or FF2.0. :(

All right, so here we go, FF3.5. How much better is it ? It’s faster, it displays fonts even more nicely, and most of all - it supports CSS3 and above! well, while enjoying this advanced modern browser, I also noticed a few cons - forcing to update the add-ons: I have had the great add-ons of firebug, colorpicker and measurelt, they were working perfect and I had no intention of changing them. But as soon as I installed the FF3.5, it told me I have to update them otherwise they won’t be functioning… anyway, I am not so used to the new interface of firebug yet.

Overall I liked FF from day one. It never lets me down with 2.0, 3.0 and the updated 3.5 version, both as a regular computer/internet user and as a web designer. However, to be a web guy, we need to realize that what we produce is for the mass media, instead of for ourselves. Therefore, the two CSS3 tricks about the text effects are just for fun, but definitely not for real work practice. I am taking notes of those codes, but I would say it’s for the future only, when the market share of IE (of all versions), FF3.0 and below, Safari 3 and below and Opera 9 and below are all close to 0%. When will that happen? You tell me. :)

Frames - text, images and color

Posted by Jen in design & art on August 3rd, 2009

posterHow can you use text, images, and color together to create a strong visual communication solution?

Text, images and color are the three important elements for graphic design. And they are the tools designers use to create visual communication solutions.

Images are usually used as the element in the first glance.  It can be the part that creates some interesting and appealing visual effects to attract audiences’ attention.

Text is used to convey direct message of the design work.  Text can create styles as well, by it’s font, position, size etc. When the audiences look further into the work, text will be the elements that he/she is looking for to find the details of the information.  However, when they look into the text, they still have the impression that the image left to them.  They read the text with their expectation from the image.  If the text message is within the expectation, they will read further and further to go through the design and get all the information that the design work want to convey.  However, if text message is off their expectation, they will leave the design work right away.  This tells us that elements in design have to be consistent in style, look and feel to create a clear message to the readers.

Color supports the design to create a style and the consistency principle applies to it as well.  Consistency basically integrates all the elements to create a united design.  Just to remember good visual communication needs the graphic elements strongly group together.

Chris Costello, Papyrus and My Poster

Posted by Jen in design & art on June 16th, 2009

papyrus_posterPapyrus is a contemporary font that has been broadly used in various art works for different types of occassions, due to its neat yet stylish look and great legibility.

The poster is sort of a typography study in Papyrus, merely composed of all letters of the alphabet and some numbers and characters.

More info for the font creator: Chris Costello

Chris Costello graduated from Dutchess Community College in Poughkeepsie and received an Associates Degree in Commercial Art, in 1979. While in school, he worked at Wambach Communications Group, in Rhinebeck, New York as a part-time graphic designer and was hired full-time after his graduation. During this period of his life, he was also very involved with music and played bass with several bands in the area. He eventually took a chance to follow this dream—he quit his job and joined a rock band that toured the southern U.S.

In 1982, he moved to South Florida to attend the Art Institute of Fort Lauderdale, an art institute located directly on the beach. He won some awards and two scholarship nominations then decided to take a semester off and work in the field for a while. However, his job was so great, that he just kept on working and never went back.

Chris Costello worked at Group 3hree Advertising in Pompano Beach, doing graphic design, production and illustration. After about a year, he left this full-time position and went back to work for the same company, making twice as much money as a freelancer. He figured this was the way to go, so he hired himself out to ad agencies and design studios throughout South Florida. He liked the freelance idea because he could work on a lot of different projects and still had some time to hang on the beach.

After tiring of his vacation lifestyle, he moved to Boston, Massachusetts and worked for Brewster Advertising in Cambridge as an Art Director. After three years, he felt that he acquired enough experience to go off on his own again, so he left to pursue a career as a freelance illustrator and, a professional bass player. For the next six years, he had the time of his life. During the day, he worked at home, illustrating for high profile book publishers and ad agencies throughout the country. His nights and weekends were spent traveling to resorts and colleges all over New England to play music.

Costello became the Art Director for DPI, a book publisher in Woburn, MA in the year 1995. There, he learned computer graphics, web design, management and all about the publishing industry.

Three years later, he left DPI and became Senior Graphic Designer for The DeWolfe Companies in Lexington, MA. In 2002, Dewolfe was aquired by NRT and merged with Coldwell Banker Hunneman to form Coldwell Banker Residential Brokerage where he was promoted to Creative Director in thier marketing department.

In 2003, he recieved a Bachelors Degree in Graphic Design and Visual Communication at Northeastern Universty in Boston.

Chris Costello currently lives in the Boston area with his wife, Anita, and his two daughters, Sheriden and Emersen. He still gets to hang on the beach every now and then… but mostly then.

Designing typefaces is a labor of love for him. After handlettered book and magazine titles for several major publishers, he thought it would be cool to produce complete character sets from some of these designs for all of creatives out there. Except for Letterpress Text, every font is inspired by his own imagination and most are inked by hand before they are digitized.

The complete list of type fonts that Chris Costello designed is as follows:
Blackstone, Blackstone Italic, Letterpress Text, Letterpress Text Italic, Letterpress Text Bold, Letterpress Text Bold Italic, Mirage, Papyrus, Virus, Virus Lethal

Chris Costello created the font Papyrus in 1983. This unusual roman typeface merges effectively the elegance of a traditional roman letterform with the hand-crafted look of highly skilled calligraphy. It includes an extra set of initialing capitals to enhance its unique style.

Papyrus is part of the Linotype Library. Papyrus is a trademark of Esselte Letraset Limited.
The font Papyrus can be downloaded at:
http://www.linotype.com/14649/papyrusregular-font.html

My Interpretation of Graphic Design

Posted by Jen in design & art, random thoughts on June 16th, 2009

graphicdesign_300Every person in the world is like a planet, lonely, but connected to each other in some way. Graphic design, a certain form of art and technology, is just like a media, a window, through which we convey messages. With it, life becomes colorful and meaningful.

Toy Room - Photoshop: brush, vanishing point transform and more

Posted by Jen in design & art, tutorials on May 27th, 2009

With given components of the toys, I designed a 3-D environment (walls and floor and window) and a colorful toy box with shadows and vanishing point, plus a photo frame.

giftbox_final_less

A few highlights of this photoshop creative:

The brush I created is for the surface of toy box.  The original brush is from the Assorted brush set, named concentric circles.  I basically modified its master diameter to 200px and  set the shape dynamics settings: size Jitter to 100%, minimum diameter to 15%. For the colorful background of the toy box, I actually customized another brush from Assorted brushes, called texture 6.  I modified its master diameter to a much larger one and added the color dynamics feature to make it vary in Hue and saturatioin as well. In order to make the white circles integrated into the whole painting, I used the blend mode Lighten and opacity 90%. Then I think the white concentric cirle really goes with the abstract background of the toy box painting.

customized_brush21giftbox_layers

I am using the CS version, therefore, I created the 3-point perspective all by transforming, without the vanishing point filter. I used the lines as the guide for the perpective, as shown in the image of the perspective box.

giftbox_perspective1

I set the environment as a corner of a room with a window on one side. I think this way, it will make it clear to the audience where the light source located. And having a little witch floating outside the window make the picture more interesting. Everything including the window, wall, floor and toys in the enviroment is transformed into 3-D.

The shadows are made according to the light source from the window. As the window is on the left side of the environment, all the shadows are heading toward the right side, except the shadow of the motocyle, because it is leaning on the left side wall, just underneathe the window, its shadow is on the wall.

The first frame is made from the texture of the roof on the house (one of the toys). The 3-D effect (bigger pattern in the middle, small pattern on the sides) are achieved by utilizing the technique of alpha channel. I like this effect, it looks pretty real.

How can you use words and pictures together to improve the unity of a design?

Posted by Jen in design & art on May 27th, 2009

shadow_titleWhen it comes to graphic design, Unity is also referred as Integration, meaning all the elements in the work appear to belong to each other, and make a whole of composition.  This is a very basic and important goal of any graphic design work.  Components in one design work are not supposed to compete with each other or hide from each other but rather support each other in a certain priority order to give a flow to the design to provide messages.

Type and images are two different kinds of elements in the design world, but equally important.  Type comes up with words to tell the message in a direct and straightforward way, while picture gives people more space to portrait it to a certain meaning with their own interpretation. And when we put these two elements together into one work, the design gets sophisticated and being equipped more dimensions. In a lot of design works, types are placed in front of the picture and stands out from the background picture to give a clear view for the audience.  However, there are also works that have type appeared more in an imagery way, by means of extreme dimension of the text and uncommon fonts, which are not so clear for the audience at the first sight to read text message. And in this kind of design, the image elements may in a major role of the work.  However no matter which element takes the lead, unity is always the goal to put them together, in which case, type can convert to image and image can also be shown in a type way (just like the type mask we did).  CONSISTENCY is one of the methods we use frequently to achieve the goal of unity, which include the consistency of color, style, alignment, etc.  Color – we choose a color that appears in the picture (usually appears repeatedly) for the color of the type.  Style – around the theme of story the design is telling, we choose the style of the picture and the font.  Say, the design is telling a happy story, we may use a highly saturated color image with a cheerful-looking font.  Besides that, POSITON is also a very important factor for a unity design.  This involves with the concept in our previous topic – space.  Usually for the type that is placed in front of the picture, we would choose to place it on the portion of the image that has less variety and more monotones, which is also referred as negative space.  Type on negative space can get the effect of not only standing out of the picture but also integrate with it.

I believe there are more principles than the above ones I mentioned to create a unified design.  However, the point is to achieve an integrated composition as we desired, multiple methods and principles need to be applied to one art work than just stick to one.

Sarah McLachlan & Surfacing

Posted by Jen in design & art on May 21st, 2009

Sarah McLachlan is a wonderfully talented Canadian singer/songwriter/musician. At a young age, she was trained at the Royal Conservatory of Music in Nova Scotia. She learned guitar for 12 years, piano for 8 years and spent 5 years refining her voice.

Her success in music leads to numerous awards, which includes: 3 time Grammy Award winner and the Elizabeth Cady Stanton Visionary Award for advancing the careers of women in music. Sarah has sold over 22 million records worldwide since her recording career began with her debut release, “Touch”, in 1988 and has been profiled by media the world over including cover stories for Rolling Stone, Time and Entertainment Weekly.

Her music is featured of her pure voice and beautiful harmonies along with love and loss in a depth of warmth.

song_pr3The disc Surfacing was released in 1997 and come out of nowhere in a time when the teen pop craze was going on. It had sophisticated songwriting with great piano and guitar hooks and Sarah scored some great hits from this record that were in heavy rotation in 1997 and 1998.

I chose the album surfacing to design the CD cover for, because it is such a masterpiece of Sarah. It is a singer and songwriter at the top of her talent. I am amazed every time I listen to this CD. The design of the cover is trying to match the style of “Surfacing”. The black background with Sarah’s initial in dark grey, the type “surfacing” with reflection, and the feathered type of the name in the font of Mistral are all attempting to approach the depth of the music, the meaning of the lyrics and stunning beauty of her voice.