Imaging And Design For Social Impact - Notes

IMAGING AND DESIGN FOR SOCIAL IMPACT

  • Living in the IT Era

Graphic Design

  • Uses Typography, Images, Colors, Icons, and other illustrations to communicate visually.

  • Aims for good user experience (for software developers).

  • Boosts/improves one’s emotions with the use of colors.

  • Applications:

    • PowerPoint Presentations

    • Web/mobile apps

    • Posters

    • Logos

    • Paintings

BASIC ELEMENT OF GRAPHIC DESIGN

Line

  • A kind of shape that connects two or more points.

  • Considered as one of the essential elements of graphic design.

Attributes of Line

  • Weight

  • Color

  • Texture

  • Style

Lines Used in Patterns

  • Example provided: a complex line-based pattern.

Shape

  • Two-dimensional external boundary of an object

  • Any object outline with height and width

  • Lines + Shapes = Foundation of your Design

Major Categories of Shapes

  • Geometric Shapes:

    • Mathematical

    • Regular

  • Organic Shapes:

    • Freeform

Posters

  • Examples of posters, including Fiverr offers with hashtags like #PIXTELLER.

Form

  • Three-dimensional shape.

  • Shadows, perspective, depth, and sometimes texture create a form.

  • It also gives the object a sense of place.

Texture

  • Physical quality of the surface of an object in an artwork or design.

  • It also refers to how an object looks or feels.

  • Texture adds depth and visual interest to flat images or objects.

Texture can be used for:

  1. Establishing visual value or a focal point in an artwork.

  2. Having contrast within a design

  3. Making an artwork visually balanced.

Balance

  • Visual balance is the creation of visual equilibrium by relating elements such as line, shape, color, space, or form in terms of their visual weight.

  • Two kinds of visual balance:

    1. Symmetrical Balance

    2. Asymmetrical Balance

Symmetrical Balance

  • Includes radial symmetry is when both two sides of a piece are equal.

Asymmetrical Balance

  • Both sides of your composition do not contain the same elements but contain almost the same visual weight.

Brand Identity Design

  • Branding is what people think about you. Identity is the visual representation of a brand.

  • Branding and Identity are not just for products and services.

  • Branding and Identity can be found everywhere

Seven steps to creating a brand identity design:

  1. Establish clear purpose and positioning

  2. Conduct a thorough market search

  3. Get a personality

  4. Create a polished logo

  5. Create an attractive color palette

  6. Select professional typography

  7. Choose on-brand supporting graphics

Layout and Composition

  • These two focus on the arrangement of your objects or elements on your design.

  • Layout + Composition = building block of design

Layout

  • The term layout refers to how components of visual communication are organized on a two-dimensional field.

  • Key questions for a designer before planning a layout:

    • What is the message?

    • What feeling do they want the design style to evoke?

  • The layout will say as much to an audience as the components, themselves.

Aims of layout

  • Engage the attention of an audience.

    • This is often done by creating a hook that stands out.

    • Grabbing a viewer’s attention can be done with an image, type, color, shape, or other visual devices.

  • Enable the clear and cohesive communication of ideas and information to the audience.

    • To communicate effectively, designers build visual consistency.

    • The viewer’s journey through a presentation is seamless, read clearly, and with ease.

    • Consistency is created by type, colors or other stylistic elements.

  • Create a tone or feeling in the presentation.

    • Depending on the client and target audience, a designer may use a chaotic layout or a formal layout.

    • The aesthetic tone of a layout is a communicative component of design.

Composition

  • The term composition refers to the arrangement of components of an artwork in the visual arts, including painting, sculpture, print-making and photography

  • The arrangement of components, including the Principles of Art and Design, are integral parts of Visual Language and instrumental in the communication of ideas

Why composition is important?

  • It's the way your content is arranged.

  • Without a thoughtful, well-composed layout, your work would basically fall apart.

5 basic principle of layout and composition

Proximity

  • It is the process of placing related elements together.

  • In design, block texts or graphics that are related should be grouped together to make your design easier to understand.

  • Groups that are NOT related to each other should be separated to visually emphasize their lack of a relationship.

  • Elements that are placed closer together are perceived as being more related than those spaced further apart.

White space

  • “White Space in design composition is the same use of Silence in a musical composition. Without proportionate use of Silence, music is unstructured; some may call it noise. Similarly, without White Space, design is unstructured and difficult to consume.” – Pratik Hedge

  • Is not the white spaces that you found on the design but rather the negative space between lines, paragraphs, and elements on the design.

  • There are 2 types of white Space:

    1. Micro white space

    2. Macro white space

  • Types:

    • Active White Space: Refers to the space added in a design layout intentionally to create more focus on specific parts of the design.

    • Passive White Space: Is added in a more organic way to increase readability and comprehension of the design.

