a.Design Journal

Resolution for Web

2009-09-19T20:45:00.000-07:00

There is bit of unclarity when word "resolution" is used for web design, image, graphic usage on web. There are multiple terms like ppi, dpi, megapixel, width x height dimension etc which all get mixed up.

One of the first things to know about any image is how is it constructed in a given space. The smallest unit in this construction is the pixel; an image is made up of many many pixels (megapixel = 1 million pixels). This pixel count is simply the multiplication of horizontal pixels by vertical pixels. The pixels are arranged in a space - the computer screen. One of the factors that determine this spatial arrangement of pixels is called ppi, pixels per inch (dpi, dots per inch is same however more commonly used in print). Most computer screens today are capable of displaying 72-96 ppi. The second factor is the screen size i.e number of pixels that are displayed on the screen at any one time. This is typically measured as number of pixels displayed across the screen horizontally (width) and vertically (height) - width x height.The dominant screen size today is 1024 x 768 (4:3 aspect ratio).

Using simple math to tie all this information together - keeping aspect ratio as 4:3, to display 1 megapixel the screen size needed would be 1152 x 864 (~ 1 million). With 72 ppi screen, this means 16.0'' wide and 12.0'' high. If the screen is any smaller, it would mean you would have to scroll across the screen to view the part of the image. However most web applications are designed to automatically scale and resize the image to fit the screen by using some sort of pixel averaging scheme to recreate the image in a smaller pixel area.

Resolution for Print

2009-09-19T20:29:00.000-07:00

The image resolution requirement is typically higher for print than for web. The specific requirement actually varies and depends on the end use. Lets look at some of these below:

Magazine printing. For images printed on a good quality paper, the general rule of thumb is that 300 dpi (dots per inch) resolution is good enough. This applies to both color and grayscale images. However, certain type of images like for art books, cartoons and other line arts require higher resolution (600dpi and higher).

Newspaper printing. Newspapers are printed at higher speed on lower quality paper and resolution requirements are not as high as magazines. Typically 200 dpi resolution is considered sufficient for newspapers.

Images for Billboards. The larger the pictures gets printed the lower the resolution requirement. The reason is that as the picture size increases so does the nominal viewing distance.

Adobe Photoshop software displays the image resolution. So a question comes up is if this image resolution value can be directly changed in Photoshop to convert a low resolution 72dpi image into a high resolution 300dpi image for print.The answer is no and the problem is that computer cannot generate new image pixels by itself to make it high resolution. Computer will calculate the pixels that are missing and will fill in the gaps by interpolating the existing pixel data. What you will end up with will be an image file which is 300dpi but very very blurry.

Getting Readers to Read - Web Typography Guidelines

2009-08-20T08:00:00.000-07:00

Over 90% of the information on web is written language, so it is only logical to pay the required attention to typography. Typography can bring aesthetic order to information helping users read and navigate.

The choice of typeface/font to use should be carefully assessed. There are wide array of things that should be considered; for example, each headline that is created should be set in text that is legible and search engine friendly, while the typeface should fit within the brand guidelines of the company but should also fit within the overall graphic design of the site.

Optimizing typography is optimizing readability, accessability, usability and overall graphic balance. The typography, however, is not only about choosing the right typeface/font. After choosing the right typeface there are certain other fundamental typographical elements which should be kept in mind while designing; some of these are discussed below-

Measure - The measure is the length of the line of type. To a reader's eye, long or short lines can be tiring and distracting. Long measure disrupts the rhythm as reader has hard time locating the next line. For optimum readability, the measure of 40-80 characters, including spaces, works good. For a single column design 65 character is considered ideal.A good rule of thumb to calculate measure is to multiply the type size by 30. So a 10px type would mean using 300px measure.

Contrast - Text exists to be read. Contrast is the core factor in determining whether or not the text is easy to read. Make sure the text contrasts enough with the background to make it easily readable. Though this sounds simple but it requires some careful planning which depending on the degree of contrast; for example, white text on black background is a high contrast combination and as such it is advisable to increase leading and tracking and decrease the font-weight for greater readability (refer the glossary below for more information on the terms used here).

