---
url: /foundations/designing/overview.md
description: >-
  Implement intuitive, accessible layouts, considering structure, color, and
  flow
---

# Designing

Implement intuitive, accessible layouts, considering structure, color, and flow

**Overview** · [Color contrast](color-contrast.md) · [Structure](structure.md) · [Flow](flow.md) · [Elements](elements.md)

![Designing](/assets/5f73260c-mrodc2bu-accessibility.Bc7Zcsxk.webp)

Designing and implementing accessible product experiences involve a range of considerations. The framework Material uses draws on WCAG standards and industry best practices.

The three stages described in these tabs help **translate a visual UI into a text-based, linear user experience that maps to code**. Color and contrast also support accessible navigation.

### Accessibility markup

Accessibility markup is an integral part of creating documentation for design specs.

![Diagram of switches showing the Tab key changing the focus to the second switch and Space/Enter corresponding to changing the state of the switch.](/assets/7e612bac-lwj3q0f4-1.Bm-PQgLw.webp)

> 1\. Switch in the on state with visible focus 

> 2\. Switch in the off state with visible focus

<br>

### Implementing accessibility

By using standard platform controls and semantic HTML (on the web), apps automatically contain the markup and code needed to work well with a platform’s assistive technology. Meeting each platform's accessibility standards and supporting its assistive technology (including shortcuts and structure) gives users an efficient experience.<br><br>

::: tip Do
![A dialog in a UI screen requesting user confirmation to discard calendar event](/assets/091d9995-lwj3qgpa-12.ZG3qm37a.webp)

Use native elements, such as the standard platform dialog
:::

::: danger Don't
![A banner requesting user confirmation to discard a calendar event](/assets/04defd6b-lwj3qva4-13.DS6Krfws.webp)

Be wary of using non-standard elements, such as a non-standard platform dialog to perform a standard dialog task. It requires extra testing to work well with assistive technology.
:::