You are here:
Define Your Site Structure, Layout, and Design
After you consider your site’s vision and purpose and you’re familiar with frameworks and templates, you can plan your site’s structure, layout, and design.
Required Editions
| Available in: both Salesforce Classic and Lightning Experience |
| Available in: Enterprise, Performance, Unlimited, and Developer Editions |
Why Is This Important?
Planning your site's structure, layout, and design before you begin building it helps you prioritize what to launch. You can narrow the scope of your site and set clear milestones for launching it. A plan in place makes building your site faster and easier.
What Should You Keep in Mind?
User Experience:
Think of your site as a product that you design for your users. To find out what your users want and expect from your site, consider conducting a user experience initiative that includes research and interviews. Integrate your findings with any personas and journeys that you built, and then plan your site’s structure, layout, and design. If possible, involve user experience and user interface designers.
Structure and Information Architecture:
Your site’s structure depends on how you organize its information. Consider your users’ expectations and needs. What intuitive paths can they take to find content? How can you organize the content to match these paths and make content easy to find? If you conducted user experience research, refer to your findings.
Organize your planned site content into labeled categories. Labeled categories help you structure your site’s navigation system and menu. Make the labels concise, meaningful, and not too broad or too specific. For example, you can group business location, hours of operation, staff, and mission statement in a category labeled About Us. This category can become an item in your navigation menu. The top-level categories that you come up with can become the top-level labels in your navigation menu. And then you can add informational subcategories to each top-level menu.
Page Layout:
Using the categories you devised for your site structure, decide how to organize the pages and subpages that contain your content. Title your pages intentionally and order them according to your information architecture so that users can easily find them through the navigation menu or search. You can adjust your navigation as you develop pages. Make sure to match primary pages with top-level menu categories, and match subpages with subcategories.
Begin to design your pages by using the Experience Cloud templates, which are preconfigured with page layouts. Available templates include layouts designed for use cases such as hosting a partner website or help center, or providing customer service.
Customize your pages with content and features that are important to your users. For example, add sections to your site based on the questions that came up the most for your customers during user experience research. To prioritize what your users need, work closely with user experience and user interface designers, if possible.
You can define audiences and then associate them with page variations that you create and customize. Only the users in those audiences can see page variations so that the content is personalized for them. For example, you define an audience as users who live on the West Coast of the United States. Create a variation of your home page with photographs of the Pacific Ocean and coastal landscapes. Then apply the West Coast audience to the page so that only those users can see it. Other users see the default page.
Page Structure and Components:
Consider the specific components and structure of each type of page. If possible, work with your user experience designers to create wireframes—sketches of a page’s features and component configuration. You can solicit early feedback on your wireframes and ensure that you’re incorporating users’ needs as you design. You can also use one of our templates to sketch out a site in Experience Builder, and have people look at the site in the builder in preview mode.
Some web design features are consistent and standardized. For example, page headers often include a company’s name or logo in the top right, a search bar in the top left, and a menu bar across the middle. Users are familiar with these conventions, so keep them in mind when you design.
Incorporate your brand. Consider where to place your organization name, and consider the colors, fonts, and images to employ. These design components contribute to your brand image. Keep your branding consistent across pages and subpages, from your homepage, to a forum, to an FAQ page, and more.
