website architecture: sitemap & wireframes

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


• content types

• functionality

• relationships

What is a wireframe?

Header

Footer

Feature

Promo

Article Article


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


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


• 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


Technical requirements

Genesis theme Sensei plugin


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



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


What advanced developers want


What mid-level users want


site over others

advance their knowledge of WordPress






learn how to customize a theme

connect with others at the same skill level


watch videos

read articles



visit the forum






answer questions in the chat room and forum

submit their story for a show and tell







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







watch videos

read articles



visit the forum










What designers want


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


All content elements

Goal: provide learning materials

Type

lesson videos, articles, and quizzes

Sensei plugin

lesson plans Sensei plugin


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


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



show and tell submission form 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


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



show and tell submission form 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


Sitemap activity!


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.


PDD activity!


• consider number of page types

• use page description diagram to inform

• consider responsive formatting

Internal and home page wireframes


Wireframes activity!

website architecture: sitemap & wireframes

Technology