Page Contents

These resources are a collection of tips focusing on design and layout theories for both print and web-based publications. Please note that these principles vary depending upon the publication media, so you'll want to research the area that is appropriate for your publication(s).

General Style Guidelines for Print Media

• Most magazines use a combination of 2-column and 3-column presentation. If this is more of a literary digest, then it could follow style conventions for book publishing.

• Size of body copy depends on the font, but generally 10-point or 11-point font is the standard. In the majority of EU countries 12-point is the minimum text size for main body text.
• Copy should be fully justified with no gaps at the beginning or end of individual lines of text to give a story a jagged appearance (in other words, not left-justified or right-justified, but type that is flush both left and right).
• Until recently serif fonts, with small finishing strokes appended to each character (more closely resembling handwriting), were the established norm for the body text in print publications. However this has changed with the prevalence of sans-serif fonts such as  helvetica and arial in web-based content. Research the established styles of journals in your field, as for example Art and Design are increasing using sans-serif but Psychology journals use serif fonts.
• Use a larger, bolder version of the body typefont for headlines, or a bold sans serif typefont. Also consider using CAPS for design impact. Titles should be written using title formatting all conjunctions are lower case, primary words are uppercase for example: "general style guidelines for print media" will become, "General Style Guidelines for Print Media".
• Use sans serif type when characters must be smaller than 10 points or for items that include a lot of numerals (e.g., for captions, page numbering and footers, charts, tables, lists and formulas).
• Leading, or line spacing, refers to the distance between lines of type. Generally speaking, you need at least two points of leading. Leading is expressed as 10/12, or “ten on twelve” for example, which is the type size with two points of leading.

• Pay close attention to two-page spreads (pages that will face one another). It is better to treat them as a unified element. Be wary of ending a story on a left-hand page and starting a new story on the right-hand page directly across from it. Readers have been proven to skip more articles that start this way because they are still digesting the story that just ended.
• When constructing any publication it is essential to devise a simple set of Design Standards, particularly when you are working on a group project. I have included an example of a design standards document made for Carleton materials as a PDF here and there is a preview image below.

The Chicago Manual of Style is the primary source for periodicals like newspapers, newsletters, and magazines. This is often supplemented with a “house style” to provide additional guidelines for the presentation of names, titles, and such. Carleton College has a supplemental style guide , for example. This practice is quite common for organizations, institutions, and companies that want to present a consistent brand and identity. You can access the 16th edition of The Chicago Manual of Style online via this link: http://www.chicagomanualofstyle.org/16/contents.html

Mechanical Specifications

Color   Full color magazines are typically printed using 4-color process printing. All colors are rendered from combining Cyan, Yellow, Magenta, and Black (CYMK). Much like photo-processing, CYMK plates must be developed, and then the separate color plates are stripped together and laid out on the printing press. To reduce costs, you can print just in black-and-white or use a 2-color process where you have a black plate and one other spot color of your choosing. Spot color choices are vast, and if you use one once in a form (see below) you can use them anywhere else in the same form without a significant increase in cost.

Stitching or Binding   Magazines are generally saddle-stitched or perfect-bound. Saddle-stitched means the pages are folded together and the magazine is held together with two or three staples on the spine. Perfect-bound means the magazine pages are held together by attaching them to the spine with a strip of glue, just like a book. Generally speaking, magazines less than 100 pages are saddle-stitched, and magazines with more than 100 pages are perfect bound. Some magazines up to 160 pages have been saddle-stitched, though. Determine what the printer can accommodate.

Forms   Magazines are generally printed on presses that can print, 4-, 8-, and/or 16-page forms. The full magazine is created by assembling these forms and stitching or binding them together. The cover is typically a separate 4-page form so it can be glossier than the interior pages, use a spot color of some sort, etc. The contents of the magazine are usually combinations of 8- and 16-page forms with 16-page forms more desirable. It costs just as much to run a press with a 16-page form as it does with an 8-page form, so you get more for your money with 16-page forms. Smaller forms use less paper and ink, though, so cost-to-benefit ratio is small unless you’re printing huge quantities.

