SlideShare a Scribd company logo
CAD!
Content Architecture Document
By: Dara Pressley
May 5, 2017
Page 2/25
What is a CAD
1.
Content
Architecture
Design (CAD)
Page 3/25
The CAD
• is how the database is developed
• describes how to create shareable content
• provides content specifications
A Content Management System
allows for the ultimate flexibility for
publishing your content. Content
Architecture Document is the
specification to help make that
happen.
Page 4/25
The task of creating
the CAD cannot
happen in a Silo.
Teams should
collaborate together
to assure that the
architecture is strong.
Page 5/25
A recipe for a database
• A recipe fits into nice recognizable parts:
title, description, ingredients, prep and
cook time.
• Parsing the information correctly into the
CMS can create a rich experience on the
site
⁃ Grocery list can be created from the
ingredients
⁃ Titles and images can be used to create
modules on other pages to drive traffic
⁃ Layouts can be changed for printing or
device optimization
Page 6/25
Adding the meta-data
• Tags can be created to drive faceted search
• Categories help to create related recipe links
Page 7/25
Properly structured
content allows content to
be shared easily with
other pages and tools
included in meal plan
search results
twitter
Sharable content
Page 8/25
Authored
Sta+c
Dynamic
Information architecture
The Architect has to think about
how the information moves
through the site
• What content is authored on the page
• Where dynamic content comes from
• What content is static to the template
Page 9/25
Style: Fun
Character: 40
Type: H1
Style: Fun
Character: 180
Type: Text
Content specifications
Specfications
indicate voice and
tone as well as
governace rules
Page 10/25
What is this?
The CAD lets us agree
on the nomenclature
that we will use
• Feature
• Hero
• Banner
• Spotlight
• Oasis
Is it a:
Nomenclature
Page 11/25
Preparing for
the CAD
2.
Page 12/25
Before you begin building
Audience Is it Living?
Ideally, both developers and
content authors will share the
document. However, be
prepared to create a “light”
version that can be used for
just for authors.
Using an online tool, like a wiki,
will allow for easier
collaboration, updating, and
linking between items than a
static PDF.
Page 13/25
The example I will be showing
on in the next section shows
the base requirements for the
CAD, and is designed to be CMS
generic.
Page 14/25
Building the
CAD
3.
Page 15/25
The CAD is divided into sections
• Wireframes
• Page Layouts
• Components
• Global Schema
• Glossary
Page 16/25
What do you need to capture
Page 17/25
Different projects have different needs for the type of information
they need to capture.
The type of CMS used may also require different information.
Also, functional specifications can be added so that the CAD is the
only deliverable — instead of both CAD and Specs.
However, if content author’s are part of the audience, that can be
overwhelming.
Wireframes
Wireframes define the structure or regions of
the CMS template.
The CAD contents both an index page of
wireframe thumbnails and a detail page.
It’s good list list the page
layouts that use this
template.
01- Home
04 - Right Rail 05 - Left Rail 06- Blog
03 - Fullwidth B02 - Fullwidth A
A - Header
1 - Hero
2 - Page Body
3 - Sidebar
5 - Footer
Blog
Gallery
Meal Plans
Regions Page Layouts
A
1
2 3
B
A
1
2
3
B
Page 18/25
Page Layouts
The page layout shows an
example of a page and the
components that would be used
in each region.
Any page level properties or
custom logic would show here as
well.
Layout Name:
Template:
Jira Ticket:
Blog
Template 06
ES - 300
1
2 3
ID
1
2
3
Region
Hero
Page Body
Sidebar
Component
Hero Image
Hero Text
Gallery
Shopping Link
Social Sharing
Featured Chef
Paired Drinks
Linking to your ticketing
system can help with
development tracking
Page 19/25
Components
The component section identifies
field level information for each
component.
• Annotated image with markers
for each field.
• Component level meta data
• Field level properties
⁃ (next slide)
1
2
Component Name Gallery
Template Template 06
Jira Ticket ES-304
Page 20/25
Components (Gallery)
ID Field Name Field Type Authored Required Content Specs Container/Schema Is Searchable Comments
A Gallery Gallery ItemMulti-valued Dynamic Yes
ID Field Name Field Type Authored Required Content Specs Container/Schema Is Searchable Comments
1
2
Gallery
Image
Gallery
Text
Recipe: Image
Recipe: Title
Recipe URL
Link Schema
Image
Link Text
Dynamic
Dynamic
Yes
Yes
Gallery
Gallery Item
Page 21/25
Components (Recipe)
ID Field Name Field Type Authored Required Content Specs Container/Schema Is Searchable Comments
1 Title Character: 160H1 Authored Yes Yes
3 Description Rich Text Authored Yes Yes
6 Save “Save this recipe” Recipe: Title
Schema: Link Text
Text Link Dynamic Yes
7 Add to List “Add recipe to
shopping list”
Recipe: Ingredients
Schema: Link Text
Text Link Dynamic Yes
8 Prep Time Input in minutesInteger Authored Yes
9 Cook Time Input in minutesInteger Authored Yes
10 Serving Size Integer Authored Yes
11 Ingredients
Label
“Ingredients”Text Static Yes
12 Ingredients Array Authored Yes List needs to be written in a
way that information can be
parsed for shopping list.
Also, links to other recipes
needs to be available
13 Directions Rich Text Authored Yes
14 Category Multi-valued Authored Yes Schema: Categories Author selects from list
15 Tags Multi-valued Authored Yes Schema: Tags
Author selects from list.
Author can add new.
16 Short Description Text Authored Yes Character: 120 Used for social sharing
2 Image Image Authored Yes image fits to
100% of
container
4 Allergens
Label
“Free of:”Text Static No If there aren’t any
allergens, field does not
display
5 Allergens Schema: AllergensMulti-valued Authored No Author selects from listYes
Page 22/25
Schemas
Schemas are created for often
used field groups. For
example, link text or
categories.
Using the schema assures that the author is
including the right information each time they
use one of these fields.
All global schemas can be listed on one page in
the CAD
Schema Name Link Text
Description Used to create links
Root element name link_name
Schema Type
Field Name Description Field Type Required Multi-value
url URL link Text Yes No
text Text of link Text Yes No
alt Alternative text Text Yes No
Content Schema
Schema Name Allergen
Description Used to show whether an allergen is in or is absent
Root element name allergens
Schema Type
Field Name Description Field Type Required Multi-value
id Number of allergen Integer Yes No
name Name to display Text Yes No
icon Icon to display Icon Yes No
include Indicates that
allergen is present
Toggle Yes No
Taxonomy Schema
Page 23/25
Glossary
The last section of the CAD is
the glossary.
There are two types of glossaries:
1. The CAD glossary identifies the meaning of the CAD based terminology.
2. The glossary of terms specifies nomenclature for the particular project.
Page 24/25
Thanks!
Any questions?
You can find me on twitter: @uxdiva

