Tips & Info
for Good Design
presented by Osborn Graphics
II. Design
III. Color
A. Process color versus spot color versus computer environment color
IV . Computer publishing
B. Image quality
D. Sending files through the Internet, E-mail:
1. PDFs - Acrobat Reader: WYSIWYG across computers
E. Software considerations:
1. Macintosh and. Windows platform
2. Availability - this category yet to be written
V. The professional look
A. Body copy
2. Double returns vs. space after
B. Paper:
1. Paper types, weights and usage guide
VI. Clip art and Photos - this category yet to be written
A. Availability
B. Getting images into your computer
1. Scanning
2. Tracing
3. Clip art & photo stock
4. Digital camera input
VII . Flyers, postcards, posters, brochures and ads
IX . Promotional items - this category yet to be written
XI . Creating an effective Web presence
D. Importance of information - this category yet to be written
4. Chat rooms, bulletin boards, forums - this category yet to be written
F. Semantics
1. Getting information into site
I. Introduction
Design starts with a well defined message. Design is the most important aspect to a promotional piece whether it be a flyer, brochure, letterhead or a Web site.
The advent of desktop publishing and inexpensive copy machines has opened the door to more and more people having access to the design process of promotional pieces. To make these pieces more effective, and professional looking, there are basic principles and design considerations. This narrative will provide some of that knowledge to help you produce more effective promotional materials for both in-house endeavors as well as projects outsourced through printers and designers.
Use of color is the second most important aspect to attention-getting pieces. Color of paper and use of inks are addressed along with economical ways to use color. How color is perceived and deployed across different mediums, be it paper or the computer screen, is covered as well.
Additionally, use of art and photo images, word processing techniques, use of type, the digital aspect of design plus more in-depth detail about flyers, posters, billboards, newsletters, promotional items, collateral and Web sites are all covered in this narrative.
The same principles can be applied to all types of promotional pieces, including reports, slide show presentations, trade show displays, point-of-sale displays, T-shirts—anything used to promote your message.
II. Design
A. Message
Design starts with a well defined message. The intent and mood of a message is complimented, or not, by the design. If the message is vague or written poorly, has spelling errors, or clashes with chosen images, the message will compromise the effect of a good design.
B. Organization
Good design is geared toward how the end-user will perceive the intended message. Flow of copy, how the eye follows different elements in a piece and use of shapes and balance all require organization.
III. Color
A. Process color versus spot color versus computer environment color
CMYK, also known as process color, is a common term used in the printing industry. C stands for cyan, M for magenta, Y for yellow and K for black. Use of K was adopted because black is most often the color the other three colors are keyed to. K actually stands for key.
Process color is a method commonly used to print photos. Of course it is also used to print anything that has many colors like drawings, graphic elements or even cartoons. By mixing the four colors through the number and size of dots, a full range of colors can be accomplished. If you look closely at a printed photo, you can see dots. It is the combination of these dots that determine the color your eye actually sees.
Spot colors are used where an exact shade is desired. It is not always possible to achieve a perfect match (say to a company’s line of hand-dyed purses) by mixing together cyan, magenta, yellow and black. Inks have been created to match a whole gamut of colors. Pantone is a well known company that creates inks for this purpose. Other companies are Focoltone and Toyo. These companies publish a number of color swatch books. By specifying an exact number, a piece can be then be printed achieving the desired color. The only caution here is that the paper ink is printed on can alter the affect and shade of colors. In a case, where absolute matching is desired, the type of paper a project is printed on needs to be taken into consideration. Ask your printer to provide a sample of the paper with the ink applied to get a better feel of what will happen on press.
Visit the Pantone site to learn more:
Color on the computer is not the same as printed color. Instead, color is emitted red, green and blue (RGB) light. Interestingly, combining all three of these colors make white yet in the print world, combining cyan, magenta and blue make black.
For a good explanation about RGB color visit: http://www.whoride.com/roosto/physics/
B. Use of color
Color influences mood. For example the use of green is associated with society’s environmental awareness. Green represents optimism and a feeling that things are getting better. There is also the negative aspect to green. Green is associated with envy, Martians, sickness and slime. When choosing colors for a project make them fit your subject matter.
There is not always money in the budget to use a lot of color. A well designed piece can still be accomplished using just one or two colors.
There are other ways to get color without paying to print color everywhere. For example, one way is through the use of colored paper. A second method is to use preprinted paper stock. More on this in Section V.
If you are printing a booklet, you can save money by laying out your pages so that all of your color pages appear on one side of the form and all of the black and white pages appear on the other. Check with your printer to coordinate laying out your design in the correct configuration.
IV . Computer publishing
A. Web versus print
A printed image is different than an image found on a Web site. Easy as it is to grab images from a Web site, getting them to look good when printed is not so easy if even possible. Images on the Internet are small so they will load quickly. They are purposely not designed for printing.
B. Image quality
1. Resolutions
Resolution of an image determines how it will look when printed. Images on the World Wide Web are commonly 72 pixels per inch (ppi) or dots per inch (dpi). Pixels are the small dots that make up a total image. 72 ppi is all that is needed to display on a monitor screen. Making an image larger than 72 ppi for the Internet is overkill and makes images slow to load. However if you print them they likely will be fuzzy or bitmappy. In some cases, printing them to desktop color printers is acceptable. Printer technology has come a long way in the last few years. The quality will vary depending on the make and model of your printer.
Giving an image taken from the Internet to a commercial printer to print is disastrous. To get good results, an image for commercial printing has to be around 300 pixels per inch. And, unfortunately, you can’t improve a 72 ppi image by forcing it to be 300 ppi by using a photo or image editing program. The program can not figure out how to add information to the image to give it the quality it needs.
2. Bitmap vs. vector
There are two basic types of graphics: vector and bitmap. Vector graphics will retain their crisp lines and sharp resolution, no matter how large or small you scale them. Files with extensions WMF, EPS, CGM, AI (Adobe Illustrator native format), or CDR (CorelDRAW native format) indicate vector programs have been used to create them. Vector formats are usually created with a drawing program (such as Illustrator, Freehand, or CorelDRAW) and is created by a set of mathematical instructions to determine exact location of every point relative to every other point in an image. Postscript is the well known language by Adobe that accomplishes this.
Bitmap formats include GIF, BMP, PCX, TIF/TIFF, JPG, and PICT and are composed of a fixed number of pixels (dots). Resizing bitmap images can result in “jaggies” or ragged edges. Paint or photo-editing programs such as Photoshop, Photo-Paint, and PaintShop Pro are used to create and edit bitmaps.
C. Digital cameras
Capturing an image electronically is becoming more affordable as the technology for digital cameras is leaping forward. Just a couple years ago, this method for getting images onto your computer was not recommended. Resolution sizes were just too small. That is all changing. In newer cameras, although images are still 72 ppi, they can now be up to 18 inches across so can be reduced (resampled) to 3 or more inches wide at 300 ppi (resolution normally required for commercial printing). If you use a digital camera be aware of what the end result will be after a photo is resampled. If you are comfortable with images that are 2 to 3 inches wide, digital cameras in that range are becoming quite affordable. And of course, the more you spend, the bigger image you can get! Images from most digital cameras are usually crisp and colorful and the quick turnaround is unbeatable. Keep your eye out for cameras dropping in price giving you even larger images for your dollar!
D. Sending files through the Internet, E-mail:
1. PDFs - Acrobat Reader: WYSIWYG across computers
This method of sending files is addressed first because it is so awesome. Imagine being able to create a flyer on your computer using your own art and photos and typestyles and sending it to someone who does not have the program you used to make the flyer. They, in turn, print it out to look exactly the same on their own printer! This is what Adobe has made possible through their Acrobat software. In other words, What You See Is What You Get (WYSIWYG). By turning a finished project file into a PDF (Portable Document File) and using Adobe’s free reader this can be done!
Although you can’t edit a PDF without paying for the software sold by Adobe, text and images can be copied and pasted from a PDF document or imported into other documents for editing and saving. The images you copy will only be 72 ppi (see discussion on resolutions above) so be sure to size them as large as you can on your screen before copying.
2. Word processing documents
Getting already typed text into a designed piece can be accomplished by importing from word processing programs and of course this can be done through the Internet as well. A word processing document can be attached to E-mail. Of course the receiver has to have the same word processing application on their computer in order to read it. If not, the receiver has to have a program that is capable of importing the word processing document as text. Microsoft Word has become the most popular word processing program across platforms. If you are using other programs, check with the person receiving it for compatibility. If you are sending a word document to a Macintosh, see if there is an option to save as a Macintosh file - this option allows a better chance of holding onto all the document formatting. Not always though! Do a test run before spending hours on copy formatting only to find your designer is having to do all the formatting all over again.
3. Jpeg, Gif, BMP and Tif formats
Jpeg (or JPG), Gif, BMP and Tif (or Tiff) are all acronyms for different bitmap formats. (See raster vs. bitmap discussion.) The Jpeg and Gif formats are supported by most browsers as well as have the greatest reliability for viewing in E-mail attachments.
4. Vector formats
WMF, EPS, CGM, AI (Adobe Illustrator native format), CDR (CorelDRAW native format) are all acronyms for different vector formats. (See raster vs. bitmap discussion.) Sending vector formats is trickier than bitmap formats. If the receiver does not have the originating program to view the vector, there are a few options. It can be imported into another program as a picture. It is possible it can be opened in another drawing program. If the vector format has been created with a newer program, there is the risk of it not being backwards compatible. Also a vector format can be opened in an image or photo editing program, however this will create a bitmap format and thus lose its ability to be scaled to any size.
E. Software considerations:
1. Macintosh and Windows platform
A cross-platform world is getting closer and closer. Popular program manufacturers make versions for both Macintosh and Windows platforms. The Internet is a big boost toward sending and sharing files successfully across platforms. Knowing about the nature of programs will help you achieve cross-platform success.
a. Word processing programs
These are the simplest in that they are text based. Files created in word programs, especially Microsoft Word, can usually be attached successfully. The biggest drawback is that formatting can be lost. A second drawback is the receiver does not have the same program on their system. However many word processing programs have the ability to open files in other manufacturer’s formats. If a word document can not be transferred as an attachment, try copying and pasting the text directly into your E-mail program.
b. Drawing programs
The most popular drawing programs (best known for creating vector formats) are Adobe Illustrator, Macromedia’s Freehand and Corel Draw. All three are available on Macintosh and Windows.When a file is being saved to send to another computer, find out what platform and version it will be opened into and do a “save as” to select matching version and platform. All of these programs give you the capability to save in older versions as well as saving so a file can be opened in any of the three programs. To get an Illustrator or Freehand file to successfully open in an older version of Corel Draw often requires the dot ai extension. If you know that the file is destined to go to someone who does not have a compatible drawing program, you can always export your creation as a bitmap. Just be sure the resolution is high enough for their intended use.
c. Photo editing programs
Photoshop from Adobe is the most popular image editing program for the graphics industry. Adobe Photoshop supports many formats both in the opening and saving of files. File formats that can be opened include QuarkXPress eps, Illustrator, Freehand, and even PDF. Files can be saved as Jpeg, Gif, BMP and Tif all of which can be sent over the Internet.
There are many other runner-ups found on personal computers and in small offices, like Photo Paint and Photo Deluxe, which have the capability to render bitmap images in a format that can be sent over the Internet. The size of an image from a photo editing program can easily become quite enormous and thus be difficult to send. With faster connections popping up on more and more computers this is becoming less of a concern. However it is still a good idea to check to see how the image will be used so it can be sized as small as possible. Where there is a concern, save your image as a Jpeg or Gif to make it smaller or, if still too large, copy it to a Zip disk and mail it!
2. Availability - this category yet to be written
V. The professional look
A. Body copy
1. Readability
There are certain important aspects to making a piece readable.
Use of centered text and right aligned text should be saved for special purposes or copy that is short in length such as headlines. Centered text may look nice, but reading centered test is not always easy since the eye has been trained to go the left of the page.
Be generous with white space by using large margins, extra space between paragraphs and lots of room for headlines to breathe. A page with too little white space gives the feeling of being a chore to read.
Another readability issue is column size. Very wide columns also make copy tiring to read. A good length is about 42 typeset characters.
Finally, use screens or shading sparingly. Save them for simple type such as reference notes or a table of contents.
2. Double returns vs. space after
Breaking paragraphs up by making a second return is a practice carried over from typewriter days. A more pleasing way to get spacing between paragraphs is to specify exactly how much space to put between paragraphs. This can be done in the space after box found in the paragraph formats panel. Enter a number that gives you less space between paragraphs than a double return gives you.
3. Smart quotes
A great way to add sophistication to copy is to use smart quotes. If you see inch marks around a quotable section in your body copy, you are not using them. Quick! Change them to the curvie ones! You may have to pull out the manual for this one! Some word processing programs have a preference setting for this.
4. Double spaces between sentences
Again, this is a carry over from typewriter usage. Do not use double spaces between sentences. Pick up any book or well-known magazine and see if you spot any double spaces between sentences.
5. Style sheets
This is a good way to create consistency throughout body copy and it saves you time too! A style sheet allows you to format individual headlines or paragraphs with specific own attributes. If you want all your subheadings to be bold and italics, you apply a style sheet instead of going to the format panel every time. Not all word processing programs have this capability. If yours does, use it!
6. Grammar and spelling
Bad grammar and spelling errors are one of the biggest giveaways to copy not having that professional look. Shame on me if you spot them while you read this! Have someone proof your copy. Then ask someone else to proof it. If you are not a copy writer, find someone who is.
7. Importing to other applications
Use of computers frees up a lot of time once spent inputting copy. No longer does copy need to be retyped from a fax or a photocopy. Disk transfer and E-mail allows for much easier transfer of copy. If you are providing copy this way, make it easy for the end-user (especially a designer!) by following all the above plus do not bold or itlalic text unless you are doing it from the format panel in your word processing program.
B. Paper:
1. Paper types, weights and usage guide
The different types and grades of papers range from coated text and cover (most often used for four-color printing) to uncoated text and cover. Other papers used commercially are bond, book, offset, label, index and newsprint.
Coated papers are best suited for higher-quality jobs like corporate brochures and annual reports. Ink will not soak into a coated paper as much as an uncoated paper. This enhances halftones or screens and images. However coated papers come in several grades and prices, so using them is not always going to break your budget. More and more coated papers are recycled which is helping lower the cost.
Uncoated papers can be excellent for printing. Some of these are so smooth they almost appear coated. There are many textures and colors available simulating flannel, linen, corduroy and other textures.
Because the output devices used by designers on computer systems use coated sheets, designers have a tendency to use less uncoated stock.
2. Preprinted stock
You can use preprinted stock to save on the cost of printing color. Two good sources are Paper Direct and Kinko’s.
3. Printing your own stock
Printing a graphic element, a logo and common type such as your company name and address onto collateral items gives you a look that isn’t just the plain ol’ black and white photocopy look.
a. Letterhead
Not only can letterhead be preprinted for use in correspondence, the same letterhead can be used as a backdrop for flyers and small posters.
b. Newsletters
Like letterhead, graphic elements and color can be preprinted onto paper as a template for newsletters. When a new edition goes out to the public, text can be overprinted in black and white or the newsletter template can be run through a photocopier.
c. Business cards
The same preprinting principle works on business cards too. Set up “shells” with company logo, address and phone numbers leaving off individual names. The printer can then run the uncut and un-trimmed shells through the press to add names as needed.
C. Fonts and Typestyles
Choose a suitable type for body copy—it makes up the bulk of your text. Sometimes just a single typeface can do the job of many. You can vary a typeface by the size, boldness or use of italics and, if you are using color, variations in shades will add interest.
1. Limiting usage
Limiting the number of typefaces is good way to encourage readability. Use no more than three typefaces. Two is better. You can vary their use by making headline sizes larger than the size you choose for the body copy. Remember to keep your audience in mind when you choose size. Children and elderly people have trouble reading point sizes below 10.
2. Use of in headers and body copy
Use serif type for best readability. They work best for body copy. The little frills on the letters are the serifs. Sans serif types, on the other hand, are those without serifs. Sans serif types should be used sparingly. Labels on diagrams and graphs or headlines are good uses of sans serif type.
3. Platform compatibility
If you exporting a file for use on a different platform (Windows to Mac or visa versa) than the one you have created it on, stick to basic fonts like Times, Times New Roman, Arial and Helvetica. There are a number of fonts that will not travel well between a Macintosh and a Windows platform. You can circumvent font problems if you export your work in PDF. See section on computer publishing (IV.D.1)
VII . Flyers, postcards, posters, brochures and ads
A lot of the information that follows can be applied to most promotional materials.
First, What you do or sell should be more prominent than your identity, Clearly identifying the benefits of your product (or service) is what makes an a promotional piece stand out.
Include a visual. More people will look at your visual than will read your copy. Whenever possible, make your photograph or illustration at least half your ad. Keep your headline near the visual so that the reader's eye will flow to it naturally from the visual. Otherwise it will may not even get read.
Position your copy beneath the headline, laid out in two blocks two or three inches in length. Only about 5% of people will read your copy, whereas 30% will read your headline. By positioning your copy near your heading, you create a visual continuity which will draw more people to the information you want to convey. Use a serif typeface for your copy whenever possible. Serif typefaces are more pleasing to the eye.
If you have lots of copy, break it up with interesting subheads. This will make your ad more inviting, more organized, and easier to read.
Include a signature. This is where the name of the organization belongs, along with the address and phone number. If you don't have an organization, then think of a name that will help reinforce the message you're trying to convey.
The single most common mistake in designing promotional pieces is visual clutter. Less is always better than more. So if you're not certain whether something is worth including, then leave it out.
Be sure you don’t have an ad that's unclear or not easily understood. The best way to safeguard against this is to do some rough sketches of your visual with the headline and get input from others.
Finally, proofread your ad, then give it to others to proofread, then proofread it yet again.
Post cards are serious marketing tools--tiny billboards with big missions. They are the perfect size for short questionnaires or surveys.
A postcard can even be used for a newsletter even though you have only about half of one side for copy. Use a simple Headline style nameplate. The copy might be one hot tip or a very short story or even a quote of the week. A newsletter this short would probably work best as a weekly which builds quick name recognition.
The size of a postcard makes them less expensive to produce and mail. Recipients are more likely to read a postcard than an unsolicited letter in an envelope.
Postcards don't have to be "postcard size." Jumbo postcards -- half a letter size sheet -- give all the advantages of other sizes, with a little extra room.
VIII . Billboards
Billboards are unique in that they can’t be turned off, turned over or ignored. They work continually day and night.
Since outdoor (billboards) messages will be viewed at distances ranging from 100 to 500 feet away, and by people in motion, the need for brevity, simplicity, and clarity is important. Basically, the fewer words the better. Outdoor advertisements are better with large illustrations, bold colors, simply backgrounds and a clear product identification.
X. Newsletters
First for a newsletter to survive it must start with good content. Once that is accomplished, it is important for a newsletter to be consistent.
Consistency gives unification to all the elements of text, clip art, photos, captions, short and long stories and headlines. Examples of in consistencies are different margins on each page, different typestyles for every headline, changing the look every issue and not staying with a basic layout for each page. Graphics and clip art that does not relate to the contents of the newsletter is another example of inconsistency.
Ways to get consistency include using a grid, using repeating elements (like the same header on each inside page, the same standing header for recurring articles.
Be careful not to overload the newsletter with fancy fonts and clip art to make boring words more exciting. Edit and rewrite to add interest. Use fonts and artwork to lead the read through copy. Limit clip art, photos, graphic accents to one or two per page.
XI . Creating an effective Web presence
A. Domain names
A good domain name is of course essential to a Web site. It is getting to be more of a challenge to come up with unique names - 93% of names in English dictionary already registered! The cost for registering a domain name is around $35 a year. Registering a name does not mean you have a place to park your Web site. For that, a Internet Service Provider is required.
B. Search engines
Registering a site with search engines used to be a pretty easy process. Now if a site isn’t re-registered from time to time, it falls to the bottom of the list. People have gotten persistent in the way they register sites and thrown the whole search engine process out of whack. Meta tags can be inserted into the HTML to help search engines index a site which helps. If a site has been up for a long time, eventually it will get indexed by most search engines.
C. Use of graphics
A Web page can consist entirely of just text or, like a good designed promotional piece, a Web page can include photos and art to get and keep interest. Finding or creating eye-catching graphics takes time however a Web page does not need, nor should it have, too many graphics. A few well chosen and well designed graphics can be repeated from page to page for consistency. From the standpoint of download times, the fewer graphics, the better. Also the smaller in size they are the more pleasant is the wait for pages to come up on a user’s computer.
D. Importance of information - this category yet to be written
E. Creating traffic
Once a Web site is up, it isn’t of much use if no one visits it. There are a number of ways to bring visitors to a site.
1. Newsletter
This is a good way to generate interest. A regularly published newsletter will keep people coming back. A newsletter can be supplemented by a E-mailing list.
2. Freebies
This is a no-brainer. The whole Internet experience is about freebies. Other than physical items like Tee-shirts, freebies can include how-to demos, articles, training materials or specialized information that can’t be found anywhere else.
3. Advertising
The domain name has to be advertised outside and inside the Internet environment. Banner ads is one way to advertise in Internet space. There is usually a fee attached or an exchange set up so that banners from other Web sites are displayed on your site in exchange for your banner ad being on theirs. Advertising outside of cyberspace includes putting your domain name on collateral such as stationary and business cards. Your domain name should be printed on all your promotional materials as well.
4. Chat rooms, bulletin boards, forums - this category yet to be written
5. Links
If the links are not unique and can be found at other sites, this is only a copy and paste endeavor. Links must be organized in a way that other sites do not offer.
E. Semantics
1. Getting information into site
a. Word processing
A lot of content can be typed in to a word processing program and then converted into HTML (Hyper Text Markup Language). HTML is the language that is written to display information and graphics in a Web page. Microsoft Word actually has the capability to convert to HTML.
b. HTML editors
There are many HTML editors on the market now and at a whole range of prices. However HTML can actually be written in any text program. It is a matter of learning a simple programming using tags. Pages with a lot of information and images take time to set up in HTML so using an editor helps.
c. The human factor
Sites full of good content and information take a lot of input. A lot of input comes from people. If input is not volunteer, someone has to be hired to provide content.
2. Web hosting srvice
Once a domain is acquired, a Web site built, it has to reside somewhere. Internet Service Providers (ISPs) offer this service by setting aside space on computers they maintain. Their is a cost involved of course. This cost can be as low as $20 a month with a commitment to use the service for six months, a year or more. The cost goes up depending on needed storage space, number of E-mail accounts and amount of traffic to a site.
XII. Resources:
Desktop Publishing Help:
http://desktoppub.miningco.com/compute/desktoppub/A very cool site for ideas:
http://www.ideabook.com/Pantone:
http://www.pantone.com/Clip art
http://www.dgusa.com/Photostock
http://www.comstock.com/Paper Direct
http://www.paperdirect.com/Kinko’s
http://www.kinkos.com/