GUIDES OF DESIGN

A compilation of some good UXD principles, guides, best practices, and trends keep evolving year after year. These guides are crucial for a healthy design ensuring users' satisfaction.

Our Goal

To learn everything possible from users using our methods. Being able to understand their crucial needs. Being able to translate their needs into amazing visual, interactive, and productive solution experiences.

Design Systems

A design system is a collection of reusable functional elements–components and patterns–guided by clear standards that product teams use to create a consistent experience across a range of products. Design systems act as a single source of truth for an entire organization by using a singular design language to guide the development of products. Learn more about UX design systems and how design teams can benefit from them.Type a message

Hierarchy and focus

Apps should give users feedback and a sense of where they are in the app. Navigation controls should be easy to locate and clearly written. Visual feedback (such as labels, colors, and icons) and touch feedback show users what is available in the UI.Navigation should have clear task flows with minimal steps. Focus control, or the ability to control keyboard and reading focus, should be implemented for frequently used tasks.

Place items on the screen according to their relative level of importance.

  • Important actions: Place important actions at the top or bottom of the screen (reachable with shortcuts).

  • Related items: Place related items of a similar hierarchy next to each other.

Focus order

Input focus should follow the order of the visual layout, from the top to the bottom of the screen. It should traverse from the most important to the least important item. Clarify where the focus exists through a combination of visual indicators and accessibility text. Determine the following focus points and movements:

  • The order in which elements receive focus

  • The way in which elements are grouped

  • Where focus moves when the element in focus disappears

unifying theory

A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.

Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supersede those in the physical world, without breaking the rules of physics.

The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.

Contrast rations

The contrast ratio between a color and its background ranges from 1-21 based on its luminance, or intensity of light emitted, according to the World Wide Web Consortium (W3C). Contrast ratios represent how different a color is from another color, commonly written as 1:1 or 21:1. The higher the difference between the two numbers in the ratio, the greater the difference in relative luminance between the colors. The W3C recommends the following contrast ratios for body text and image text:

  • Small text should have a contrast ratio of at least 4.5:1 against its background.

  • Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.

    Icons or other critical elements should also use the above recommended contrast ratios.

Do

These lines of text follow the color contrast ratio recommendations and are legible against their background colors.

Don't

These lines of text do not meet the color contrast ratio recommendations and are difficult to read against their background colors.

Do

These icons follow the color contrast ratio recommendations and are legible against their backgrounds.

Don't

These icons do not follow the color contrast ratio recommendations and are difficult to discern against their backgrounds.

Motion provides meaning

Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design. All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize. Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.

DESIGN THINKING

The answer for creating a full balanced journey from problem to solution through the user's eyes and mind. The foundry of innovation.

Clear design

Help users navigate your app by designing clear layouts with distinct calls to action. Every added button, image, and line of text make the screen more complicated. Simplify your app’s UI with:

  • Clearly visible elements

  • Key information discernable at a glance

  • Sufficient contrast and size

  • A clear hierarchy of importance

Simple by design

Design your app to accommodate a variety of users. A user may have a short attention span, be new to your product, or use a text-only screen reader (a program that uses a speech synthesizer to read text aloud or kinesthetically using a braille display). Your app should make it easy for each user to:

  • Navigate: Give users confidence in knowing where they are in your app and what is important.

  • Understand important tasks: Reinforce important information through multiple visual and textual cues. Use color, shape, text, and motion to communicate what is happening.

  • Access your app: Include appropriate content labelling to accommodate users who experience a text-only version of your app.

Color and contrast

Use color and contrast to help users see and interpret your app’s content, interact with the right elements, and understand actions. Choose primary, secondary, and accent colors for your app that support usability. Ensure sufficient color contrast between elements so that users with low vision can see and use your app.