_ The design universal principles Typography, Grids

1
_The design universal principlesTypography,
Grids Golden section
Module 1 Introduction to digital media
Sami Niemelä sn_at_neocite.com
2
What is typography?
Module 1 Introduction to digital media

• Design is fundamentally about communication, and,
  for all the power of images, words remain at the
  core of how we communicate.
• Alas, Typography is the practice of visually
  representing words.
• Type conveys a meaning ? the face, size, weight,
  color etc.. They all add to the message.

Sami Niemelä sn_at_neocite.com
3
What is typography?
Module 1 Introduction to digital media

• Remember legibility is important AND the content
  is the king.
• Legibility comes from various things spacing,
  letter shape, size, weight..
• Both content and presentation have direct effect
  on the message we convey

Sami Niemelä sn_at_neocite.com
4
Associating meaning with type
Module 1 Introduction to digital media

• Different typefaces have different character
  which adds to the message

Sami Niemelä sn_at_neocite.com
5
Associating meaning with type
Module 1 Introduction to digital media

• The first impression is important

Diploma Bauhaus Furby regular
Sami Niemelä sn_at_neocite.com
6
How type works?
Module 1 Introduction to digital media

• Type communicates visually with curves, corners,
  variation, visual balance etc
• Anatomy of a letterhttp//counterspace.motivo.com
  

Sami Niemelä sn_at_neocite.com
7
How type works?
Module 1 Introduction to digital media

• Typefaces come in variety of stylesOld-style,
  Transitional, Modern, Egyptian/slab-serif,
  Sans-serif
• Sans-serifs can be further classified realist,
  geometric humanist faces

Sami Niemelä sn_at_neocite.com
8
Serif sans-serif?
Module 1 Introduction to digital media

• This is text written with a serif typeface
• This is text written with a serif typeface

Sami Niemelä sn_at_neocite.com
9
Serif sans-serif?
Module 1 Introduction to digital media

• serif A stroke added usually to the beginning
  or the end of a letter
• sans without

Sami Niemelä sn_at_neocite.com
10
A small glossary of typographic terms
Module 1 Introduction to digital media
Letterspacing unnevenly spaced letters can
disrupt our ability to distiguish words
Sami Niemelä sn_at_neocite.com
11
A small glossary of typographic terms
Module 1 Introduction to digital media
Line-height (leading) can have great impact on
legibility of text passages.
Sami Niemelä sn_at_neocite.com
12
A small glossary of typographic terms
Module 1 Introduction to digital media
Line length The main issue for the reader is
the disruption of having to go from the end of
one line to the beginning of the next. When lines
are too long this can be quite difficult because
of the sheer distance the eye has to travel. On
the other hand,if lines are setextremely
short,the reader willhave to switchlines much
more often.
Sami Niemelä sn_at_neocite.com
13
A small glossary of typographic terms
Module 1 Introduction to digital media
X-height Has a great impact on
legibility Both typefaces are set on the
exact same size but the readability varies
greatly
Sami Niemelä sn_at_neocite.com
14
_Good typography in web design
Module 1 Introduction to digital media
Sami Niemelä sn_at_neocite.com
15
Good typography on web design
Module 1 Introduction to digital media

• The biggest problem for good online typography is
  the screen resolution

Sami Niemelä sn_at_neocite.com
16
Good typography on web design
Module 1 Introduction to digital media

• With html we only have limited array of typefaces
  available

Sami Niemelä sn_at_neocite.com
17
Good typography on web design
Module 1 Introduction to digital media

• Solutions?
• Pixel fonts
• Gif imagesFlash
• SVG

Sami Niemelä sn_at_neocite.com
18
_Grid Systems
Module 1 Introduction to digital media
Sami Niemelä sn_at_neocite.com
19
What are grids?
Module 1 Introduction to digital media

• Grid is a graphic design tool for aligning the
  content whithin each other

Sami Niemelä sn_at_neocite.com
20
BBCi
Module 1 Introduction to digital media
Sami Niemelä sn_at_neocite.com
21
BBCi
Module 1 Introduction to digital media
Sami Niemelä sn_at_neocite.com
22
Sami Niemelä sn_at_neocite.com
23
Sami Niemelä sn_at_neocite.com
24
_Golden section
Module 1 Introduction to digital media
Sami Niemelä sn_at_neocite.com
25
Golden section
Module 1 Introduction to digital media

• The Golden Section is based on a ratio which
  results in phi -take a line and divide it so that
  the ratio of the large piece (B) to the whole
  line (A) is the same as the ratio as the small
  piece (C) to the large piece (B)

So A is 161.8 of B and B is 161.8 of C. The
golden section numbers are 061803 39887... and
161803 39887...
Sami Niemelä sn_at_neocite.com
26
Golden section
Module 1 Introduction to digital media
8
13
http//www.textism.com/bucket/fib.html http//www.
textism.com/bucket/fibsquare.html
Sami Niemelä sn_at_neocite.com
27
Golden section architecture
Module 1 Introduction to digital media
Sami Niemelä sn_at_neocite.com
28
Golden sectionart
Module 1 Introduction to digital media
Seurat
Sami Niemelä sn_at_neocite.com
29
Golden section art
Module 1 Introduction to digital media
Seurat
Leonardo's unfinished canvas Saint Jerome
Sami Niemelä sn_at_neocite.com
30
Golden section art
Module 1 Introduction to digital media
Seurat
Leonardo's unfinished canvas Saint Jerome
Sami Niemelä sn_at_neocite.com
31
Module 1 Introduction to digital media
FIN
Seurat
Sami Niemelä sn_at_neocite.com