DESIGNING THE PAGE FOUNDATIONS OF DIGITAL DESIGN. Layout composition, the grid and typography. Prof. Eva Machauf

Transcription

1 DESIGNING THE PAGE Layout composition, the grid and typography FOUNDATIONS OF DIGITAL DESIGN Prof. Eva Machauf

2 THE GRID The grid is the foundation of all design. Creating and working with grids is a skill and an art that is fundamental to the design process. Some layouts feel right while others feel awkward. Grids create a structure that allows the designer to effectively use the principles of design. They establish rhythm and relationship on the page.

3 THE GRID An effective grid will:! Maintain hierarchy of elements! Create order and interest! Vary size, shape, position and placement

4 THE GRID 2 columns 3 columns! Can be simple or complex! Is consistent across pages, although a cover or front page can differ.! Affects both vertical and horizontal divisions! Integrates white space! May be used together with the Rule of Thirds and the Golden Ratio 4 columns The grid is not always clearly evident in the final work. Look at designs that you admire, see if you can find the grid.

5 THE GRID Josef Müller-Brockmann s Grid Systems in Graphic Design, 1968 The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice. Josef Müller-Brockmann

6 The Grid in Print To say a grid is limiting is to say that language is limiting, or typography is limiting. Ellen Lupton The Grid on the Web

7 Layout and Proportion: The Golden Section What is it?! The golden ratio describes a ratio, 1 to 1.618, which is thought to be especially aesthetically pleasing.! It is usually shown as a single large rectangle formed by a square and another rectangle. You can repeat keep dividing each rectangle formed infinitely and perfectly within each section.! Mathematical equivalent: in the Fibonacci Sequence, each subsequent number is the sum of the previous two: 1, 1, 2, 3, 5, 8, 13, 21, 55, 89,144, etc.

8 Layout and Proportion: The Golden Section The golden section is a ratio which is useful in designing the page layout. It s use creates natural looking, organic compositions that are pleasing to the eye. It is also known as the divine proportion. In nature, in art, in architecture and design, the use of this mathematical proportion has been around for a long time.

9 The Golden Ratio in Page Design This ratio can be used to divide the page.

10 Layout: The Rule of Thirds! This rule of composition can be applied to every form of design, from drawing to photography to graphic design.! It s based on the principle that we favor balance and movement in design and in art. What is it?! If you divide your page into 9 equal parts, a grid of three columns and three rows, placing important compositional elements on the intersections or power points creates a sense of balance and movement and results in a more interesting, active and cohesive composition.

11 Layout: The Rule of Thirds A better sense of forward motion A better sense of balance A better sense of space

12 Other Composition Techniques The grid is a powerful tool when combined with design principles and methods: unity and variety, hierarchy and emphasis, balance and flow as created through contrast, repetition, alignment, and proximity. Also useful are the concepts of figure/ground, closure. Alexey Brodovich Mikey Hekkenberg David Carson Rachel LaDine

13 The Parts of the Magazine Spread 1. Title 2. Attribution (Writer s name) 3. Body text 4. Image(s) 5. Captions 6. Pull quotes 7. Columns 8. Gutter 9. Page number 10. Running header/footer

14 Body text refers to the majority of text in a composition. Its job is to be steady so that other things like wayfinding signals and eye-catching headings can stand out. Body text is most successful when it is unobtrusive, yet its tone can inspire the expressive qualities of other elements and the composition as a whole. Tim Brown, typekit.com

15 Readability/Legibility Readability is how easy it is to read words, phrases, blocks of copy such as a book, a web page or an article. Legibility is a measure of how easy it is to distinguish one letter from another in a particular typeface.

16 Review: Leading, Kerning, Tracking, Baseline Shift Baseline Shift allows characters to be raised or lowered relative to the baseline. Tracking is often used to get a better rag and to remove excess hyphenation, widows (a word or line that is forced to start its own column or page) and orphans (a single word at the bottom of a paragraph)

17 Separating Paragraphs

18 Creating Hierarchy To create hierarchy and variety, vary the weight, size and style.

19 Combining Type Styles Use two, no more than than three typefaces in a document. Avoid choosing typefaces from the same categories, like two serifs, sans serifs, scripts or slabs. Combine a serif and a sans serif for contrast. Don t mix moods: Get two fonts in the same general mood, or get one with some personality and another with a neutral personality. Combine typefaces from different categories that have similar proportions. with similar x-heights and glyph widths. For example, look at the letter O in upper and lower case. Round letter O s and taller oval O s don t play well together. Assign distinct roles to each font (headline, subhead, caption, body text). Use a significant difference in point size and/or weight to create more contrast between typefaces.

20