Monthly Archives: October 2011

Design components nobody thinks about (web and print)

Simple things to keep in mind when having a print piece designed or having your web site designed. It’s about how people see and how they get annoyed.
People use peripheral vision far more than anyone realizes. While it’s true that central vision is most important to specific identification, peripheral vision pays a key role in discerning the gist of an image. See below:

Seeing the center of the image shows you it’s a bee. Seeing the edges may not tell you it’s a bee but you will be able to identify it as an insect. Peripheral vision becomes very import when people view web pages. What is on the edges of a web page is important not just what’s in the center. In fact, whether to stay or leave a web pages is often determined by what the peripheral information says. Resist the urge to be different and run that menu clearly down the left edge of your page. Tell the people what they want to know before those 1.5 seconds elapse and they are gone. Who and what right there on the left right away.
And if you want someone’s view to be directed in a certain way don’t put flashing elements on the side. You know what? Don’t put flashing anything anywhere. You can have a mini slide show but no blinking and no flashing.

PPI, DPI, Ay yi yi

We, meaning me, use DPI to describe resolution for all things. I should not do this but I probably will continue to refer to all things as DPI.

Meagapixels—Millions of pixels describes camera resolution. And yes, they tout the number of meagapixels to confuse you. High is good but when looking for a camera try to find the number of effective meagapixels. Effective megapixels are the number of pixels used to actually capture the image. A nice point and shoot over 4/6 megapixels will do you fine. A 4/6 will do fine but a little higher will produce a nice image for the occasional enlargement.

PPI—Pixels per inch refers to image file and monitor resolution. I usually recommend web image files be saved at 72 DPI ( I know, I know—just know the 72 part). However, monitors have higher resolutions so 72 is fine but if you want a really sharp image try 85 or 125. If you use a higher resolution be mindful of the size. Large files can still take a long time to load. As far as image file size goes the higher PPI means the image contains more information and can be made larger and still look crisp.

DPI—Dots per inch. This means how many dots of ink will be placed on the paper by a printer. The printer being inkjet, laser or commercial. Higher isn’t always better here either. You can have an image that is 1200 DPI but if your printer can only print 600 or more often 300 DPI it will resample (rewrite) your file and discard the extra information. You and your imaging software are much better at determining what stays and what goes in your image.

FYI: Newspapers are printed using LPI or lines per inch and generally are printed at 85/100 LPI. Ay yi yi.

Sounds simple and it is

Centering text. You select center and you’re done, right? Not always. You still have to look at your type. Lean back, squint your eyes and look. Does it look centered? There will be times when it doesn’t appear so. One problem may be you added a space at the front of the line of text, easy fix there. Other times it just doesn’t look right. There are no extra spaces, so what’s up? It may the typeface you’re using has funny o’s or w’s. How do you fix it? You eye ball it. Add an extra space to make it look right. And that’s the secret, do what you have to make it look right. The other guideline for centering type is tapering. The top line is your longest line:

The quick brown fox jumped over the lazy dogs.
The quick brown fox jumped over the
lazy dogs. The quick brown fox
jumped over the lazy dogs.

The resolution revolt!

Time to understand a little more about resolution. The fundamental truth still applies though time goes by, a low resolution image cannot be made into a high resolution image. Well it sort of can, but it will be a teeny tiny picture. Resolution is how close pixels are, pixels by the way, are the blocks of colors that when viewed at a distance create an image. Your monitor has a resolution of 72 (dpi—dots per square inch as left over from print, just go with it). Your monitor will show you your image at 72, no matter what. But what if you want to print? A little more explanation before that bit. Higher resolution yields a clearer sharper picture but at a smaller size. Lower resolutions results in a less distinct, blurry, pixilated picture but at a larger size. If you have a 3 x 5 image at 72 resolution you can’t make it 300 without it getting very small. If you want it to stay the same size, if your software permits, it will resample. Resampling is when your software gets rid of information it doesn’t need (300 to 72) or creates information (72 to 300) to reach your desired resolution. Except to create information your computer software guesses based on the information of adjacent pixels. It looks bad so don’t do that. What about printing? Your printer likely has a print resolution of 300. If you send a 600 resolution to your printer it will resample the image. Don’t let your printer do that, you change the resolution to 300. You and your imaging software will do a much better job.

El, em, en, Oh!

En dash, em dash. What are they and what can they do for you? Nothing more than help you get across your meaning in writing. Em dash — is longer than an en dash. It is used to set off a comment much like parentheses do.
Grating lemon peel—with a fine grate—into your coffee grounds before brewing will give your coffee an Italian flair.
An en dash is used to a to show union, correlation, things that go together. Red–green, blue–orange, yellow–purple.
And the hypen is for joining words or separate syllables of a word. Eye-opener.
On a PC an Em dash is created by typing two hyphens—at least in word—and they should be automatically joined. An en dash is best inserted by using the menu, insert+symbol+special character. En and em dashes are at the top of the list. And for those of us who use a Mac, far easier: Em—Shift+option+hyphen and the en—Opton+hyphen.
P.S. The em dash is the same size as your type, 12 point type has 12 point em dashes. The en dash is half the point size, 12 point type has a 6 point en dash.