Importance of white space

  • Improved comprehension

  • Focus and attention

  • Increased interaction rate

  • Guide the user through local grouping

  • Branding and design tone

  • Creates a breathing space for users

Alignment

  • Organize different elements in their composition.

  • Effective use of alignment gives your composition a definitive structure and a creative balance.

  • Alignment may be left, centered, right, or justified.

Contrast

  • one element is opposite to the other element.

  • helps you catch the viewer’s eye, create a direction, or give emphasis to something.

Repetition

  • to use of the same typefaces, color palettes, or other elements to achieve consistency in your composition.

  • This creates unity in your composition or makes your projects connected to each other.

Typography

  • Is the art of arranging texts that make them readable and appealing to the viewer. It involves font style, typeface, and text structure.

  • Font -> variation of weights of a typeface

  • Typeface -> text style.

  • Typography forms integral part of a good graphic design.

  • Largely used to create moods.

  • Crucial in the design of advertisements, magazines, newspaper and corporate identities.

  • Different fonts suggest different context & ideas.

  • Some typefaces even have special functions.

Font vs Typeface

  • FONT is the variation of weights of a typeface.

  • TYPEFACE is a family of fonts.

    • Examples: Roboto Thin Italic, Roboto Regular, Roboto Black, Roboto, Gotham, Times New Roman

Types of fonts

  • There are five basic classifications of typefaces: serif, sans serif, script, monospaced, and display.

  • As a general rule, serif and sans serif typefaces are used for either body copy or headlines (including titles, logos, etc.), while script and display typefaces are only used for headlines.

Serif

  • Serif fonts are fonts that have little strokes called serifs on each end of the letter.

  • They are typically used in formal or traditional projects.

San Serif

  • Sans serifs are fonts with no extra strokes.

  • Sans serif simply means “without serifs” as sans is a French word for without.

  • These fonts are normally found on mobile phones, and computer screens.

Comparison

  • Serif Font:

    • Thick and thin strokes

    • Serifs

    • Example: Century Old Style

  • Sans Serif Font:

    • Plain

    • Strokes have even width

    • Example: Futura Book

Display

  • Display fonts are sometimes called fancy or decorative fonts.

  • It can be script, blackletter, or all caps.

  • These types of fonts are used on special occasions like invitations, titles, or posters.

Choosing a font or typeface

  • A dilemma that most graphic designers experienced is what fonts or typefaces are they going to use.

  • One mistake that beginners commit is the misuse of fonts or typefaces.

  • Choosing a font/typeface should portray the message that you want to say to your viewers. In design, fonts and typefaces do matter.

  • Font Matters!

Rules for font usage

  • Limit yourself to one or two per project.

  • You may play with their family of fonts for emphasis or contrast.

  • You may combine serifs and sans serifs, display, and serifs, or display and sans serifs.

OVERUSED FONTS

  • Comic Sans

  • Papyrus

  • Jokerman

  • Curlz MT

COLORS

Color Theory

  • Color Theory describes how different colors contribute to each other and how they appear as they are mixed into other color schemes.

Terminologies used in 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

COLOR WHEEL

  • Primary Colors

  • Secondary Colors

  • Tertiary Colors

Color Schemes

  • ACHROMATIC COLOR SCHEME:

    • This color scheme only revolves on using desaturated colors like black, gray, and white.

  • ANALOGOUS COLOR SCHEME

    • Selects a group of three colors that are adjacent in the color wheel.

  • COMPLEMENTARY COLOR SCHEME

    • Direct opposite to each other in the color wheel.

    • Usually, a combination of a primary and secondary colors.

  • SPLIT-COMPLEMENTARY COLOR SCHEME

    • Split-complementary color scheme uses the colors on both sides of the opposite color.

  • TETRADIC COLOR SCHEME

    • Also known as double complementary.

    • This color scheme uses two pairs of complementary colors.

  • TRIADIC COLOR SCHEME

    • This color scheme uses colors that form an equilateral triangle. It may be a combination of primary, secondary, or tertiary colors.

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.

IMAGES

Image File Types

VECTOR

  • 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.

Vector Image File Types

  • Encapsulated Postscript (EPS):

    • This vector format is 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)

    • Commonly used image file type

    • A raster type of image, JPEG images are known for their “lossy” compression.

  • Portable Network Graphics (PNG)

    • Known for having a transparent background.

    • Images in this type are commonly used in web documents.

  • Graphics Interchange Format

    • Known in its animated form.

    • Find in social networking sites as posts or comments.

    • GIFs are often used in web pages as can load quickly duo to its reduced file sized.