Avoid the heartache of rushing to site buildout by following a step-by-step process that provides a clear path for website architecture and takes out the guess work.

1. *Amy Lamp, Design Director at Forty @amylamp
WEBSITE ARCHITECTURE:
sitemap &
wireframes

2. *Goals site architecture
During this workshop, we’ll:
• Understand the importance of website architecture
• Review what we learned in the strategy workshop
• Prepare for the architecture phase of the project
• Create a sitemap and wireframes

3. *
Understand

4. *Understand site architecture
What is a sitemap?
• show hierarchy Home
• group content
• visualize path Services About Blog Contact
Service Blog
detail detail

5. *Understand site architecture
What is a wireframe?
• content types
Header
• functionality
• relationships Feature
Promo
Article Article
Footer

6. *Understand site architecture
What is responsive design?*
Desktop view Mobile view
Header
Header
Feature
Feature
Article
Promo
Article Article Article
Promo
Footer
Footer
*In a nutshell

7. *
Review

8. *Review site architecture
What we want the site to do
Site goals How to measure success
aggregate current and relevant existing WordPress people progress from the easy lessons to advanced lessons
resources to provide new users the online learning materials (they come back, they absorbed the lessons, and they’re
needed to get past the steep learning curve and understand ready for something more advanced)
how to use WordPress to meet their needs
engage developers to identify problems with WordPress and developers are actively engaged in forums and chat room
share solutions with the learning community interviews, responding to beginner questions and offering
solutions.
strengthen the Arizona WordPress community track how many people sign up for the Meetup after visiting
the website
be easy to manage for the volunteers that are running the site site contributors are able to understand what they have to
do by having clear direction, have 4-6 days to implement the
content, and are able to fit it in during their free time

9. *Review site architecture
Success =
A website that can embed YouTube
videos so people can see the videos
right on the site.

10. *Review site architecture
Style keywords for look and feel
• transparent • authentic
• clean • official
• organized • beneficial
• contemporary • sophisticated
• expert • phenomenal
• accurate • desirable

11. *
Prepare

12. *Prepare site architecture
Design principles
goals + style keywords + values + concept
It’s about education.
We take care of our members.
It’s easy to find what you need.
It’s about the community.

13. *Prepare site architecture
Technical requirements
Genesis theme Sensei plugin

14. *Prepare site architecture
What beginners want
What they want Why they’ll come to our
How they’ll do it
to do site over others
learn how to use WordPress sign up for membership on the site it’s Arizona based
get details on the meetup watch videos there’s an in-person meetup as well
events
read articles it’s organized by topic or lesson
read meetup event materials
view meetup event details expert developer contributions
and files
download meetup materials and files
get answers to specific
WordPress questions visit the forum
see names and contact info view a business directory and sort by
for WordPress designers and designers and developers
developers
suggest topics for the meetup or website
get advice on existing themes
vote topics up and down based on interest
and relevance
ask questions in the chat room
view meetup suggestions

15. *Prepare site architecture
What advanced developers want
What they want Why they’ll come to our
How they’ll do it
to do site over others
tell new WordPress users respond to form and chat room questions it’s Arizona based
about their plugins
submit their company name to the
get leads on new business business directory
show expertise suggest topics to speak on at the meetup
generate interest in public- connect through WordUpAZ
speaking gigs
connect to the Arizona
WordPress community

16. *Prepare site architecture
What mid-level users want
What they want Why they’ll come to our
How they’ll do it
to do site over others
advance their knowledge of sign up for membership on the site it’s Arizona based
WordPress
watch videos there’s an in-person meetup as well
get details on the meetup
read articles it’s organized by topic or lesson
events
view meetup event details expert developer contributions
read meetup event materials
and files download meetup materials and files
get answers to specific visit the forum
WordPress questions
view a business directory and sort by
see names and contact info designers and developers
for WordPress designers and
developers suggest topics for the meetup or website
get advice on existing themes vote topics up and down based on interest
and relevance
learn how to customize a
theme ask questions in the chat room
connect with others at the view meetup suggestions
same skill level answer questions in the chat room and
forum
submit their story for a show and tell

