Skip to main content
Join Trailblazers for Dreamforce 2024 in San Francisco or on Salesforce+ from September 17-19. Register now

Design Your Site

Learning Objectives

After completing this unit, you’ll be able to:

  • Choose a framework and effective template for your site.
  • Choose user licenses that align with your site’s goals.
  • Plan your site’s basic structure, layout, and design.

Choose a Site Framework

It’s time for the Cloud Kicks team to decide which site framework will work best for their needs. Experience Cloud provides three options for site frameworks: Lightning Web Runtime (LWR), Aura, and Visualforce. Let’s take a look at how the frameworks function, and the pros and cons for each based on Cloud Kicks’s needs and resources. 

Framework Description Pros Cons

Lightning Web Runtime (LWR)

A platform for developers to build custom components on a standardized web stack. Includes two templates, Build Your Own (BYO) and Marketing Microsites.
  • LWR sites are built on the most current technology, providing unparalleled performance and load-time speed in the finalized site.
  • Ongoing technological improvements from Salesforce.
  • Today, most sites created in LWR require developer resources to build and maintain.
  • Fewer pre-built components are available currently than in Aura sites.

Aura

Uses a standardized Server-Side JavaScript framework to help developers build customizable components. Includes several templates, such as Customer Service, Partner Central, Help Center, Build Your Own, and Customer Account Portal. 
  • Aura templates are mostly low-code solutions—great for teams without developer resources.
  • Aura templates provide access to a large library of Lightning web components and Aura components.
  • Server-Side JavaScript isn’t the most current or standardized framework, and can experience slower load and performance times.

Visualforce

Uses a tag-based markup language, similar to HTML, and a set of server-side controllers to interact with the database. Serves pages after rendering them on a server.

  • Handles processing server-side, creating a very secure experience.
  • Makes basic database operations simple to perform.
  • Works well with webhook integrations.
  • Does not include templates.
  • Built and maintained completely by developer resources.

Erica and Linda rule out the Visualforce framework because it requires heavy developer support, and that’s not an option for Cloud Kicks right now. But deciding between an LWR site and an Aura site is a little trickier. 

Erica and Linda love that Aura sites include several low-code templates and tons of components. They feel confident they can build and maintain an effective site with limited developer input. 

On the other hand, they see long-term value in creating an LWR site. While they don’t need custom components for their current use case, the future looks bright for Cloud Kicks. As their business grows, so too will the scope of their needs and their developer resources. The limited-edition sneakers site is a good opportunity to test out the LWR framework. If an LWR site delivers good results for this campaign using limited resources, Cloud Kicks will know it’s worth investing developer time to create custom LWC components and sites for bigger projects later. 

To make a final decision, Erica and Linda review their planning notes and read through the template options. This project needs a lightweight site that includes some marketing collateral, links to other sites in the Cloud Kicks online network, and a way for customers to sign up for new product notifications. They notice the Microsite LWR template delivers content-rich microsites that capture leads—and it’s managed with low-code tools! It’s a great combination of everything they want: a simple site that doesn’t require much developer input, built on Salesforce’s latest technology. This is the perfect template to help Cloud Kicks hype up its limited-edition The Great Athletic Event sneakers. 

Work with a Salesforce Account Executive to Choose User Licenses

User licenses are the gateway to authenticated access to an Experience Cloud site, with each license type providing different levels of access. Choosing the right licenses for your use case is one of the most important steps when planning a site. There’s a lot to consider, like: 

  • Who are your site’s users?
  • How many users do you expect to access your site?
  • What type of access (if any) do you want users to have to your organization’s Salesforce objects?
  • What site template are you using?

In addition to the details above, the user licenses your site needs depend on what edition of Salesforce your organization uses. We strongly recommend you work with a Salesforce account executive to understand the differences between license types and to choose the best licenses for your use case. Additional resources to learn more about user licenses are listed at the end of this unit.  

Erica at her desk, in a video meeting with Linda and Salesforce.

When the Cloud Kicks team meets with their Salesforce account executive, they’re happy to learn they don’t need additional user licenses for their limited-edition sneakers site. The Microsite template is available to any organization using Experience Cloud. And Cloud Kicks is creating an unauthenticated site—that is, a site anyone on the internet can access and interact with. Users don’t need to log in to enjoy the new Cloud Kicks site, so they don’t need special licenses. 

Define Site Structure, Layout, and Design

The new The Great Athletic Event limited-edition sneakers website is getting closer to reality! But before they start building the site, Cloud Kicks needs to define the site’s structure, layout, and design. Sorting this out now helps Cloud Kicks narrow the scope of its site and set clear milestones for launch, which makes building the site faster and easier. Let’s take a look at the ideas Cloud Kicks comes up with. Notice that each section builds on information previously gathered.

User Experience

The Cloud Kicks site team thinks of the new website as a product designed for their users. So just like designing a new pair of sneakers, they bring in their user research team to conduct research and interviews to learn what resonates with customers. Linda and Erica then integrate that research with their earlier notes about user personas and journeys as they consider the site’s structure, layout, and design. 

Note

If available, this is a great time to pull in your user experience and user interface designers. 

Structure and Information Architecture

A site’s structure depends on how you organize its information. It helps to consider your users’ expectations and needs, and what intuitive paths users might take to find content. Then, look for ways to match the site’s content to those intuitive paths. Consider grouping content into categories and subcategories. 

Cloud Kicks wants to create a single-page microsite, which simplifies this step. All The Great Athletic Event limited-edition sneakers information will live on one page, so the Cloud Kicks team moves on to the next step. 

Page Layout, Structure, and Components

It’s time to map things out. Linda and Erica, along with user experience and user interface designers, consider what sections users need on the microsite. 

  • Information about the limited-edition sneakers
  • Lifestyle and fashion photos featuring the limited-edition sneakers
  • A place to submit contact information to receive release updates
  • A way to access other parts of the Cloud Kicks website (such as the ecommerce site)

Next, the team reviews the components that are available in the Microsite template and discusses the best ways to incorporate the sections they identified above using the available components. They decide to use the Rich Content Editor for sneaker information and photos, the Lead Form component to collect customer information for release updates, and the Button component to create links to other parts of Cloud Kicks’ existing website. 

Finally, the UI Design team creates mockups of how the site might look. They take advantage of a few additional components, such as the Horizontal Line and Tile components, to add more visual interest to the page. Once everyone is in agreement with the mockups, Erica, Jamal, and Linda begin building out the site in Experience Cloud. Once they have a basic version of the site, they use preview mode in Experience Builder to share the site with the rest of the team for feedback. 

The site is truly coming together! In this unit, the Cloud Kicks team chose a template for their new site, worked with their Salesforce account executive to address user licensing needs, and started the hands-on work of building the site. There are just a few steps left before Cloud Kicks can launch its new site. 

Resources