Week 3 Lecture / Chapter 4

Continuing onto Chapter 4 during lecture.

In this chapter and lecture we basically overview the do’s and don’t’s regarding layouts…

Or, as the chapter titles it: “Layout Sins: 13 amateur errors”

Here are the 13 sins:

1. Centering Everything

2. Warped or Naked Photos

3. Too Many Fonts

4. Bulky Borders & Boxes

5. Cheated or Missing Margins

6. Stairstepping

7. 4 Corners & Clutter

8. Trapped Negative Space

9. Busy Backgrounds

10. Tacky Type Emphasis: Reversing, Stroking, Using All Caps & Underlining

11. Bad Bullets

12. Widows & Orphans

13. Justified Rivers

Let’s go down the list in detail…

Centering Everything!

ds-basic-alignment-3

I admit to this sin.
As you can see in my previous entries, I favor center alignment.

However, I like to think that I use it in a stylized manner. 🙂

Although centered content can communicate efficiently but it can come off traditional and conservative.

In other words…snooze-fest.

My attention averted elsewhere.

pokemon-go-field-test-starts-today

Do’s for centered alignment content:

Left or right aligned layouts give the viewer’s eye a nice straight vertical line on the right or the left to follow top to bottom. Centered layouts have no such line. The eye bounces around in search of the next eye entry point.
Centering is a composition issue, meaning how you compose or arrange items on the layout.

Warped or Naked Photos!

A warped photo is a photo that you tried to fit into a layout by stretching or squeezing in the content to fit it well.

images

Without a border, the sky blends into the background. The photo needs a hairline border.

Naked photos are photos that require a border, however, not all photos require a border. A photo requires a border when the photo blends with the color of the screen or page to mark its edges.

Although, if one photo does require a border, then every photo or illustration will also require a border to maintain consistency and upkeep visual flow.

When a photo border is necessary, use a hairline rule (as thin as a strand of hair). Or change the background color outside the photo to contrast with the edge of the photo. The idea is subtly to mark the photo’s edges without distracting from the photo. You want the viewer to think, “Cool photo,” not, “Whoa, check out that bulky border.”

Too Many Fonts!

One of the core tools for communication are words, specifically, fonts.

“The right fonts bring character, color, texture and pattern to layouts. Which means they must be chosen carefully and with purpose. It also means you don’t want to put too many in the same layout.”

Be scarce about font choices when creating a design.

Too many decorative and loud fonts on a design will result in “visual overload and clutter”.

5 Steps to Visual Success

Avoiding the sins results in a very different look. This is how to make a layout work:

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

2.Minimize the number of groupings the eye must scan. Cluster like with like, and make negative space work for not against flow. Instead of “4 corners & clutter” all over the page, this layout clusters everything into four key groupings: photo and headline, bullet list, body copy and tags.

3.Guide the eye with visual sightlines. Strong verticals from left-aligned copy blocks and tags give the eye a clear visual path to follow.

4.Set type properly. This design limits all caps to a large one-word headline. Choosing a single font family for type readability creates visual unity through similarity. Other typesetting details such as proper bullets are spot on. No tacky type here.

5.Use simplicity and restraint. Need we say more?

images

This design utilizes the 5 Steps to Visual Success

 

Bulky Borders and Boxes!

Try not to use too many borders and boxes in a design. Some designs looks best without borders and boxes, it can even be aesthetically appealing without borders and boxes (minimalism).

Screen Shot 2016-07-25 at 7.58.39 PM

The problem here is clutter choking all the negative space. The fat border clutters the overall layout while the lack of margins inside the border strangles the content.

If you need to border or box, think “barely there.” Think lingerie straps. Even better, think twice before using a border or box at all. Negative space can do the same separating job only without the showboating and claustrophobic effect.

Try to avoid using borders or boxes unless it is absolutely necessary.

Cheated or Missing Margins!

When absolutely necessary to use borders or boxes in a layout, it is necessary to start all over again “with margins inside the border or box.”

Margins. Margins. Margins.

When it comes to collateral and news designs, they utilize boxes for related sidebars, breakouts and pull quotes.

Web pages utilizes grids of boxes. Every box requires a set of margins.

When a text box has margins, they’re called “inset”.

Don’t be stingy with your margins—wherever they appear. Train your eyes to spot areas where margins of negative space have been cheated. Remember, white space is not your enemy.

Stairstepping!

A lot of designers fear of leaving white space or negative space. It’s not entirely bad or good to leave white space, sometimes we can use that space to provide emphasis to the content.

One of the things that designers tend to make a “whoopsie” on is picking and choosing where to place images or text to fill in the white spaces or the “negative” spaces.

The reason it is bad to fill in blank spaces with extra content is to avoid a busy site or page. It’s over-stimulating and a lot of viewers or the audience would find that to be cluttered and would lose interest real fast.

There are few things that kill readability and flow more than stairstepping. Align your elements vertically or horizontally, and let the remaining white space do what it does best: Frame and highlight your important content.

4 Corners and Clutter!

This no-no goes hand-in-hand with Stairstepping. The reason newbie designers would feel compelled to fit or stretch things to fit the four corners of any site or page is to avoid white spaces. Just like stairstepping, it would leave your content with a sense of overwhelming or anxiety and leave things cluttered and make your site or page looking uninteresting.

Avoid this, please.

Instead of cluttering content, try clustering them together. Clustering is when you group pertinent information together to convey a sense of order and organization and can actually display a sense of professionalism in your work!

ClusterSampling

Trapped Negative Space!

Trapped spaces.

No one likes to feel trapped and suffocated, right?

What’s even worse is seeing something trapped, especially in design.

A trapped negative space is, “a puddle of negative space landlocked inside the layout.”

It’s like a bubble that can’t escape.

Trapped negative spaces are attention-grabbers. The viewer can’t help but to go right where that white puddle has been left.

Let’s avoid doing this, yes?

images

Busy Backgrounds!

Busy backgrounds goes right with stairstepping and cluttering to avoid white spaces. A busy background is a background that has too much going on that it takes attention away from the core content.

images

Tacky Type Emphasis: Reversing, Stroking, Using All Caps and Underlining! (phew)

As the section title states it, it is tacky to reverse black and white in a design, to over-use glyphs and over-use stylized strokes to convey class and sophistication, and, of course, the overtly used ALL-CAPS and underlining any text to over-emphasize anything.

964454b2be15ffea0b6540fdc1d0ed0f661083a2fbff81e5eb50e535f01e8085

Bad Bullets!

Oh, lordy-lord.

Bullets.

You know, those dots that makes content look like a grocery list…

powerpoint-dos-and-donts-9-638

Honestly, y’all…

Widows and Orphans!

These terms though…

Widow – a few lonely words or a hyphenated word stranded at the bottom of a column or leg of type.

Orphan – a few lonely words stranded at the top of a leg.

widows-orphans

And, finally…Justified Rivers!

river_5550

See those long vertical flow-y white spaces? Yeah, justified rivers. In this case, it’s okay.

Unless you’re a professional writer or an editor for a newspaper, you can pull this off, however, a newbie designer such as us, let’s avoid this unless informed otherwise OR you feel confident enough to utilize this method in your work.

A way to “drain” justified rivers of white spaces:

1.  Increasing the width of your column, thus the length of your line of type.

2.  Reducing the font size.

3.  Or both.

“That covers all 13 offenses. Now go forth and sin no more. Don’t forget to take the checklist with you.”

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s