Identity for Digital Environments Presentation

7/31/2019 Identity for Digital Environments Presentation

1/32

Identity for DigitalEnvironments


2/32

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

Outline


3/32

Identity vs. Logo

LogoA logo identifies a business through a mark or icon.

IdentityAn 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 ofa message into the minds of potential clients.


4/32

Logo: Digital vs. Print

Digital

Change -

More Dynamic -

Less Costly -

Adaptability -

Print

- Static

- More costly

- Permanentvs.

Both can be interactive!


5/32

Examples

Interactive Print Logos


6/32

Memorable

A memorable logo can be achieved through theuse of a simple, distinctive, and appropriatedesign.


7/32

Visual Impact

Photo

- Universal- Honest- Easily Accessible- Immediate

Illustration

Abstract -Conceptual -

Clever -Unique -

VS.


8/32

Subject Matter


9/32

Emotion


10/32

Typography


11/32

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

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

Various browsers and operating systemsdisplay fonts differently

Want to make sure your text appears thesame no matter what? Make it a graphic! Example: Image Replacement

technique


12/32

Establishing typography forindividual web pages throughcode: font-family

generic: serif, sans-serif specific: Arial, Georgia

It is important to establisha fallback plan

CSS can be assigned to specificelements for differentiation

Cascading Style Sheets

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

font-family: Helvetica, "Nimbus Sans L", Arial, sans-serif;


13/32

What is your font's identity?


14/32

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

Identity through typeface


15/32

Famous Fonts


16/32

Famous Fonts


17/32

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)

Helvetica?


18/32

Identity continued

Color

Consistency

Graphics

Navigation

Layout


19/32

Colors on the Web

In computer languages, colors are specified by three numbersthat 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


20/32

RGB vs CMYK

RGB For ScreensRed, Green, Blue

Additive Colors

Emits light

CMYK For PrintCyan, Magenta, Yellow

Subtractive Colors

Subtracts from light


21/32

Web Safe Colors

At one time computerscould only display 256colors.

216 colors that will beconsistent on any screen.

It allows exactly six

equally-spaced shades ofred, green, and blue (6 6 6 = 216), from Black(#000000) to White

(#FFFFFF).


22/32

The Importance in Consistency

Color and Consistency are key in constructinga Digital Identity.

Consistency in:

Color

Graphics and Graphical elements

Layout and ContentNavigation


23/32

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.


24/32

Consistency Graphics

Consistency in graphics and color.


25/32

Consistency Graphics

Pervasive consistency

Helps users make

connectionsand solidify a reliableidentity


26/32

Consistency Layout


27/32

Consistency Navigation


28/32

QUIZ! Who is this?


29/32

QUIZ! Do you know who this is?


30/32

QUIZ! What the?!


31/32

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/

References


32/32

Documents

Identity for Digital Environments Presentation