17. *Prepare site architecture
What designers want
What they want Why they’ll come to our
How they’ll do it
to do site over others
find a developer sign up for membership on the site it’s Arizona based
learn how to design a watch videos there’s an in-person meetup as well
WordPress theme
read articles it’s organized by topic or lesson
learn about updates to
view meetup event details expert developer contributions
WordPress to improve design
solutions download meetup materials and files
learn how WordPress works visit the forum
get details on the meetup view a business directory and sort by
events designers and developers
read meetup event materials suggest topics for the meetup or website
and files
vote topics up and down based on interest
get answers to specific and relevance
WordPress questions
ask questions in the chat room
see names and contact info
for WordPress designers and view meetup suggestions
developers
get advice on existing themes

18. *Prepare site architecture
Content strategy
Planning, development, and management
of site content
• define the content elements
• define how often it’s published
• define the process of publishing content
• determine what standards will be used to judge it
• plan for who will manage the content

19. *Prepare site architecture
All content elements
Goal: provide Goal: engage Goal:
Type
learning Type developers strengthen
Type
materials forum link nav item AZ WordPress
lesson videos, articles, and Sensei chat room phase 2
community
quizzes plugin
meetup event details page content
submit business to page
lesson plans Sensei directory content, business directory page content
plugin form
show and tell submission page content,
vote topics up and down function
form form
based on interest and
relevance meetup suggestions page content
recorded meetup videos post topic/speaking suggestion page content,
content form for meetup or website form
guest articles post membership signup Sensei plugin
content
contact AZ WP group page content,
form
about AZ WP group page content
social media links nav items

20. *Prepare site architecture
Published content plan
Standards Who
How often Process
used manages
Curricula
-videos
-quizzes
-articles
Meetup recordings
Guest blog posts

21. *
Create

22. *Create
*Prepare
site architecture
All content elemen
ts
Goal: provide
learning Goal: engage
Type developers Type Strengthen
materials
AZ WordPress
lesson videos, articl
es, and
forum link
nav item community Type
quizzes Sensei
chat room
phase 2 meetup event detai
lesson plans ls page
Sensei submit business to
directory page content
vote topics up and content
down function business directory
based on interest and
Group content
page
relevance content
recorded meetup video show and tell subm
ission page
s blog form
content content
guest articles meetup suggestion
s page
blog
content content
topic/speaking sugge
form for meetup or stion page
website content
membership signu
p Sensei
contact AZ WP group
page
content
about AZ WP group
page
content
social media links
nav items
Primary Secondary Footer
navigation navigation • Meetup
• Learn a topic • Login/Sign up • Directory
• Forum • Contact
• Blog • Social media links
• Business directory • About

23. *Create
*Prepare
site architecture
All content elemen
ts
Goal: provide
learning Goal: engage
Type developers Type Strengthen
materials
AZ WordPress
lesson videos, articl
es, and
forum link
nav item community Type
quizzes Sensei
chat room
phase 2 meetup event detai
lesson plans ls page
Sensei submit business to
directory page content
vote topics up and content
down function business directory
based on interest and
Group content
page
relevance content
recorded meetup video show and tell subm
ission page
s blog form
content content
guest articles meetup suggestion
s page
blog
content content
topic/speaking sugge
form for meetup or stion page
website content
membership signu
p Sensei
contact AZ WP group
page
content
about AZ WP group
page
content
social media links
nav items
Learn a topic Meetup Blog
• » Sensei plugin • Videos of meetups • Articles
• Event details • Archives
• Show and Tell
About submission form
• Information about • Meetup suggestions Contact
Meetup • Topic/speaking
• Information about suggestions
site Business directory

24. *Create site architecture
Sitemap
activity!

25. *Create site architecture
Page description diagrams
Page: Meetup Project: Date: Version:
• Videos of meetups Page description diagram: Meetup page
High Priority: These features are vital to a user’s Medium Priority: The site should include these Low Priority: These features are useful, but not vital
understanding of the fundamental concept and goals features to function well and provide for the majority to the user’s operation or understanding of the site.
• Event details
of the site. of a user’s needs.
Content element A Content element D Content element F
• Show and Tell Content element B Content element E Content element G
submission form Content element C Content element H
• Meetup suggestions
• Topic/speaking
suggestions
Note: the priorities of these items will inform the visual design as well as the position and sizing of the elements when developing for responsiveness.

26. *Create site architecture
PDD
activity!

27. *Create site architecture
Internal and home page wireframes
• consider number of page types
• use page description diagram to inform
• consider responsive formatting

28. *Create site architecture
Wireframes
activity!