Identity for Digital Environments

Outline
Logos: Digital vs. Print Visual Impact Typography Graphics and Color Consistency

Identity vs. Logo

Logo
A logo identifies a business through a mark or icon.

Identity
An Identity uses the visual aspects (type, glyphs, images, and colors) to form the overall brand. It picks up where a logo leaves off, by carrying the power of a message into the minds of potential clients.

Logo: Digital vs. Print

Digital Change More Dynamic Less Costly Adaptability Print - Static - More costly - Permanent

vs.

Both can be interactive!

Examples

Interactive Print Logos

Memorable
A memorable logo can be achieved through the use of a simple, distinctive, and appropriate design.

Visual Impact
Illustration Abstract Conceptual Clever Unique Photo - Universal - Honest - Easily Accessible - Immediate

VS.

Subject Matter

Emotion

Typography

Web Typography (fonts incorporated in web pages)

There are widely used web safe fonts generally supported styles: serif, sans-serif, monospace 1996-2002: Core Fonts for the Web Initiative Arial, Courier New, Times New Roman, Comic Sans, Impact, Georgia, Trebuchet, and Verdana Still not always included in all operating systems though The readability of your website/logo is very important Sometimes you have to embed your font Reference 'Font Resources' presentation Various browsers and operating systems display fonts differently Want to make sure your text appears the same no matter what? Make it a graphic! Example: Image Replacement technique

(Interesting outline of web typography design process: http://www.techlila.com/importance-web-typography-website-design/)

Cascading Style Sheets

Establishing typography for individual web pages through code:
font-family generic: serif, sans-serif specific: Arial, Georgia It is important to establish a fallback plan CSS can be assigned to specific elements for differentiation <h1> <p>
font-family: Helvetica, "Nimbus Sans L", Arial, sans-serif;

(Good Resource - http://www.w3schools.com/css/css_font.asp)

What is your font's identity?

Identity through typeface

Many brands can be identified by their typeface Individuals can be as well Wes Anderson -> Futura Woody ALlen -> EF Windsor Elongated/EF Windsor Light Condensed Tarantino -> ITC Benguiat

Famous Fonts

Famous Fonts

Helvetica?
So, when choosing a typeface for an identity, should you consider using Helvetica?
(Something to keep in mind: Helvetica is not always installed for Windows and Linux)

Identity continued
Color Consistency Graphics Navigation Layout

Colors on the Web

In computer languages, colors are specified by three numbers that are collectively referred to as an RGB value. Intensity of Red, Green, and Blue are specified on a range of 0-255. Ex. 0, 255, 0 The value is converted and represented as a hexadecimal number (HEX) #RRGGBB 256*256*256 is 16,777,216 possible colors

RGB vs CMYK
RGB For Screens
Red, Green, Blue Additive Colors Emits light

CMYK For Print

Cyan, Magenta, Yellow Subtractive Colors Subtracts from light

Web Safe Colors

At one time computers could only display 256 colors. 216 colors that will be consistent on any screen. It allows exactly six equally-spaced shades of red, green, and blue (6 6 6 = 216), from Black (#000000) to White (#FFFFFF).

The Importance in Consistency

Color and Consistency are key in constructing a Digital Identity. Consistency in: Color Graphics and Graphical elements Layout and Content Navigation

Consistency
Visiting a website shouldn't be an adventure.
Navigation should be in the same place on every page. Logical and predictable. Use Graphics to reinforce an identity and create a coherent and harmonious site. Layout and content should work together. Don't confuse users.

A consistent web site is predictable and learnable.

Consistency Graphics
Consistency in graphics and color.

Consistency Graphics
Pervasive consistency

Helps users make connections and solidify a reliable identity

Consistency Layout

Consistency Navigation

QUIZ! Who is this?

QUIZ! Do you know who this is?

QUIZ! What the?!

References
http://www.sporcle.com/games/xxDUNE/fabulous_fonts, http://www.sporcle.com/games/xxDUNE/fabulous-fonts-ii http://lesliefranke.com/files/reference/csscheatsheet.html http://www.buzzfeed.com/paws/cats-as-fonts http://ofcatsandcrafts.blogspot.com/2012/03/meow-mix-friday-cat-fonts.html http://darlingstewie.com/tag/memes/ http://knowyourmeme.com/memes/hipster-kitty http://www.techlila.com/importance-web-typography-website-design/ http://www.w3schools.com/css/css_font.asp http://www.georgejaros.com/content/tutorials/font_tutorial/index.html http://fplanque.com/dev/computers/mac-os-vs-windows-font-rendering http://www.flavorwire.com/326643/10-auteurs-and-the-typefaces-they-love?all=1 http://www.granbypdblog.org/2008/12/ http://ww5.komen.org/ http://www.fadwebsite.com/2010/12/23/barack-obama-change-poster-by-shepard-fairy-to-sell-at-bonhams/ http://bendoregonnews.blogspot.com/2012/01/mitt-romney.html http://www.thecaptainsmemos.com/issues/driving-issues/road-signs-hidden-meanings/ http://justcreative.com/2009/07/27/what-makes-a-good-logo/ http://www.edibleapple.com/2009/04/20/the-evolution-and-history-of-the-apple-logo/ http://kingdomsightdesign.com/id-vs-logo http://thatsgoodspam.blogspot.com/2010/05/clever-ads-pt-4.html http://lokyuen.wordpress.com/2010/06/13/creative-ads/ykm-bag-advertisement/ http://www.printernational.org/rgb-versus-cmyk.php http://en.wikipedia.org/wiki/Web_colors http://www.uxbooth.com/articles/consistency-key-to-a-better-user-experience/