Layout Design Basics:
13 Common Mistakes to Avoid in Print & Web Plus 5 Simple Steps to Visual Success

– by Mike Hamers, Lightspeed– Edited by Kirsten Nelson, C3 Writing

With regard to layout mistakes, there are plenty of them. We narrowed the list to a baker's dozen of the most conspicuous ones seen most often. Avoiding these mistakes can help make your layouts look more professional. We then follow up with 5 Steps to Visual Success with an example to demonstrate how a simple, uncluttered layout is more apt to be read and to be acted on.
                          
1. Centering Everything
In general, avoid centering layouts. While centered content can communicate traditional or formal values, too much type is harder to read as the eye bounces around in search of the next entry point. Left or right aligned layouts give the viewer’s eye a nice straight vertical line for easier reading.
                   
2. Borderless Photos
Use a hairline rule to border photos that have ambiguous edges. If you can’t tell where the photo begins or ends because the color of the image blends with the paper or color or web background (i.e. white sky on white background), the photo needs a thin rule to mark the edges, or slightly change the contrast with the background to subtly mark the photo’s edges without being distracting. You could adjust the photo in Photoshop or slightly change your background color..
             
3. Too Many Fonts
Fonts have tremendous communicative power. The right fonts bring character, color, and texture to layouts. Which means fonts need to be chosen carefully and with purpose. Using too many fonts is like matching stripes with plaids as you get visual overload and clutter. A good practice is to use a standard font family for your body copy (like Helvetica or Times Roman) and choose your second more decorative font for effect applied to just your headlines and subheads. On your website, non-standard font elements may have to be brought in as a graphic for consistent viewing. Try to stick to two fonts per layout.

4. Bulky Boxes and Borders
Use negative space to group or separate things. If you must use a border or box, choose an understated one. Borders and boxes are like fences. Clunky ones draw too much attention to themselves instead of the content being highlighted. Negative space can do the same job of separating without the claustrophobic effect of borders.

5. Pinching or Missing Margins
Be generous with margins. Including adequate space: inset space (inside the margin) and offset space (outside the margin) for text and picture boxes so there is no tension from pinching of elements. On the web, inset space is called margin, outset space is called padding.

      
  
6. Stairstepping
Keep headlines in a straight line. White space is not your enemy. Spacing out words to forcibly fill the width hurts readability and looks amateurish. Frame or highlight your important content instead.

7. The Four Corners & Clutter
Clutter is bad; clustering is good. There is no need to fill up every inch of space with an element. White space is not your enemy. Negative space helps guide the viewer’s eye through the flow of the design. Group visual information together that naturally belong together. Effective clustering results in fewer groupings of elements, thus simplifying the layout as it uses the space efficiently.

8. Trapped Negative Space
Push extra white space to the outside edges of your layout.  Avoid having landlocked white space in the middle of a layout as the emptiness can draw attention away from your content. Make sure your white space opens out to the layout’s margins.
                            
9. Busy backgrounds
Design backgrounds as negative space that recede. Don’t convert your calming negative space background into busy cluttered positive space that ends up completing with your content. Backgrounds should not interfere with your communication. This is especially true for websites – do not use eye-popping or busy background textures or colors. Keep your pattern tiling for the bathroom.                                     

10. Tacky Type Emphasis
Think twice about reversing, stroking, using all caps or underlining type and never do all four at once. Each can be used effectively if used minimally. All four “applied styles” have the ability to draw attention but all have the same downside of being harder to read if used to excess.

Reverse type: Be very careful about reversing white text on a background if using a serif font as the thin part of the stroke has difficulty staying “clean” especially when printed because of paper’s fiber absorbency. Equally true on the internet, sans serif fonts (equal stroke thickness) always read better when reversed.

Stroking: Adding an outline stroke for emphasis may make a word stand out but it also cheats the normal space between the letters and makes the word harder to read.

All caps: People read words not letters.  When you use all caps the words loose their shapes. Ascenders and descenders help give words their shapes for faster recognition. While minimal all-caps usage in a headline may call attention, never use all-caps in your body copy.

Underlining: Since the internet and its common use of underlining to indicate a hyperlink, it is best to never use an underline for anything but a hyperlink, even in printed material. For emphasis consider using bold, italic, highlighting, or a different color.
         
11. Bad Bullets & Indents
There are two big issues with bullets: Using the wrong kinds of bullets for lists, and improper alignment. First, use real bullets. Simple elegant dots or numerals are the best choices. Asterisks, hyphens and smiley faces are not good choices. Checkmarks can work in some situations. Always use hanging indents to properly align lists: align bullets with bullets vertically and align the type with type vertically.

12. Widows & Orphans
Avoid inelegant breaks at the bottoms and tops of legs of type. Widows are the unfortunate few lonely words hanging around at the bottom of a paragraph. Orphans are words stranded at the top of a new paragraph or column. Justify your type or apply paragraph tracking to add or subtract letter spacing to avoid these.

13. Justified Rivers
Avoid unsightly rivers of negative space flowing through legs of justified type. Justified blocks of type cut down on readability by producing “rivers” of trapped white space flowing through your text. Fully justified copy only works if the column width is wide enough to work with the point size of your type. If these rivers cause a visual problem, either increase your column width or reduce your point size, or both. I advise against using fully justified type ever. Flush left or right type eliminates this problem and makes it easier to read.

5 Steps to Visual Success  

1. Establish a clear focal point.
A properly proportioned photo and large contrasting headline provide a clear eye entry point into the design layout.                 

2. Minimize the number of groups the eye must scan.
Cluster “like with like”, and make negative space work for the flow and not against it.

3. Guide the eye with visual sightlines.
Strong verticals from lift-aligned text blocks can give the eye a clear visual path to follow. 

4. Set type properly.
Limit all caps to only a few words. Choose a single font family for type. Easy readability comes with visual unity through the use of similarity.  Use bullets properly.

5. Use simplicity and restraint.
Organized layouts get read and the content gets remembered. – MH

     To Read Past Issues of the Newsletter – Link to Index

Get help with all your graphic design needs — Call if you have
any questions, suggestions, or wish to schedule a free consultation:
Mike's cell: 303-527-1222 or email: mike@lightspeedca.net

Read what others are saying > Testimonials

More Award-Winning Logos (pdf) > click here  

More Business Cards (pdf) > click here  


 Online Portfolio > 

mproved A