Step #2 — Brainstorm the types of content
How To Sketch A Website Layout Creator
AESTHETICS: Design aesthetics, or the way your site looks, is a crucial piece of the website creation process. Thankfully, most web hosts offer templates and content management platforms have themes to make this part easy.
- Sketch Out a Site Map for Web Design The web site map shows the website's major sections, and how the pages of your new website displayed for iPhone or iPad will link to each other. A site map like the one shown provides a visual overview of the major sections of your website and serves as a guide for how you expect the traffic to flow from.
- Starting with the home page, draw a box to represent each web page of the site. Put the home page box at the top of the paper. Then start a new row below and draw a box for each of your primary, secondary, and tertiary navigation group titles.
Before you start defining navigational elements (Step #3), you'll need to discuss your website's content. What services/products are we marketing? How much company info will be presented? Do we have testimonials? What helpful resources can we provide?
Don't focus on where that content goes in the sitemap just yet (Step #4). Give yourself the freedom to think openly — even wildly! Bad content ideas will naturally work their way out with time.
HELPFUL HINT: Follow the 80/20 rule of content (80% valuable content / 20% promotion)
Step #3 — Define primary navigation
Also referred to as '1st Tier', 'Main', 'Top Level', or 'Global', primary navigation is typically found at the top of a website in a horizontal design. Though there's a case against vertical navigation, some websites still take this approach (e.g. Amazon).
Your sitemap's primary navigation should…
- Be concise – each element should target 1 to 5 words (‘About', ‘Contact Us') rather than full sentences
- Use common language – avoid naming navigation that only make sense internally. Use the KISS principle (Keep It Simple Stupid)
- Communicate top-down hierarchy – can someone easily peruse or find information?
- Allow the site to grow – your primary navigation shouldn't need re-tooled every time you add new content or features
HELPFUL HINT: There's no magic number to how many elements live in your primary navigation. Even though 7 items or less is a UX Myth, it's still important to practice brevity. If your site map design outlines 10+ elements, there might be an opportunity to consolidate.
Step #4 — Flesh out second/third level structure & content
With primary navigation established, it's time to drill deeper into each section.
For most websites under 50 pages, a second level of structure should be sufficient. For larger websites, third level is typically needed to maintain a solid hierarchy. I've even seen some websites go four levels deep (this is pretty typical of academic websites where there's gobs of content).
Unlike your primary nav where the number of elements should be concise, secondary/tertiary levels of content is somewhat unlimited — within reason of course. The challenge with multiple levels is designing menu systems that allow for easy scanability and findability.
HELPFUL HINT: As you flesh out page after page, your overarching primary nav will be put to the test. Don't be afraid to tweak as your website structure comes into view.
Step #5 — Don't forget about utility pages
Privacy policies, disclaimers, legal information — all critical pages that need a home in your website. Don't lose track of these in your sitemap. Carve out a spot for them in your footer or elsewhere. This content could take weeks or even months to finalize!
We want our website's privacy policy to hold up launch.
HELPFUL HINT: Contact your legal department sooner rather than later.
Step #6 — Create notes and high-level specifications for each page
'We'll just have some basic content for this page.'
No. NO. NO!
Take a moment to think, specifically, about each page's content. What existing assets are available? What new assets need created? How deep do our archives go? What will be our blog topics?
Put content first because it's the heart of every website.
HELPFUL HINT: If you need a good starting point, lead with word count. Short and sweet (under 100 words) or rich and hearty (500+ words)?
Step #7 — Designate the type of design template
House Layout Sketch
Is this page a photo gallery? Conversion form? Table of contents? PDF?
This activity can become the curious case of chicken or the egg. How can you identify what design template your content needs when the content isn't finished?
The key here is that you're not actually designing the user interface (UI), you're identifying the type of content. This identification helps guide the content curation process and warms the engine for UI design down the road.
HELPFUL HINT: Designate every page's template. If you don't know it yet, label it 'TBD' and iron out as you iterate.
Final Step — Iterate. Iterate. Iterate.
Version 1 of your sitemap will almost never be the final and best version. Create a new version as your sitemap undergoes heavy change. You can always revert to a previous version.
I like to create new versions for different days of brainstorming. New day = new version.
HELPFUL HINT: Shoot for ~85% accuracy with your website's structure before prototyping or wireframing.
Sitemapping Tools
I'm a big advocate of web-based tools that don't require software and are operating system agnostic. Speed, version control, and shareability trump everything when it comes to designing a site map.
That's why we stopped using Mindjet's MindManager, would never recommend a bloated software like Illustrator, and fell in love with SlickPlan (try Slickplan's 30 day free trial).
Other sitemap tools that will help you plan the structure of a website:
Remember, activity over tool
The sitemapping tool itself is not more important than the actual activity of sitemapping. Tools facilitate collaboration, capture ideas and help you iterate on them.
We want our website's privacy policy to hold up launch.
HELPFUL HINT: Contact your legal department sooner rather than later.
Step #6 — Create notes and high-level specifications for each page
'We'll just have some basic content for this page.'
No. NO. NO!
Take a moment to think, specifically, about each page's content. What existing assets are available? What new assets need created? How deep do our archives go? What will be our blog topics?
Put content first because it's the heart of every website.
HELPFUL HINT: If you need a good starting point, lead with word count. Short and sweet (under 100 words) or rich and hearty (500+ words)?
Step #7 — Designate the type of design template
House Layout Sketch
Is this page a photo gallery? Conversion form? Table of contents? PDF?
This activity can become the curious case of chicken or the egg. How can you identify what design template your content needs when the content isn't finished?
The key here is that you're not actually designing the user interface (UI), you're identifying the type of content. This identification helps guide the content curation process and warms the engine for UI design down the road.
HELPFUL HINT: Designate every page's template. If you don't know it yet, label it 'TBD' and iron out as you iterate.
Final Step — Iterate. Iterate. Iterate.
Version 1 of your sitemap will almost never be the final and best version. Create a new version as your sitemap undergoes heavy change. You can always revert to a previous version.
I like to create new versions for different days of brainstorming. New day = new version.
HELPFUL HINT: Shoot for ~85% accuracy with your website's structure before prototyping or wireframing.
Sitemapping Tools
I'm a big advocate of web-based tools that don't require software and are operating system agnostic. Speed, version control, and shareability trump everything when it comes to designing a site map.
That's why we stopped using Mindjet's MindManager, would never recommend a bloated software like Illustrator, and fell in love with SlickPlan (try Slickplan's 30 day free trial).
Other sitemap tools that will help you plan the structure of a website:
Remember, activity over tool
The sitemapping tool itself is not more important than the actual activity of sitemapping. Tools facilitate collaboration, capture ideas and help you iterate on them.
However, the actual discussions, idea generation and decisions are the keys to a successful sitemapping phase. Focus on principles first and foremost and find a tool that embodies those principles.
Sketch Layout Design Free
What steps and sitemapping tools do you use to design a website's structure? I'd love to hear in the comments below!