Size - Do not set the body text below 10 or 12px. The sites are read across different screen sizes; what is readable on a large high resolution monitor might not be so on a 15inch laptop screen.

Hierarchy - Every typographic layout needs the essential element of hierarchy. It show the reader where to start reading and where to read through, it differentiates headers from body text. Varying type sizes is one of the best ways to differentiate content. Colors and other graphic elements also help but different size of type, used consistenly through the pages, clarify the relative importance of the content to the readers. If the readers are in a hurry, they can easily pick out the important bits. Hierarchy can be achieved not only by varying the size, but by using different styles; for example, all-caps, or using italics for sub-headings. Serif and San Serif faces can also be mixed to good effect.

Space - Let the type breathe. The negative or white space will help focus attention on the text. Attention should be given to micro white spaces that sit inside the type as well as the macro white spaces that shape the blocks of text. Likewise the line-height should be carefully chosen.

Fonts for Financials

2009-08-20T07:45:00.000-07:00

Financial reports offer designers great opportunity to showcase their typographic skills. The dense technical text, changing rythms of introduction, statements, analysis, disclosure call for a beautiful and robust typographic system to assist organize the text. Numbers in financial data, tables, charts, graphs all studded with headings, legends and footnotes present unique challenges. All these requirements place special burden on the fonts. Listed below are few important points to consider when choosing the fonts for such purpose.

Tabular Figures - The numbers in the font can reveal what typographic design will work. For having numbers in sentences, font needs to support variable-length "proportional" figures; however, for aligning number in columns, font also needs to support "monospaced" figures. This is neeeded because you want the width for the numbers within the column to remain the same, irrespective of the digits used. At times, you would want to use boldface to highlight a particular set of digits, but you still want the overall column width to remain the same. Example of "monospaced" numbers is given here.

Grades - The typeface designed for text needs to account for paper on which it is printed. Some fonts have "grades" - each grade very slightly darker then the last. When doing typographic design, it is needed to fine tune the color of the font without changing its overall shape. There are variations in printing conditions like different paper types (gloss sheets and uncoated sheets). Using graded fonts provide such precise control over the effect of ink on the paper - and all this without impacting the overall copyfit.

Extended Character Set - Ensure that the typeface can handle most complicated content. At times, numbers in the financial reports require special symbols like monetary signs beyond dollars, pounds and yen. So make sure to choose a font that contains all trimmings for informational typography; not only fixed-width figures, fractions, and extended monetary symbols, but a full range of dingbats like trend arrows, ballot boxes, pointing fists etc.

Typographic Glossary and Anatomy

2009-08-20T07:30:00.000-07:00

I have put together some commonly used terms in typography. These are the terms that often come up during my discussions across different projects.

Typeface - The letters, numbers and symbols that make up a design of type. A typeface is often part of a type family of coordinated designs.

Serif - Small decorative strokes that are added to the end of a letter's main strokes. Serifs improve readability by leading the eye along the line of the type. However, if the screen/monitor resolution is low, this may not really be the case. Click the graphic towards the end of this post for more details.

Sans Serif - A typeface that does not have serifs. Generally a low contrast design. Sans serif faces lend a clean, simple appearance to documents.

Kerning - The adjustment of horizontal space between individual characters in a line text. Adjustments in kerning are especially important in large display and headline text lines. Without such adjustments, many letter combinations can look awkward.

Glyph - This is defined differently in different contexts. But most often, it is defined as a shape in a font that is used to represent a character code on screen or paper. The most common example of glyph is a letter, but the symbols and shapes in a font are also glyphs.

Anti-aliasing - Computer displays are based on pixels and fonts are forced into that square grid, which makes on-screen type look bit blocky having jagged edges. Anti aliasing is the technique of using pixels of varying shades to visually smooth the jagged edges and curves, resulting in greater readability. Usually desirable for large font types.

Logotype - A typographic trademark or symbol, frequently using distorted letterforms.

Leading - The amount of space added between lines of text.

