Your SlideShare is downloading. ×
0
DESIGNING
INTELLIGENT
CONTENT
A writer’s guide
PATRICIA TOMPKINS
Senior Art Director, Sitewire
Programs Director, AIGA Arizona
NIKI BLAKER
Design Strategist, Forty
Presi...
HIER ARCHY
VISUAL Understanding
TYPE
COLOR
USING Choosing the
right image
FIRST,
AN
ASSUMPTION
Purpose
Goals
Audience
Voice & tone
VISUAL HIERARCHY
The basic principles are crap
01
LOOKING FOR LOVE
IN ALDERAAN PLACES
DESIGN PRINCIPLES
Contrast
Repetition
Alignment
Proximity
Game of Thrones
Drinking Game Rules
Sip
Joffrey acts like a scumbag
Jon Snow is called a bastard
Tyrion makes a quip
Someo...
CONTRAST
is what makes the reader look
at the page in the first place.
The bold and the beautiful.
GAME OF THRONES
Drinking Game Rules
SIP
Joffrey acts like a scumbag
Jon Snow is called a bastard
Tyrion makes a quip
Someo...
REPETITION
is the process of creating a
visual pattern that helps
unify your message.
Marcia, Marcia, Marcia!
GAME OF THRONES
Drinking Game Rules
								 SIP						
Joffrey acts like a scumbag
Jon Snow is call ed a bastard
Tyrion ma...
ALIGNMENT
connects the visual elements
together, creating an invisible
line of cohesiveness.
From lawful good to chaotic e...
GAME OF THRONES
Drinking Game Rules
SIP																
Joffrey acts like a scumbag
Jon Snow is call ed a bastard
Tyrion m...
PROXIMITY
creates visual unity in
elements that are related to
each other.
He’s nice, bit of a close talker.
GAME OF THRONES
Drinking Game Rules
SIP		 														
Joffrey acts like a scumbag
Jon Snow is call ed a bastard
Tyrion ...
Game of Thrones
Drinking Game Rules
Sip
Joffrey acts like a scumbag
Jon Snow is called a bastard
Tyrion makes a quip
Someo...
GAME OF THRONES
Drinking Game Rules
SIP		 														
Joffrey acts like a scumbag
Jon Snow is call ed a bastard
Tyrion ...
RECR
AP
By creating bold contrast, using repetition, and
organizing your content through alignment
and proximity, you crea...
TYPE
MATCH-MAKING
Designing long-lasting relationships
02
WHAT’S YOUR TYPE?
In order to determine your
perfect typographic match,
you must first consider your
communication goals.
Who’s your
audience?
What’s the brand
personality?
What’s your
message?
How many
content types?
Headline/Title
Visual
Message
Other
Information
Subheadline
Date
READABILITY
How easy it is to read words,
phrases, and blocks of copy
If you really want to hear about it, the first thing you’ll probably
want to know is where I was born, an what my lousy ch...
Letterspacing
L e t t e r s p a c i n g
Word spacing
Word spacing
&
Kerning
Tracking
Line length LeadingAKA LINE SPACING
If you really want to hear about it, the first thing you’ll probably
want to know is w...
SIMPLICITY
How easy it is to focus on and
interpret messaging
VARIATION
How to combine fonts in
an appropriate typographic
expression of brand personality
Opposites
ATTRACT
Likes
Repell
A casual case
A screaming scale
A worthy weight
RECAP
Well-designed type considers the overall
communication goals, takes into consideration
the brand personality and tho...
USING COLOR
The amazing color wheel
03
Primary colors
Secondary colors
Tertiary colors
Complementary
Complementary
These pretzels
are making me
thirsty.
Triads
Triads
Triads
Triads
These pretzels
are making me
thirsty.
Analogous
Analogous
These pretzels
are making me
thirsty.
Tints
Shades
Tones
Monochromatic
These pretzels
are making me
thirsty.
Complementary
These pretzels
are making me
thirsty.
Complementary
These pretzels
are making me
thirsty.
BEHOLD,
THE COLOR
SPECTRUM
Better than a double rainbow.
With 16.8 million choices
Where do you even start?
CHOOSING YOUR
COLORS
Color groups and meanings
Using the color picker
Color palette tools
Warm tones
Cool tones
Neutrals
COLOR MEANINGS
Optimism Energy Action
Trust Growth Wisdom
in Western culture
SERENITY
NOW!
I am looser than creamed corn.
The perfect retreat
for your fall vacation.
VISIT
NEW
ENGLAND
on a scenic Alaskan cruise.
SAIL AWAY
Tools of the trade
kuler.adobe.com
Tools of the trade
kuler.adobe.com
Tools of the trade
colourlovers.com
RECAP
By understanding the basics of color theory
and how colors work together, you can then
incorporate other factors suc...
PHOTOGRAPHIC
STORYTELLING
A picture is worth a thousand words
04
It is so nice when you can sit with
someone and not have to talk.
- Harry Burns
EVERY IMAGE
SHOULD...
Visually support written content
Encompass the broader message
Contain a primary focus, while
provid...
Our milk is “farm to store fresh.”
For example:
OR
Who says burgers can’t be fancy?
For example:
OR
This summer, protect your family
by using sunscreen.
For example:
OR
THEY FINISH EACH
OTHER’S SENTENCES
When choosing images to compliment copy, look
for visual stories that support written c...
A SIDE NOTE
ON STOCK
When choosing stock images, try to avoid generic,
overused or overly-simplified subjects and
compositions. There is nothin...
PUTTING IT ALL
TOGETHER
The design principles of visual heirarchy along with the
understanding of color, type, and image m...
Thank you
Designing Intelligent Content: A Writer's Guide
Designing Intelligent Content: A Writer's Guide
Designing Intelligent Content: A Writer's Guide
Designing Intelligent Content: A Writer's Guide
Designing Intelligent Content: A Writer's Guide
Designing Intelligent Content: A Writer's Guide
Designing Intelligent Content: A Writer's Guide
Designing Intelligent Content: A Writer's Guide
Designing Intelligent Content: A Writer's Guide
Upcoming SlideShare
Loading in...5
×

