DOCSLIB.ORG

Hierarchy Focal Point Eye Flow White Space Simplicity

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Hierarchy Focal Point Eye Flow White Space Simplicity The purpose of good design in a publication is • Use direction and placement to encourage eye to communicate your message in the fl ow. best possible manner.P Therefore, content determines • Graphics, bullets, and rules help lead the eye. your layout and design choices. What elements encourage eyefl ow? Essential elements of good design include: A strong focal point, simplicity, graphic elements that • Hierarchy • Focal Point move your eye along, size relationships, and visually • Eye Flow • White Space interesting white space. Simplicity Balance • • What design elements impair eyefl ow? Consistency Unity • • Clutter (lack of white space), too many focal points, Appropriateness Alignment • • too much text/too many graphics the same size, and Proximity Repetition • • similar spacing between all elements. • Contrast • Typography WHITE SPACE HIERARCHY White (or negative) space is a design element too! To • Be understandable—it’s okay to be obvious! see white space as an element, try squinting at your • The tool you use to prioritize your content. document. You’ll see shapes, not details. Use white • Helps to enhance the meaning of your message. space to accent your focal point, add to the logical • Guides your reader to the messages you are grouping of the written content, and add to the overall sending in a organized fashion. artistic effect. Too little white space makes for a crowded, unappealing page. Too much white space FOCAL POINT overwhelms the intended focal point and breaks apart Every design needs a focal point. Make sure the the relationships between design elements. element you use not only has strong visual interest but is appropriate for your material. Photos or graphics are Examples for creating good white space: visually appealing, but the use of dynamic fonts and letters can work equally well. A focal point: • Left aligned type: the right ragged edge invites white space into the page. Should attract and draw your reader in. • • Space between paragraphs (instead of indents in • Is the element with the strongest visual interest. some cases). Is the element that you build your layout around. • • “Breathing room” between design elements. Appears on a page only once. • • Flow: white space that fl ows into/around the • Can be a photo, logo, graphic, or letter(s). design rather than being trapped. • Is emphasized by size, color, contrast, placement, isolation, and/or movement. SIMPLICITY . Want a clean professional look? Then remember the EYE FLOW importance of a KISS (Keep It Simple Silly!) So This is how you visually guide the reader through the seemingly easy—yet so diffi cult to achieve! Keeping hierarchy of your document. Start with the focal point your design simple and uncluttered let’s your content and then direct them where to go and what to read, come shining through. If an element does not help the using size and placement of elements. content or the reader, remove it. • The focal point attracts viewers—eye fl ow leads them. BALANCE • Use eye fl ow to guide viewers through your How do you feel when you see a crooked picture on content. the wall? Remember, a lack of balance can irritate and impair communication. Page 2 How do you achieve balance? Here are two ways: elements. Patiently examine the design—sometimes • Create two forces of equal strength that pull in only small improvements are necessary to bring it all opposite directions. together. • Use multiple forces pulling in different directions so their strengths offset one another. APPROPRIATENESS Your design should be appropriate for your: Audience: Who’s reading this stuff anyway? Consider The goal is not to achieve a state of age, income, education, culture, etc. rest, but a state of equal tension. Topic: What are you talking about—what are you trying to say? GOALGOAL Purpose: What is the design intended to do: sell a There are two different ways of handling balance: product, convey information, entertain? symmetry and asymmetry. Symmetry is achieved Format: Paper size and type, budget, printing process, by repeating shapes, conveying a quiet sense of amount of copy, graphics, etc. order, stability and tradition. To avoid static, boring symmetrical designs introduce contrast through value, Evaluate your design for appropriateness on a frequent texture, and shape. Asymmetry gives you a greater basis—don’t leave it for the end. sense of movement and change. Stay on the verge of imbalance for a thrilling, visually exciting design. ALIGNMENT Proper alignment refers to defi ning invisible visual CONSISTENCY lines and aligning design elements along them The key to a unifi ed and understandable design (horizontally and vertically). You don’t want to scatter is consistency. Apply consistency to your layout, elements arbitrarily all over the page or you lose the text, paragraph formatting, icons, lines, rules, etc. visual connection of your elements. Each page should look like it belongs to the entire document. Choose one alignment (left, right or center) and use that throughout. Left or right creates a strong edge and What elements create inconsistency? more interesting white (negative) space. Justifi ed text Too many colors, too many graphics, inconsistent is most preferred for columns of text. Novices tend to placement of important elements, inconsistent text use center alignments (which can be boring). styles, colors, and spacing. Follow these general rules for good alignment: What elements create consistency? • Line up items along a strong edge on the page. Page layout, navigation scheme and location, color, • Choose one alignment and use it on the entire heading and text size, fonts, paragraph space, and document (don’t mix). repetition of design elements (lines, rules, dingbats). • Remember vertical alignment too. VISUAL UNITY / GESTALT PROXIMITY Without unity, your design is distracting and chaotic. Proximity is necessary to establish logical relationships With unity, your design will look and feel complete. between design elements and communicating those Ask yourself: “Does my design come together as a relationships visually. Group related items and create whole?” visual separation between unrelated items. Unity rides on the coattails of consistency. Check Proximity is essential for organizing information and your text formatting and spacing between elements. reducing clutter. The organization and content of your Ask yourself if you can strengthen or add repetitive page should be instantly obvious to the reader. Design Principles Page 3 between lines) and tracking (space between REPETITION letters). By repeating certain visual elements of the design • Use effective contrast through size, weight, form, throughout your piece you create consistency, improve structure, color, texture, and/or direction. organization, and strengthen the unity. Repeat type • Make sure your type is legible (easy to distinguish styles, color, shape, texture, spatial relationships, line individual letters). thickness, sizes, etc. But don’t overdo it! Too much of • Make sure your type has good readability (easy anything becomes obnoxious. for the reader to scan over paragraphs of type). Guidelines for good readability: What elements enhance repetition? Color, graphics, icons, background, typefaces, type - Avoid all caps (never use all caps with script). size, placement, and image treatment. - Use a reasonable point size. - Don’t use a line length too short or too long. CONTRAST - Create even word spacing. Contrast is the key to a dynamic design. It creates - Create even letter spacing. visual interest and enhances the organization and - Think about your background (including type hierarchy of your content. Contrast involves making of paper). two or more elements very different (e.g. heading and - Provide ample leading (line spacing). text). Maximize the contrast—don’t be a wimp! - Select the most readable type alignment (justifi ed and fl ush left). At the same time, use contrast selectively—to enhance - Choose typefaces carefully. the meaning of the content, not just to be “cool.” LASTLY, proofread, proofread, proofread, and TYPOGRAPHY proofread again! Get someone else to proofread! Sleep What is typography? The science and art of on it and proofread again in the morning! communicating through type. Science because there are rules about how to format and handle type to FINALLY, afer you get all the rules down, remember enhance readability. Art because type is a powerful the most important graphic design rule of all: communicator of mood and meaning. Every font has it’s own unique personality! Sometimes, it’s okay to … Some general typographical rules to follow: • Use proper punctuation (one space after periods, the right dashes, smart quotes, etc.). • Avoid widows (words with less than seven r a the characters in the last line of a paragraph) and e k orphans (a sentence or line by itself at the bottom B or top of a column). • When mixing type, never use more than three fonts on one document (two is better). • For good contrast use a different font for headlines ules and body type, but don’t use similar typefaces— best to use a sans serif font for your headline and a serif font for the body copy. • Use proper spacing—watch your leading (space R Design Principles Basic Ideas for Successful Advertisement Design Good design is communicative design. What’s What should a good advertisement do? the point if the ad’s message doesn’t come across • Deliver the main message simply and directly succinctly? Good advertising not only provokes (deliver and emphasize). a favorable response—it makes it easy for the • Make it easy to respond (display company name, consumer to respond. Often a good ad is memorable address and logo clearly). long afterwards. • Emphasize the call to action (stimulate reader to make contact by using a catch phrase and The Purpose of an Ad making the phone number easy to read). • Attract attention • Have a design that is appropriate to its content • Communicate a message (vibrant, calm, etc.). • Persuade an audience (in order to generate a • Be easily distinguishable from all the other response) ads—particularly the competitors.
Load more

Recommended publications
  • Using Typography and Iconography to Express Emotion
    Using typography and iconography to express emotion (or meaning) in motion graphics as a learning tool for ESL (English as a second language) in a multi-device platform. A thesis submitted to the School of Visual Communication Design, College of Communication and Information of Kent State University in partial fulfillment of the requirements for the degree of Master of Fine Arts by Anthony J. Ezzo May, 2016 Thesis written by Anthony J. Ezzo B.F.A. University of Akron, 1998 M.F.A., Kent State University, 2016 Approved by Gretchen Caldwell Rinnert, M.G.D., Advisor Jaime Kennedy, M.F.A., Director, School of Visual Communication Design Amy Reynolds, Ph.D., Dean, College of Communication and Information TABLE OF CONTENTS TABLE OF CONTENTS .................................................................................... iii LIST OF FIGURES ............................................................................................ v LIST OF TABLES .............................................................................................. v ACKNOWLEDGEMENTS ................................................................................ vi CHAPTER 1. THE PROBLEM .......................................................................................... 1 Thesis ..................................................................................................... 6 2. BACKGROUND AND CONTEXT ............................................................. 7 Understanding The Ell Process ..............................................................
    [Show full text]
  • Relief Printing Letterpress Machines
    DRAFT SYLLABUS FOR PRESS WORK - I Name of the Course: Diploma in Printing Technology Course Code: Semester: Third Duration: 16 Weeks Maximum Marks: 100 Teaching Scheme Examination Scheme Theory: 3 hrs/week Internal Examination: 20 Tutorial: 1 hr/week Assignment & Attendance: 10 Practical: 6 hrs/week End Semester Exam:70 Credit: 3 Aim: Getting the output through a printing machine is the most important operation for completing the print production. This subject known as Presswork - I is one of the key subject to make a clear and sound knowledge in some of the major print production systems and supplies. This will enable the students to make judgement about the aspect of printing, particularly the selection of a particular process to choose for a specific print production. Objective: The students will be able to (i) understand the basic and clear classification of all kinds of printing processes; (ii) understand the details divisions and subdivisions of letterpress printing machines, their applications and uses, characteristics and identifications of their products- merits and demerits of various letterpress machines; (iii) understand the principal mechanism of various letterpress and sheet-fed machines, their constructional differences in the printing unit and operational features; (iv) understanding the various feeding and delivery mechanism in printing machines; (v) appreciate the relational aspects of various materials used in presswork. Pre -Requisite: Elementary knowledge of Basic Printing & Production Contents: Group-A Hrs/unit Marks Unit 1 Relief Printing 10 10 1.1 Classifications of various relief printing machines, their applications and uses, characteristics of the products. 1.2 Details of divisions and subdivisions of letterpress printing machines, their applications and uses, characteristics and identifications of their products- merits and demerits of various letterpress machines General unit wise division of a printing machine.
    [Show full text]
  • 3D Graphics Fundamentals
    11BegGameDev.qxd 9/20/04 5:20 PM Page 211 chapter 11 3D Graphics Fundamentals his chapter covers the basics of 3D graphics. You will learn the basic concepts so that you are at least aware of the key points in 3D programming. However, this Tchapter will not go into great detail on 3D mathematics or graphics theory, which are far too advanced for this book. What you will learn instead is the practical implemen- tation of 3D in order to write simple 3D games. You will get just exactly what you need to 211 11BegGameDev.qxd 9/20/04 5:20 PM Page 212 212 Chapter 11 ■ 3D Graphics Fundamentals write a simple 3D game without getting bogged down in theory. If you have questions about how matrix math works and about how 3D rendering is done, you might want to use this chapter as a starting point and then go on and read a book such as Beginning Direct3D Game Programming,by Wolfgang Engel (Course PTR). The goal of this chapter is to provide you with a set of reusable functions that can be used to develop 3D games. Here is what you will learn in this chapter: ■ How to create and use vertices. ■ How to manipulate polygons. ■ How to create a textured polygon. ■ How to create a cube and rotate it. Introduction to 3D Programming It’s a foregone conclusion today that everyone has a 3D accelerated video card. Even the low-end budget video cards are equipped with a 3D graphics processing unit (GPU) that would be impressive were it not for all the competition in this market pushing out more and more polygons and new features every year.
    [Show full text]
  • </Break>The Role of Format and Design in Readability
    Pleasing the reader by pleasing the eye—Part 1 The role of format and design in readability Gabriele Berghammer1, Anders Holmqvist2 Correspondence to: 1the text clinic, Vienna, Austria 2Holmqvist AD & Bild, Lund, Sweden Gabriele Berghammer [email protected]; www.the-text-clinic.com Abstract Whoever writes wants to be read. Yet, even if we punctuation marks, and visuals are arranged on a succeed in creating an informative, logically struc- piece of paper can be as much a part of the story tured, and adequately worded text tailored to our as the content itself. They can make or break a target audience, i.e., text we consider to have an message. adequate level of readability, our documents may At least that ’s what we thought. Seeing, however, still go unread—or read with antipathy. Next to lin- that many of today’s publications, particularly in the guistic factors, therefore, there is a wide range of areas of technical, informational, and instructional other aspects determining how well we understand prose, fall short of what we have come to perceive a text, including layout, typography, or cultural ade- as essential aspects of our crafts, we started to ask quacy. Documents people can use effectively and ourselves whether, in these fast-paced times of with ease have language, graphics, and design budget constraints, format and design had become combine into a harmonious whole. Good design an obsolete luxury reserved for belletristic literature helps arouse interest and singles a text out from or art. Not long ago, one of the authors (GB) read a many others that vie for our attention.
    [Show full text]
  • Introduction to Printing Technologies
    Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping Introduction to Printing Technologies Study Material for Students : Introduction to Printing Technologies CAREER OPPORTUNITIES IN MEDIA WORLD Mass communication and Journalism is institutionalized and source specific. Itfunctions through well-organized professionals and has an ever increasing interlace. Mass media has a global availability and it has converted the whole world in to a global village. A qualified journalism professional can take up a job of educating, entertaining, informing, persuading, interpreting, and guiding. Working in print media offers the opportunities to be a news reporter, news presenter, an editor, a feature writer, a photojournalist, etc. Electronic media offers great opportunities of being a news reporter, news editor, newsreader, programme host, interviewer, cameraman,Edited with theproducer, trial version of Foxit Advanced PDF Editor director, etc. To remove this notice, visit: www.foxitsoftware.com/shopping Other titles of Mass Communication and Journalism professionals are script writer, production assistant, technical director, floor manager, lighting director, scenic director, coordinator, creative director, advertiser, media planner, media consultant, public relation officer, counselor, front office executive, event manager and others. 2 : Introduction to Printing Technologies INTRODUCTION The book introduces the students to fundamentals of printing. Today printing technology is a part of our everyday life. It is all around us. T h e history and origin of printing technology are also discussed in the book. Students of mass communication will also learn about t h e different types of printing and typography in this book. The book will also make a comparison between Traditional Printing Vs Modern Typography.
    [Show full text]
  • Flood Insurance Rate Map (FIRM) Graphics Guidance
    Guidance for Flood Risk Analysis and Mapping Flood Insurance Rate Map (FIRM) Graphics November 2019 Requirements for the Federal Emergency Management Agency (FEMA) Risk Mapping, Assessment, and Planning (Risk MAP) Program are specified separately by statute, regulation, or FEMA policy (primarily the Standards for Flood Risk Analysis and Mapping). This document provides guidance to support the requirements and recommends approaches for effective and efficient implementation. The guidance, context, and other information in this document is not required unless it is codified separately in the aforementioned statute, regulation, or policy. Alternate approaches that comply with all requirements are acceptable. For more information, please visit the FEMA Guidelines and Standards for Flood Risk Analysis and Mapping webpage (www.fema.gov/guidelines-and-standards-flood-risk-analysis-and- mapping). Copies of the Standards for Flood Risk Analysis and Mapping policy, related guidance, technical references, and other information about the guidelines and standards development process are all available here. You can also search directly by document title at www.fema.gov/library. FIRM Graphics November 2019 Guidance Document 6 Page i Document History Affected Section or Date Description Subsection This guidance has been revised to align various November descriptions and specifications to standard operating Sections 4.3 and 5.2 2019 procedures, including labeling of structures and application of floodway and special floodway notes. FIRM Graphics November
    [Show full text]
  • Background a Short Introduction to Font Characteristics
    fonts: background A short introduction to font characteristics Maarten Gelderman Hardly anyone will dispute the statement that proporion- ally spaced fonts are more beautiful and legible than mono- abstract spaced designs. In a monospaced design the letter i takes as Almost anyone who develops an interest in fonts is bound to much space as a letter m or W. Consequently, some char- be overwelmed by the bewildering variety of letterforms acters look simply too compressed, whereas around oth- available. The number of fonts available from commercial ers too much white space is found. Monospaced fonts are suppliers like Adobe, URW, LinoType and others runs into the simply not suited for body text. Only in situations where it thousands. A recent catalog issued by FontShop [Truong et al., is important that all characters are of equal width, e.g., in 1998] alone lists over 25.000 different varieties.1 And listings of computer programs, where it may be important somehow, although the differences of the individual letters are that each individual character can be discerned and where hardly noticable, each font has its own character, its own the layout of the program may depend on using mono- personality. Even the atmosphere elucided by a text set from spaced fonts, can the usage of a monospaced font be de- Adobe Garamond is noticably different from the atmosphere of the same text set from Stempel Garamond. Although fended. In most other situations, they should simply be decisions about the usage of fonts, will always remain in the avoided. realm of esthetics, some knowledge about font characteristics may nevertheless help to create some order and to find out Romans, italics and slant A second typeface character- why certain design decisions just do not work.
    [Show full text]
  • GOING in STYLE (#3): on TYPOGRAPHY, PART 2 Typography Is “The Visual Component of the Written Word.” (Matthew Butterick, Ty
    GOING IN STYLE (#3): ON TYPOGRAPHY, PART 2 Typography is “the visual component of the written word.” (Matthew Butterick, Typography for Lawyers: Essential Tools for Polished & Persuasive Documents (2nd ed. 2015) p. 20.) As discussed in the previous issue of this series, typography is a subtle but significant aspect of every brief we file, with the capacity to improve persuasiveness by making reading easier and demonstrating professionalism through attention to detail. While there are few hard rules in brief typography, there are many areas that call for practitioners’ consideration and consistency. The previous issue addressed two aspects of typography — type composition and text formatting. Here we will take up a third — page layout. PAGE LAYOUT Page layout is the way text looks on the page, including the amount of white space. The California Rules of Court impose a single page layout requirement: rule 8.204(b)(6)1 requires margins of 1.5" on left and right sides, 1" top and bottom. Other than that, brief writers have decisions to make. ● Line spacing Line spacing, the vertical distance between lines of text, must be a minimum 1.5 lines. (Rule 8.204(b)(5).) Although experts generally say something slightly less than 1.5-spaced lines is best for reading, it depends on how long the lines are. (See Ruth Anne Robbins, Painting with print: Incorporating concepts of typographic and layout design into the text of legal writing documents (2004) 2 J. Assoc. of Legal Writing Directors 108, 123–124.) In an appellate brief with 1.5" margins on an 8.5 x 11" page,1.5-spaced lines, which is what the 1 Citations to rules refer to the California Rules of Court.
    [Show full text]
  • How to Page a Document in Microsoft Word
    1 HOW TO PAGE A DOCUMENT IN MICROSOFT WORD 1– PAGING A WHOLE DOCUMENT FROM 1 TO …Z (Including the first page) 1.1 – Arabic Numbers (a) Click the “Insert” tab. (b) Go to the “Header & Footer” Section and click on “Page Number” drop down menu (c) Choose the location on the page where you want the page to appear (i.e. top page, bottom page, etc.) (d) Once you have clicked on the “box” of your preference, the pages will be inserted automatically on each page, starting from page 1 on. 1.2 – Other Formats (Romans, letters, etc) (a) Repeat steps (a) to (c) from 1.1 above (b) At the “Header & Footer” Section, click on “Page Number” drop down menu. (C) Choose… “Format Page Numbers” (d) At the top of the box, “Number format”, click the drop down menu and choose your preference (i, ii, iii; OR a, b, c, OR A, B, C,…and etc.) an click OK. (e) You can also set it to start with any of the intermediate numbers if you want at the “Page Numbering”, “Start at” option within that box. 2 – TITLE PAGE WITHOUT A PAGE NUMBER…….. Option A – …And second page being page number 2 (a) Click the “Insert” tab. (b) Go to the “Header & Footer” Section and click on “Page Number” drop down menu (c) Choose the location on the page where you want the page to appear (i.e. top page, bottom page, etc.) (d) Once you have clicked on the “box” of your preference, the pages will be inserted automatically on each page, starting from page 1 on.
    [Show full text]
  • Introduction to Scalable Vector Graphics
    Introduction to Scalable Vector Graphics Presented by developerWorks, your source for great tutorials ibm.com/developerWorks Table of Contents If you're viewing this document online, you can click any of the topics below to link directly to that section. 1. Introduction.............................................................. 2 2. What is SVG?........................................................... 4 3. Basic shapes............................................................ 10 4. Definitions and groups................................................. 16 5. Painting .................................................................. 21 6. Coordinates and transformations.................................... 32 7. Paths ..................................................................... 38 8. Text ....................................................................... 46 9. Animation and interactivity............................................ 51 10. Summary............................................................... 55 Introduction to Scalable Vector Graphics Page 1 of 56 ibm.com/developerWorks Presented by developerWorks, your source for great tutorials Section 1. Introduction Should I take this tutorial? This tutorial assists developers who want to understand the concepts behind Scalable Vector Graphics (SVG) in order to build them, either as static documents, or as dynamically generated content. XML experience is not required, but a familiarity with at least one tagging language (such as HTML) will be useful. For basic XML
    [Show full text]
  • II-17 Page Layouts.Pdf
    Chapter II-17 II-17Page Layouts Overview.......................................................................................................................................................... 389 Page Layout Windows ................................................................................................................................... 390 Page Layout Names and Titles .............................................................................................................. 390 Hiding and Showing a Layout............................................................................................................... 390 Killing and Recreating a Layout............................................................................................................ 390 Page Layout Zooming............................................................................................................................. 390 Page Layout Background Color............................................................................................................. 390 Page Layout Pages .......................................................................................................................................... 391 The Page Sorter ........................................................................................................................................ 391 Page Layout Page Sizes........................................................................................................................... 391 Compatibility with
    [Show full text]
  • Multimedia Foundations Glossary of Terms Chapter 5 – Page Layout
    Multimedia Foundations Glossary of Terms Chapter 5 – Page Layout Body Copy The main text of a published document or advertisement. Border A visible outline or stroke denoting the outer frame of a design element such as a table cell, text box, or graphic. A border’s width and style can vary according to the aesthetic needs or preferences of the designer. Box Model Or CSS Box Model. A layout and design convention used in CSS for wrapping HTML text and images in a definable box consisting of: margins, borders, and padding. Cell The editable region of a data table or grid defined by the intersection of a row and column. Chunking The visual consolidation of related sentences or ideas into small blocks of information that can be quickly and easily digested (e.g. paragraphs, lists, callouts, text boxes, etc.). Column The vertically aligned cells in a data table or grid. Dynamic Page A multimedia page with content that changes (often) over time or with each individual viewing experience. F-Layout A layout design where the reader’s gaze is directed through the page in a pattern that resembles the letter F. Fixed Layout A multimedia layout where the width of the page (or wrapper) is constrained to a predetermined width and/or height. Floating Graphic The layout of a graphic on a page whereby the adjacent text wraps around it to the left and/or right. Fluid Layout Or liquid layout. A multimedia layout where the width of the page (or wrapper) is set to a percentage of the current user’s browser window size.
    [Show full text]