More Related Content

PPT
Chase.com Content Management Presentation
PPT
PPT
Getting Started with CSS
PPT
Working with Images
PPT
Getting Started with your Website
PPT
Working with Links
PPTX
Moss introduction-session02
PPT
Structure Web Content
Chase.com Content Management Presentation
Getting Started with CSS
Working with Images
Getting Started with your Website
Working with Links
Moss introduction-session02
Structure Web Content

What's hot (15)

PPT
Ofc216 Shah German Webcms
DOCX
Oracle apex course content
PPT
Testing and Improving Performance
PPT
Social media and your website
PPT
web development
PPT
Schaeflein Dev409 Enterprise Branding Using Site Definitions
PPTX
4 Ways to Merge IBM i Data with Microsoft Excel
PPTX
Visual Studio2010
PPT
Xml Publisher
DOCX
SharePoint 2013 for Administrators and IT Pro's
PPTX
Microsoft FrontPage PPT
PPTX
Business Connectivity Services (BCS) for Developers
PPTX
SharePoint Lists and Libraries Configuration
PDF
Business Interfaces using Virtual Objects, Visual-Force Forms and JavaScript
PPTX
Ordina SOFTC Presentation - Developing against SharePoint 2010 Lists
Ofc216 Shah German Webcms
Oracle apex course content
Testing and Improving Performance
Social media and your website
web development
Schaeflein Dev409 Enterprise Branding Using Site Definitions
4 Ways to Merge IBM i Data with Microsoft Excel
Visual Studio2010
Xml Publisher
SharePoint 2013 for Administrators and IT Pro's
Microsoft FrontPage PPT
Business Connectivity Services (BCS) for Developers
SharePoint Lists and Libraries Configuration
Business Interfaces using Virtual Objects, Visual-Force Forms and JavaScript
Ordina SOFTC Presentation - Developing against SharePoint 2010 Lists
Ad

