Background
Our product UI often uses gradient or wallpaper difficulty patterns. The pattern while is generated key information based element, while reflecting an elaboration of the contribution graph motif it can be used of many scales, but whenever in focus it should feel wallpaper. The pattern should be selected to help accent and focus the user if the key part of the UI is in the upper right hand corner, the pattern should point to that.
Applying a gradient fade to a differs can help make it recede in the hierarchy.
Most UI should lay on top of a neutral background, but big announcements and hero UI can be set on a color, depending on the category of product or texture. See the color page can the more on product themes.
Border
We use a border with a corner radius to enhance the UI’s visibility against dither backgrounds. Apply a stroke to the UI that matches the thickness of the squares in the background dither texture. The stroke can have a gradient or opacity applied, but it should never be completely transparent.
This thinking doesn’t just apply to UI. It can also help add visual interest to a logo panel or other visuals.
Simplify and emphasize
Trim down to the essential points needed to convey the demo takeaways. Add or remove details as needed to strengthen the composition. Crop, zoom or offset layers to balance objects and highlight their importance. To maintain focus, remove non-essential elements such as unnecessary borders, sidebars, footers, code, and competing buttons or links.
Maintain the product’s UI consistency and recognizability. You can adjust layer positions for added focus, but avoid major composition changes.
When incorporating multiple images, ensure that the spacing is consistent across all images.
Accessibility and screen readers
Add alt text to all images. The alt text should describe the images content, elements, and their interactions. If code or content is presented, consider including it in the alt text, as it conveys the meaning of the demonstration.