How to plan a website structure: step-by-step guide

The website planning process can become a real bane, especially when a website is large and/or has a non-standard structure. Find out how it can be performed with a comprehensive solution from FlowMapp

FlowMapp Visual sitemap design tool interface. Page covers connected by Lines. Each page cover shows short information about page content

12 steps to design website scructure

1.

The client needs a website

We probably shouldn't teach you how to properly interact with a client at the very beginning of your cooperation. Just listen to the client and all the requirements for the project and proceed to the next step
Visual sitemap page canvas with a rectangle with 'start' text
2.

It’s time to fill out the brief

Invite the client to fill out the brief. Do this in traditional documents or tables that you normally work with.. As for the documentation drawn up according to the brief, this can be saved in Flowmapp’s Notes
Notes tool by flowmapp interface
3.

Concentrate your ideas in a mood board

After a detailed brief analysis, start drawing up a mood board. Create a feature list, where you’ll include everything that the client didn’t indicate in the brief but which would be great to implement - all this will need to be re-agreed. Save it in Notes as well
Notes tool by flowmapp interface
4.

Start thinking about how users will like it

Start planning user flow if there is a need for it (for example, when the website has a complex structure and so on). To do this, open the User flow tool and do it right in your browser in a few minutes
User flow tool by flowmapp: logical figures, connected with arrows
5.

Now it’s up to the website’s information architecture

Draw up the information architecture of the website: visual sitemapping will come to your aid with this. All these things can be easily implemented using our Sitemap design builder tool
Visual sitemap page covers
6.

So, what about page cards?

Fill in the basic information on the page covers using Visual Sitemap builder as well. This way, you can clearly outline the website’s structure and be able to look at it from a bird’s eye view (and demonstrate it to the client, too)
FlowMapp Visual sitemap design tool interface. Page covers connected by Lines. Each page cover shows short information about page content in the form of text blocks or visual schematic content structure
7.

Detalization is your everything

Use the same page covers to plan what content has to be presented on each web page. You can add both notes and attachments in the form of pictures, files, links, and more - just be as creative as you can!
FlowMapp Visual sitemap design tool interface. Description page with text and visual information
8.

Everything goes as it should, and this is awesome!

Now, you're halfway done - all the work you've completed looks beautiful and clear, and the client can already look at the architecture of the future website to evaluate it. This is what we call an amazing visual sitemap design
Visual sitemap page cover with text blocks, describing page content
9.

Putting it all together

Return to the previously compiled user flow - now, you can enrich it with ready-made page cards from the Sitemap, clearly displaying the entire path. This is advice for real pros who need an 80-level design. Look the examples!
User flow combined with visual sitemap page covers
10.

Viva the comments battle!

Share access to your project in FlowMapp for your team, the client, and other stakeholders as commentators. This is how you’ll be able to receive final edits, disagreements on the budget of individual features, and other details
Commenting feature interface in Visual sitemap tool
11.

You’re almost at the final stage – only prototypes remain

Let's move on to page prototypes - all this can also be done in FlowMapp. Open page cards in Sitemap and start creating hi-fi prototypes. Note that here, you can find templates and customize them as you wish
hi-fi prototyping tool interface: templates bar on a left side, working space with page blocks on a right side
12.

And just a little more...

Now, meet with your team to transfer the work you've done to the design and development stage. You can discuss final suggestions with your colleagues and make changes if necessary - of course, in the same tool
Visual sitemap tool export feature interface
13.

You're done!

Next stages are usually carried out in Figma, WebFlow, WordPress, etc. You can also export the result to PNG, XML or PDF. But since the planning stage is over, you can exhale and relax a little - champagne still have left, haven’t you?
Visual sitemap page cover with text blocks, describing page content

Congratulations 🎉

We would be glad if we simplified your work at least a little and made it more comfortable. We promise that we will regularly release updates for our all-in-one tool to make your planning stage even faster!

Website planning has never been so powerful

Start planning
💎
One project is always free. Easy onboarding. No credit card required