0 évaluation0% ont trouvé ce document utile (0 vote)
18 vues22 pages
The document discusses four basic principles of layout design: proximity, repetition, alignment, and contrast. It provides examples of how each principle should be applied, including grouping related items closely together, removing unnecessary repetition, ensuring all elements are visually aligned, and using sufficient contrast between elements. The document also covers design psychology principles for manipulating a viewer's eye movement across a layout, such as using the rule of thirds and varying font sizes and styles.
The document discusses four basic principles of layout design: proximity, repetition, alignment, and contrast. It provides examples of how each principle should be applied, including grouping related items closely together, removing unnecessary repetition, ensuring all elements are visually aligned, and using sufficient contrast between elements. The document also covers design psychology principles for manipulating a viewer's eye movement across a layout, such as using the rule of thirds and varying font sizes and styles.
The document discusses four basic principles of layout design: proximity, repetition, alignment, and contrast. It provides examples of how each principle should be applied, including grouping related items closely together, removing unnecessary repetition, ensuring all elements are visually aligned, and using sufficient contrast between elements. The document also covers design psychology principles for manipulating a viewer's eye movement across a layout, such as using the rule of thirds and varying font sizes and styles.
T5 - DESIGN PSYCHOLOGY T4 - LAYOUT: BASIC PRINCIPLES Layout: Basic Principles There are four basic principles: Proximity Grouping or Separation Repetition Removing repetition, retaining information Alignment Visual flow and connection Contrast Dont let information hide 3 5524YCOMA DIGITAL MEDIA PRODUCTION Proximity Items relating to each other should be grouped close together.
When several items are in close proximity to each other, they become one visual unit rather than several separate units.
This helps organize information and reduces clutter.
5524YCOMA DIGITAL MEDIA PRODUCTION 4 Technology and Environment Technology and Environment Proximity Items that are not related to each other should not be in close proximity. The closeness or lack of closeness indicates the relationship. Elements that are intellectually connected should be visually connected.
5524YCOMA DIGITAL MEDIA PRODUCTION 5 Repetition If we have a table of data, then repeated data should become headings 5524YCOMA DIGITAL MEDIA PRODUCTION 6 Faculty Staff Name Room TAE Andy BS717 EDU Mike E123 TAE Hulya BS719 Faculty Staff Name Room TAE Andy BS717 Hulya BS719 EDU Mike E123 Alignment Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page. This creates a clean, sophisticated look. 5524YCOMA DIGITAL MEDIA PRODUCTION 7 Alignment Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page. This creates a clean, sophisticated look. 5524YCOMA DIGITAL MEDIA PRODUCTION 8 Alignment Each page or component can be split into several regions
Text or graphic objects can be aligned based upon a single or dual combinations of these regions 5524YCOMA DIGITAL MEDIA PRODUCTION 9 Top Centre L e f t
Bottom R i g h t
Top Left
Top Right
Top Centre Centre Alignment We shouldnt use centre aligned text for paragraphs of text. Viewers find it difficult to read as there is no anchor point at the beginning or end of the lines. 5524YCOMA DIGITAL MEDIA PRODUCTION 10 Alignment We shouldnt use centre aligned text for paragraphs of text. Viewers find it difficult to read as there is no anchor point at the beginning or end of the lines.
5524YCOMA DIGITAL MEDIA PRODUCTION 11 Alignment We shouldnt use centre aligned text for paragraphs of text. Viewers find it difficult to read as there is no anchor point at the beginning or end of the lines.
5524YCOMA DIGITAL MEDIA PRODUCTION 12 Contrast Avoid elements on the page that are merely similar. If the elements (type, color, size, line thickness, shape, space, etc.) are not the same, then make them very different. 5524YCOMA DIGITAL MEDIA PRODUCTION 13 Contrast is often the most important visual element on the page. T5 - DESIGN PSYCHOLOGY Design Psychology Essentially, when developing something we wish to publish we need to coerce the viewer. We want to encourage their eyes to follow our layout so that they are: Not distracted by the least important elements Are forced to focus upon the most important elements 5524YCOMA DIGITAL MEDIA PRODUCTION 15 Design Psychology Leonardo Da Vinci (commonly thought of as a true genius) took the idea of leading the viewers eye to an extreme when designing some of his paintings We can use it to: http://jakegarn.com/the-rule-of-thirds/ http://www.goldennumber.net/logo-design/ 5524YCOMA DIGITAL MEDIA PRODUCTION 16 Design Psychology ALL CAPS ARE HARD FOR PEOPLE TO READ B/C THERES NO SHAPE TO THEM
Mixed-case sentences have redundant shape coding that make them easier to read.
5524YCOMA DIGITAL MEDIA PRODUCTION 17 Design Psychology ALL CAPS TAKES UP MORE SPACE, FORCING YOU TO USE A SMALLER FONT TO PUT THE SAME AMOUNT OF INFORMATION (If you dont believe me, this sentence has just the same number of letters as the previous one.)
5524YCOMA DIGITAL MEDIA PRODUCTION 18 Design Psychology 5524YCOMA DIGITAL MEDIA PRODUCTION 19 Better Contrast, Larger Title Mixed case TUTORIAL In-Class Tutorial Sketch the layout of a business card for the manager of a construction firm. Include: A square area for the logo A rectangular area for the name of the company A rectangular area for the name and contact details for the manager
Highlight font, colour, etc for each component including the card itself 5524YCOMA DIGITAL MEDIA PRODUCTION 21 THANK YOU! 22