Visual Communication: Principles and Typography

• Visual Communication effectively represents and delivers information with graphic elements, symbols and images
• It is a main type of communication alongside verbal and non-verbal methods
• It is used in news, information, and entertainment, including signs, designs, films, games, and typography

Basic Principles

• Visual communication is very important because how something looks can be more influential than what is said.
• Aesthetics are the "look and feel" of the communication
• Tone is the "voice"
• Design considerations should include communication goals, target audience, and desired audience outcome

Aesthetics and Tone

• Posters, flyers, and websites promote handwashing and COVID prevention to different audiences
• These include general public, teens, young adults, and younger children

Typography

• Type is a set of letterforms like alphabets, numbers, and symbol
  • These carry the meaning of the word and are part of the aesthetic and tone
• Typography is the arrangement of letterforms on a page/screen
  • This includes letter size, arrangement, paragraphs, and line spacing
• Type and typography should make communication understandable and effective
  • Achieved by the choices of elements like typeface and front size
• Typeface and font are not the same
• A typeface is made up of fonts and refers to a family of related fonts
  • Examples include Arial, Times New Roman, or Verdana
• Fonts refer to the weight and style of what constitutes a typeface
  • Examples include Arial Narrow, Arial Rounded, Arial Bold, Arial Black, Arial Italic

SERIF

• Connotes formality and readability in large amounts of texts
• Typically for the body text of books, newspapers, magazines, and research publications
• Gives a classic/elegant look for titles/headings
• Examples include Times New Roman, Garamond, and Baskerville

SANS SERIF

• Brings a clean or minimalist look to the text
• Used for clear and direct meaning of text such as road signage, building directory or nutrition facts in food packages
• Gives a modern look and is primarily used in webpage design
• Examples: Arial, Helvetica, Tahoma, Verdana, Calibri

SLAB SERIF

• Carries a solid/heavy look
• Can be used for large advertising signs on billboards
• Examples: Rockwell, Playbill

Script

• Draws attention to itself because of its brush-like strokes
• Should be used sparingly and not in large body text
• Commonly used in wedding invitations or other formal events
• Examples: Edwardian, Vladimir, Kunstler

Decorative

• Caters to many emotions like celebration, fear, and horror, or themes like cowboys, circus, holidays, summer, and kiddie
• Examples: Chiller, Jokerman, and Curlz MI

Typography Tips

• Combine a serif typeface with a sans serif typeface or vice versa
• Use two or three typefaces only
• Do not mix typefaces with different moods otherwise the audience is confused
• Keep it simple, using different weights of fonts or different fonts in the same family
• Minimalism is key
• Contrast is still important, use hierarchy
• Respect the font's integrity, always resize proportionally
• Practice makes perfect, typography is beautiful
• There are thousands of free fonts, explore, an find the perfect one
• Avoid Comic Sans, Lucida Calligraphy, Brush Script, and Papyrus because they are already overused
• It can make layouts look "baduy"

Basic Principles of Visual Communication - GRID

• Invisible lines that divide your visual communication into sections
• Each section contains a part of the total information viewers need
• The grid organizes information so the important data is seen first

Visual Hierarchy

• Elements are arranged to show their order of importance so users understand info easily
• Designers influence viewers by arranging elements on a page or on screen

Basic Techniques of Visual Hierarchy

• Size: Bigger is seen first and is more important
  • Headlines, titles, and important phrases are bigger and bolder
  • Less important information like text and instructions are smaller
• Position: Center and above are usually positions of importance
  • Below and to-the-side is less important
  • The right side of the page/screen gets more attention because people read in a "Z" formation, from top to bottom right corner
• Emphasis: Importance or value given to a part of the text-based content using boxes, shapes, or frames
  • To emphasize more important elements against less:
    • Make the text bold
    • Italicize
    • Have a heavier weight
    • Darken or lighten
• Enlarge text
• White space (aka "negative space"): Empty spaces in the layout that allow the eyes to “rest."
  • It allows pieces of information to stand out

COLOR

• Color contributes a large part of a visual communication
• Can be used to differentiate elements or add certain meanings/emotions
• Can be related to something about the viewer's culture

Color Psychology

• Colors can affect feelings, emotions, and moods
• Colors can influence people on the products they buy
• Selecting a color palette can make a large difference in being recognized

Overview of Visual Communication with graphic elements, symbols and images. Discusses basic principles such as aesthetics, tone and design considerations. Explains typography which includes alphabets, numbers and symbols.