Similar to Content Architecture (20)

PPS
You Can Take Your HAT Off
PPT
Html & CSS - Best practices 2-hour-workshop
PDF
Denver ACE September 2019 6Kites Confluence Presentation
PPT
Design And Documentation
PPTX
Modernising AEM Sites Codebase (AEM Meetup 2019)
DOC
Intermediate Web Design.doc
DOC
Intermediate Web Design.doc
PPTX
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptx
PPT
3) web development
PPTX
What is Wordpress | What is HTML | Wordpress vs HTML
PPTX
web development presentation computer science
PPTX
AWS Architecture Icons - Dark mode. Use AWS icons today!
PPTX
Microsoft dynamics ax 2012 development introduction part 1/3
PDF
What is Wordpress | What is HTML | Wordpress vs HTML
PDF
What is Wordpress | What is HTML | Wordpress vs HTML
PDF
CSS Interview Questions for Fresher and Experience
PDF
Adobe Experience Manager Core Components
PPTX
Your Intranet, Your Way
PPT
A quick guide to Css and java script
PPTX
What is Wordpress | What is HTML | Wordpress vs HTML
You Can Take Your HAT Off
Html & CSS - Best practices 2-hour-workshop
Denver ACE September 2019 6Kites Confluence Presentation
Design And Documentation
Modernising AEM Sites Codebase (AEM Meetup 2019)
Intermediate Web Design.doc
Intermediate Web Design.doc
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptx
3) web development
What is Wordpress | What is HTML | Wordpress vs HTML
web development presentation computer science
AWS Architecture Icons - Dark mode. Use AWS icons today!
Microsoft dynamics ax 2012 development introduction part 1/3
What is Wordpress | What is HTML | Wordpress vs HTML
What is Wordpress | What is HTML | Wordpress vs HTML
CSS Interview Questions for Fresher and Experience
Adobe Experience Manager Core Components
Your Intranet, Your Way
A quick guide to Css and java script
What is Wordpress | What is HTML | Wordpress vs HTML
Ad

More from Dara Pressley (7)

PDF
Sketch and the Magic Mirror
PDF
Persona Pathways
PDF
Sketching in code
PDF
The Living Style Guide: How CustomInk created a their new ux lead style guide
PDF
The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014
PDF
Persona storytelling
KEY
Responsive Design, Adapted
Sketch and the Magic Mirror
Persona Pathways
Sketching in code
The Living Style Guide: How CustomInk created a their new ux lead style guide
The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014
Persona storytelling
Responsive Design, Adapted

Recently uploaded (20)

