1 / 31

_ The design universal principles Typography, Grids & Golden section

Module 1: Introduction to digital media:. _ The design universal principles Typography, Grids & Golden section. Sami Niemelä | sn@neocite.com. Module 1: Introduction to digital media. What is typography?.

noma
Télécharger la présentation

_ The design universal principles Typography, Grids & Golden section

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Module 1: Introduction to digital media: _The design universal principlesTypography, Grids & Golden section Sami Niemelä | sn@neocite.com

  2. Module 1: Introduction to digital media 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. Sami Niemelä | sn@neocite.com

  3. Module 1: Introduction to digital media 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 Sami Niemelä | sn@neocite.com

  4. Module 1: Introduction to digital media Associating meaning with type Different typefaces have different character which adds to the message Sami Niemelä | sn@neocite.com

  5. Module 1: Introduction to digital media Associating meaning with type The first impression is important | Diploma | Bauhaus | Furby regular Sami Niemelä | sn@neocite.com

  6. Module 1: Introduction to digital media How type works? • Type communicates visually with curves, corners, variation, visual balance etc • Anatomy of a letterhttp://counterspace.motivo.com Sami Niemelä | sn@neocite.com

  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 Sami Niemelä | sn@neocite.com

  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 Sami Niemelä | sn@neocite.com

  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” Sami Niemelä | sn@neocite.com

  10. Module 1: Introduction to digital media A small glossary of typographic terms Letterspacing unnevenly spaced letters can disrupt our ability to distiguish words Sami Niemelä | sn@neocite.com

  11. Module 1: Introduction to digital media A small glossary of typographic 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 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@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 size but the readability varies greatly Sami Niemelä | sn@neocite.com

  14. Module 1: Introduction to digital media: _Good typography in web design Sami Niemelä | sn@neocite.com

  15. Module 1: Introduction to digital media Good typography on web design • The biggest problem for good online typography is the screen resolution Sami Niemelä | sn@neocite.com

  16. Module 1: Introduction to digital media Good typography on web design • With html we only have limited array of typefaces available Sami Niemelä | sn@neocite.com

  17. Module 1: Introduction to digital media Good typography on web design Solutions? Pixel fonts Gif imagesFlash SVG Sami Niemelä | sn@neocite.com

  18. Module 1: Introduction to digital media: _Grid Systems Sami Niemelä | sn@neocite.com

  19. Module 1: Introduction to digital media What are grids? Grid is a graphic design tool for aligning the content whithin each other Sami Niemelä | sn@neocite.com

  20. Module 1: Introduction to digital media BBCi Sami Niemelä | sn@neocite.com

  21. Module 1: Introduction to digital media BBCi Sami Niemelä | sn@neocite.com

  22. Sami Niemelä | sn@neocite.com

  23. Sami Niemelä | sn@neocite.com

  24. Module 1: Introduction to digital media: _Golden section Sami Niemelä | sn@neocite.com

  25. B C A Module 1: Introduction to digital media Golden section 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 ±0·61803 39887... and ±1·61803 39887... Sami Niemelä | sn@neocite.com

  26. Module 1: Introduction to digital media Golden section 8 13 http://www.textism.com/bucket/fib.html http://www.textism.com/bucket/fibsquare.html Sami Niemelä | sn@neocite.com

  27. Module 1: Introduction to digital media Golden section: architecture Sami Niemelä | sn@neocite.com

  28. Module 1: Introduction to digital media Golden section:art Seurat Sami Niemelä | sn@neocite.com

  29. Module 1: Introduction to digital media Golden section: art Seurat Leonardo's unfinished canvas Saint Jerome Sami Niemelä | sn@neocite.com

  30. Module 1: Introduction to digital media Golden section: art Seurat Leonardo's unfinished canvas Saint Jerome Sami Niemelä | sn@neocite.com

  31. Module 1: Introduction to digital media FIN Seurat Sami Niemelä | sn@neocite.com

More Related