Color Theory Lecture Notes

Design Principles & Elements Notes

Design

The Principles & Elements

“People ignore design that ignores people” -Frank Chimero

What is Graphic Design?

• Design elements are the basic units of a visual image
• The principles of design govern the relationships of the elements used and organize the composition as a whole
• All imagery, art, design, and photography alike are comprised of elements that can be broken down and analyzed. This goes for web design as well.

What Are the Elements & Principles?

Design Elements:

• Space
• Can exist in 2 or 3 dimensions (perspective)
• Negative space → areas in between objects
• Can refer to foreground, midground, or background elements
• Line
• Basic element
• Can vary in thickness, texture, and direction
• Can be implied
• Draws viewers eye to The Point
• Color
• Eras & Styles
• Shape
• Brand recognition
• Geometric
• Square, circle, rectangle, hexagon, etc.
• Natural
• Complex, resemble real world elements, ink blobs
• Abstract
• Stylization of real world shapes
• Texture
• Mostly implied
• Value
• quality/range of light & dark
• Makes flat objects look 3 dimensional
• Balance
• Doesn’t have to be symmetrical to be balanced

Design Principles

• Unity
• Creates a sense of order, a consistency in size & shape
• Proximity can create a sense of unity, it can also show a lack of unity
• Variety
• Repeating elements that aren’t the same
• Repetition
• Same element repeated to create the design
• Harmony
• Interconnected with unity
• Proximity
• Negative & positive space interconnected
• Eyeflow
• Use of white space for information hierarchy

• Proportion
• Thirds
• Fibonacci spiral  

• Functionality
• Form or functionality
• “Don't make something unless it is both necessary and useful
• Emphasis (focal point)
• Where to look
• Causes the viewer to see what’s important

Randomized Album Design

Understanding File Formats - Bus

Ranked Lowest to Highest

Restrictive GIF

128 No Dithered GIF

64 No Dithered GIF

Low JPG

32 No Dithered GIF

Medium JPG

High JPG

64 Dithered GIF

128 Dithered GIF

32 Dithered GIF

128 Dithered PNG-8

PNG-24

Understanding File Formats - Trees

Ranked Lowest to Highest

Restrictive GIF

32 No Dithered GIF

128 No Dithered GIF

64 No Dithered GIF

64 Dithered GIF

128 Dithered GIF

32 Dithered GIF

JPEG

Medium JPEG

High JPEG

PNG-24

Graphic File Format Notes

Graphic File Formats

Understanding Format

Choice & Image

Compression

File Formats:

• All computer documents or files are packaged in different formats
• The format is often determined by the file's origin, such as a software program like photoshop or a device such as a digital camera
• Graphic files such as photos, videos, or artwork can be reduced in file size by using image compression formats

Lossy vs. Lossless:

• Graphic image formats fall under 2 categories
• Lossy:
• image data is “lost” or reduced for smaller file sizes but can cause poor image quality - can result in showing “compression artifacts”
• JPG, GIF, JPEG200, JFIF
• Lossless:
• Retains image data for higher quality but larger file sizes
• PICT, TIFF, PSD.AI

Graphic Formats:

• TIF, JPG, & GIF are 3 most common formats for common activities such as printing, scanning, & displaying images over internet
• PNG: common web format is high quality and can contain an alpha (transparency) channel
• Each format has its own advantages & disadvantages

File Format: TIF

• Stands for Tagged Image Format
• Common format for desktop, publishing, print, photo, & graphic design
• Is lossless file format, retains image data for maximum image quality
• Can result in larger file sizes, not fit for display over internet - not browser compatible

File Format: JPG

• Stands for Joint Photographics Expert Group
• Created for digital photography & works best for photo content
• Lossy
• Can reduce an image file size by 10:1 w/o showing significant compression artifacts
• Level of compression is adjustable
• Not for flat graphics

File Format: GIF

• Graphics Interchange Format
• Is best for graphics or images that have flat color or even tone, such as a cartoon
• Reduces image size by “indexing” color from 3 channels to 1
• Is adjustable by changing color bit levels from 1 to 8
• Contains no DPI (Dots Per Inch) data for printing - Not a proper format for print

Web → RGB: JPG, GIF, PNG, SVA

Print → CMYK: TIFF, PICT, BMP.AI, .PSD

• GIFs can be animated/ have frames → “cinemagraphs”

Know Your Pixels

• TIF & JPG are best for images w/ pixels that blend in color, “contiguous pixels”
• GIF is best for images w/ flat even tone, or “non-contiguous pixels”

Alias → 80’s animations, not smooth

Vs.

Anti-Alias → smooth, blended

Juxtaposition

business of ferrets will weasel your money away