Designing Intelligent Content: A Writer's Guide

13,112

Published on

Content is so much more than text. We all know that. But for most of us, visual design isn’t our first language. In this presentation, you’ll learn how to support your content with great visual design when you don’t have the time or ability to work in tandem with a design strategist.

Designed and presented by Niki Blaker and Patricia Tompkins.

----------------

Additional resources:
Adobe Kuler color wheel: https://kuler.adobe.com/create/color-wheel
Colour Lovers: http://www.colourlovers.com
The Non-Designer's Design Book by Robin Williams: http://amzn.to/RNlv7r
Thinking with Type by Ellen Lupton: http://amzn.to/1jEfTqS


Published in: Design, Entertainment & Humor
12 Comments
216 Likes
Statistics
Notes
No Downloads
Views
Total Views
13,112
On Slideshare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
4,512
Comments
12
Likes
216
Embeds 0
No embeds

No notes for slide

Transcript of "Designing Intelligent Content: A Writer's Guide"

  1. 1. DESIGNING INTELLIGENT CONTENT A writer’s guide
  2. 2. PATRICIA TOMPKINS Senior Art Director, Sitewire Programs Director, AIGA Arizona NIKI BLAKER Design Strategist, Forty President, AIGA Arizona A little bit about us
  3. 3. HIER ARCHY VISUAL Understanding TYPE COLOR USING Choosing the right image
  4. 4. FIRST, AN ASSUMPTION Purpose Goals Audience Voice & tone
  5. 5. VISUAL HIERARCHY The basic principles are crap 01
  6. 6. LOOKING FOR LOVE IN ALDERAAN PLACES
  7. 7. DESIGN PRINCIPLES Contrast Repetition Alignment Proximity
  8. 8. Game of Thrones Drinking Game Rules Sip Joffrey acts like a scumbag Jon Snow is called a bastard Tyrion makes a quip Someone makes a toast Shot Someone claims X to be the true King Khaleesi is referred to the “Mother of Dragons” The Iron Throne is mentioned Gratuitious sex or nudity
  9. 9. CONTRAST is what makes the reader look at the page in the first place. The bold and the beautiful.
  10. 10. GAME OF THRONES Drinking Game Rules SIP Joffrey acts like a scumbag Jon Snow is called a bastard Tyrion makes a quip Someone makes a toast SHOT Someone claims X to be the true King Khaleesi is referred to the “Mother of Dragons” The Iron Throne is mentioned Gratuitious sex or nudity
  11. 11. REPETITION is the process of creating a visual pattern that helps unify your message. Marcia, Marcia, Marcia!
  12. 12. GAME OF THRONES Drinking Game Rules SIP Joffrey acts like a scumbag Jon Snow is call ed a bastard Tyrion makes a quip Someone makes a toast SHOT Someone claims X to be the true King Khaleesi is referred to the “Mother of Dragons” The Iron Throne is mentioned Gratuitious sex or nudity
  13. 13. ALIGNMENT connects the visual elements together, creating an invisible line of cohesiveness. From lawful good to chaotic evil.
  14. 14. GAME OF THRONES Drinking Game Rules SIP Joffrey acts like a scumbag Jon Snow is call ed a bastard Tyrion makes a quip Someone makes a toast SHOT Someone claims X to be the true King Khaleesi is referred to the “Mother of Dragons” The Iron Throne is mentioned Gratuitious sex or nudity Someone gets killed
  15. 15. PROXIMITY creates visual unity in elements that are related to each other. He’s nice, bit of a close talker.
  16. 16. GAME OF THRONES Drinking Game Rules SIP Joffrey acts like a scumbag Jon Snow is call ed a bastard Tyrion makes a quip Someone makes a toast SHOT Someone claims X to be the true King Khaleesi is referred to the “Mother of Dragons” The Iron Throne is mentioned Gratuitious sex or nudity
  17. 17. Game of Thrones Drinking Game Rules Sip Joffrey acts like a scumbag Jon Snow is called a bastard Tyrion makes a quip Someone makes a toast Shot Someone claims X to be the true King Khaleesi is referred to the “Mother of Dragons” The Iron Throne is mentioned Gratuitious sex or nudity
  18. 18. GAME OF THRONES Drinking Game Rules SIP Joffrey acts like a scumbag Jon Snow is call ed a bastard Tyrion makes a quip Someone makes a toast SHOT Someone claims X to be the true King Khaleesi is referred to the “Mother of Dragons” The Iron Throne is mentioned Gratuitious sex or nudity
  19. 19. RECR AP By creating bold contrast, using repetition, and organizing your content through alignment and proximity, you create a visual heiarchy that guides the reader through their experience.
  20. 20. TYPE MATCH-MAKING Designing long-lasting relationships 02
  21. 21. WHAT’S YOUR TYPE? In order to determine your perfect typographic match, you must first consider your communication goals.
  22. 22. Who’s your audience?
  23. 23. What’s the brand personality?
  24. 24. What’s your message?
  25. 25. How many content types?
  26. 26. Headline/Title Visual Message Other Information Subheadline Date
  27. 27. READABILITY How easy it is to read words, phrases, and blocks of copy
  28. 28. If you really want to hear about it, the first thing you’ll probably want to know is where I was born, an what my lousy childhood was like, and how my parents were occupied and all before they had me, and all that David Copperfield kind of crap, but I don’t feel like going into it, if you want to know the truth. In the first place, that stuff bores me, and in the second place, my parents would have about two hemorrhages apiece if I told anything pret- ty personal about them. They’re quite touchy about anything like that, especially my father. They’re nice and all--I’m not saying that--but they’re also touchy as hell. Besides, I’m not going to tell you my whole goddam autobiography or anything. I’ll just tell you about this madman stuff that happened to me around last Christ- mas just before I got pretty run-down and had to come out here and take it easy. I mean that’s all I told D.B. about, and he’s my broth- er and all. He’s in Hollywood. That isn’t too far from this crumby place, and he comes over and visits me practically every week end. He’s going to drive me home when I go home next month may- be. He just got a Jaguar. One of those little English jobs that can do around two hundred miles an hour. It cost him damn near four thousand bucks. He’s got a lot of dough, now. He didn’t use to. He used to be just a regular writer, when he was home. He wrote this terrific book of short stories, The Secret Goldfish, in case you nev- er heard of him. The best one in it was “The Secret Goldfish.” It was about this little kid that wouldn’t let anybody look at his gold- fish because he’d bought it with his own money. It killed me. Now he’s out in Hollywood, D.B., being a prostitute. If there’s one thing If you really want to hear about it, the first thing you’ll prob- ably want to know is where I was born, an what my lousy childhood was like, and how my parents were occupied and all before they had me, and all that David Copperfield kind of crap, but I don’t feel like going into it, if you want to know the truth. In the first place, that stuff bores me, and in the sec- ond place, my parents would have about two hemorrhages apiece if I told anything pretty personal about them. They’re quite touchy about anything like that, especially my father. They’re nice and all--I’m not saying that--but they’re also touchy as hell. Besides, I’m not going to tell you my whole goddam autobiography or anything. I’ll just tell you about this madman stuff that happened to me around last Christmas just before I got pretty run-down and had to come out here and take it easy. I mean that’s all I told D.B. about, and he’s my brother and all. He’s in Hollywood. That isn’t too far from this crumby place, and he comes over and visits me prac- tically every week end. He’s going to drive me home when I go home next month maybe. He just got a Jaguar. One of those little English jobs that can do around two hundred miles an hour. It cost him damn near four thousand bucks. He’s got a lot of dough, now. He didn’t use to. He used to be just a regular writer, when he was home. He wrote this terrific book of short stories, The Secret Goldfish, in case you never heard of him. The best one in it was “The Secret Goldfish.” It was about this little kid that wouldn’t let anybody look at his VS Serif Sans-serif
  29. 29. Letterspacing L e t t e r s p a c i n g Word spacing Word spacing & Kerning Tracking
  30. 30. Line length LeadingAKA LINE SPACING If you really want to hear about it, the first thing you’ll probably want to know is where I was born, an what my lousy childhood was like, and how my parents were occupied and all before they had me, and all that David Copperfield kind of crap, but I don’t feel like going into it, if you want to know the truth. In the first place, that stuff bores me, and in the second place, my parents would have about two hemorrhages apiece if I told anything pret- ty personal about them. They’re quite touchy about anything like that, especially my father. They’re nice and all--I’m not saying If you really want to hear about it, the first thing you’ll prob- ably want to know is where I was born, an what my lousy childhood was like, and how my parents were occupied and all before they had me, and all that David Copperfield kind of crap, but I don’t feel like go- ing into it, if you want to know the truth. In the first place, that stuff bores me, and in the sec- ond place, my parents would have about two hemorrhages apiece if I told anything pretty personal about them. They’re quite touchy about anything like that, especially my father. If you really want to hear about it, the first thing you’ll probably want to know is where I was born, an what my lousy childhood was like, and how my parents were occupied and all before they had me, and all that David Copperfield kind of crap, but I don’t feel like going into it, if you want to know the truth. In the first place, that stuff bores me, and in the second place, my parents would have about two hemorrhages apiece if I told anything pret- If you really want to hear about it, the first thing you’ll probably want to know is where I was born, an what my lousy childhood was like, and how my parents were occupied and all before they had me, and all that David Copperfield kind of crap, but I don’t feel like going into it, if you want to know the truth. In the first place, that stuff bores me, and in the second place, my parents would have about two hemorrhages apiece if I told anything pret- ty personal about them. They’re quite touchy about anything like that, especially my father. They’re nice and all--I’m not saying &
  31. 31. SIMPLICITY How easy it is to focus on and interpret messaging
  32. 32. VARIATION How to combine fonts in an appropriate typographic expression of brand personality
  33. 33. Opposites ATTRACT Likes Repell
  34. 34. A casual case
  35. 35. A screaming scale
  36. 36. A worthy weight
  37. 37. RECAP Well-designed type considers the overall communication goals, takes into consideration the brand personality and thoughtfully utilizes appropriate typographic treatments to convey meaning.
  38. 38. USING COLOR The amazing color wheel 03
  39. 39. Primary colors
  40. 40. Secondary colors
  41. 41. Tertiary colors
  42. 42. Complementary
  43. 43. Complementary These pretzels are making me thirsty.
  44. 44. Triads
  45. 45. Triads
  46. 46. Triads
  47. 47. Triads These pretzels are making me thirsty.
  48. 48. Analogous
  49. 49. Analogous These pretzels are making me thirsty.
  50. 50. Tints
  51. 51. Shades
  52. 52. Tones
  53. 53. Monochromatic These pretzels are making me thirsty.
  54. 54. Complementary These pretzels are making me thirsty.
  55. 55. Complementary These pretzels are making me thirsty.
  56. 56. BEHOLD, THE COLOR SPECTRUM Better than a double rainbow.
  57. 57. With 16.8 million choices Where do you even start?
  58. 58. CHOOSING YOUR COLORS Color groups and meanings Using the color picker Color palette tools
  59. 59. Warm tones
  60. 60. Cool tones
  61. 61. Neutrals
  62. 62. COLOR MEANINGS Optimism Energy Action Trust Growth Wisdom in Western culture
  63. 63. SERENITY NOW!
  64. 64. I am looser than creamed corn.
  65. 65. The perfect retreat for your fall vacation. VISIT NEW ENGLAND
  66. 66. on a scenic Alaskan cruise. SAIL AWAY
  67. 67. Tools of the trade kuler.adobe.com
  68. 68. Tools of the trade kuler.adobe.com
  69. 69. Tools of the trade colourlovers.com
  70. 70. RECAP By understanding the basics of color theory and how colors work together, you can then incorporate other factors such as your audience, mood, branding and imagery to create your ideal color palette.
  71. 71. PHOTOGRAPHIC STORYTELLING A picture is worth a thousand words 04
  72. 72. It is so nice when you can sit with someone and not have to talk. - Harry Burns
  73. 73. EVERY IMAGE SHOULD... Visually support written content Encompass the broader message Contain a primary focus, while providing useful context 01 02 03
  74. 74. Our milk is “farm to store fresh.” For example:
  75. 75. OR
  76. 76. Who says burgers can’t be fancy? For example:
  77. 77. OR
  78. 78. This summer, protect your family by using sunscreen. For example:
  79. 79. OR
  80. 80. THEY FINISH EACH OTHER’S SENTENCES When choosing images to compliment copy, look for visual stories that support written content, encompass the broader message, and contain a primary focus, while providing useful context.
  81. 81. A SIDE NOTE ON STOCK
  82. 82. When choosing stock images, try to avoid generic, overused or overly-simplified subjects and compositions. There is nothing more damaging to user engagement than publishing interesting copy paired with boring visuals.
  83. 83. PUTTING IT ALL TOGETHER The design principles of visual heirarchy along with the understanding of color, type, and image match-making, will help support the voice and tone of your message, connect with your audience, and achieve your clients’ goals to create one complete, holistic experience.
  84. 84. Thank you
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×