Tracking - Average space betweeen characters in a black of text (also known as letterspacing).

There are more specific terms that are associated with typeface design. Given below is a graphic that depicts the anatomy of a typeface and provides related references.

Font Facts

2009-08-20T07:00:00.000-07:00

Helvetica, created in Switzerland in 1957, is one of the most popular typefaces in the world. Although, Helvetica is the default sans-serif font for many computers, it was designed for print.

Times Roman, created for a London newspaper is also hugely popular, owing largely to its large distribution. This font is also default for many web sites, as readers can be expected to have it on their computers.

Verdana, is a sans-serif font created especially for digital display. Verdana has simpler curves, large x-height and more open form then Helvetica.

Georgia, is a serif screen typeface that also has simpler curves, open forms and generous letter spacing. Both Gerogia and Verdana have been widely distributed making them useful fonts for web sites.

Color Matters

2009-07-06T22:00:00.000-07:00

The choice of colors play an extremely important role in all graphic designs. Colors are a non verbal form of communication to the target audience. This means that choice of colors for your brand should be part of the marketing strategy. These colors will be used for all graphic designs - the logo, corporate stationery, website, print marketing materials etc.

Consider these powerful facts from various marketing studies:

Color increases brand recognition by up to 80 percent

Color improves readership as much as 40 percent

Color accelerates learning from 55 percent to 78 percent

Color increases comprehension by 73 percent

Color advertisements are read up to 42 percent more than similar advertisements in black and white

Color can be up to 85 percent of the reason why people decide to buy

Often times, choice of color becomes a matter of personal preference rather than a thought out strategic decision. You might love color Red but you have a bookkeeping business - Red in finance means sign of trouble. On the other hand, Restaurant businesses use colors Red and Orange, as these colors seem to stimulate appetite, where as color Blue suppresses it. However, color Blue is also associated with trust and is often times used in financial, banking business.

So what color is your business?

Blue - blue is perceived as calm, peace, harmony, confidence, conservatism, trustworthy, dependable, fiscally responsible and secure. Strongly associated with the sky and sea, blue is serene and universally well-liked. Blue is an especially popular color with financial institutions, as its message of stability inspires trust.

Red - red activates the pituitary gland, increasing your heart rate and causing you to breathe more rapidly. This visceral response makes red aggressive, energetic, provocative and attention-grabbing. Count on red to evoke a passionate response.

Green - green represents health, freshness, serenity, youth, environmental, good luck. Deeper greens are associated with wealth or prestige, while light greens are calming.

Yellow - yellow is associated with the Sun and so it communicates optimism, positivism, light and warmth. Certain shades seem to motivate and stimulate creative thought and energy. The eye sees bright yellows before any other color, making them great for point-of-purchase displays.Purple - with its blend of passionate red and tranquil blue, purple evokes mystery, sophistication, spirituality, royalty, wisdom, flamboyance and sensuality.

Orange - orange is associated with energy, enthusiasm, playfulness, creativity and balance. Research indicates that lighter shades appeal to upscale markets and peach tones work well for health care, restaurants and beauty salons.

Brown - earthy brown conveys simplicity, durability and stability. Though It can also evoke a negative response from consumers who relate to it as dirty. Certain shades of brown, like terracotta, can convey an upscale look.

Black - black is serious, bold, powerful and classic. It creates drama and connotes sophistication. Black works well for expensive products, but can also make a product look heavy.

White - white conveys cleanliness, simplicity and purity. It is often used in infant and health related products.

Grey - grey conveys elegance, humility, respect, reverence and subtlety.

Color Associations and Branding

2009-07-06T21:45:00.000-07:00

As mentioned by a great color theorist Faber Birren (author of Color Pshychology and Color Therapy), association with colors are defiined, in part by our senses, language, objects and personality characterstics [1].

Savvy marketers and designers know all this well and recoganize the power of colors. Take a look at the product design and branding for Proctor and Gamble's Febreze Air Effects. The colors used in the product labeling and design leverage this principle of multi sensory color association. The colors were selected to evoke the sense of light, subtle and airy fragrances. Market research studies have also indicated that more globally the senses are evoked, the more likely it is that the consumer will become engaged and untimately purchase the product.

