Design DocuWare

Guidelines and resources to create DocuWare digital interfaces

Design System

DocuWare Design System

DocuWare Design System is a set of guidelines for document management solutions and digital experiences. Based on the company’s Design Language and Values, the system provides human interface guidelines for user-centric design.

  • Design System includes the guidelines and resources to create user interfaces consistent with the company vision, design language, and market best practices. In addition, provided materials focused on user experience, interactions, and flows.
  • Writing guidelines, and pattern libraries, together with style guides, toolkits, and design principles, form an entire Design System.
  • Design System provides various resources for designers, developers, and everyone involved in creating and improving DocuWare products.

Purpose and Goals

Purpose

The DocuWare Design system’s primary purpose is to increase product development efficiency. 

  • With a consistent design language in place, it becomes easier to design products at scale that are consistent in aesthetics, user interface, and user experience.
  • DocuWare also promotes collaboration through the Design System since handoffs across distributed teams become easier.

Goals

Optimization

We strive to save time and energy by letting designers and developers focus on more important topics of usability, flows, and user needs. In addition, standardized, reusable components support collaboration, reinforce branding and provide a consistent look and user experience.

Inclusiveness

Our goal is to create and provide perceivable, operable, understandable, and robust products for all kinds of users around the globe. Kinetic Design System establishes guidelines and requirements to empower the DocuWare products’ inclusivity and accessibility.

Dynamic

Design System is a living creature that evolves with technologies and user needs. Our UX team constantly expands and improves the design possibilities keeping DocuWare products in line with market and user demands.

Principles

Design System is based on the following principles:

Clarity

Design should eliminate ambiguity and enable people to access, understand, and act confidently while interacting with the DocuWare product.

Efficiency

The Design System should intelligently anticipate needs to help users work better, smarter, and faster.

Consistency

Design System enhances familiarity and strengthens intuition by applying the same rules and requirements throughout the user interfaces.

How to begin

A Design System is a collection of rules, principles, constraints, and best practices for design and code, along with components that unify both practices.

The design does not scale smoothly, and efficiency doesn’t emerge from thin air. So DocuWare Design Teams created a catalog of the reusable items in the product.

This includes patterns, colors, text styles, icons, grid systems, and even interactions, which Designers, Developers, Product Owners, Product Managers, and other stakeholders and participating roles should consider in the Product Development processes.

Designers

Begin with the following:

  1. Explore the Guidelines to learn the DocuWare product design patterns and principles.
  2. Familiarise yourself with DocuWare Tone of Voice and Writing Guidelines for the user interface copy and microcopy.
  3. Review the Components section to enlighten yourself with the existing components which can incorporate into your designs.
  4. Check the Patterns, architecture, and usage principles.
  5. Learn about Accessibility and Inclusivity guidelines.
  6. Access the UI Library and design Tokens.

Developers

Use the design system for the following purposes:

  1. Get an overview of styling and interaction guidelines of the user interface Components and Patterns.
  2. Review the Components' and Patterns' visual representation and documentation.
  3. Get access to the Angular-based components library and code snippets.
  4. Get access to the UI library with Styles and Design Tokens.

Colors

Typography

Icons

Interactions

Focus

Focus visually identifies the elements that will respond to interactions like a mouse click, a keyboard command, or a tap and enable a simplified, element-based navigation experience.
  • When a user moves through the digital products by jumping between the page’s links, buttons, or form fields, it needs to be apparent to the user which elements are interactable and which part of the screen they’re on.
  • Components and patterns in the Design System should provide styles to clarify these things.
  • Guiding user attention and supporting the user while navigating the product is one of the primary tasks of designers.

Focus Types

Browser/System Focus

To meet the accessibility requirement, designers and developers should avoid removing the focus indicator provided by the browser or operating system unless they are replacing it with their own focus indicator, which is recommended.

Designers need to remember that a default-focused state may not be enough because a focus indicator needs to be distinctly visible to be accessible. 

Keyboard Focus

Keyboard users typically navigate through the product by pressing the Tab key. It allows them to jump from one interactive element on the page to another. But, just like mouse users, they need to be able to see where they are on a page.

The user interface must provide a focus indicator that highlights the currently focused element and allows keyboard users to notice precisely where they are at any given moment of use.

Mouse Focus

Mouse focus is shown through the Hover state of interactive components. While the user moves the pointer above the UI elements Hover state alongside interactivity signifies the current focus.

