1. WordPress website planning –
sitemaps, wireframes and
more
February 20, 2013
Jerusalem
By: Deena Levenstein
deena@illuminea.com
Follow us: facebook.com/illuminea
Follow us! facebook.com/illuminea
2. Me is Deena
• Deena Levenstein,
BSc (in nutrition?!)
• From Canada, ay?
• Web planning and
project
management @
illuminea
• deena.co – I’m the
next big writer!
(You proud,
Kimanzi?)
Follow us! facebook.com/illuminea
3. OK, so first of all…
.
Man plans and God laughs.
Or is it the client who laughs?
Follow us! facebook.com/illuminea
4. How illuminea works – then and now
CUSTOM WEBSITE
DEVELOPMENT PROJECTS
Follow us! facebook.com/illuminea
5. The way we used to work
• Plan
• Proposal
• Plan
• Design
• Plan
• Development
• Plan
• QA
• Launch
Follow us! facebook.com/illuminea
7. Custom site projects – the rules
Differentiate between non-billable and
billable work.
Differentiate between work within the scope
and work outside of it.
Don’t let stages overlap with each other.
Always be open to improving the process.
Follow us! facebook.com/illuminea
8. Custom site projects – the stages
• Planning
• Design
• Development
• QA
• Training
• Launch
• Support
Follow us! facebook.com/illuminea
10. Examples of initial questions
Questions like:
• 1-3 ideas for a tagline
• Do you already have a website?
• What will be the domain of the new site?
• Do you have social media profiles?
• Do you have or will you want a newsletter
signup form?
• The primary goal of your site is…
• The secondary goal(s) of your site is/are…
• Sites you like/don’t like and why…
Follow us! facebook.com/illuminea
11. The site planning stage
includes…
1. Sitemap
2. Wireframe
3. Discussion about other elements
Follow us! facebook.com/illuminea
12. Why it’s important and how to create it
SITEMAP
Follow us! facebook.com/illuminea
13. What is a sitemap
• A list of all the content(pages, posts,
etc.) that will be in the site and their
relationship to each other
• Sort of a main navigation
Follow us! facebook.com/illuminea
14. The benefits of a sitemap
• Helps us brainstorm with the client
• Helps us figure out how to best use
WordPress functionality like:
– Categories
– Page templates
– Custom post types
– Plugins
• Helps with the setup of the menus
• Helps the client organize and enter their
content
Follow us! facebook.com/illuminea
15. Example of a sitemap
• In Word doc
• But first to wake you up:
Follow us! facebook.com/illuminea
16. Sitemaps for sites off a
theme?
• Sitemap – yes
• Wireframe – no
(IMH(yc)O)
• Homepage –
prioritized list of
elements
Follow us! facebook.com/illuminea
17. Tips for creating a sitemap
• Try to go through all the pages from the
old site
• See what worked and what didn’t work in
the old site
• Ask the client a lot of specific questions.
For example:
– “Will you want this page on the new site?”
– “How do you imagine this type of content
working?”
– Does it make sense for ___ to be a child of
___?
Follow us! facebook.com/illuminea
18. Why it’s so much fun to make and how to do it
WIREFRAME
Follow us! facebook.com/illuminea
19. Wireframes – what?
• A layout of all the page templates and
functionality of the site
• The backbone for the design
• Has no design
Follow us! facebook.com/illuminea
20. Wireframes – how?
• First create a list of elements per page
template
• Start with the homepage
Follow us! facebook.com/illuminea
25. Sitemap final product
• Has information regarding each page
– what template it will use, what
custom post type, what special
functionality will be in the page, and
what content it will contain from the
old site.
Follow us! facebook.com/illuminea
27. Their old site
• What do they need to migrate from the
old site?
• Will it be best to move the content
manually or set up an automatic
migration?
• Is there anything that should be saved
before the site disappears?
• Back it up.
• Screenshots of the old site for before and
after pictures in your portfolio
Follow us! facebook.com/illuminea
28. Domains
• Their domain registrar
• What will be the main domain?
• Are there other domains that will be
forwarded?
• Redirects from old site links
Follow us! facebook.com/illuminea
29. Design
• What is the logo situation?
• Make notes of any design preferences
that arose during the spec process.
Follow us! facebook.com/illuminea
30. Content
• Who will be creating the content?
• Do they need assistance with the
content?
• Language – right-to-left and/or left-to-
right?
Follow us! facebook.com/illuminea
31. Header, Sidebars, Footer
• What elements will be in each?
• How many sidebars? Unlimited?
• Which custom widgets will be in this
site?
Follow us! facebook.com/illuminea
32. And some other stuff
• Categories, tags
• Other taxonomy
• Mobile
• Social
• SEO
• Search
• Breadcrumbs
• Comments
• Meta info
Follow us! facebook.com/illuminea
34. Keeping WordPress in mind
• Categories
• Other taxonomy
• Page templates
• Custom post types
• Meta boxes
• Permalinks
• Breadcrumbs
• Slugs
Follow us! facebook.com/illuminea
35. Good practice
• Use the team - balance between
working alone and working in a team.
– SEO, other site planner, designer,
developer, friendly CEO
• Make your sites very dynamic.
• Clarify that the site might evolve more
later.
• Budget – update client on hours used.
• Have the client sign on the site spec.
Follow us! facebook.com/illuminea