Basic elements

Main Tree

Basic elements

Main tree refers to the central hierarchy or backbone of the website’s structure. It represents the primary navigation paths and the main sections or pages that are the core components of the website. The main tree serves as the foundational framework upon which the rest of the website’s pages, subpages, and content elements are organized.

The main tree typically includes top-level pages or sections that are directly accessible from the main navigation menu. These could be sections like “Home”, “About Us,” “Services,” “Portfolio,” “Blog,” “Contact,” and so on. Each of these main sections may then branch out into subpages or more detailed content. The main tree outlines the primary user journey and provides a high-level view of how visitors will navigate through the site.


Child Pages

Basic elements

Child pages in a visual sitemap are subordinate pages that are linked or connected to a parent page. They create a hierarchical relationship, where the parent page serves as a higher-level category or section, and the child pages contain more specific or detailed content related to that category. Child pages can further branch out into their own subpages, forming a structured and organized content hierarchy within a website.


Sibling pages

Basic elements

Sibling pages in a visual sitemap are pages that share the same level of hierarchy within a website’s structure. These pages are usually connected to the same parent page and offer similar importance or relevance within a specific section or category. Sibling pages are peers, existing side by side under the same parent, and often provide different aspects or variations of content related to that parent page.


Separate pages

Basic elements

Separate pages in a visual sitemap are individual web pages that don’t follow the main hierarchy and navigation of the site. They stand alone and often include specific content like landing pages, legal notices, or promotions, which are accessed independently from the main structure.


Footer pages

Basic elements

Footer pages are web pages that are typically linked from the footer section of a website. These pages often contain secondary or supplementary information such as privacy policies, terms of use, contact details, and other less frequently accessed content. Footer pages contribute to a website’s overall completeness and user-friendliness by providing essential information and resources while keeping the main navigation focused on primary content.


Custom connectors

Basic elements

Custom connectors in a sitemap are used to show specific relationships between pages that go beyond the basic hierarchy. They help illustrate complex navigation paths, conditional links, cross-sectional connections, dependencies, and user flows. By using custom connectors, you can provide a clearer and more accurate depiction of how users interact with the content and move through the website.


Page view: Page structure blocks / Page covers / Emojis

Basic elements

The use of different elements like page structure blocks, covers with wireframe previews, and covers with emojis in a visual sitemap can enhance the planning process for a website. Here’s how each of these elements can help you better plan and organize your website:

Page Structure Blocks:

Page structure blocks are simple representations of the layout and content organization of a web page. They provide a clear visual outline of the different content sections on a page, such as headers, navigation menus, main content areas, sidebars, and footers. Using page structure blocks in your visual sitemap helps you plan the distribution of content and design elements, ensuring that the page layout is balanced and user-friendly. This element is especially useful for understanding how different content pieces fit together and how users will navigate through the page.

Covers with Wireframe Previews:

Covers with wireframe previews allow you to include more detailed representations of specific pages within your visual sitemap. Wireframes are simplified sketches that showcase the arrangement of elements on a page without focusing on visual design details. Including wireframe previews helps you communicate how different elements, such as text, images, buttons, and forms, will be positioned on the page. This can assist in better understanding the content hierarchy and user interactions on each page, leading to more effective planning and design decisions.

Covers with emojis:

Covers with emojis provide a quick and visual way to represent the essence or purpose of a specific page or section. Emojis can convey emotions, concepts, or topics in a concise manner, making it easier to grasp the content’s intent. By using emojis, you can quickly identify and differentiate between different types of pages, improving the overall readability and comprehension of your visual sitemap.

Incorporating these elements into your visual sitemap aids in effective communication among team members, clients, and stakeholders. It allows for a clearer understanding of the website’s structure, content flow, and user interactions early in the planning process. This, in turn, helps streamline the design and development phases, leading to a more organized, user-friendly, and visually appealing website.


Labels

Basic elements