Trim size  the final page dimensions of the magazine. Typically, magazine pages are printed on larger paper and the edges are trimmed off to allow for smooth and even page edges and other desirable effects, like bleeds (see below). You need to know the trim-size so page editors and graphic artists know the size of their canvas.

Bleed   Printing or art that goes all the way to the edge of the paper, seeming to run off of the sheet. Printers create bleeds by printing on sheets larger than the trim size, then cutting away the edges. This creates the illusion that the press printed to the very edge of the sheet. The bleed width, or actual paper size the printer is using, should be visible in the page templates so you can create bleeds when desired. Pages shift on press during printing. If you do not provide enough bleed, something you want to bleed will just end up hanging there.

Gutter-width   The line or fold where facing pages meet. This will vary depending on whether you are stitching or binding the magazine and on the number of pages. Without consideration for gutter-width, facing pages will look closer together in some places in the magazine and farther apart in others. The printer should be able to provide this specification. Trim size, bleed width, and gutter-width should be incorporated into page templates.

Spine-width   If your magazine will be perfect-bound, you will need to know the appropriate spine-width for the number of pages that will fit inside the cover. If the spine-width is large enough, you can put text on it.

General Style Guidelines for Web Media

Web design has a huge number of resources for accessing the accessibility and effectiveness of your website. Many of the rules above can also be applied to web design, however there are some specific things to bear in mind. The Web Services Group have some good guidelines which can be applied to general Website design, you should follow their recommendations if you are using Reason to build your website: http://apps.carleton.edu/campus/webgroup/training/

• Basic technical terminology:
  It is essential to gain a basic understanding of the anatomy of a web page. Here is a very quick and helpful description from Blueprint Design Studio based in Chicago: http://blueprintds.com/2008/12/30/anatomy-of-a-web-page/
• Headings and fonts:
  sans-serif at, at least, 12 points is a good rule to follow. Headings can be far bigger than traditional print media and should generally be in a sans-serif font.
• Images:
  Make jpegs
  72 dpi with the width not exceeding 500 pixels in any direction will provide you with an image that will load fast. Use Optimize for Web in the Save function in Photoshop for peak performance.
• Layout:
  This is dependent upon the design system that you are using. If you are using Reason or WordPress a standardized, tabular format will come as standard in the page template. If building your own site it is important to consider the arrangement of the essential elements: site title (header), body content, navigation, footer and any additional side bars.
• Navigation:
  Must be clear and it is wish to avoid flash-based navigation due to accessibility issues (smartphones, iPads). Standard navigation locations are directly above or below the header or in a left sidebar.
• In you class WordPress MU blog: Images Tutorial
  If you need to upload images click on "Select files" in the next window to upload your images. Please note: the maximum width for images in the Carleton WordPress MU is 1024 pixels X 1024 pixels. If your image is larger it will not upload. If your file exceeds 2MB then depending upon the blog settings it will also probably fail to upload. Please resize your images in Preview or Paint before uploading them. In general a good rule of thumb to follow is for your images not to exceed 500 pixels in an dimensional direction.

Links

Design: Print and Web Essentials

ADA Standards for Accessible Design
This is both an essential tool for any design project and a good example of in-depth design standards

Guidelines And Standards Manuals
A list of exemplary design standards from different companies. Particularly good examples are ABB and BestBuy.

A List Apart
This site is essential reading for web design and also has some great tips for general design projects.

W3.org
The authority on web design standards, this is very in-depth and in the majority of cases a class blog or website will initially constructed as code compliant by your Academic Technologist or the Web Services Team.

Accessible Website Design
A fabulous interactive tool for accessing design considerations for a web page.

Web Design Trends for 2010
This site features great collections of site examples and typographic observations.

Design Tools

