INtroduction
Chelsea Larsson
&
V. Srivastava
to
An
with
How to navigate
Sections go across, content goes down
Welcome
You are at the best party
Day one
Day two
12pm - 3pm CT
12pm - 3pm CT
Welcome
The basics
Mechanics
Welcome
Mapping
Meaning
Be here now
Questions?
#workshop-intro-questions
What's your fave sandwich?
#workshop-intro-studyhall
Mechanics
Mapping
Meaning
Mechanics
Mapping
Meaning
Basics
The basics
what is content design and why do we need it?
#workshop-intro-studyhall
The principled use of language and design to guide humans through a user experience.
Content Strategy Information Architecture User Experience User Interface Accessibility Search Engine Optimization Analytics Metadata Wireframes User Flow Prototyping Copywriting Microcontent Usability Testing Responsive Design Interaction Design Conversion Rate Optimization Visual Design Mockup Sitemap Typography Persona Navigation Design Content Management System Web Development Graphic Design Brand Voice Listicle Infographics Navigation Readability Video Content Interactive Content Podcasting E-books Webinars Social Media Content Viral Content Static Content Dynamic Content User-Centered Design Call to Action Landing Page Content Marketing Audience Segmentation Digital Strategy Hyperlink Multimedia HTML CSS JavaScript Mobile-First Design User Research Content Audit Keyword Research Meta Tags Information Design Web Design Text Editor Brainstorming Iteration A/B Testing Front-End Development Back-End Development Visual Hierarchy Images Photos Icons CTAs Buttons Grids Widgets Headers Footers Sidebars Pop-Ups Forms Links Galleries Menus Sliders Breadcrumbs Tables Lists Frames Read
Tools or Software
we won't be talking about
Technique and mindset
Instead let's talk
Mechanics
Mapping
Meaning
Break time
Don't forget to hydrate today
Mechanics
Heading
Subheading
Subheading
Description or body copy. Sometimes you'll see "Lorem ipsum" as a placeholder and it looks like Latin text: "dolor sit amet, consectetur adipiscing elit, sed do eiusmod" and so forth
Description text
a.k.a body copy
Call to action
Label
Call to action
The words you write are often called "strings"
Hover to see categories
Add to cart
Add to carter
New
Ugly sweater
The one you don't need
Hot sweater
The one you must have
New arrivals
We have searched high and low for the most unique pieces to add to your wardrobe. Browse our selection below and buy stuff. Buy all of it.
Label
Newer
Let's write
some strings
#workshop-intro-studyhall
Heading
Subheading
You're being asked to write the text here
Let's write
some strings
#workshop-intro-studyhall
Slack
Notion
Google docs
What's a tooltip?
GRI™ Key drivers
grikeydrivers.ninja
This tag cloud gives you a quick and visual way to identify the key drivers that are affecting your GRI. The larger the word the higher the volume of reviews, the darker the green the more positive the rating, the darker the red the more negative the rating and the darker the orange the higher end of the neutral scale the rating is. Each word is clickable and will take you directly to the detalls of that particular driver.
This tooltip is a little too long.
Let's write
a tooltip
#workshop-intro-studyhall
20 minute Group activity
Turn on your camera
Introduce yourself
Choose a presenter
Discussion
You will be asked to solve "Canaries"
Break time
We'll see you real soon.
Mechanics
Lightning Round
Lightning Round
Principles
Style guide
Voice
Partners
Consistent
Cohesive
Clear
-
Principles • Style guides • Partners • Voice and tonE
Consistent
Cohesive
Clear
Standards
Use the active voice
Terminology
“Website” instead of “web page”
Grammar
No periods ever
Voice and tone
Be "phunky" but not funky
-
Principles • Style guides • Partners • Voice and tonE
-
Principles • Style guides • Partners • Voice and tonE
UX Designer
Product manager
Software engineer
Localization
Marketing
-
Principles • Style guides • Partners • Voice and tonE
The user
UX Designer
Product manager
Software engineer
Localization
Marketing
-
Principles • Style guides • Partners • Voice and tonE
Voice comes from practice
-
Principles • Style guides • Partners • Voice and tonE
Howdy Partners, it's a darn-tootin pleasure to meet you at this here training!
Watch yourself, Partner. I don't like the looks of these here exercises -- make a run for it before these city slickers put us to work!
Same voice
Different tone
HomeworK
Questions
-
See you tomorrow at 12pm CT
-
Check #workshop-intro-studyhall for today's materials
INtroduction
Chelsea Larsson
&
V. Srivastava
content design
to
An
with
Day one
Day two
12pm - 3pm CT
12pm - 3pm CT
Welcome
The basics
Mechanics
Welcome
Mapping
Meaning
HomeworK
What does practicing
content design
mean to you?
What does practicing
content design
mean to you?
Mapping
All writing is to guide
Experience maps
Concept maps
Experience maps
The how and when
User journey flow
Source: Miro
Wireframes
Source: Figma
Content docs
Source: The unforgettable Andrea Drugay on Medium, "How to improve your design process with copy docs"
wot's the diff?
#workshop-intro-studyhall
Map an Experience
Your Typical Morning
WAKE UP
BATHROOM
WORK OUT
HAVE
EXISTENTIAL
CRISIS
Discussion
CONTENT DOC • COD TNEtNOC
Reverse map
Discussion
Break time
Breaks are conducive to learning and snacks.
Concept maps
The what and why
Example of a concept map
Ontology
Taxonomy
Information architecture
Ontology
What are these things? How are they related?
Ontology
fructus magna
Legumen aureum
Glaucus extranaturalis
Pomum rubrum
Radix magniloquens
Pomum russtellaris
Pullus deliciosus
Amplus radix
Scientific names act as a placeholder
Ontology
3 days
7 days
7 days
48 days
12 days
3 days
5 days
9 days
Ripening time in days relates the items to one another
Ontology
3 days
48 days
12 days
3 days
9 days
7 days
7 days
5 days
Shorter
Longer
Diving things into groups helps us make sense of them
Taxonomy
Organic, local
Organic, not-local
Trash
Groups is how we form taxonomies
Sweet
Sour
Spicy
Information architecture
Making it make sense to the user
New
On sale
Organic
-
Mechanics
-
Mapping
-
Experience maps
-
Concept maps
-
Ontology
-
Taxonomy
-
Information architecture
-
-
Recap
-
-
Secret pop quiz
-
Meaning
Name that map
#workshop-intro-studyhall
A) Content doc
B) Information architecture
3) User journey
What kind of concept map is an org chart?
What kind of experience map is this?
Source: Smashing Magazine
Explain like I'm five (ELI5)
Get on the mic
Questions
Break time
Grab five books (or five somewhat related objects with words on them)
Book sort
Divide them in two categories
Sort them by size or length
Order them so that their titles make a story
Meaning
7-38-55
HYGGE
Moving beyond words
Stories are how words enable understanding
roll your own story
-
A character who wants something
-
Some conflict in that character's way
-
A setting where this conflict happens
-
A resolution to the tension created by conflict
Story share
#workshop-intro-studyhall
Journey to the realm of meaning
INtroduction
Chelsea Larsson
&
V. Srivastava
content design
to
An
with