DocuWare Design

DocuWare principles, design language, and market best practices

Feedback
Updated on November 16, 2022

Docy

Components

Estimated reading: 2 minutes 254 views

What are Components?

The most crucial part for creative designers is the components that can simultaneously convey information and perform functions representing the product’s purpose, principles, and philosophy.

Components are the user interface building blocks that help to create visual and functional consistency across products.

Each component is created by designers and coded by developers to address specific user interface needs such as presenting options, enabling features, providing feedback to the user, etc. As a result, they minimize the effort required to build the product. The development team can speed up workflow, save time, and avoid duplication by reusing as many components as possible, as interface elements don’t have to be recreated from scratch.

All design system components are designed to work harmoniously together as part of a unified whole.

Buttons

Buttons - components, used to initialize an

Checkboxes

Microcopy Label Keep it short Write for a single line Write unique and descriptive for each label Use sentence capitalization The label should be understandable even when stand-alone Don’t use punctuation Description For a longer description, prefer to start with a verb For a shorter description, consider writing a noun Name the specific action the

Dialogs
Dialogs

How to communicate with Dialogs in mind? Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks. A dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they

Input

Microcopy Use sentence case capitalization according to APA Style Don’t use punctuation The placeholder text in input fields should not contain critical information (instructions or requirements) not displayed elsewhere. Avoid appending the word “here” Write the placeholder text as an example or call-to-action: ExampleIf necessary, add “Example” at the beginning Do MM/DD/YYYY Do email@companyname.com Call-to-action

Links

Microcopy Write descriptive and unique text for each link Don’t use punctuation Don’t capitalize Do You may create an email with your favorite email client and copy all links. Don’t You may create an email with your favorite email client and copy all links.More Information Do Define rules to transfer documents from one file cabinet

Loaders

Loaders are progress indicators informing about

Overlays
Overlays

Pickers
Pickers

Radios

Microcopy Label Keep it short Write for a single line Write unique and descriptive for each label Use sentence capitalization The label should be understandable even when stand-alone Don’t use punctuation Description For a longer description, prefer to start with a verb For a shorter description, consider writing a noun Name the specific action the

Toggles

Microcopy Label Use sentence case capitalization according to APA Style Write a single line: If possible don’t use more than 3 words Prefer to use nouns. Don’t write verbs in toggles with label and description Write unique and descriptive Don’t write sentence fragments. The label should be understandable even when stand-alone Don’t use punctuation Note When

General Accessibility - Previous Color Next - Components Patterns
CONTENTS
Design System Contact Us
Chat Icon Close Icon