Name: Design Glossary — FlowMapp
Brand: FlowMapp
Availability: OnlineOnly

The section contains terms of traditional color theory, and introduces you to special terminology of web colors — its structure and logical connecitons.

large_607721e3a896b14cd6c59d95_glossary%20snippet

medium_607721e3a896b14cd6c59d95_glossary%20snippet

small_607721e3a896b14cd6c59d95_glossary%20snippet

thumbnail_607721e3a896b14cd6c59d95_glossary%20snippet

607721e3a896b14cd6c59d95_glossary%20snippet

Color, User interface — FlowMapp

large_5f3aa99365d8f8db97acdd1e_category%20card_ui__1920_696

medium_5f3aa99365d8f8db97acdd1e_category%20card_ui__1920_696

small_5f3aa99365d8f8db97acdd1e_category%20card_ui__1920_696

thumbnail_5f3aa99365d8f8db97acdd1e_category%20card_ui__1920_696

5f3aa99365d8f8db97acdd1e_category%20card_ui__1920_696

5f3ab4590345cd978afc3ea7_ui_icon

design is the process designers use to build interfaces in software or computerized devices, focusing on looks or style

2 listings

User Interface

5f2aa93818cd24b25599b084_color_icon

5f2be47557718de3991efc18_color_icon-color

5f2be472022b3984caa2c95f_color_icon

Color

large_5f325d20607a1474e4bcfb6f_category%20card_cx__1920_696

medium_5f325d20607a1474e4bcfb6f_category%20card_cx__1920_696

small_5f325d20607a1474e4bcfb6f_category%20card_cx__1920_696

thumbnail_5f325d20607a1474e4bcfb6f_category%20card_cx__1920_696

5f325d20607a1474e4bcfb6f_category%20card_cx__1920_696

5f3ab42e8b2f9226d34dd2ff_cx_icon

focuses on usability of sites, user reviews, customer loyalty index

3 listings

Customer Experience

large_5f3aa9a491dd005fbd9da1a9_category%20card_ux__1920_696

medium_5f3aa9a491dd005fbd9da1a9_category%20card_ux__1920_696

small_5f3aa9a491dd005fbd9da1a9_category%20card_ux__1920_696

thumbnail_5f3aa9a491dd005fbd9da1a9_category%20card_ux__1920_696

5f3aa9a491dd005fbd9da1a9_category%20card_ux__1920_696

5f3ab44f1e10243c3d918b06_ux_icon

is the process design teams use to create products that provide meaningful and relevant experiences to users. This involves the design of the entire process of acquiring and integrating the product, including aspects of branding, design, usability and function.

5 listings

User Experience

large_606b17535f86cb3f498b1ede_category%20card_productivity__1920_696%20(1)%20(1)

medium_606b17535f86cb3f498b1ede_category%20card_productivity__1920_696%20(1)%20(1)

small_606b17535f86cb3f498b1ede_category%20card_productivity__1920_696%20(1)%20(1)

thumbnail_606b17535f86cb3f498b1ede_category%20card_productivity__1920_696%20(1)%20(1)

606b17535f86cb3f498b1ede_category%20card_productivity__1920_696%20(1)%20(1)

606716c8a9322fc8bd91a4ba_productivity_icon

are about small changes in how you work, raise your or your team's talent and find work-life balance

Productivity

large_5f3aa9c03eba5d4ca636f26f_category%20card_ixd__1920_696

medium_5f3aa9c03eba5d4ca636f26f_category%20card_ixd__1920_696

small_5f3aa9c03eba5d4ca636f26f_category%20card_ixd__1920_696

thumbnail_5f3aa9c03eba5d4ca636f26f_category%20card_ixd__1920_696

5f3aa9c03eba5d4ca636f26f_category%20card_ixd__1920_696

5f3ab438c8fa4f256028f0c9_ixd_icon%20(1)

is based on animation inside interfaces: moving icons, menus, transitions, gifs. Motion designers work on IxD

Interaction design

large_5f3aa9b291dd0056399da1b8_category%20card_sd__1920_696

medium_5f3aa9b291dd0056399da1b8_category%20card_sd__1920_696

small_5f3aa9b291dd0056399da1b8_category%20card_sd__1920_696

thumbnail_5f3aa9b291dd0056399da1b8_category%20card_sd__1920_696

5f3aa9b291dd0056399da1b8_category%20card_sd__1920_696

5f3ab4430dc3b215841f8cad_sd_icon

is the process of building relationships between an end client and a business to balance their needs

Service design

Design Glossary contains popular and useful terms commonly used by web design and UX professionals

large_https://uploads-ssl.webflow.com/5ef46931a352569ed1a1f509/5f3e7055c0acb276cbedbcb5_main_sn.png

medium_https://uploads-ssl.webflow.com/5ef46931a352569ed1a1f509/5f3e7055c0acb276cbedbcb5_main_sn.png

small_https://uploads-ssl.webflow.com/5ef46931a352569ed1a1f509/5f3e7055c0acb276cbedbcb5_main_sn.png

thumbnail_https://uploads-ssl.webflow.com/5ef46931a352569ed1a1f509/5f3e7055c0acb276cbedbcb5_main_sn.png

https://uploads-ssl.webflow.com/5ef46931a352569ed1a1f509/5f3e7055c0acb276cbedbcb5_main_sn.png

Design Glossary — FlowMapp

Color theory describes a secondary color as primary color mixing.

Secondary color — FlowMapp

