Site Map & Wireframing

[OlgaYkb]

1. Creating a Sitemap:

• Starting with content inventory: Listing all planned website content (text, images, videos, etc.).

• Defining website goals: Moving on to defining the goals for the website (e.g., informing, selling products, generating leads).

• Targeting audience: Identifying the target audience + understanding their needs = will guide how you organize your content.

• Figma's Jamboard: Creating sticky notes for each page and connecting them to show their hierarchy (main pages and subpages).

• Exporting and refining: Once happy with the structure, export the sitemap as a frame in Figma (allows for easy reference later).

2. Wireframing:

• Prioritizing pages: Starting by prioritizing the most important pages first (homepage, product pages, contact us).

• Utilizing basic shapes and text boxes: Focusing on placing the content strategically and ensuring functionality.

• Figma tools: Utilizing tools like rectangles for content areas, lines for navigation, and text boxes for headlines and body text.

• Mapping user flow: Sketching out how users will navigate between pages to complete tasks (e.g., clicking a button to add a product to the cart) helps visualize user experience.

• Iterating and gathering feedback: Obtaining feedback on the wireframes and refining them based on suggestions of other team members (allows for continuous improvement).

[OlgaYkb]

Focus on user flow and functionality at this stage.