Your SlideShare is downloading. ×
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Day01 designpinciples
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Day01 designpinciples

803

Published on

Intro to typography & design

Intro to typography & design

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
803
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. The Design Universal PrinciplesTypography, Grids & Golden section
  • 2. What is typography?• 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.
  • 3. What is typography?• 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
  • 4. Associating meaning withtypeDifferent typefaces have different characterwhich adds to the message
  • 5. Module 1: Introduction to digital mediaAssociating meaning withtypeThe first impression is important | Diploma | Bauhaus | Furby regular
  • 6. Module 1: Introduction to digital mediaHow type works? •Type communicates visually with curves, corners, variation, visual balance etc •Anatomy of a letter http://www.counterspace.us/typogra
  • 7. Module 1: Introduction to digital media How type works?• Typefaces come in variety of styles; Old-style, Transitional, Modern, Egyptian/slab-serif, Sans-serif• Sans-serifs can be further classified realist, geometric & humanist faces
  • 8. Module 1: Introduction to digital media Serif & sans-serif?• This is text written with a serif typeface• This is text written with a serif typeface
  • 9. Module 1: Introduction to digital media Serif & sans-serif?• serif : A stroke added usually to the beginning or the end of a letter• sans: ”without”
  • 10. Module 1: Introduction to digital mediaA small glossary oftypographic terms Letterspacing unnevenly spaced letters can disrupt our ability to distiguish words
  • 11. Module 1: Introduction to digital mediaA small glossary oftypographic terms Line-height (leading) can have great impact on legibility of text passages.Sami Niemelä | sn@neocite.com
  • 12. Module 1: Introduction to digital media A small glossary of typographic terms Line length The main issue for the reader is the disruptionof having to go from the end of one line to thebeginning of the next. When lines are too long this canbe quite difficult because of the sheer distance the eyehas to travel. On the other hand,if lines are setextremely short,the reader willhave to switchlines much more often. Sami Niemelä | sn@neocite.com
  • 13. Module 1: Introduction to digital media A small glossary of typographic terms X-height Has a great impact on legibility: Both typefaces are set on the exact same sizebut the readability varies greatly Sami Niemelä | sn@neocite.com
  • 14. Good typography on web design• The biggest problem for good online typography is the screen resolution Sami Niemelä | sn@neocite.com
  • 15. Module 1: Introduction to digital media Good typography on web design• With html we only have limited array of typefaces available
  • 16. Module 1: Introduction to digital media:_Grid Systems
  • 17. Module 1: Introduction to digital mediaWhat are grids?Grid is a graphic design tool for aligningthe content whithin each other
  • 18. Module 1: Introduction to digital mediaBBCi
  • 19. Module 1: Introduction to digital mediaBBCi
  • 20. Sami Niemelä | sn@neocite.com
  • 21. Sami Niemelä | sn@neocite.com
  • 22. Module 1: Introduction to digital media:_Golden sectionSami Niemelä | sn@neocite.com
  • 23. Module 1: Introduction to digital mediaGolden sectionThe Golden Section is based on a ratio which resultsin phi -take a line and divide it so that the ratio of thelarge piece (B) to the whole line (A) is the same asthe ratio as the small piece (C) to the large piece (B): B C A So A is 161.8% of B and B is 161.8% of C. The golden section numbers are ±0·61803 39887... and ±1·61803 39887...Sami Niemelä | sn@neocite.com
  • 24. Module 1: Introduction to digital mediaGolden section 8 13 http://www.textism.com/bucket/fib.html http://www.textism.com/bucket/fibsquare.html
  • 25. Module 1: Introduction to digital mediaGolden section: architecture
  • 26. Module 1: Introduction to digital mediaGolden section:art AKA…Rule of Thirds Seurat
  • 27. Module 1: Introduction to digital mediaGolden section: art Leonardos unfinished canvas Saint Jerome Seurat

×