Principles

  • Designers should ensure that the user can always tell where their focus is on the page.
  • The Focus state of the user interface elements should include external and internal changes in the elements - this should be a combination of the Hover state with the Focus indication.
  • The focus should never rely solely on color change and always include other visual indicators.
  • The UI focus should never move without users' actions triggering a change.
  • Every focusable element should have a focus style that is visually distinct from its other states.
  • Users should be able to control Focus movement as much as possible.
  • Designers should keep in mind that focusing on a UI item is not always the same as selecting them and evidently communicate this in their concepts.

Usage

  • A single color technic should be used to signify Focus (same color for shape, outline, and other visual elements and same color for background).
  • If users dismiss the focused element, the Focus should be moved to the next logical place in the UI.
  • When a user interacts with popover/overlaying components, the Focus should return to the element that triggered the display of that component after the user dismissed it.
  • To ensure users understand where is interface attention point is and what element is interacting at the given moment system should provide a combination of focused and hovered states.

Focus technics

When a user’s action causes a UI change, such as an element appearing or disappearing from the screen, different focus management techniques can be used to prevent the user from getting lost. 

When focus management is done right, it helps all kinds of users navigate the product without causing a cognitive load. Additionally, it supports keyboard and screen reader users in discovering UI changes and helps them easily reach the next logical step in the flow.

How to express the focus:

Component focus state

Every component and UI interactive element should be able to communicate a focused state. The more significant the structure change and contrast between the unfocused and focused states, the easier it is for users to see it. Focus states can include the usage of additional shapes, changes in the color shades, the invention of the color, underlines, and other UI tricks to signify state change.

Examples:

Links are given a darker shade of color and a visible rectangular outlined shape around them when they have focus. This combination ensures good contrast and visibility. Likewise, buttons are given darker background color and rectangular shape around the component similarly. This focused style should be applied to all types of buttons.

Focus Indication Area

Focus Indication Area is a shape around the component, pattern, or block with a filled background of neutral color. Usage of this additional area helps show the focus element and bring attention to the part of the product page under focus. This technique should be used alongside the component focus state and should not be considered a standalone tool.

Focus Symbols

To communicate Focus elements in the user interface designers may use special symbols appearing close to the element under focus:

Focus Animation

States

Loading

Scrolling

Drag and Drop

Pointer-Cursor

Touch Mode

Undo and Redo

Keyboard Interaction

Keyboard Shortcuts

Notifications

Animation

Animations in the user interface allow Designers to direct the user's attention to content, controls, and predefined flows. Micro-interactions can convey intuitive messages that users can easily understand without the need for explanation. Fluid motions help obtain status, provide feedback and instruction, and enrich the visual experience.

Principles

  • The primary principle of the User Interface animation - it should be fluid.
  • User Interface motions should be focused on the possibility of giving the user a more immersive and engaging experience.
  • The animation should be used only as a supportive tool. Users might not see animations onscreen for different reasons, including the system or browser configurations. It's essential to avoid using animations and motions as the only way to communicate important information.
  • Motions should be informative and highlight relationships between elements.
  • Accurate and realistic animation can help users understand how the User Interface works. Motions without logical sense and well-known physical laws can disorient users.

Usage

Yes

  • The animation should be used only with interactive components. Designers should avoid or minimize motions of not interactive UI elements.
  • Designers should strive for a short and precise animation.
  • Animation with frequently occurring interactions should be avoided or minimized.
  • The animation should reflect the hierarchy between parental and child elements.

No

  • The animation should not overshadow the User Experience. Nothing should distract users from their primary goals. Gratuitous or excessive animation can distract users or make them feel disconnected.
  • Animation in the product should not be used for a fun purpose and have functional goals. Designers should use animation and motion to communicate messages to enhance feedback and understanding by showing how things change, what will happen when people perform an action, and what they can do next.

While creating animations, Designers and Developers should follow the next principles of animation design in the User Experience:

Types

Transition

Transition animation should mimic the natural world and be logical. This type of animation should depend on user flow and content. As it is easy to confuse users with transition animation, Designers should pay attention to the mental models and expectations about the content and new pages' appearance.

This type of animation should be used to emphasize key points in a user journey and reinforce or add to the icon's meaning.

The animation should indicate the status of user or system actions.

The animation should be used to provide feedback to show if the action was successful.

The animation should help users understand how to perform actions and invite or encourage the necessary actions.

Confirmation

Acknowledgement

Search and Results