These tools are currently available to students on campus in the public labs. Contact Fiona MacNeill (fmacneil), Tucker MacNeill (tmacneil, PEPS) or Carly Born (cborn) for assistance with Adobe products.
You can also find a variety of helpful videos at the Adobe training website: http://tv.adobe.com/show/learn-indesign-cs5/

Adobe InDesign CS5:

• Use it for: Publication Design and Posters
• Adobe InDesign CS5 - wiki.carleton.edu - Some materials are available, additional materials will be added soon

• Carleton InDesign FAQ

* Carleton FAQ was created in 2005, the information may be slightly different in Adobe InDesign CS5, the current version in use on campus. The ATs are working on updating this information.

Adobe Photoshop CS5:

• Use it for: Photographic Editing, Image Preparation, Quick Design Products, Advertisements

• Adobe Photoshop Extended CS5 - wiki.carleton.edu - Some materials are available, additional materials will be added soon.
• Photoshop Cheat Sheet - Photoshop Basics

Adobe Illustrator CS5:

• Use it for: Original Illustrations, Vector Graphics, Floor Plans, Logos

• Adobe Illustrator CS5 - wiki.carleton.edu - No materials are available at this time, materials will be added soon.

Adobe Dreamweaver CS5:

• Use it for: Web Design, Javascript, Roll-over buttons, Limited Flash Objects*
• Adobe Dreamweaver CS5 - wiki.carleton.edu - No materials are available at this time, materials will be added soon.

*Flash will not work in college webpub folders.

Reason:

• Use it for: Carleton web pages
• Reason is Carleton's content management system for the web. Please contact the Web Services Group for training.

Preview (Mac OSX)

• Use it for: Checking Image Size, Image Resizing, Quick Cropping, Image and PDF Annotation, Quick Alpha (color exclusion, i.e. taking out a white background).
• Comes as standard on all Machintoshs as part of OSX, however the functionality will vary depending upon which version of OSX you are using.
• Checking image size and resolution in Preview

Paint (Microsoft)

• Use it for: Checking Image Size, Cropping, Image Annotation
• Comes as standard as part of Windows, however the functionality will vary depending upon which version of the Windows Operating System you are using.

Page Layout and General Publication Resources

Design Phase of Desktop Publishing
A lovely tutorial by About.com that links out to endless number of resources on layout/conceptualization, color, font and image selection, etc.

Is there such a thing as Perfect Page Layout?
An excellent summary of things to think about in page layout.

Perfect Proportions - Using Page Margins in Desktop Publishing
A simple guide to the 3 rules of thumb in deciding page margins.

Top 4 Steps to Perfect Publications for Non-Designers
Mostly geared to small business owners, but some of the principles are still applicable.

Top 5 Design Disasters to Avoid
Basic guildelines that will help make your publication look professional.

Glossary of Desktop Publishing Terms
A - Z terminology of desktop publishing.

Fonts

Which Are More Legible: Serif or Sans Serif Typefaces?
A great essay by Alex Poole with visual examples comparing serif and sans serif fonts.

The Periodic Table of Typefaces and Other Very Helpful Font/Typeface Links
This is a great site from the Behance Network (Creative Professional Resource) with some good font resources.

Color

Color Scheme Designer 3
This online color application will help you devise contemporary color schemes (mono), complimentary, triadic, tetradic, analogic and accented analogical.

ColorCombos.com
This site is particularly good for picking Web compliant color combinations.

Color Meanings and Colors That Go Together
About harmonizing, complimentary and constrasting colors. Also includes information about color groups.

How Color Works
A group of links that discuss all aspects of colors.

Design Inspiration

CoolInfographics.com
Really fabulous examples of infographics and posters from a variety of different sources.

TED Talks
Really informative talks helping to demystify design thinking and theory

Webdesignerwall.com
Great resources for web design run by professional web designers

Other Resources

AAHI Slide Libe Image Guidelines by Carleton Slide Librarian – Heidi Eyestone

Adapted from: What are you scanning for? This guide can be used for variety of different image based needs.