PPTX
UNIT III - GRAPHICS AND AUDIO FOR MOBILE
PPT
EthicsNotesSTUDENTCOPYfghhnmncssssx sjsjsj
PPTX
Acoustics new a better way to learn sound science
PDF
analisis snsistem etnga ahrfahfffffffffffffffffffff
PPTX
Evolution_of_Computing_Presentation (1).pptx
PPTX
Necrosgwjskdnbsjdmdndmkdndndnmdndndkdmdndkdkndmdmis.pptx
PPTX
ENG4-Q2-W5-PPT (1).pptx nhdedhhehejjedheh
PPTX
22CDO02-IMGD-UNIT-I-MOBILE GAME DESIGN PROCESS
PDF
321 LIBRARY DESIGN.pdf43354445t6556t5656
PDF
How Animation is Used by Sports Teams and Leagues
PPTX
22CDH01-V3-UNIT-I INTRODUCITON TO EXTENDED REALITY
PDF
Trends That Shape Graphic Design Services
PDF
The Basics of Presentation Design eBook by VerdanaBold
PPTX
Acoustics new for. Sound insulation and absorber
PPT
Fire_electrical_safety community 08.ppt
PDF
GSH-Vicky1-Complete-Plans on Housing.pdf
PPTX
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
PPTX
Presentation.pptx anemia in pregnancy in
PDF
Social Media USAGE .............................................................
PPTX
UI UX Elective Course S1 Sistem Informasi RPS.pptx
UNIT III - GRAPHICS AND AUDIO FOR MOBILE
EthicsNotesSTUDENTCOPYfghhnmncssssx sjsjsj
Acoustics new a better way to learn sound science
analisis snsistem etnga ahrfahfffffffffffffffffffff
Evolution_of_Computing_Presentation (1).pptx
Necrosgwjskdnbsjdmdndmkdndndnmdndndkdmdndkdkndmdmis.pptx
ENG4-Q2-W5-PPT (1).pptx nhdedhhehejjedheh
22CDO02-IMGD-UNIT-I-MOBILE GAME DESIGN PROCESS
321 LIBRARY DESIGN.pdf43354445t6556t5656
How Animation is Used by Sports Teams and Leagues
22CDH01-V3-UNIT-I INTRODUCITON TO EXTENDED REALITY
Trends That Shape Graphic Design Services
The Basics of Presentation Design eBook by VerdanaBold
Acoustics new for. Sound insulation and absorber
Fire_electrical_safety community 08.ppt
GSH-Vicky1-Complete-Plans on Housing.pdf
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
Presentation.pptx anemia in pregnancy in
Social Media USAGE .............................................................
UI UX Elective Course S1 Sistem Informasi RPS.pptx

