“To design is much more than simply to assemble, to order, or even to edit; it is to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to dramatize, to persuade, and perhaps even to amuse.”
— Paul Rand
Typography is the design, selection, and placement of typefaces for communication
A font is a specific rendering (i.e. size, weight, style, etc.) of a typeface. This is the same relationship as a song to a mp3 file.
72 points = 1 inch
6 picas = 1 inch
12 points = 1 pica
Analyze the use of typography of (the responsively designed) microsoft.com and/or apple.com.
Consider the factors of typeface selections with regards to context (i.e. environment), legibility (i.e. for individual characters), and readability (i.e. for blocks of text).
Also be on the lookout for kerning (space between pairs of characters), tracking (spacing of multiple characters), and leading (spacing between lines).
Grouping similar or related elements on the screen can help viewers locate information most important to them.
The Gestalt laws of grouping are a set of principles in cognitive psychology, which attempt to account describe how people tend to organize visual elements into groups.
By segmenting a screen using invisible grid lines you can more easily both organize and present content. While sometimes subtle, the use of grids can also help content appear more refined in nature.
Visual hierarchy is the organization and prioritization of content in order to improve the communication of that content
PROJECT GROUP
Analyze the use of groups (Gestalt Laws), grids and visual hierarchy of your chosen open source/SFU community project
Gestalt Laws:
Additionally, further explore and analyze microsoft.com and/or apple.com.
Alignment refers to items on a page being lined up with each other
Primarily use only one type of alignment (e.g. left, right, centered) on a single page
While centered alignment easily provides visual balance, it is also less visually strong and can make multiple lines of text harder to read than other forms of alignment
Align horizontal elements, avoiding up/down/up/down situations, along an invisible baseline
Proximity refers to the relationships that can be communicated between items on a page, based on how close they are to each other
Place objects that have strong relationships with each other close to each other
Perform a ‘squint test’ to help gauge proximity effectiveness by closing one eye, and then squinting the other eye until the page is out of focus
Be careful of too many visual groups, or equal spacing everywhere with the result of no visual focal point
Repetition refers to the repeated use of particular design elements on a page, and also between pages
Reuse visual design elements (e.g. color, font, graphics, layout, etc.) to help communicate a sense of design unity
Contrast refers to how much visual difference there is between various items on a page
Use contrast to provide a visual hierarchy, and help guide the viewer’s eye around a page
If two items (fonts, graphics, etc.) are different then make them clearly visually distinct, otherwise make them identical
Use contrast to bring focus to the most important elements of a page. Again, a ‘squint test’ can help gauge contrast effectiveness
PROJECT GROUP
Review your chosen open source/SFU community project in relation to the following:
http://www.logodesignlove.com/next-logo-paul-rand
https://dwarfplanetpress.wordpress.com/2010/04/20/historical-classification-of-typefaces/
http://bonfx.com/bad-typography/
http://webdesignledger.com/21-inspiring-examples-of-typography-in-web-design/
https://dwarfplanetpress.wordpress.com/2010/04/20/historical-classification-of-typefaces/
http://bonfx.com/bad-typography/
http://webdesignledger.com/21-inspiring-examples-of-typography-in-web-design/
https://www.rockymountaintraining.com/basic-typography-terms/
https://designshack.net/articles/typography/8-simple-and-useful-tips-for-kerning-type/
https://webdesign.tutsplus.com/articles/understanding-typographic-hierarchy--webdesign-11636