DocuWare Design

Guidelines and resources to create DocuWare digital interfaces

Docy

Components

Estimated reading: 2 minutes 381 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.

Alerts
Alerts

Keep users on their toes using Alerts Alert is a messaging tool used to notify users when something important happens in the current case or flow or to prompt them to take an action. Specifications Anatomy An alert typically consists of several key elements, which can include: Title: a brief text that appears at the

Banners
Banners

How inform and alert users with Banners ? A banner is a powerful tool for communicating important information or alerts to users on a website or application. It is a prominent message that appears at the top or bottom of the screen and persists over a session, making it highly visible and hard to miss.

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

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

CONTENTS

Loading Patterns

Engaging users while waiting with Loading Patterns This section will expose the ...

Alerts

Keep users on their toes using Alerts Alert is a messaging tool used to notify u...

Banners

How inform and alert users with Banners ? A banner is a powerful tool for commun...

Bias-Free Language

General guidelines for writing about people without biases

Text

Text Area

Time Input

Date Input

Slot Input

Masked Input

Number Input

Text Input

Chat Icon Close Icon