WDS LAYOUT

Where a patterns page component already establishes structure (page header, content area, sticky footer, table/grid layout), follow the patterns component’s own API rather than reproducing the grid by hand. Use the guidance below for the parts patterns leaves to you: cards, forms, statistics rows, marketing sections, and spacing between them.

Layout determines how users interact with your dashboard content. It establishes the structure, hierarchy, and rhythm of your dashboard page, contributing to the overall coherence and user experience. By making mindful and calculated choices in how you organize your content, users can move around more smoothly, saving time and frustration when completing tasks.

Design Principles

To create dashboard pages optimized for user experience, follow these design principles:

1. Consistent: Maintain repetitive layouts and content patterns for intuitive and easy-to-read pages.
2. Inclusive: Create layouts and content that adapt well to various screen sizes.
3. Balanced: Emphasize the priority of regions and content elements through deliberate management of size and white space.
4. Connected: Minimize the distance between related regions or content elements to enhance cohesion and navigation.

Screen Size

Dashboard pages are designed to accommodate various screen sizes rather than being tailored to one specific resolution. The primary content should be at the top of the page to ensure users immediately understand the purpose of the page.

Note: Content displayed in the top 600 pixels of the page will be visible for the majority of users.

Base Unit

The base unit establishes the increment by which all elements and measurements are multiplied. This practice ensures consistency in the spacing and sizing of design elements.

Note: The design system is based on a 6px unit.

The layout grid, spacing tokens, and nearly all visual elements and sizes adhere to multiples of six (6, 12, 18, 24, etc.), with only occasional exceptions.

Layout Structure

To best design the layout for your app, understand:

1. The core frame of the app (Application frame)
2. The placement and alignment of each segment within the grid layout (Grid layout)
3. The content to appear in the grid (Common layouts)

Application Frame

The dashboard app frame is used by the majority of Wix applications settings. Dashboard pages consist of 4 areas:

Side Panel Guidelines:

• Let the side panel overlay main content when it contains supplementary actions or settings, such as data filters
• Push main content with the side panel when users must see the full context to continue

Grid Layout

The system uses a fluid grid layout with a fixed maximum width. It uses columns that scale and resize the content accordingly.

The grid is constructed from 3 elements:

• Columns - The design system uses a 12-column grid. Column width is fluid and changes according to the page width.
• Gutters - The gaps between the columns. Gutter width has a fixed value of 24px.
• Margins - By default, a page’s content area has 48px side margins and a 48px bottom margin.

Grid Specifications:

• Minimum content area width: 864 pixels (each grid column is 50px wide)
• Maximum content area width: 1248px (each column is 82px wide)
• Wider screens maintain 1248px content width with side margins stretching to center content
• Use 24px gap between cards both vertically and horizontally

Common Layouts

Page layouts can be divided by intention into the following types:

1. Form Layouts

Forms are pages that allow users to fill in data or edit existing data. Two variations:

• 2/3 layout with optional sidebar (8/4 column split) - Provides flexibility to expose primary and secondary content at the same time
• Full width (12 columns) - Supports advanced product needs with complex structures

Both form page layouts include mandatory Save and Cancel actions in the header and footer areas.

2/3 Layout Best Practices:

• Use to expose primary and secondary content at the same time
• Keep the form easy to scan and comprehend
• Display a live content preview on the side (widget can be sticky)
• Use 8 columns for forms to keep text lines and input fields narrow for quicker reading
• Bring actions closer to related titles (e.g., toggle switches near settings)

Full Width Layout Best Practices:

• Use when a form includes complex structures such as tables
• Use for list items that contain many data columns

Combining Layouts:

• Avoid coast-to-coast inputs; keep inputs to 2/3 width of a card, or lay them out in two columns
• Use white space on the right side for content preview
• Use full width for tables with many columns and dividers that separate sections

Note: A column is easy to read if it is wide enough to accommodate an average of 10 words per line.

2. Display Layouts

Display pages showcase data or content without accepting input from users. They can contain minor actions such as data filtering.

List (Table):

• Tables display large data sets and provide users with a quick overview
• Use a 12-column layout for tables
• Enables users to manipulate and act on a data set

List (Grid) Options:

• 2 columns (6/6 split) - For items with lengthy descriptions
• 3 columns (4/4/4 split) - For visual items with multiple data types
• 4 columns (3/3/3/3 split) - For user-generated galleries and collections, reveals up to 50% more content above the fold than 4/4/4
• Custom - For mixed content needs

Grid Selection Considerations:

• Total amount of items to show
• Content to display in each list item
• What objects the list items reflect (match physical shapes when applicable)

Dashboards: Display different types of data on a specific topic using a combination grid.

Column span recommendations:

• 3 or 4 columns - For list items, previews, marketing, statistics, and charts
• 12 columns (full width) - For tables and marketing content
• 8 columns - For lists, tables with few data columns, setup wizards, and charts
• 6 columns - For lists, tables with few data columns, and statistics

Empty States:

• Use full width layout for empty state of a page
• Indicates feature/product has no data yet, all data cleared, or not set up yet
• Include clear CTA indicating what to do to fill the page
• Can combine with other layout elements such as tabs, statistics widgets, or marketing cards

3. Marketing Layouts

Marketing pages promote new products that site owners are not aware of yet. Built using the <MarketingPageLayout/> component split into 2 columns:

1. Promo messaging
2. Visual representation of product and features

Optional footer area can display features or testimonials list.

4. Wizard Layouts

Wizard pages guide users through setting up a product or feature. They split complex forms into steps for easier completion.

Entry Points:

• A marketing page
• A marketing card
• The primary action of a page
• An empty state

Note: Wizards must have a final destination. After completing all steps, users should end up on a relevant page: a dashboard, a details page, or any other relevant location.

Related WDS Components (content inside the shell)

These are content-level building blocks. They do not replace the @wix/patterns page shell.

• <Layout /> / <Cell /> - Grid layout container for content within a page’s content area
• <Card /> - Content container with 24px gaps between cards
• <MarketingPageLayout /> - Marketing page wrapper (marketing pages only — these have no collection, so no patterns shell applies)

On WDS <Page />: do not use it as the wrapper for a @wix/patterns dashboard page. The patterns page component (CollectionPage / EntityPage / SettingsPage) is the shell and already provides the header, content area, and scroll behavior. Reach for WDS <Page /> only on a page that uses no patterns shell at all.