rob design
TRANSCRIPT
![Page 1: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/1.jpg)
Layout & DesignLayout Techniques Designed to Get your Content Read
By Rob Drinkard
![Page 2: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/2.jpg)
Designers VS. Editors
![Page 3: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/3.jpg)
Why Design Matters
![Page 4: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/4.jpg)
![Page 5: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/5.jpg)
What Went Wrong?
Lack of compositional techniques
Poor Font Choices
Poor Typesetting
Visually Dense
![Page 6: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/6.jpg)
COMPOSITION
![Page 7: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/7.jpg)
Focal Point TextureContrastVisual Hierarchy
![Page 8: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/8.jpg)
Focal Point TextureContrastNo Visual Hierarchy
![Page 9: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/9.jpg)
Focal Point TextureContrastNo Visual Hierarchy
![Page 10: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/10.jpg)
Font ChoicesOld Style vs. Sans Serif
TypeOldstyle: Times New Roman
TypeSans Serif: ITC Stone Sans
Best for print Best for web
![Page 11: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/11.jpg)
Font ChoicesOld Style vs. Sans Serif
TypeOldstyle: Times New Roman
TypeModern: Didot
TypeSlab Serif: Rockwell
![Page 12: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/12.jpg)
Font ChoicesFont Sizes
All 32 pt fonts are equal
All 32 pt fonts are equal
All 32 pt fonts are equal
All 32 pt fonts are equal
All 32 pt fonts are equal
All 32 pt fonts are equal
All 32 pt fonts are equal
All 32 pt fonts are equal
All 32 pt fonts are equal
![Page 13: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/13.jpg)
Font ChoicesFont Sizes
For Print materials, start with a 10pt. Oldstyle font And adjust from there.
For Print materials, start with a 10pt. Oldstyle font And adjust from there.
![Page 14: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/14.jpg)
Font ChoicesStyling Issues
Reverse Type: Use for short cop situation sUse sans serif
Sans serifs fonts are easy to read
in reverse out type.
Sans serifs fonts are easy to read
in reverse out type.
Bad Emphasis: ALL CAPS ARE BEST RESERVED FOR A SMALL BLOCKS OF TEXT,SUCH AS SHORT HEADLINES.
The same applies to the use of all italics. Italics are particularly to read on the web.
Computer made underlining irrelevant
![Page 15: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/15.jpg)
Reduce visual density
Break up copy with
• Subheadings
• Bullet List
• Drop caps/images
Save the white space!
![Page 16: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/16.jpg)
Reduce visual density
Break up copy with
• Subheadings
• Bullet List
• Drop caps/images
Save the white space!
![Page 17: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/17.jpg)
Reduce visual density
Break up copy with
• Subheadings
• Bullet List
• Drop caps/images
Save the white space!
![Page 18: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/18.jpg)
![Page 19: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/19.jpg)
![Page 20: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/20.jpg)
Reduce visual density
Design in clusters
• Smaller, digestible bits of content
• To design in clusters, you must write in clusters
• Use grid structure
• Create columns
![Page 21: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/21.jpg)
Reduce visual density
Design in clusters
• Smaller, digestible bits of content
• To design in clusters, you must write in clusters
• Use grid structure
• Create columns
![Page 22: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/22.jpg)
![Page 23: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/23.jpg)
![Page 24: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/24.jpg)
![Page 25: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/25.jpg)
![Page 26: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/26.jpg)
The Art of Infographics
• Infographics can say it more quickly and effectively than copy
• Not all infographics are created equal
![Page 27: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/27.jpg)
![Page 28: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/28.jpg)
![Page 29: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/29.jpg)
![Page 30: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/30.jpg)
![Page 31: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/31.jpg)
![Page 32: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/32.jpg)
![Page 33: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/33.jpg)
Working Together
• Meet Early
• Discuss audience/needs
• Establish Budget
• Establish goals
• Bring examples to the table
• Creative brief
• Give designer clean copy/photos
![Page 34: Rob design](https://reader035.vdocuments.mx/reader035/viewer/2022062419/559187fd1a28abd24c8b4678/html5/thumbnails/34.jpg)
Working Together
Designers
• Be open, not defensive
• Listen. Really. Listen.
• Hear your gut reaction let it percolate
• Be willing to adapt. There’s Always another way
• Ask questions. Ask “Why”
Editors
• Start critique with a positive
• Hear your gut reaction let it percolate
• Define the issue. Don’t solve it
• Make your feedback useful. Be prepared to answer “why”
• Listen