Author
Quan
Date
7/3/26
Updated
7/3/26
Read Time
2 min
Web Design
Category
ux design
ui design
web accessibility
technical seo
More in
Web Design
A website is a content system before it is a screen
Figma is useful for exploring hierarchy, interaction, and visual language. It cannot decide what pages the site needs or what each page must explain. Those decisions belong to the website plan: the structure that connects audience needs, business goals, content, navigation, and conversion paths.
Starting with screens often produces a polished homepage followed by a difficult question: what happens next? Starting with a plan makes the homepage one part of a coherent route through the site.
Define the audience tasks
List the reasons people will arrive. A prospective client may want to understand services and process. A collector may want to view available artworks, inspect details, and ask a question. A returning customer may need a policy, order information, or a direct path to a product. These tasks reveal the pages and calls to action the site needs.
Create a sitemap with page jobs
A sitemap is more than a list of links. Each page should have a defined job, primary audience, key information, and intended next action. This prevents duplicate pages and helps teams identify gaps before design begins.
Homepage: establish the offer and route visitors to the right path.
Service or collection pages: explain the offer and give enough depth for a decision.
Individual detail pages: provide the specific information a visitor needs before acting.
About page: establish perspective, credibility, and context.
Contact or conversion pages: reduce friction at the point of inquiry or purchase.
Write navigation from the visitor's point of view
Use labels people can understand without knowing the business internally. Limit top-level choices to the destinations that matter most. A navigation menu should reveal the site structure, not reproduce an organizational chart.
Bring the plan into design
Once the sitemap and page jobs are clear, Figma can test what matters: hierarchy, responsive behavior, component patterns, and the sequence of tasks. The design will move faster because it has a structure to support.
Write the content outline before choosing components
For every core page, write a rough outline in plain text. Start with the page question, then list the evidence, examples, details, and action the visitor needs. This does not need to be final copy. It is a way to prove that the page can carry its job before the design begins.
A content outline also makes design handoff cleaner. Designers can create hierarchy around real information instead of filler. Developers can see which patterns repeat. Stakeholders can resolve missing details early, when the cost of change is low. The website plan becomes a shared reference rather than a private design file.
Answer first
Plan a website before opening Figma by defining audience tasks, a sitemap, page jobs, content needs, navigation labels, and conversion paths.
Key Takeaways
A website plan connects audience tasks to business goals.
A sitemap should define the job of each page, not only its name.
Navigation labels should match visitor language.
Figma becomes more effective once the content and page structure are clear.
FAQ
Why plan a website before designing screens?
Planning reveals the pages, content, navigation, and paths visitors need before visual decisions create unnecessary rework.
What should a sitemap include?
It should include page names, page jobs, primary audience, key content, and the intended next action.
How do I choose website navigation labels?
Use clear terms that visitors understand and prioritize the destinations most connected to their goals.