Website Architecture: Sitemap & Wireframes
25 likes6,182 views
The document outlines the process for developing website architecture for a WordPress community platform, focusing on creating a sitemap and wireframes. It addresses the needs of different user types, including beginners, mid-level users, and advanced developers, detailing their desired features and content. The workshop aims to categorize and define content elements, establish publication standards, and ensure the site is user-friendly and responsive.
Website Architecture: Sitemap & Wireframes
- 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!