Color theory describes a secondary color as primary color mixing. In UI design, the secondary color is accent one, less frequently used in comparison to primary hue.&nbsp;Not each UI guideline has got an additional palette of secondary colors, but they are quite handy in massive data visualizing, like graph lines, tables, or charts.&nbsp;<figure class="image"><img src="https://cdn.dribbble.com/users/1986109/screenshots/5765635/ecogrid-0.png" alt="Color Palette"><figcaption>Ecogrid — Color Palette by <a target="_blank" rel="noopener noreferrer" href="https://dribbble.com/dharanshumee35">Anshuman Dhar</a></figcaption></figure>

5f3d5f4e88d1a1124df0e908_abstract_icon-85

Secondary color

In color theory, primary colors are the trinity of blue, red, and yellow, as they cannot be created by mixing other colors.

Primary color — FlowMapp

In color theory, primary colors are the trinity of blue, red, and yellow, as they cannot be created by mixing other colors.&nbsp;However, in UI design, primary color means the major tones of the brand or merely those which are used the most in the interface. There might be from one to three primary colors, but not more.&nbsp;<figure class="image"><img src="/uploads/5f3d5ee97898093776ed5bbd_color_shot_2x_2d0c5bdf6e.png" alt="Figma Design System | Color"><figcaption>Figma Design System | Color by <a target="_blank" rel="noopener noreferrer" href="https://dribbble.com/tylerjwain">Tyler Wain</a></figcaption></figure>

5f3d5ed72973d5832aeb6bc8_abstract_icon-84

Primary color

A special tint, used to identify a component error, for example invalid text, the exceeded limit of symbols or uploaded file size, etc.

Error color — FlowMapp

A special tint, used to identify a component error, for example invalid text, the exceeded limit of symbols or uploaded file size, etc. Usually, bright red works here well.&nbsp;<figure class="image"><img src="https://cdn.dribbble.com/users/99022/screenshots/989639/media/560c33a02b3026a46dac74609b72ac82.jpg" alt="Validation options"><figcaption>Validation options by <a target="_blank" rel="noopener noreferrer" href="https://dribbble.com/kellydyson">Kelly Dyson</a></figcaption></figure>&nbsp;

5f3d5e80078f35c4c7078bc6_abstract_icon-83

Error color

A term from color theory, referring to a special tool that helps to learn the relationship between colors.

Color Wheel — FlowMapp

A term from color theory, referring to a special tool that helps to learn the relationship between colors — which ones are relative to each other, which are contrasting, and how to combine various colors. All these connections are put to the form of a wheel, where colors are organized in a special order: relative colors are next to each other, contrasting are placed opposite to each other. &nbsp;The colors used in the color wheel are:&nbsp;<ul><li>primary: red, blue, yellow</li><li>secondary: ones, created by mixing two primary colors</li><li>tertiary (intermediate): colors, created by mixing primary and secondary ones</li></ul><figure class="image"><img src="https://cdn.dribbble.com/users/702181/screenshots/6189263/color-wheel.png" alt="Color wheel"><figcaption>Optimal Color Wheel by <a target="_blank" rel="noopener noreferrer" href="https://dribbble.com/wolfie">Mikael Cedergren</a></figcaption></figure>

5f3d5e1a959824318c419beb_abstract_icon-82

Color Wheel

The color that is seen behind the content.

Background color — FlowMapp

The color that is seen behind the content. Usually, for background white or some neutral tints are used, for instance #FFFFFF. The main feature of the background color is high contrast with text color, not less than 80%.&nbsp;If some dark colors are chosen, then, the high-chroma colors yellow (#FFFF00), green (#00FF00), cyan (#00FFFF), and magenta (#FF00FF) suit best. White here is over contrasting, providing high tension of eyes and worse legibility.&nbsp;<figure class="image"><img src="https://cdn.dribbble.com/users/3367468/screenshots/10986711/media/ef3f12aca1661c8694122c425d747396.png" alt="Background Pattern"><figcaption>Background Pattern by <a target="_blank" rel="noopener noreferrer" href="https://dribbble.com/victorprs">Victor Pérouse</a></figcaption></figure>

5f3d5d5f03a7a165eaed9c2d_abstract_icon-81

Background color

Alternative colors form an additional palette to the main brand colors.

Alternative colors — FlowMapp

Alternative colors form an additional palette to the main brand colors. It is used for light and dark themes, highlighting software which is a part of the product line, or dividing independent sections inside one product. &nbsp;

5f3d5d1a82ce8a42285968ba_abstract_icon-80

Alternative colors

It is a rule of color proportion for the interface palette, where the main color mass of some neutral tint takes 60% of it

60-30-10 Rule — FlowMapp

60-30-10 rule may help you harmonize your color scheme and make a well-balanced interface design.&nbsp;The idea is simple. When you choose a new color palette, 60% of the palette is dedicated to the dominant color — usually, we call it neutral. Secondary color, or complementary, makes up 30% of the palette, and a third color, accent one, is used for the remaining 10% of the design.

Here is a short explanation how this rule works

medium_b1702872bc1138ab3ac00628cfe62489.webp

small_b1702872bc1138ab3ac00628cfe62489.webp

thumbnail_b1702872bc1138ab3ac00628cfe62489.webp

b1702872bc1138ab3ac00628cfe62489.webp

Grayscale first. You can lose a lot of time by applying colors too early. Focus on spacing and laying out elements before

Contrast the text. Make it readable by contrasting with the background

Don’t use pure gray or black. It is more natural to add some saturation. We rarely see pure gray colors in real life

Use color generators. They will simplify your search for a well-balanced color palette. We listed the most popular for you below

Tips & Tricks

Useful Tools

Coloors_logo.svg

Coolors.co

79e46e40d3cfc6c38438ff25f77d9760 1.svg

Kuler

Similar to Kuler, but you are not limited to 5 tones

Group 2.svg

Paletton

Inspiration tool. You can pick up to 5 colors and search images matching your query

All terms in

Color(7 terms)