Visual Design 101 PDF
Document Details
Uploaded by CredibleCottonPlant4358
St. Cecilia's College - Cebu, Inc.
Tags
Summary
This document provides an overview of visual design principles and elements, including color theory, typography, layout, and visual communication techniques. It includes examples and diagrams to illustrate these concepts. The objectives focus on identifying visual design elements and creating a mock poster.
Full Transcript
VISUAL DEsign 101 Empowerment Technologies 12 OBJECTIVES Identify the different elements of visual design. Create a mock poster using the elements of visual design OBJECTIVES RIGHT NOW THIS IS MY IDEA QUESTION AFTER THE SESSION Why shou...
VISUAL DEsign 101 Empowerment Technologies 12 OBJECTIVES Identify the different elements of visual design. Create a mock poster using the elements of visual design OBJECTIVES RIGHT NOW THIS IS MY IDEA QUESTION AFTER THE SESSION Why should we understand visual design? What is Graphic design is defined as “the art and practice of planning and Graphic projecting ideas and experiences with visual and textual content.” In Design? other terms, graphic design communicates certain ideas or messages in a visual way. These visuals can be as simple as a business logo, or as complex as page layouts on a website. (American Institute of Graphic Arts) Observe these images What is Visual design aims to improve design’s/product’s aesthetic appeal and usability with suitable images, typography, a Visual space, layout and color. Visual design is about more than aesthetics. Designers place elements carefully to create interfaces that optimize user experience and drive Design? conversion. (Interaction Design Foundation) "A visual designer goes beyond with a holistic aesthetic aiming to work consistently across multiple touchpoints, creating entire visual languages for a brand or product." (Gordon Reid) Infographic The term “infographic” is a short term for information graphic, which refers to an image that combines information, storytelling, and perceptions that help the cause of an individual or an institution to communicate a message to viewers. Images are very effective in communicating messages because they are easily understood B A S I C ELEMENTS Create Emphasis Lines can form shapes that can catch the attention of a viewer. Direct the Eye They can be sharp, be made up of broken lines and fine or thick lines, and can create different impressions to viewers. Sense of Movement What can you observe? For example, red, orange, One of the most powerful and influential elements. and yellow are strong or Using the right combination of colors can catch the warm colors that can attention of a passerby or even glancing viewers. easily attract attention. Combining colors and having a good command Blue, green, violet, and on color mixtures and indigo are cool or soft combinations can catch the colors. attention of the viewers. Color Psychology Red: Passion, excitement, love Pink: Soft, reserved, earthy Purple: Mysterious, noble, glamorous Blue: Wisdom, hope, reason, peace Green: Nature, growth, freshness Yellow: Hope, joy, danger Orange: Warmth, kindness, joy White: Truth, indifference Black: Noble, mysterious, cold Cherry, K. (2022, November 29). Can color affect your mood and behavior?. Verywell Mind. https://www.verywellmind.com/color-psychology-2795824 Watch here Color Theory HUE | SATURATION | VALUE These are defined by the enclosure created by a combination of multiple lines. Shapes express different colors. Shapes are universal symbols that do not require language, but they can give a specific meaning regardless of the background and ethnicity of the viewer -Style or appearance of text -The Art of Working with Text -Style or appearance of text -The art of working with text -Style or appearance of text -The art of working with text https://edu.gcfglobal.org/en/beginning-graphic-design/typography/1/# Serif fonts Sans Serif fonts Serif fonts have little strokes called serifs Sans serif fonts don't have that extra stroke attached to the main part of the letter. —hence the name, which is French for without serif. Because of their classic look, they're a good choice for more traditional projects. Sans Serif fonts tend to be easier to read on They're also common in print publications, tablets and phones like magazines and newspapers. TIPS IN TYPOGRAPHY By JM Graphs Pair your fonts like this: TAN MON CHERI kollektif maleah moontime LEAGUE SPARTAN moontime OSWALD source sans pro Display Display fonts come in many different styles, like script, blackletter, all caps, and are just plain fancy. Because of their decorative nature, display fonts are best for small amounts of text, like titles and headers and more graphic-heavy designs. GRAPHICS AND THINK LIKE A LAYOUT DESIGNER Principles BALANCE Refers to how elements are evenly arranged throughout the screen. It means that no part of the screen is given too much weight as compared to any parts unless it is intentional. EMPHASIS Refers to giving more weight or focus to some elements on the screen. It is used to focus attention on a certain part or an element. PROXIMITY and UNITY are principles of design where closely related elements (e.g., graphics, text) should be placed together so that they will be perceived as one unit of the design. Alignment gives order to the design. In graphic design, alignment is used to group and organize elements to support balance. It also creates connections between elements to support proximity and unity. PATTERN, REPETITION, and RHYTHM are the repetition of visual element or pattern in an image that supports proximity and unity. Rhythm is when visual elements create a sense of organized movement. PATTERN REPETITION RHYTHM PROPORTION refers to the relative sizes and scales of the different elements of the design in connection to the overall design. Its composition, to be said proportionate, must be wellsized and thoughtfully positioned on its right place. the viewer's attention. VARIETY Variety refers to how the design must contain different elements to catch prevents the design from being monotonous. SOCIAL MEDIA IMAGE SIZES https://blog.hootsuite.com/social-media-image-sizes-guide/ GET THAT GET THAT AND IDEA OUT IDEA OUT INTO OF YOUR OF YOUR YOUR HEAD HEAD DESIGN References: https://www.youtube.com/playlist? list=PLpQQipWcxwt9U7qgyYkvNH3Mp8XHXCMm Q https://visme.co/blog/how-to-make-a- poster/#identify-the-purpose-of-your-poster https://www.facebook.com/JMGraphs2019 THANK YOU!