As another example, consider the use of color purple (including hues of purple like pink and magenta) in most breast cancer awareness campaigns, websites, products (ww5.komen.org). Here I discuss few survery results [2] for color associations to demonstrate why purple/hues of purple are the best color choice in this case. The color preferences differ by age groups.

The majority of the audience for breast cancer awareness campaigns are females who tend to be older than 30-40 years of age. A survery result [2] for a favorite color by age group indicates perference toward blue, purple and green in old age groups. As a side note, it is interesting to note the preference of green in younger age groups and the preference of purple in the older age groups. Birren also states in his book, "With maturity comes a greater liking for hues of shorter wave lenghth (blue, green, purple) than for hues of longer wavelength (red, orange and yellow)".

Coming back to our topic now, the colors preferences can further be classified between genders. The piechart [2] below show the survery results for favorite colors for females. As can be seen from this data set that older females tend to favor blue and purple. From the studies documented by Birren, color Blue, at times, is also associated with depression, gloom and fearfulness and tends to be cold and unenergetic color. Purple is often associated with dignity and courage. This makes purple as the single best choice of color for any breast cancer awareness campaigns. Different hues of purple include pink and magenta and are currently included in many medical color schemes today..

References:
[1] Faber Birren, Color Psychology and Color Therapy, revised edition 1961, p.162, Chapter 13 Associations and Analogies
[2] University of Washington
http://www.joehallock.com/edu/COM498/index.html

Color Schemes and Glossary

2009-07-06T21:15:00.000-07:00

Given below are some of the commonly used terms in color selection and discussion.

Hue is a color’s relative position on the color wheel. Hue is that attribute of color that tells you if the color is red or green or blue or yellow … the color family of a color. Use the words warmer and cooler when describing hue differences.

Value is a color’s lightness or reflectivity as measured against a gray scale from white at the top to black at the bottom. Use the words lighter and darker when describing value differences.

Chroma is a color’s intensity, purity, clarity, or saturation measured by its departure from greyness. Use the terms clearer and grayer when discussing differences in chroma.

Color Wheel Many designers use a Color Wheel for picking color combinations.The Color Wheel is an illustrative organization of colors across a circle and there are certain logical combination of colors (color schemes) around this wheel. Given below are these color schemes.

Analogous colors are compatible color combinations that blend well together. These colors are adjacent to each other on the color wheel and are less vivid, bright, have less contrast and vibrational energy. But these colors are effective in showing depth and are found all around us in nature. An example is the famous Monet rendering 'Water Lilies'.

Complimentary colors are opposite to each other on a color wheel. They contrast, enhance and intensify each other. The difference in tone and hue can be eye catching. Advertisers are very well aware that complimentary colors can be used to sell products. An example is the product packaging for 'Tide' - which uses Orange and Blue complimentary colors.

Monochromatic colors are all the shades of a single colors, as a result there are is no contrast. The resulting color combination is peaceful and subtle.

Triadic colors are found by choosing colors that are 120 degree apart on the color wheel. The resulting color combination is considered high energy. The primary colors - Red, Blue and Yellow and secondary colors - Purple, Orange, Green are examples of triadic color. Product brands for kid toys use triadic colors.

From Print to Web

2009-06-09T21:00:00.000-07:00

Many people might not realise that there are specific design factors to consider when converting a print product like brochure, postcard or catalog to a web design. I have listed few of these factors below.

Colors The print designs use CMYK process colors where as the web designs use RGB. Both color modes are in fact opposites - CMYK is subtractive color and RGB is additive color. Programs like Adobe Photoshop simulate the CMYK color space on screen and allow the conversion to RGB for web design.

Resolution of images Print resolution requirements are higher then the web. Typical print resolution for an image is 300dpi and even higher, where the web resolution is 72dpi. Using a higher resolution image on the web will make the page data heavy and can impact the page download time. Slower download time means bad user experience.

