Citrus Circuits

Fall Workshop Series

​

How to Make Your Team Brand Amazing

by Kristen Corsetto

What is a brand?

Origins of Branding

Design vs. Fine Art

Fine Art

• Purely for esthetic purposes
• Completely subjective
• No “right” answer

Design

• Serves a specific purpose
• Objective
• “Better” answers and “worse” answers

Types of Design

• Logo Design
• Print Design
• Package Design
• Web Design
• UI/UX Design

Defining Successful Outcomes

• Because design has “better” and “worse” answers, we need to figure out how to define a successful outcome for a given project.
• Jack in the Box vs. Steakhouse?
• FLL vs. sponsor letters?
• PERSONAS

Design Principles

Hierarchy and Balance

Hierarchy

Now that we know who we are designing for, we need to figure out:

• What information needs to be conveyed?
• How to convey that information?

All elements in a design are competing for the viewer’s attention. Good design helps guide the viewer through the information.

Hierarchy

• Larger items demand more attention.
• Bright colors demand more attention than subdued one.
• Faces and images demand more attention.

Balance

Two types of balance:

• Formal Balance
• Symmetry
• Creates a sense of stability
• Dynamic Balance
• Asymmetry
• All objects still in balance

Negative Space

• The empty space in a design
• Negative space can be just as powerful of a tool as any of the design elements you choose to include.

Color Spaces

Choosing the Right Color for the Job

Color Spaces – Not all colors are created equal!

RGB

• Red, green, blue
• Used for screens
• Add up to white
• i.e. higher number = lighter color
• Values are 0 – 255
• Example:
• 91, 227, 0

Color Spaces – Not all colors are created equal!

CMYK

• Cyan, magenta, yellow, black (K = key)
• Used for print
• Add up to black
• i.e. higher number = darker color
• Values are 0% – 100%
• Example:
• 60, 0, 100, 11

Color Spaces – Not all colors are created equal!

Raster vs. Vector?

An overview of file types

Raster Overview

• Raster: “resolution-dependent”
• Made up of tiny dots called pixels
• DPI: number of pixels per inch in an image
• Good for photos
• Use Photoshop for raster images
• Can be scaled down but not scaled up

Raster File Types

• PSD
• Photoshop native format. Supports layers. Only Photoshop and other Adobe programs can open.
• JPG or JPEG
• COMPRESSION (Lossy). Great for small files, particularly images. Awesome for web, not necessarily awesome for printing.
• PNG
• Supports transparency. Achieves compression by limiting the number of colors used. This makes it great for graphics, not as great for photos.
• TIF or TIFF
• Supports layers at a smaller size than PSD, offers lossless compression.
• GIF
• Suports animation. Limits colors like PNG.

Vector Overview

• Vector: “resolution-independent”
• Made up of anchor points and vectors
• Good for graphics
• Use Illustrator for vector images
• Infinitely scalable

Vector File Types

• AI
• Illustrator native format. Supports layers/objects. Newer versions can be opened in PDF viewers like Acrobat.
• PDF
• Supports vector but is not necessarily vector. Gold standard for sending files to print. High compatibility with other applications.
• EPS
• Older file format, less commonly used. Supports layers/objects. Cross-compatible across different vector editing software.
• SVG
• Supports animation. This is the standard file format when vector graphics need to be used on the web.

Using the Right Tools

Industry Standards vs. Free Alternatives

Typography

What makes good typography?

• Invites the audience to read
• Reinforces the content’s meaning
• Demands attention, then fades into the background
• Affects the reader’s mood and comprehension

Typography Terminology

• Serif vs. Sans Serif
• Display vs. Text type
• Most text type can also be display, but not all display can be text
• Combining typefaces
• Limit yourself to one or two per piece!

Applications for FRC Teams

BRAND STANDARDS

Standardizing Your Brand

• A brand is more than a logo!
• Good branding supports the logo in a unified manner
• Items to standardize
• Brand themes/key messages
• Colors and fonts
• Logo configurations
• Logo size and white space

Applications for FRC Teams

T-SHIRTS

T-Shirt Best Practices

• File types?
• Software?
• Color space?
• Minimize # of colors
• Getting what you need from your sponsors
• Talk to your vendor and ask them questions!
• They are the experts and they are there to help!

Applications for FRC Teams

WEBSITES

Designing a Successful Website

• CMS?
• (Content Management System)
• Responsive design?
• Designing for readability and easy access of information
• Keeping content up to date

QUESTIONS?