Visual Communication Principles - Typography Tips | PDF

The practice of representing and delivering information effectively using graphic elements, symbols, Visual and images. One of the main types of Communicati communication such as verbal on and non-verbal communication....

The practice of representing and delivering information effectively using graphic elements, symbols, Visual and images. One of the main types of Communicati communication such as verbal on and non-verbal communication. Used in news, information, and entertainment; these includes signs, graphic designs, films, games, typography, and countless others. 1 Basic Principles of Visual Communication Our world is very visually oriented, and how something looks can be much more important or influential than what it is actually saying. public service announcement by a local sardines company is promoting health protocols and safety by telling us to maintain 2 physical distancing.  Basic Principles of Visual Communication Aesthetics and Tone Aesthetics are the “look and feel” and the tone is the “voice” of a visual communication. As you design, ask yourself: What are my communication goals? Who am I speaking to? What is the desired outcome from the audience interacting with the content? From there you should make the choices that will best communicate your message. 3  Basic Principles of Visual Communication Aesthetics and Tone Posters are produced by the same organization for the same purpose: to promote handwashing for hygiene and COVID prevention. (A) is designed for the general public, usually an adult audience, (B) was designed for teens and young adults, and (C) was designed for younger children. 4 Basic Principles of Visual Communication ENHANCEMENT ACTIVITY Aesthetic and Tone 1. Go on the internet and go to Google Images. 2. Search for posters, flyers, websites, and announcements about different Philippine festivals 3. Compare and contrast their aesthetics and tones. What styles do they have in common, which ones are different? Why? 5  Basic Principles of Visual Communication Type & Typography Type - a set of letterforms (e.g. the alphabet, numbers, symbols); it carries the meaning of the word you want to use, and it also is part of the aesthetic and tone of the work Typography - arrangement of those letterforms on a page or screen; this includes the size of letters, arrangement, paragraphs, and even line spacing. Type and Typography both work to make a communication 1) understandable, and 2) effective, by the choices of elements such as typeface and font size. 6  Basic Principles of Visual Communication Type & Typography “Typeface” and “font” may be synonymous, but they are not the same! A typeface is made up of fonts and is the name of a family of related fonts (such as Arial, Times New Roman, or Verdana). Fonts refer to the weight and style that constitute a typeface (such as Arial Narrow, Arial Rounded, Arial Bold, Arial Black, Arial Italic). 7 TYPES OF TYPEFACES Source: p. 120, MIL TG by CHED TYPES OF TYPEFACES Source: p. 120, MIL TG by CHED TYPES OF TYPEFACES Source: p. 120, MIL TG by CHED TYPES OF TYPEFACES Source: p. 120, MIL TG by CHED TYPES OF TYPEFACES Source: p. 120, MIL TG by CHED  Typography tips that work! 1. Combine a serif typeface with a sans serif typeface, or other way around. 2. Use two typefaces only, or three if you must. Do not use four or five fonts. 3. Do not mix typefaces with different moods, otherwise it will confuse your audience. 4. Keep it simple, try to use different weights of fonts first or different fonts in the same family. Minimalism is key. 5. Contrast is still important. We will learn hierarchy next, use it to your advantage. 19  Typography tips that work! 6. Respect the font’s integrity, do not distort it. Always resize proportionally. 7. Practice makes perfect. Typography is beautiful. Use it creatively. 8. There are thousands of free fonts on the internet, explore and find the perfect font for your communication. 9. Lastly, avoid Comic Sans, Lucida Calligraphy, Brush Script, and Papyrus. They are already overused and make your layouts look “baduy”. 20  Basic Principles of Visual Communication GRID  invisible lines that divide your visual communication into sections. Each section contains a part of the total information you want to give your audiences.  You can use the grid to organize information so that the most important is seen first, followed by the next important, and lastly by the least important. Visual Hierarchy - arranging elements to show their order of importance so users can understand information easily. 21By arranging elements on a page or screen, designers influence  Basic techniques in visual hierarchy include: Size – bigger is seen first and usually “more important”; headlines, titles, and important phrases are usually bigger and bolder. Less important or support information such as text and instructions, are usually smaller. 22  Basic techniques in visual hierarchy include: Position – Center and Above are usually positions of importance, Below and To- The-Side are less important. The right side of the page or screen also gets more attention because most people read in a “Z” formation, starting at the top, and going to the bottom right corner. 23  Basic techniques in visual hierarchy include: Emphasis – importance or value given to a part of the text-based content using boxes, shapes, or frames allows you to emphasize more important elements against less make the text bold important. Italicized have a heavier weight darkened or lightened enlarged 24 EMPHASIS Source: https://tympanus.net/codrops/2011/10/08/25-examples-of-emphasis-applied-in-web-desig n/ EMPHASIS Source: https://twitter.com/philredcross/status/706041623839244288  Basic techniques in visual hierarchy include: White Space also known as “negative space”, these are empty spaces in the layout that allow the eyes to “rest”. Having white spaces also allows pieces of information to stand out against other elements. The diagram below shows how having some negative space allows certain 27 elements to become clearer WHITE SPACE Source: https://twitter.com/philredcross/status/706041623839244288 29 30  Basic Principles of Visual Communication COLOR  contributes a large part of the overall tone of a visual communication.  can be used to differentiate elements from one another, it can give certain meanings or emotions, or can also be related to something about the viewer’s culture. 31 Source: http://www. dailyinfogra phic.com/lo gos-a-look- at-the- meaning-in- colors- infographic  Basic Principles of Visual Communication Color Psychology  Color can affect feelings, emotions, and moods of your audience.  Color can also influence people on the products they buy.  Choosing the right color palette for your design can make a big difference in being recognized by your audience. 34  20XX THANK YOU! Lorem Ipsum Dolor