Fonts There are many special, nice looking fonts that are used in a graphic design but these fonts will not necessarily work on the website. One way to use these on the web design is have them part of the image/artwork. But the problem is that search engines cannot use this text for indexing. The only other option is to use HTML text but then you are limited to a handful of fonts. These are typically the fonts which most users have pre- installed on their computers.

Information Graphics

2009-06-09T20:00:00.000-07:00

The primary goal of information graphics or infographics is the ability to present and communicate information effectively. The presentation of information and data can be beautiful, elegant and descriptive. There are variety of conventional ways to present and visualize data - tables, histograms, pie charts, bar graphs, bullet points. However, at times you need more than just a simple linear bullet point system to convey your information.

I found one such fascinating and interesting infographic. Given below is a Trend Map which presents the 200 most successful websites mapped on the Tokyo Metro Map ordered by category, proximity, success, popularity. You can read about this infographic on website http://informationarchitects.jp/ia-trendmap-2007v2/

Another fascinating data presentation is the MyMap - a visualization of social network formed by examining the TO:, CC:, and FROM: fields in over 60,000 emails in the personal archive. The intensity of the relation determined by the color intensity of the line.

Good Magazine infographic

Frequently Used Design Glossary

2009-06-09T19:42:00.000-07:00

I have put together a collection of few informative terms that are used during the design process.The below terms have surfaced frequently in my discussions over the last few weeks.

EPS EPS stands for Encapsulated PostScript. It contains a bitmap preview of the image as well as instructions written in the PostScript language that describe how the object is to be printed. An EPS file is usually a vector.

TIFF The raster version of EPS. TIFF can be a lossless format if you choose the No Compression option, which is the default in Photoshop. TIFF supports percentages of opacity like PNG and is ideal for the final file type of pixel-based images for print. You can also have layers in the TIFF format, but this will increase the file size.

GIF A proprietary file format from CompuServe. It is used in web graphics and is best for images that are made of solid colors, like logos. GIFs support transparency (however, pixels are either transparent or opaque, nothing in between) and they can be animated. GIFs are also considered a lossless format—meaning they do not suffer compression artifacts—as long as they do not exceed 256 colors.

PNG (PNG-24, PNG-8) Portable Network Graphics are the ideal web graphic file types. They are completely lossless and they support alpha transparency. PNG-8 is essentially a GIF.

CMYK CMYK stands for Cyan, Magenta, Yellow and Black, the colors a printer works with, as opposed to the screen color space, RGB. CMYK is a subtractive color space; in other words, to make white, you take away all the colors. CMYK cannot reproduce all the colors that are found in RGB, therefore when converting from RGB to CMYK, programs like Adobe Photoshop, Illustrator etc automatically modify all the colors in the file to their nearest CMYK values. These converted colors can look either quite different or bit dull depending on what the original RGB colors were.

RGB Red, Green and Blue are a monitor’s color space. RGB color mode is used for all web graphics and designs. RGB is considered an additive color space, meaning to make white you add all the colors together.

Bleed Bleed is the part of a printed document that is outside the bounds of the final size of the piece. It is used to make sure images and other design elements print all the way to the edge of the paper. It is the designer’s responsibility to set up the bleed in a document and an accepted standard is 1/4th of an inch, outside the size of the paper, but printers can have their own specific requirements.

Retro Designs

2009-06-09T08:14:00.000-07:00

Retro designs are a great aesthetic legacies of its time and carry a distinct signature of the time. These designs are inspirational and nostaligic. I have included few retro design here - from retro product labels to vintage Soviet propoganda posters.

Swiss Style

2009-06-08T22:41:00.000-07:00

Swiss style, also known as International Typographical Style, is a graphic design developed in Switzerland in 1950s. The style reflects objectivity, cleanliness and readability and is marked by

(a) the use of a mathematical grid to provide an overall orderly and unified structure

(b) sans serif typefaces (especially Helvetica, introduced in 1961) and

The overall impression is simple and rational, tightly structured and serious, clear and objective. I have picked some of these Swiss style artworks; quite an inspiration.