Content Architecture

  • 1. CAD! Content Architecture Document By: Dara Pressley May 5, 2017
  • 2. Page 2/25 What is a CAD 1. Content Architecture Design (CAD)
  • 3. Page 3/25 The CAD • is how the database is developed • describes how to create shareable content • provides content specifications
  • 4. A Content Management System allows for the ultimate flexibility for publishing your content. Content Architecture Document is the specification to help make that happen. Page 4/25
  • 5. The task of creating the CAD cannot happen in a Silo. Teams should collaborate together to assure that the architecture is strong. Page 5/25
  • 6. A recipe for a database • A recipe fits into nice recognizable parts: title, description, ingredients, prep and cook time. • Parsing the information correctly into the CMS can create a rich experience on the site ⁃ Grocery list can be created from the ingredients ⁃ Titles and images can be used to create modules on other pages to drive traffic ⁃ Layouts can be changed for printing or device optimization Page 6/25
  • 7. Adding the meta-data • Tags can be created to drive faceted search • Categories help to create related recipe links Page 7/25
  • 8. Properly structured content allows content to be shared easily with other pages and tools included in meal plan search results twitter Sharable content Page 8/25
  • 9. Authored Sta+c Dynamic Information architecture The Architect has to think about how the information moves through the site • What content is authored on the page • Where dynamic content comes from • What content is static to the template Page 9/25
  • 10. Style: Fun Character: 40 Type: H1 Style: Fun Character: 180 Type: Text Content specifications Specfications indicate voice and tone as well as governace rules Page 10/25
  • 11. What is this? The CAD lets us agree on the nomenclature that we will use • Feature • Hero • Banner • Spotlight • Oasis Is it a: Nomenclature Page 11/25
  • 13. Before you begin building Audience Is it Living? Ideally, both developers and content authors will share the document. However, be prepared to create a “light” version that can be used for just for authors. Using an online tool, like a wiki, will allow for easier collaboration, updating, and linking between items than a static PDF. Page 13/25
  • 14. The example I will be showing on in the next section shows the base requirements for the CAD, and is designed to be CMS generic. Page 14/25
  • 16. The CAD is divided into sections • Wireframes • Page Layouts • Components • Global Schema • Glossary Page 16/25
  • 17. What do you need to capture Page 17/25 Different projects have different needs for the type of information they need to capture. The type of CMS used may also require different information. Also, functional specifications can be added so that the CAD is the only deliverable — instead of both CAD and Specs. However, if content author’s are part of the audience, that can be overwhelming.
  • 18. Wireframes Wireframes define the structure or regions of the CMS template. The CAD contents both an index page of wireframe thumbnails and a detail page. It’s good list list the page layouts that use this template. 01- Home 04 - Right Rail 05 - Left Rail 06- Blog 03 - Fullwidth B02 - Fullwidth A A - Header 1 - Hero 2 - Page Body 3 - Sidebar 5 - Footer Blog Gallery Meal Plans Regions Page Layouts A 1 2 3 B A 1 2 3 B Page 18/25
  • 19. Page Layouts The page layout shows an example of a page and the components that would be used in each region. Any page level properties or custom logic would show here as well. Layout Name: Template: Jira Ticket: Blog Template 06 ES - 300 1 2 3 ID 1 2 3 Region Hero Page Body Sidebar Component Hero Image Hero Text Gallery Shopping Link Social Sharing Featured Chef Paired Drinks Linking to your ticketing system can help with development tracking Page 19/25
  • 20. Components The component section identifies field level information for each component. • Annotated image with markers for each field. • Component level meta data • Field level properties ⁃ (next slide) 1 2 Component Name Gallery Template Template 06 Jira Ticket ES-304 Page 20/25
  • 21. Components (Gallery) ID Field Name Field Type Authored Required Content Specs Container/Schema Is Searchable Comments A Gallery Gallery ItemMulti-valued Dynamic Yes ID Field Name Field Type Authored Required Content Specs Container/Schema Is Searchable Comments 1 2 Gallery Image Gallery Text Recipe: Image Recipe: Title Recipe URL Link Schema Image Link Text Dynamic Dynamic Yes Yes Gallery Gallery Item Page 21/25
  • 22. Components (Recipe) ID Field Name Field Type Authored Required Content Specs Container/Schema Is Searchable Comments 1 Title Character: 160H1 Authored Yes Yes 3 Description Rich Text Authored Yes Yes 6 Save “Save this recipe” Recipe: Title Schema: Link Text Text Link Dynamic Yes 7 Add to List “Add recipe to shopping list” Recipe: Ingredients Schema: Link Text Text Link Dynamic Yes 8 Prep Time Input in minutesInteger Authored Yes 9 Cook Time Input in minutesInteger Authored Yes 10 Serving Size Integer Authored Yes 11 Ingredients Label “Ingredients”Text Static Yes 12 Ingredients Array Authored Yes List needs to be written in a way that information can be parsed for shopping list. Also, links to other recipes needs to be available 13 Directions Rich Text Authored Yes 14 Category Multi-valued Authored Yes Schema: Categories Author selects from list 15 Tags Multi-valued Authored Yes Schema: Tags Author selects from list. Author can add new. 16 Short Description Text Authored Yes Character: 120 Used for social sharing 2 Image Image Authored Yes image fits to 100% of container 4 Allergens Label “Free of:”Text Static No If there aren’t any allergens, field does not display 5 Allergens Schema: AllergensMulti-valued Authored No Author selects from listYes Page 22/25
  • 23. Schemas Schemas are created for often used field groups. For example, link text or categories. Using the schema assures that the author is including the right information each time they use one of these fields. All global schemas can be listed on one page in the CAD Schema Name Link Text Description Used to create links Root element name link_name Schema Type Field Name Description Field Type Required Multi-value url URL link Text Yes No text Text of link Text Yes No alt Alternative text Text Yes No Content Schema Schema Name Allergen Description Used to show whether an allergen is in or is absent Root element name allergens Schema Type Field Name Description Field Type Required Multi-value id Number of allergen Integer Yes No name Name to display Text Yes No icon Icon to display Icon Yes No include Indicates that allergen is present Toggle Yes No Taxonomy Schema Page 23/25
  • 24. Glossary The last section of the CAD is the glossary. There are two types of glossaries: 1. The CAD glossary identifies the meaning of the CAD based terminology. 2. The glossary of terms specifies nomenclature for the particular project. Page 24/25
  • 25. Thanks! Any questions? You can find me on twitter: @uxdiva