Imaging and Design for Social Impact PDF

IMAGING AND DESIGN FOR SOCIAL IMPACT ==================================== **Overview** The graphic design concepts are almost like building blocks. Each layer is on top of each other before you have the base to create something unbelievable --- whether you\'re creating a logo, a website, or a uniq...

IMAGING AND DESIGN FOR SOCIAL IMPACT ==================================== **Overview** The graphic design concepts are almost like building blocks. Each layer is on top of each other before you have the base to create something unbelievable --- whether you\'re creating a logo, a website, or a unique picture. The basic principles of graphic design comes with different fundamentals to consider. In this module, we will explore some of it for us to be able to create a good design. **Lesson 1: Graphic Design Fundamentals** **Objectives** - Understand the basic concepts like colors, typography, images; - Understand the principles and techniques of design using applications (whether opensource or proprietary) to develop contents for social campaigns; and - Discuss the importance of having a good design to communicate visually. **What is Graphic Design?** **Graphic Design** is a process in which we use typography, images, colors, icons and other illustrations to communicate visually. This term was first coined by **William Addison Dwiggins** on 1992 as he called himself a "*graphic designer*". However, graphic design is a thousand-year-old craft which dates back to ancient cave drawings. In today's era, we use graphic design not just to communicate visually but also to having good user experience (for software developers) and also to boost/improve one's emotions (with the use of colors). The fundamentals of graphic design varies from PowerPoint presentations, web/mobile applications, posters, logos, and even paintings. The basic elements of graphic design are the following: - Lines - Shapes - Form - Texture - Balance **Line** A. **Line** is a kind of shape which connects two or more points. It is also considered as one of the essential element of graphic design. Lines can be thick, thin, curved, or jagged. Curved Line Jagged Line - Weight - Color - Texture - Style designs.htm^l^ **Shape** B. **Shape** is a two-dimensional external boundary of an object. Any object outline that has height and width can be considered as a shape. Together with lines, they form the foundation of your design. - **Geometric --** these are regular and mathematical shapes. - **Organic --** these are freeform shapes. - **Figure 3** shows the different examples of geometric and organic shapes.  **Figure 3** Example of geometric and freeform shapes Shapes can be used in organizing or dividing contents, create illustrations, and in adding interest to one's work/design. **Figure 4** Using shapes in a poster design **Form**  **Figure 5** Difference of a form and a shape **Texture** - Establishing visual value or a focal point in an artwork. - Having contrast within a design Making an artwork visually balanced.  **Balance** 1. **Symmetrical balance.** From the name itself, symmetrical balance, which includes radial symmetry is when both two sides of a piece are equal. If you fold your artwork or piece into two or if you put an imaginary line between your artwork, each half is identical or visually similar to the other half.  1. **Asymmetrical balance.** Both sides of your composition does not contain the same elements but contain almost the same visual weight. **Figure 8** Asymmetrical design example Lesson 2: Branding and Identity =============================== 1. **Establish clear purpose and positioning.** Recall why you or your company exists, who your target audience are, and what makes you or your service unique from your competitors. 2. **Conduct thorough market research.** Having a deep analysis on your target audience on what their personalities are which will lead you to the next step. 3. **Get a personality.** Based on your research, determine your brand's personality. Brand personality make a huge impact on the visuals of your marketing materials. 4. **Create a polished logo.** In creating your logo, it should be **simple**, **scalable**, and **memorable**. Observe the logos of famous companies like Amazon, Google, and IBM. What do these logos have in common? 5. **Create an attractive color pallete.** Your color pallete should be simple and contain one to three primary colors. Once you have established your color pallete, you may play with their color family. For example, if you choose blue as you primary color, you may use sky blue, baby blue, and other colors under the blue family to support your primary color. 1. **Select professional typography.** When selecting fonts, it is important to consider these things: a. **Do not make it fancy**. Fancy typefaces only make your text confusing. Example: b. **Don't mix fonts/typefaces**. Do not mix fonts or typefaces in a word or sentence as it may give mixed interpretations to your audience. Example: c. **Mix contrasting fonts/typefaces**. This is not similar to the above item. This means you may use serif typefaces for your product title and sans serif for the subtitle. 2. **Choose on-brand supporting graphics.** Your brand identity should have a visual library that include icons, images/photographs, design assets, and other supporting graphics. **Lesson 3: Layout and Composition** There are five basic principles of layout and composition: **1.** Proximity 2. White Space 3. Alignment 4. Contrast 5. Repetition **Proximity**  - **Micro white space.** Mini spaces between paragraphs, lines, menu items, or other elements in a design composition. - **Macro white space.** Large spaces between contents and elements. Hedge (2017) listed some of the importance of white space in design. 1. **Improved comprehension**. Spaces between lines in a paragraph makes the content legible and easily scanable to the readers/viewers. 2. **Focus and attention.** Macro white spaces help guide the viewers to the focus area in the design.  3. **Increased interaction rate.** If used wisely, white space in design helps the viewer to get the message quickly even without looking at the instructions. Take a look at Google's homepage UI. White space helps the viewer to get the message, which is to search. 4. **Guide the user through local grouping.** White space helps you to achieve the proximity of your design. 5. **Branding and Design Tone**. Let us look back at the steps of brand identity design, the way how are you going to apply white spaces in your design helps you create your own brand's personality. 6. **Creates a breathing space for users**. A lot of people believe that in design, one must maximize the space by putting contents on it. However, this might make your design stuffy. Having enough white space makes your eye rest, helps us breathe and not to be overwhelmed with the information.  **Figure 12** Making design with breathable space (right) is better than stuffy design (left) **Alignment** **Contrast** **Repetition** Lesson 4: Typography ==================== "Typeface is to font as song is to.mp3" -- Nick Sherman Table 1 shows the difference between a font and a typeface. **Types of Fonts** Fonts can be categorized into three: - Serif - San Serif - Display Serif fonts are fonts that have little strokes called **serif** on each end of the letter. They are typically used in formal or traditional projects. Examples of typefaces with serifs are Times New Roman, Baskerville Old Face, and Californian FB.  Sans serif are fonts with no extra strokes. Sans serif simple means "without serifs" as sans is a French word for without. These fonts are normally found in mobile phones, and computer screens. Examples of this type are Calibri, Arial, and Roboto. **Display** **Choosing a font or typeface**  SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC. National Highway, Crossing Rubber, Tupi, South Cotabato **GENERAL EDUCATION DEPARTMENT** \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ **LEARNING MODULE** **FOR\`** **GEE3: Living in the IT Era** **\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_** ***Week 10*** WEEK 10 Color ===== Colors are very essential to your compositions. One may use a combination or one or more colors. It may be our instinct to choose color but there is a science behind it, called **Color.** - **Hue.** Refers to pure, vibrant colors. - **Saturation.** Refers to the intensity of the color. It ranges from black and white (or grayscale) to vibrant color. - **Value**. Refers to the lightness or darkness of a color. For example, from light blue to dark blue. **Color Schemes** **Monochromatic Color Scheme**  **Achromatic Color Scheme** Analogous Color Scheme ====================== **Complementary Color Scheme**  **Split-Complementary Color Scheme** Triadic Color Scheme ==================== **Tetradic Color Scheme**  **Understanding Color Profiles** - **RGB**. This color profile consists of Red, Green, and Blue. You should use this profile for design that are intended for screen displays. - **CMYK.** This color profile consists of Cyan, Magenta, Yellow, and Key (Black). If you have a printer in your house, you probably see these colors as inks. This profile is intended for designs that are to be printed. Lesson 6: Image =============== **Image File Types** There are different file types of images, and they are grouped into two categories: vector and raster - **Vector.** It is a type of image that does not lose its quality when zoomed in. Your image will not be pixelated when enlarged. - **Raster.** Opposite to vector, raster images become pixelated when enlarged. - **Encapsulated Postscript (EPS).** This vector format are designed to produce high-resolution graphics for print. Being a universal file type, EPS files can be opened in any design editor. - **Adobe Illustrator Document (AI).** Most preferable and commonly used image file type by designers. If you want to create a vector image, AI is one of the best tool for you. **Raster Image File Extensions** - **Joint Photographic Experts Group (JPG or JPEG).** This file type is the most commonly used image file type. Since this is a raster type of image, JPEG images are known for their "lossy" compression. Meaning, the image quality decreases when being enlarged. - **Portable Network Graphics (PNG).** This file type is known for having a transparent background. Images in this type are commonly used in web documents. - **Graphics Interchange Format.** This file type is known in its animated form. You can find them in social networking sites as posts or comments. GIFs are often used in web pages as can load quickly due to its reduced file size.