App design, UX and accessibility for Wix apps

Design can make or break your Wix app. Users expect apps to feel native to the Wix platform, load instantly, and be effortless to configure. This lesson covers the Wix Design System, responsive widget patterns, accessibility compliance, dark mode support and the UX patterns that turn first-time installers into long-term users. A well-designed app gets better reviews, lower churn and more organic referrals.

The Wix Design System: Your Foundation

Wix provides a comprehensive design system with React components, design tokens and style guidelines specifically for app developers. Using the Wix Design System ensures your app looks professional, consistent with the Wix dashboard, and accessible by default.

• Component library: 80+ React components including Page, Card, Table, FormField, Input, Button, Modal, Toast and more
• Design tokens: Standardised colour, typography and spacing values that match the Wix dashboard theme
• Layout primitives: Box, Cell, Layout and Grid components for consistent, responsive page structures
• Data display: Table, StatisticsWidget, Timeline and Badge components for presenting data attractively
• Feedback patterns: Toast, Notification, Loader and EmptyState components for user communication

Dashboard Page Design Patterns

Dashboard pages are where site owners interact with your app. Following established patterns makes your app intuitive from the first use.

// Dashboard analytics page example using Wix Design System
import React from 'react';
import {
  Page,
  Card,
  StatisticsWidget,
  Table,
  TableToolbar,
  Search,
  DatePicker,
  Box,
  EmptyState,
} from '@wix/design-system';

export default function AnalyticsPage({ data, loading }) {
  if (!data && !loading) {
    return (
      <Page>
        <Page.Header title="SEO Analytics" />
        <Page.Content>
          <EmptyState
            title="No data yet"
            subtitle="Install the site widget to start tracking SEO metrics"
            theme="page"
          />
        </Page.Content>
      </Page>
    );
  }

  return (
    <Page>
      <Page.Header title="SEO Analytics" />
      <Page.Content>
        <Box marginBottom="24px">
          <StatisticsWidget
            items={[
              {
                value: String(data?.seoScore || 0),
                description: 'SEO Score',
                percentage: data?.scoreChange || 0,
              },
              {
                value: String(data?.pagesScanned || 0),
                description: 'Pages Scanned',
              },
              {
                value: String(data?.issuesFound || 0),
                description: 'Issues Found',
              },
              {
                value: String(data?.issuesFixed || 0),
                description: 'Issues Fixed',
              },
            ]}
          />
        </Box>

        <Card>
          <TableToolbar>
            <TableToolbar.ItemGroup position="start">
              <TableToolbar.Item>
                <Search placeholder="Search pages..." />
              </TableToolbar.Item>
            </TableToolbar.ItemGroup>
          </TableToolbar>
          <Table
            data={data?.pages || []}
            columns={[
              { title: 'Page URL', render: (row) => row.url },
              { title: 'Score', render: (row) => row.score },
              { title: 'Issues', render: (row) => row.issues },
              { title: 'Last Scan', render: (row) => row.lastScan },
            ]}
          />
        </Card>
      </Page.Content>
    </Page>
  );
}

Responsive Widget Design

Site widgets must look perfect on every device, in every Wix template, at every size the site owner chooses. This requires careful responsive design.

• Use relative units (%, em, rem) instead of fixed pixels for widths and spacing
• Test at minimum widths of 280px (smallest reasonable mobile) and maximum of 1200px (full-width desktop)
• Stack horizontal layouts vertically on mobile using CSS flexbox with flex-wrap
• Scale typography proportionally: use clamp() for fluid font sizes
• Hide non-essential content on mobile rather than cramming everything in
• Ensure touch targets are at least 44x44px on mobile for accessibility compliance

Accessibility (WCAG 2.1) Compliance

Wix requires all apps to meet basic accessibility standards. Apps that fail accessibility checks will be rejected during review. More importantly, accessible apps serve a wider audience and are legally required in many jurisdictions.

Dark Mode and Theme Adaptation

While Wix dashboard pages follow a light theme, site widgets must adapt to the site owner's chosen theme. Some Wix templates use dark backgrounds, and your widget must look good on both light and dark surfaces.

• Use the Wix Design System colour tokens ($color-5, $color-10) which automatically adapt to the site theme
• For custom styling, detect the background brightness and switch between light and dark colour schemes
• Test your widget on at least 5 different Wix templates with varying colour schemes before submission
• Avoid hard-coded white backgrounds that will clash with dark-themed sites
• Provide a "Light/Dark" design preset option so site owners can manually override if automatic detection fails