Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
woocommerce/docs/theme-development/theme-design-ux-guidelines.md

90 lines
5.6 KiB
Markdown
Raw Normal View History

add graymatter to docs
2023-11-29 18:48:05 +00:00
---
post_title: Theme design and user experience guidelines
Further adjustment of post titles, menu titles, and tags (#43685) * Adjusting post_titles, menu_titles, and tags for docs folder Adjusting the post_titles, menu_titles, and tags for document files in the docs folder * Update removing-product-product-category-or-shop-from-the-url.md * Update classic-theme-developer-handbook.md * further adjustments and casing * Move HPOS/CLI contents into README --------- Co-authored-by: Jacklyn Biggin <hi@jacklyn.dev>
2024-01-16 19:29:00 +00:00
menu_title: Theme design and user experience guidelines
tags: reference
add graymatter to docs
2023-11-29 18:48:05 +00:00
---
Initiating the Docs Information Architecture and committing the first major batch of documents We've been quietly building a set of documentation in a private repo that we are ready to move over to the public monorepo so that we can continue our initiative to imrpove the documentation experience for Woo developers.
2023-08-18 18:47:07 +00:00
This guide covers general guidelines and best practices to follow in order to ensure your theme experience aligns with ecommerce industry standards and WooCommerce for providing a great online shopping experience, maximizing sales, ensuring ease of use, seamless integration, and strong UX adoption.
We recommend you review the [UI best practices for WordPress](https://developer.wordpress.org/themes/advanced-topics/ui-best-practices/) to ensure your theme is aligned with the WordPress theme requirements.
replace forward tick with ' in docs folder (#42799) * replace forward tick with ' in docs folder * replace encoded bcktick with single quote in docs folder --------- Co-authored-by: Ron Rennick <ronald.rennick@automattic.com>
2024-01-02 20:59:26 +00:00
Make sure your theme fits one or more industries currently available in the [WooCommerce themes store](https://woo.com/product-category/themes). It's important that the theme offers enough originality and distinctiveness in its design, while keeping it familiar, in order to be distinguished from other themes on the WooCommerce theme store. Your theme should avoid copying existing themes on the WooCommerce theme store or other WordPress theme marketplaces.
Initiating the Docs Information Architecture and committing the first major batch of documents We've been quietly building a set of documentation in a private repo that we are ready to move over to the public monorepo so that we can continue our initiative to imrpove the documentation experience for Woo developers.
2023-08-18 18:47:07 +00:00
## Design
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](https://www.w3.org/TR/WCAG20/#conformance) 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
## Accessibility
The theme must meet the [Web Content Accessibility Guidelines](https://www.w3.org/TR/WCAG20/) (WCAG). Meeting 100% conformance with WCAG 2.0 is hard work; meet the AA level of conformance at a minimum.
For more information on accessibility, check out the [WordPress accessibility quick start guide](https://make.wordpress.org/accessibility/handbook/best-practices/quick-start-guide/).
## Customization
Themes have to rely on the customizer for any type of initial set up. Specific onboarding flows are not permitted.
Any customization supported by the theme, such as layout options, additional features, block options, etc, should be delivered in the customizer or on block settings for blocks that are included in the theme.
Themes should not bundle or require the installation of additional plugins/extensions (or frameworks) that provide additional options or functionality. For more information on customisation, check out the [WordPress theme customization API](https://codex.wordpress.org/Theme_Customization_API)**.**
replace forward tick with ' in docs folder (#42799) * replace forward tick with ' in docs folder * replace encoded bcktick with single quote in docs folder --------- Co-authored-by: Ron Rennick <ronald.rennick@automattic.com>
2024-01-02 20:59:26 +00:00
On activation, themes shouldn't override the WordPress theme activation flow by taking the user into other pages.
Initiating the Docs Information Architecture and committing the first major batch of documents We've been quietly building a set of documentation in a private repo that we are ready to move over to the public monorepo so that we can continue our initiative to imrpove the documentation experience for Woo developers.
2023-08-18 18:47:07 +00:00
## Branding
The theme must not contain any branding or references to theme authors in locations that interfere with the normal operation of an online store. Theme authors can include links to their websites on the theme footer. Affiliate linking is not permitted.
The interface should solely focus on the experience, the usage of notices, banners, large logos, or any promotional materials is not allowed in the admin interface.
## Demos and sample content
Upon submission theme authors must provide a way for the theme to be showcased and tested. The sample content/demo should refrain from using custom graphics/assets that will not be present in the deliverables to avoid merchant confusion and broken expectations (examples: using logos, illustrations). When creating a theme for a specific vertical theme authors should consider using sample content that aligns with the vertical.
replace forward tick with ' in docs folder (#42799) * replace forward tick with ' in docs folder * replace encoded bcktick with single quote in docs folder --------- Co-authored-by: Ron Rennick <ronald.rennick@automattic.com>
2024-01-02 20:59:26 +00:00
All imagery and text should be appropriate for all ages/family-friendly. The theme author should consider using imagery that is inclusive of ages, nationalities, etc. The theme should refrain from using imagery that looks like 'stock photography'.
Initiating the Docs Information Architecture and committing the first major batch of documents We've been quietly building a set of documentation in a private repo that we are ready to move over to the public monorepo so that we can continue our initiative to imrpove the documentation experience for Woo developers.
2023-08-18 18:47:07 +00:00
The theme must be distributed and cleared of all the necessary licenses for assets such as images, fonts, icons, etc.