teaching typography interactively - d'source
TRANSCRIPT
1
Interaction Design | Degree Project 2 | Teaching Typography Interactively
Guide: Prof. Ravi PoovaiahNeha Jain | 116330005 | Interaction Design
Teaching TypographyInteractivelyIndustrial Design Centre | IIT Bombay Design Project 2
Content
Teaching Typography Interactively | Neha Jain
- Project Timeline
- The Problem
- User Personas
- Content Study
- User Task Analysis
- Customising Content
- User Study & Insights
- Artefacts Collection
- Secondary Research
- Scope for Design Intervention
- Design Brief & Project Goals
- Ideation
- Initial Post-testing & Insights
- Redefined Project Goals
- Four Quadrant Model
- Final Solution
- Prototype
- Post-testing
- Results & Insights
- Acknowledgement
- References
Teaching Typography Interactively | Neha Jain
Typography- Basic Course contents
Typographic Principles and concepts
Letter Based
Anatomy
Base Line
Cap Line
x-height
Measuring units
Point Size
Picas
m & n space
Parts
Terminal
Finial
Bowl
Stem
Spine
Cross Bar
Counter
Ascender
Descender
Serif
Types Of Serifs
Slab
Bracketed
Hairline
Upper Case
Lower Case
Cap Height
Small Caps
Numbers
Old style Modern Figures
Types of Typefaces
Style Based
Serif
Sans Serif
Script
Roman
Humanistic
Geometric
Blackletter/ Gothis/ Old School
Outline
Shadow
Graphic
Dingbats
Weight Based
Bold
Italics
Oblique
Regular
Light
Condensed
Black
Extended
Principles concerned with usage
Grid Based
Single column
Two Column
Three Column
Modular Grid
Gutter Space
Newspaper layout
Paragraph Based
Alignment
Left
Right
Center
Justified
Hypos/Hyphenation
Widow
Orphan
River
Bubble
Indents
Line Breaks
Drop Caps
Standing Caps
Line based
Leading Set Width
Word Based
Kerning
Tracking
Types of Typefaces
Use Based
Web Fonts
Hinting/ Anti-aliasing
Print Faces
Text
Display Face
Post Script
Bitmap Fonts
Technology Based
TTF
OTF
Web Safe Fonts
Font Embedding
Italics V/s Oblique
Typeface V/s Font
Legibility V/s Readability
X height in Newspapers V/s that in Novels
Text V/s Display Face
Print V/s Screen Fonts
Teaching Typography Interactively | Neha Jain
Initial User Studies
User Studies 2
Artefact collection
Content Analysis
Persona Identification
User Task Analysis
Ideation
Initial Post-testing
Four Quadrant Method
Final Concept- Typeaid
Typeaid Prototyping
Post-testing
Redefining ObjectivesSecondary Research
Customising Content
JULY AUGUST SEPTEMBER OCTOBER NOVEMBER
Typeaid GUI Ideation
Typeaid Wireframes
Teaching Typography Interactively | Neha Jain
The Problem
- Increasing and widespread use of computers to create documents,
spreadsheets, presentations etc.
- No knowledge of the existence of typography.
- Ample examples of bad typography.
- Learning from currently available resources is difficult due to jargon
infused language and lack of examples.
Teaching Typography Interactively | Neha Jain
User PersonasPE
RSON
A 1 PERS
ONA 2
- Uses the computer to make documents, spreadsheets, presentations, resumes, etc.
- Doesn’t know about the existence of typography.
- More of a default features user
The Unaware user- Uses the computer to make documents, spreadsheets, presentations, resumes, designs posters, logos, might even have a blog, etc.
- Knows about the existence of typography but doesn’t use it consciously.
- Uses different fonts and layouts.
The Unconscious user
Teaching Typography Interactively | Neha Jain
PERS
ONA 3
- Uses the computer to make documents, spreadsheets, presentations, resumes, all kinds of designs for different mediums using different software, might have a blog, etc.
- Has been trained in the use of typography.
- Is a full-fledged user of various aspects of typography.
The Trained user
PERS
ONA 4- Can be doing any or all of the tasks from the previous three users.
- Knows that Typography exists,but has limited or no knowledge of it.
- Wants to learn more about Typography and hence is actively seeking a means or source to learn from.
The Knowledge Seeker
Teaching Typography Interactively | Neha Jain
Content Analysis- Referred books, studied course ware, spoke to teachers and
practising professionals.
Teaching Typography Interactively | Neha Jain
Typography- Basic Course contents
Typographic Principles and concepts
Letter Based
Anatomy
Base Line
Cap Line
x-height
Measuring units
Point Size
Picas
m & n space
Parts
Terminal
Finial
Bowl
Stem
Spine
Cross Bar
Counter
Ascender
Descender
Serif
Types Of Serifs
Slab
Bracketed
Hairline
Upper Case
Lower Case
Cap Height
Small Caps
Numbers
Old style Modern Figures
Types of Typefaces
Style Based
Serif
Sans Serif
Script
Roman
Humanistic
Geometric
Blackletter/ Gothic/ Old School
Outline
Shadow
Graphic
Dingbats
Weight Based
Bold
Italics
Oblique
Regular
Light
Condensed
Black
Extended
Principles concerned with usage
Grid Based
Single column
Two Column
Three Column
Modular Grid
Gutter Space
Newspaper layout
Paragraph Based
Alignment
Left
Right
Centre
Justified
Hypos/Hyphenation
Widow
Orphan
River
Bubble
Indents
Line Breaks
Drop Caps
Standing Caps
Line based
Leading Set Width
Word Based
Kerning
Tracking
Types of Typefaces
Use Based
Web Fonts
Hinting/ Anti-aliasing
Print Faces
Text
Display Face
Post Script
Bitmap Fonts
Technology Based
TTF
OTF
Web Safe Fonts
Font Embedding
Italics V/s Oblique
Typeface V/s Font
Legibility V/s Readability
X height in Newspapers V/s that in Novels
Text V/s Display Face
Print V/s Screen Fonts
Teaching Typography Interactively | Neha Jain
Creating Documents
MakingResumes
Working with spreadsheets
Making Presentations
Casual poster design
DesigningLogos
Blogging
User Task Analysis
Teaching Typography Interactively | Neha Jain
Typography- Basic Course contents
Typographic Principles and concepts
Letter Based
Anatomy
Base Line
Cap Line
x-height
Measuring units
Point Size
Picas
m & n space
Parts
Terminal
Finial
Bowl
Stem
Spine
Cross Bar
Counter
Ascender
Descender
Serif
Types Of Serifs
Slab
Bracketed
Hairline
Upper Case
Lower Case
Cap Height
Small Caps
Numbers
Old style Modern Figures
Types of Typefaces
Style Based
Serif
Sans Serif
Script
Roman
Humanistic
Geometric
Blackletter/ Gothis/ Old School
Outline
Shadow
Graphic
Dingbats
Weight Based
Bold
Italics
Oblique
Regular
Light
Condensed
Black
Extended
Principles concerned with usage
Grid Based
Single column
Two Column
Three Column
Modular Grid
Gutter Space
Newspaper layout
Paragraph Based
Alignment
Left
Right
Center
Justified
Hypos/Hyphenation
Widow
Orphan
River
Bubble
Indents
Line Breaks
Drop Caps
Standing Caps
Line based
Leading Set Width
Word Based
Kerning
Tracking
Types of Typefaces
Use Based
Web Fonts
Hinting/ Anti-aliasing
Print Faces
Text
Display Face
Post Script
Bitmap Fonts
Technology Based
TTF
OTF
Web Safe Fonts
Font Embedding
Italics V/s Oblique
Typeface V/s Font
Legibility V/s Readability
X height in Newspapers V/s that in Novels
Text V/s Display Face
Print V/s Screen Fonts
Tailored content based on tasks performed by users
Teaching Typography Interactively | Neha Jain
User Study
Teaching Typography Interactively | Neha Jain
Insights from User Study
- The users do perform tasks on the computer and use various softwares
- Concepts like Upper case/ Lower case, Bold, Italics, Line spacing,
Super & Sub script, Paragraph Alignment, Justified text, etc. are familiar
to the user. This is because the software he is using has all these features.
- All the other concepts were mostly unknown to the user or they had
a vague idea about it.
Teaching Typography Interactively | Neha Jain
Artefact Collection
Teaching Typography Interactively | Neha Jain
Secondary Research
Teaching Typography Interactively | Neha Jain
Secondary Research
Teaching Typography Interactively | Neha Jain
Secondary Research- Indian Scene
Teaching Typography Interactively | Neha Jain
Scope for Design Intervention
Not for Novices
StaticInformation
Difficult Language
Too muchDetails
Non Task Based
No one-stop
Resource
No IndianContext
Teaching Typography Interactively | Neha Jain
Design Brief
To design an easy and interactive meansto make people aware of typography andhelp them use it more consciously.
Teaching Typography Interactively | Neha Jain
Project Objectives
Quick and Short
SimpleInteractive
Teaching Typography Interactively | Neha Jain
Ideation
Teaching Typography Interactively | Neha Jain
Teaching Typography Interactively | Neha Jain
Initial Post- testing
Teaching Typography Interactively | Neha Jain
Initial Post- testing- Insights- “Do I need to read all of this ?”
- There should be more exercises
- Real life situations and comparisons worked better.
- Instructions were not clear
- “Now how do I go back?”
- No approach worked
- Less interactive
- Lacked examples
Teaching Typography Interactively | Neha Jain
Interactive
Completethe learning
cycle
Quick andShort
Simple
Freedom inthe way of
learning
Examples
VisualImprovement
Redefined Project Goals
Teaching Typography Interactively | Neha Jain
Four Quadrant Model
- Developed by CDAC Noida
- Defines the features of the content of the module
- Helps in deciding the type of learner interaction
Teaching Typography Interactively | Neha Jain
Derived Four Quadrant Model
Quadrant 1: Demonstration
Quadrant 2: Interactive exploration
Quadrant 3: Questions &puzzles
Quadrant 4: Feedback & Examples
- The four quadrants of Demonstration, Interactive Exploration, Questions &
puzzles and Feedback & Examples helps in completing the learning cycle.
- All the quadrants are used in different combinations depending on the
concept that is being taught.
Teaching Typography Interactively | Neha Jain
Final SolutionType Aid- Salient Features
- Online e-learning module.
- HTML 5
- Responsive and scalable design
- Free to access and use
- Always available
- Quick and contains only relevant information
- Required examples and interactivity
Teaching Typography Interactively | Neha Jain
Prototype
Teaching Typography Interactively | Neha Jain
Teaching Typography Interactively | Neha Jain
Categorise the fonts by pinning them to the correct board>>
SUBMIT
SERIF TYPEFACE
AaTimes New RomanAaTimes New Roman
SANS SERIF TYPEFACE
AaFutura
AaGaramond
AaCalibri
Teaching Typography Interactively | Neha Jain
Wow! You identified all the serif and sans serif typefaces correctly.
i
CORRECT ANSWERS100%
SERIF TYPEFACE
AaTimes New RomanAaTimes New Roman
SANS SERIF TYPEFACE
AaFutura
AaGaramond
AaCalibri
Teaching Typography Interactively | Neha Jain
Post-testingEvaluation Method
- Set content is given to the user
- Slide for a presentation from that content
- Registering the module
- Changes
- Informal chat asking feedback
- The initial and the later output is compared
- Effectiveness is determined by comparing output
Teaching Typography Interactively | Neha Jain
Post-testingUser 1 (Unaware user)
Widow
Default Font: no though given
Line length is too long
No visual hierarchy
Line spacing
Teaching Typography Interactively | Neha Jain
Post-testingUser 1 (Unaware user)
Font is consciously selected
Visual Hierarchy in both
layout and text colour
No orphans
Line size is reduced, though
it might not be ideal
Will fly in the end
Teaching Typography Interactively | Neha Jain
Post-testingUser 2 (Unaware user)
Default Font: no though givenLine spacingNo visual hierarchy
Teaching Typography Interactively | Neha Jain
Post-testingUser 2 (Unaware user)
Made bold for hierarchy
Use of a serif and sans serif font in a combinationSerif font for the body text
Line spacing modified for clarity
Left Alignment is used throughout
Teaching Typography Interactively | Neha Jain
Post-testingUser 3 (Unaware user)
Default font
Line spacing issues
Teaching Typography Interactively | Neha Jain
Post-testingUser 3 (Unaware user)
Different font for headline and body text
Colour is changed to show importance
Aligned with the body text
Line spacing is improved
Bullet size is reduced
Teaching Typography Interactively | Neha Jain
Post-testingUser 4 (Unaware user)
No visual hierarchy
Too long line length
No breathing space
Teaching Typography Interactively | Neha Jain
Post-testingUser 4 (Unaware user)
Breathing space added
Line length was reduced
Bullet size reduced
Teaching Typography Interactively | Neha Jain
Post- testing- Insights- “Can you please give me your this presentation ?”
- “ It held my attention even after being a dry subject”
- “It was nostalgic because you keep doing these functions
but don't know the theory behind it”
- The content page is the most confusing
- “How to do I find out which font is made for screen?”
- “This has come at the right time, my APS is in January”
- “I might perform better if I have more time to read and understand it”
- “Which is this font?”
- “Why don’t these links work?”
Teaching Typography Interactively | Neha Jain
Acknowledgements
- My guide Prof. Ravi Poovaiah for his guidance and support.
- All the users who participated in the user study as well as the post-testing.
- Prof. G.V.Sreekumar, Prof. Pramod Khambete, Prof. Anirudha Joshi & Prof. Satyamangal Rege for their valuable inputs.
- Sarang & Noopur Kulkarni for their critical views. - Naveed Ahmed for making the prototype possible
- Nanki Nath, Rahul Shenoy, Meera Devrahi Singh, Jyothi Akula for their constant support.
- My family and friends.
Teaching Typography Interactively | Neha Jain
Resources AcknowledgementSoftware & tools- Adobe Creative Suite
- Microsoft Office
- Keynote
- X-mind and Daigramly(Online)
Fonts- Bree Serif for headlines by Veronika Burian and José Scaglione.
- Merriweather for text by Eben Sorkin
- Panefresco by Chank Diesel for Typo Aid
- www.fontsquirrel.com
Textures, Vectors & Images - www.flickr.com
- www.typegear.com
- www.note.salen.com
- www. vecteezy .com
- www.gestureworks.com
- ww.allfreedownload.com
Teaching Typography Interactively | Neha Jain
References
Online- www.wikipedia.org
- www.ilovetypography.com
- www.typophile.com
- www.linotype.com
- www.youtube.com
- www.smashingmagazine.com
- www.typeissexy.com
- http://www.tothepoint.co.uk/more/fun/shoot_the_serif/
- www.handmadefont.com
- http://type.method.ac/
- http://www.fonts.com/content/learning/fontology/glossary
- www.aksharaya.org
- www.d’source.com
- www.indiantypefoundry.com
- www.thatzit.com
Books- The fundamentals of Typography : Galvin Ambrose & Paul Harris
- Elements of Typographic style: Robert Bringhurst
- Thinking with type: Ellen Lupton
- Basic Typography- A Design Manual: James Craig
- The education of a Typographer: Steven Heller
- Ten commandments of Typography: Paul Felton
- Stop stealing sheep & find out how
type works: Erik Spiekerman & E.M.Ginger
- www.facebook.com
- www.twitter.com
- www.typographyserved.com
- www.behance.com
- www.welovetypography.com
- Apple app store
- Android App Market
- Windows Marketplace
- www. shakshat.com
- www.ey.com
- Lakshmi Kalyani, V.K.Sharma. Standardized e-Learning Content
Development based on Four Quadrant Model. Paper, CDAC, Noida,
India, ASCNT-2011,Pages 3-5.
Teaching Typography Interactively | Neha Jain
Which is the typographer favorite hotel in Las Vegas?
“The Sans”
THANK YOU!