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

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

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

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

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

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

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

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

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

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?

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!