Upload
amy-lamp
View
1.664
Download
3
Embed Size (px)
DESCRIPTION
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.
Citation preview
WEBSITE ARCHITECTURE:
sitemap & wireframes
*Amy Lamp, Design Director at Forty @amylamp
*Goals site architecture
• 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
During this workshop, we’ll:
*Understand
*Understand site architecture
• show hierarchy
• group content
• visualize path
What is a sitemap?
Home
About Blog ContactServices
Servicedetail
Blogdetail
*Understand site architecture
• content types
• functionality
• relationships
What is a wireframe?
Header
Footer
Feature
Promo
Article Article
*Understand site architecture
What is responsive design?*
*In a nutshell
Header
Footer
Feature
Promo
Article Article
Header
Footer
Feature
Promo
Article
Article
Desktop view Mobile view
*Review
*Review site architecture
Site goals How to measure success
aggregate current and relevant existing WordPress resources to provide new users the online learning materials needed to get past the steep learning curve and understand how to use WordPress to meet their needs
people progress from the easy lessons to advanced lessons (they come back, they absorbed the lessons, and they’re ready for something more advanced)
engage developers to identify problems with WordPress and share solutions with the learning community
developers are actively engaged in forums and chat room 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
What we want the site to do
*Review site architecture
Success = A website that can embed YouTube videos so people can see the videos right on the site.
*Review site architecture
• transparent
• clean
• organized
• contemporary
• expert
• accurate
• authentic
• official
• beneficial
• sophisticated
• phenomenal
• desirable
Style keywords for look and feel
*Prepare
*Prepare site architecture
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.
Design principles
*Prepare site architecture
Technical requirements
Genesis theme Sensei plugin
*Prepare site architecture
What beginners want
What they want to do How they’ll do it Why they’ll come to our
site over others
learn how to use WordPress
get details on the meetup events
read meetup event materials and files
get answers to specific WordPress questions
see names and contact info for WordPress designers and developers
get advice on existing themes
sign up for membership on the site
watch videos
read articles
view meetup event details
download meetup materials and files
visit the forum
view a business directory and sort by designers and developers
suggest topics for the meetup or website
vote topics up and down based on interest and relevance
ask questions in the chat room
view meetup suggestions
it’s Arizona based
there’s an in-person meetup as well
it’s organized by topic or lesson
expert developer contributions
*Prepare site architecture
What they want to do How they’ll do it Why they’ll come to our
site over others
tell new WordPress users about their plugins
get leads on new business
show expertise
generate interest in public-speaking gigs
connect to the Arizona WordPress community
respond to form and chat room questions
submit their company name to the business directory
suggest topics to speak on at the meetup
connect through WordUpAZ
it’s Arizona based
What advanced developers want
*Prepare site architecture
What mid-level users want
What they want to do How they’ll do it Why they’ll come to our
site over others
advance their knowledge of WordPress
get details on the meetup events
read meetup event materials and files
get answers to specific WordPress questions
see names and contact info for WordPress designers and developers
get advice on existing themes
learn how to customize a theme
connect with others at the same skill level
sign up for membership on the site
watch videos
read articles
view meetup event details
download meetup materials and files
visit the forum
view a business directory and sort by designers and developers
suggest topics for the meetup or website
vote topics up and down based on interest and relevance
ask questions in the chat room
view meetup suggestions
answer questions in the chat room and forum
submit their story for a show and tell
it’s Arizona based
there’s an in-person meetup as well
it’s organized by topic or lesson
expert developer contributions
*Prepare site architecture
What they want to do How they’ll do it Why they’ll come to our
site over others
find a developer
learn how to design a WordPress theme
learn about updates to WordPress to improve design solutions
learn how WordPress works
get details on the meetup events
read meetup event materials and files
get answers to specific WordPress questions
see names and contact info for WordPress designers and developers
get advice on existing themes
sign up for membership on the site
watch videos
read articles
view meetup event details
download meetup materials and files
visit the forum
view a business directory and sort by designers and developers
suggest topics for the meetup or website
vote topics up and down based on interest and relevance
ask questions in the chat room
view meetup suggestions
it’s Arizona based
there’s an in-person meetup as well
it’s organized by topic or lesson
expert developer contributions
What designers want
*Prepare site architecture
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
Content strategy
*Prepare site architecture
All content elements
Goal: provide learning materials
Type
lesson videos, articles, and quizzes
Sensei plugin
lesson plans Sensei plugin
vote topics up and down based on interest and relevance
function
recorded meetup videos post content
guest articles post content
Goal: engage developers Type
forum link nav item
chat room phase 2
submit business to directory
page content, form
Goal: strengthen AZ WordPress community
Type
meetup event details page content
business directory page content
show and tell submission form
page content, form
meetup suggestions page content
topic/speaking suggestion form for meetup or website
page content, form
membership signup Sensei plugin
contact AZ WP group page content, form
about AZ WP group page content
social media links nav items
*Prepare site architecture
How often Process Standards used
Who manages
Curricula
-videos
-quizzes
-articles
Meetup recordings
Guest blog posts
Published content plan
*Create
*Create site architecture
Primary navigation• Learn a topic• Forum• Blog• Business directory
Secondary navigation• Login/Sign up
Footer• Meetup• Directory• Contact• Social media links• About
Group content
*Prepare
All content elementsGoal: provide learning materials
Type
lesson videos, articles, and quizzes Sensei
lesson plans Sensei vote topics up and down based on interest and relevance
function
recorded meetup videos blog content
guest articles blog content
Goal: engage developers Typeforum link nav itemchat room phase 2submit business to directory page
content
Strengthen AZ WordPress community
Type
meetup event details page content
business directory page content
show and tell submission form page content
meetup suggestions page content
topic/speaking suggestion form for meetup or websitepage content
membership signup Senseicontact AZ WP group page
contentabout AZ WP group page
contentsocial media links nav items
*Create site architecture
Learn a topic• » Sensei plugin
About• Information about
Meetup• Information about
site
Meetup• Videos of meetups• Event details• Show and Tell
submission form• Meetup suggestions• Topic/speaking
suggestions
Blog• Articles• Archives
Contact
Business directory
Group content
*Prepare
All content elementsGoal: provide learning materials
Type
lesson videos, articles, and quizzes Sensei
lesson plans Sensei vote topics up and down based on interest and relevance
function
recorded meetup videos blog content
guest articles blog content
Goal: engage developers Typeforum link nav itemchat room phase 2submit business to directory page
content
Strengthen AZ WordPress community
Type
meetup event details page content
business directory page content
show and tell submission form page content
meetup suggestions page content
topic/speaking suggestion form for meetup or websitepage content
membership signup Senseicontact AZ WP group page
contentabout AZ WP group page
contentsocial media links nav items
*Create site architecture
Sitemap activity!
*Create site architecture
Page: Meetup• Videos of meetups• Event details• Show and Tell
submission form• Meetup suggestions• Topic/speaking
suggestions
Page description diagrams
Page description diagram: Meetup pageHigh Priority: These features are vital to a user’s understanding of the fundamental concept and goals of the site.
Medium Priority: The site should include these features to function well and provide for the majority of a user’s needs.
Low Priority: These features are useful, but not vital to the user’s operation or understanding of the site.
Content element A Content element D Content element F
Content element B Content element E Content element G
Content element C Content element H
Project: Date: Version:
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.
*Create site architecture
PDD activity!
*Create site architecture
• consider number of page types
• use page description diagram to inform
• consider responsive formatting
Internal and home page wireframes
*Create site architecture
Wireframes activity!