Page labels in website planning serve as short, descriptive identifiers for different pages within your visual sitemap. These labels provide a quick and meaningful way to understand the purpose or content of each page, enhancing the overall clarity and organization of your planning process. Here’s why using page labels is important:

  1. Quick Identification: Page labels allow you to quickly identify and differentiate between various pages in your sitemap, especially when the sitemap becomes complex and includes multiple sections and pages.
  2. Clear Communication: When discussing your visual sitemap with team members, clients, or stakeholders, using page labels helps facilitate clear communication about the content and purpose of each page. It’s easier to explain and discuss the website structure when you can reference pages by their labels.
  3. Content Planning: Page labels help you outline the content that should be present on each page. By assigning labels that reflect the page’s intended content, you can ensure that the design and development process aligns with your content strategy.
  4. Navigation Planning: Page labels contribute to planning the navigation menu or other navigation elements on your website. They provide insights into how different pages should be categorized and grouped for user-friendly navigation.
  5. Client and Stakeholder Understanding: If you’re presenting your sitemap to clients or stakeholders, labels make it easier for them to grasp the overall concept and structure of the website. They can quickly understand the purpose and content of each page without needing to interpret complex diagrams.
  6. Overall, using page labels adds a layer of clarity and communication to your website planning process. It helps ensure that everyone involved in the project has a shared understanding of the website’s content and structure, leading to a more efficient and successful design and development process.

System Labels

In order to create a new System Label, you need to go to your Workspace > Workspace Settings.

Basic elements

Here you can:

  1. Create a New label,
  2. Modify or re-order existing labels,
  3. Delete label,

System Labels can be used on all workspace projects.

Projects Labels

Labels created in the Project refer only to the Project in which they were created and will not be displayed in other Projects.

Basic elements

To create a Custom Label in the Project:

  1. Go to the Project
  2. Select the required Page
  3. Click on the drop-down list of Labels
  4. Click the Create New Label icon
  5. Enter the name of the Label
  6. Choose a Color
  7. Click the Create button
  8. The created Label will be automatically selected.

Up to 6 different Labels can be assigned per Page.

To edit Label:

  1. Open the drop-down list of Labels
  2. Click on the Edit button
  3. Change Name or Color of the Label
  4. Click Save button

Delete Custom Project Label:

  1. Open the drop-down list of Labels
  2. Click on the Delete icon

Page color

Coloring pages on trees in different colors in your visual sitemap can indeed be a helpful technique to enhance the planning process. Using colors to differentiate between different sections, categories, or types of content can provide several benefits:

While creating a website it’s handy to keep all information regarding each page in one place. FlowMapp allows making it quick and easy. For each page there are following lines provided:

  1. Visual Organization: Color-coding allows you to visually group and organize related pages within your sitemap. This can make it easier to identify different sections or categories of content at a glance.
  2. Clear Hierarchy: By assigning specific colors to main sections, subpages, and child pages, you can create a clear hierarchy that shows how different pages are related and connected within the structure.
  3. Easy Navigation: When reviewing the sitemap, team members, clients, and stakeholders can quickly understand the overall organization of the site by recognizing the color-coded sections and how they flow together.
  4. Quick Reference: Color-coded pages serve as a quick reference guide. During discussions or presentations, you can refer to colors to identify specific content areas, making it simpler to communicate your ideas.
  5. User Flow Analysis: Colors can aid in analyzing user flows. You can track how users move from one section to another based on the color transitions, helping to refine navigation and content placement.
  6. Content Balance: Color-coding can reveal whether certain sections of your website are overrepresented or underrepresented in terms of content. This can help you ensure a balanced distribution of information and resources.
  7. Client Understanding: When sharing the visual sitemap with clients or stakeholders, color-coding provides an intuitive way for them to grasp the structure and content distribution without needing to interpret complex diagrams.

When using color-coding, it’s important to maintain a clear and consistent color scheme. Assign colors purposefully and thoughtfully, ensuring that they align with the website’s branding or thematic elements. Additionally, consider any accessibility considerations to ensure that color choices do not hinder readability for individuals with color vision deficiencies.

Basic elements

To change Page color:

  1. Click on the page
  2. Navigate to color icon on the toolbar
  3. Click and change color of the Page

Changing the color will affect the page block color, cover color, or emoji background.

Was this article helpful? 14
Still need help? Contact us