SENTX2019 Presentation (Basics of Layout Design)

Basics of layout design Making visuals and type play nice in space SENTX 2019: Contextualizing Science Journalism in the Philippines 07 September • College of Science Auditorium, UP Diliman

Jiru Nikko M. Rada Technical Officer National Anti-Poverty Commission

“... putting words with images on a page.”

“It is the make-up or dressing of a page ...” “... the arrangement of illustrations, texts, and graphics on a page to be printed or published.” “... the selection of font styles, photos, and shapes ...”

1960s

1980s

2000s

Newspaper design was characterized by tight pages that were packed with content on the front page. Newspapers began to shift toward larger gutter sizes, more hierarchy, and standard typefaces.

The launch of USA Today showed many different points of entry on its front page. These entries allowed readers to easily locate articles or stories that interested them within the newspaper, which increased how scannable the design was.

The early 2000s saw an increase in the use of color, information graphics, and stories packaged together.

Modular design became the typical layout option for newspapers.

1970s

1990s

Modular design became more popular, creating focal points that increased readers’ ability to easily scan the text for information.

Photographs also became the dominant graphic element on the front page.

Graphics and thumbnail images became more popular in the 1990s, as they were paired with points of entry to help cater to visual readers.

By then, nearly all newspapers were using color, color photography, color graphics, and modular layout (Utt & Pasternack, 1995).

A well-written story just isn’t enough.

A page nobody reads is a wasted page.

categories of layout

static layout This type of layout has a fixed pattern of arranging the headlines, artworks, whitespace and picture placement, the only responsibility of the layout editor is to pour the news items into the mould each day.

It is generally considered as a non functional layout because the layout pattern is always the same.

• It is easy to make • Saves time and energy • Gives a newspaper a known identity • It help the different editors in assigning beats

• It shouts in the same tones everyday • It is not flexible. It has a fixed pattern and if a story breaks the editor has to do lots of work • It lacks political balance as it is difficult to give 2 sides equal prominence • Limiting the possibilities of clear expression in the most befitting selection of words and display of headlines

categories of layout

dynamic layout This type of layout on the other hand refers to the arrangements of news items in response to what has to be communicated.

It is generally regarded as functional layout because the layout editor has to wait for the news to determine the pattern of layout to use.

• It is flexible • It keeps the layout editor updated in the recent developments in newspaper layout • It always respond to the changing news • It offers exquisite political balance • It provides the possibilities of clear expression

• It is difficult and time consuming

Design should fulfull the need for effective communication besides being attractive and beautiful.

elements of design

space Positive space is filled space.

Negative space is empty space, which is not your enemy.

You can’t talk about, create or evaluate graphic design without accounting for space.

White Space is not your Enemy, Kim Golombisky

elements of design

line Lines may be straight, angular, or curvy. They may be thick or thin, continuous or uninterrupted.

Pictures and illustrations contain lines that guide the viewing eye through the composition. Lines are associated with movement and eyeflow.

White Space is not your Enemy, Kim Golombisky

elements of design

shape Shapes can trigger instant recognition.

In art lingo, there are two types of shape–inorganic and organic. Inorganic shapes are geometric such as circles, triangles, and rectangles. Organic forms are more natural, as found in nature.

White Space is not your Enemy, Kim Golombisky

elements of design

size Size can make things shout with importance, or make them whisper.

White Space is not your Enemy, Kim Golombisky

elements of design

pattern Pattern is about duplicating.

Pattern creates a sense of orderliness and familiarity in layouts.

White Space is not your Enemy, Kim Golombisky

elements of design

texture Generally, we think of texture in terms of three dimensions, such as sculpture, textiles, mixed-media, or even applied oil or paint.

Mimicking the idea of texture graphically in two dimensions, requires clever use of lines, shapes, and patterns.

White Space is not your Enemy, Kim Golombisky

elements of design

value Value refers to tones of light and dark.

It is necessary for strong composition. We use it to create a sense of depth and variation in order to avoid visual monotony.

White Space is not your Enemy, Kim Golombisky

Layout gives prominence to the news in proportion to its importance.

Considering the design makes the pages appear attractive and makes the different contents easy to find and read. Layout gives the paper a personality or individuality of its own.

principles of design

focal point A focal point is the eye’s point of entry into the layout.

White Space is not your Enemy, Kim Golombisky

x x

Mechanical Center

Optical Center

Reflects the actual center of the page determined mathematically by measuring.

This is where your eye goes first.

According to the research, this is the most likely place for your eye to “pick up� the page and begin looking.

The optical center is about 3/8 down and in about the first or second column of a standard newspaper page.

principles of design

contrast Contrast avoids visual boredom.

It offers a great deal of flexibility by using the various elements of design.

White Space is not your Enemy, Kim Golombisky

principles of design

balance In design, we think of balance in terms of visual weight. To achieve balance, each side of the page must carry equal weight.

White Space is not your Enemy, Kim Golombisky

principles of design

movement The principle of movement goes back to the idea that good design controls the eye’s flow through the composition.

The flow of lines can move the eye accross the page or screen.

White Space is not your Enemy, Kim Golombisky

principles of design

rhythm Visual rhythm results in a visual sense of togetherness for the layout and helps lead the eye from one thing to another.

(repeating of fonts, grouping several photos, using columns, repeating shapes) White Space is not your Enemy, Kim Golombisky

principles of design

perspective The sense of movement into the distance or through a foreground, middle ground, and background.

White Space is not your Enemy, Kim Golombisky

principles of design

unity Unity means that all parts of the design work together, and everything looks like it belongs together.

White Space is not your Enemy, Kim Golombisky

Flipping through pages is a reader’s experience and designers are responsible for this experience.

Jacek Utko, award-winning graphic artist and art director

thinking with type

typeface refers to a family of fonts sharing the same name

Gilroy Kristopher Din Didot Chronicle

Avenir Oswald Proxima Nova Verdana Aileron

thinking with type

font a type in a particular size and weight

Gilroy Light Gilroy Extrabold AktivGrotesk-Black AktivGrotesk-Hairline AktivGrotesk-Medium Italic

thinking with type

kerning the space between characters

thinking with type

kerning the space between characters

thinking with type

leading the space between lines

thinking with type

leading

the space between lines

building blocks of design

visuals, typography, and space Make pictures and words work together in space.

White Space is not your Enemy, Kim Golombisky

Know the rules.

Break the rules if you have a reason.

PHILIPPINE

COLLEGIAN @phkule

Thank you.

SENTX 2019: Contextualizing Science Journalism in the Philippines 07 September • College of Science Auditorium, UP Diliman

Jiru Nikko M. Rada Technical Officer National Anti-Poverty Commission