Theme Design Guidelines – Branding

High-quality design is an important aspect of an online store, and that is driven by the theme design and content. The design of the theme should be simple, consistent, uncluttered, memorable, intuitive, efficient, and functional. When designing a new theme for WooCommerce special attention should be given to:

Layout

The theme should be up to industry standards in terms of hierarchy, flow, content balance, and white space.

Theme authors must ensure that store pages (shop, product page, categories, cart, checkout, profile page, etc) fit seamlessly with the theme since they are the central point of a WooCommerce theme.

The Theme is expected to be fully functional and optimized to be accessed on common device types such as laptops, tablets, and smartphones.

Typography

The theme should provide elegant and legible font pairings that promote a comfortable reading experience.

Consistent and harmonious font sizes, line widths and spacing must be employed across all pages and device types.

The theme typography must consist of a small number of typefaces that complement each other, generally no more than two.

Proper capitalization is used, avoiding all caps (with the exception of some UI elements such as buttons, tabs, etc).

Iconography

Icons used in the theme portray a direct meaning of the actions/situations they are representing and are used consistently regarding sizing positioning and color.

Color

The theme must follow a harmonious and consistent color scheme across UI elements and all pages. The color scheme should consist of small number of colors that contain:

• A primary/accent dominant color
• One or two secondary colors that complement the primary
• Neutral colors (white, black, gray)

The color palette used in text and graphical UI components must be compliant with the WCAG AA conformance level or above.

Patterns

The theme must employ a consistent set of patterns that are used across pages, such as:

• Navigation, sidebars, footer
• Content blocks (titles, paragraphs, lists, product details, reviews, image showcases, etc)
• Forms structure and elements (fields, drop-downs, buttons, etc)
• Tables
• Lists
• Notices