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

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_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

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_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_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_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

Delivering fresh & useful links since... today

small_hero.png

thumbnail_hero.png

hero.png

Digest

The principle of closure states that when we look at a complex group of visual elements, we tend to look for a single and recognizable pattern. The human brain tries to fill in the gaps in order to perceive different objects as a close unit

large_607721e3a896b14cd6c59d95_glossary snippet.png

medium_607721e3a896b14cd6c59d95_glossary snippet.png

small_607721e3a896b14cd6c59d95_glossary snippet.png

thumbnail_607721e3a896b14cd6c59d95_glossary snippet.png

607721e3a896b14cd6c59d95_glossary snippet.png

Principal of Closure – FlowMapp

The principle of closure states that when we look at a complex group of visual elements, we tend to look for a single and recognizable pattern. The human brain tries to fill in the gaps in order to perceive different objects as a close unit. Picture by <a target="_blank" rel="noopener noreferrer" href="https://dribbble.com/clara_rua">Clara Rua</a><figure class="image"><img src="https://cdn.dribbble.com/users/392479/screenshots/1403191/panda.png" alt="Panda"><figcaption>Look at this image. Surely you see a panda. At the same time it is just a group of spots. This is how the principle of closure works</figcaption></figure>

The principle of closure is applied in the design of logos. It helps to create interesting and engaging solutions. For example, WWF logo with panda. Yes, we love pandas!

Brand Logos

Icons should be simple and understandable to all the users. It is not easy to make a good icon as we have a limited space for them and can not detalise the image. Here&nbsp; the principle of closure helps. We reduce icons to their basic elements and build a composition that helps people to recognize objects.

Interface Icons

In Practice

Make sure that users perceive the elements as a whole. Provide enough information and details

Use positive and negative space. Pay attention to hidden shapes in negative space or within type

Use contrast to shape the closure in your design. Black and white are best for this purpose, but experiment with other colors

If you use simple templates, remove or reduce design elements

If you use complex patterns, use the transition elements to help users to form a pattern

Tips & Tricks

Collection of best practices to improve your design according to human behavior principles or their biases

large_607721e3a896b14cd6c59d95_glossary%20snippet

medium_607721e3a896b14cd6c59d95_glossary%20snippet

small_607721e3a896b14cd6c59d95_glossary%20snippet

thumbnail_607721e3a896b14cd6c59d95_glossary%20snippet

607721e3a896b14cd6c59d95_glossary%20snippet

Laws, User Experience — FlowMapp

60661e2c52ea216bc781c574_ux_laws_icon

606627f271e8b7f88ffe7c30_ux_laws_icon%20(2)

606627cf52ea218eb281fe38_ux_laws_icon%20(1)

Laws

abstract_icon-6.svg

Principal of Closure

Navigation is important for users’ interaction with your product. Our task is to set the best and easiest route to solving users’ problems. We can do that using many tools, the most popular below.

Navigation — FlowMapp

Navigation is a set of actions guiding users through the app or website. Navigation is important for users’ interaction with your product. Our task is to set the best and easiest route to solving users’ problems. We can do that using many tools, the most popular below.

Top app bar

It is an interface element including related content and actions on the top of the page. Top app bar can transform into a contextual action bar. It can contain a navigation icon, a title, action items, and an overflow menu. Top bar can also contain imagery, but be careful using it.

large_do-3.jpg

medium_do-3.jpg

small_do-3.jpg

thumbnail_do-3.jpg

do-3.jpg

large_don't.jpg

medium_don't.jpg

small_don't.jpg

thumbnail_don't.jpg

don't.jpg

Don’t use imagery that makes your text and icons unreadable

Bottom Navigation Bar

Bottom navigation bars allow quick switching between sections of an app. They display from three to five options at the bottom of the screen. The icons represent each option and sometimes have a text label.&nbsp;&nbsp;Here are some general rules for bottom bars. &nbsp;<ol><li>Use only 3-5 elements.</li><li>Use short text labels.</li><li>Don’t use multiple colors.</li><li>Avoid using both the bottom and top bars as it may confuse users.</li></ol>

large_do.jpg

medium_do.jpg

small_do.jpg

thumbnail_do.jpg

do.jpg

Simple design that contains only three elements and uses the same color

large_don't-1.jpg

medium_don't-1.jpg

small_don't-1.jpg

thumbnail_don't-1.jpg

don't-1.jpg

Too long text label causes text truncation

Navigation Drawer

Navigation drawers contain main navigation destinations. We use them for apps with more than five destinations, unrelated destinations, or multiple levels of navigation.&nbsp;Here are some basics for this element.&nbsp;<ol><li>It should be permanently on-screen or controlled by an icon.</li><li>It can open from the left side of the screen or the bottom when combined with the bottom navigation bar.</li><li>The text labels should be short and clear.</li><li>We can use icons or leave the text labels without them</li><li>Don’t use the same icon for different destinations.</li></ol>

large_do-2.jpg

medium_do-2.jpg

small_do-2.jpg

thumbnail_do-2.jpg

do-2.jpg

Simple and clear design with recognizable icons

large_don't-3.jpg

medium_don't-3.jpg

small_don't-3.jpg

thumbnail_don't-3.jpg

don't-3.jpg

Don’t apply icons only to some destinations. You should use them for all options or leave only text labels

Tabs

Tabs represent a single row on the top side of the screen. They allow users to move between related and on the same level of hierarchy options.&nbsp;&nbsp;Here are four tips for the tabs’ design. &nbsp;<ol><li>They can be fixed or scrollable. Scrollable tabs should have some tabs off-screen until scrolled.</li><li>We can use icons and text labels or both.</li><li>Text labels should be short and clear.</li><li>Use color change and underline to highlight an active tab.</li></ol>

large_Frame 1222.jpg

medium_Frame 1222.jpg

small_Frame 1222.jpg

thumbnail_Frame 1222.jpg

Frame 1222.jpg

Offset the first tab on the left to show that tabs are scrollable.


large_Frame 1223.jpg

medium_Frame 1223.jpg

small_Frame 1223.jpg

thumbnail_Frame 1223.jpg

Frame 1223.jpg

Don’t use the different padding on each tab.

Breadcrumbs

Breadcrumbs show the user’s current location. It helps users understand better the structure of the site. There are some rules for making your navigation readable.&nbsp;<ol><li>Show the full navigational path.</li><li>Progress from the highest level to the lowest.</li><li>Use page titles as your breadcrumb titles.</li><li>Collapse breadcrumbs if they have more than four items.</li><li>Make the last Item unclickable.</li></ol>

large_do-1.jpg

medium_do-1.jpg

small_do-1.jpg

thumbnail_do-1.jpg

do-1.jpg

large_don't-2.jpg

medium_don't-2.jpg

small_don't-2.jpg

thumbnail_don't-2.jpg

don't-2.jpg

Don’t use slashes as separators. Use arrowheads instead

Use clear labels.

Make your design simple. Avoid unnecessary design elements and animation.

Make the interactive elements look clickable.

Design from left to right. Users are used to it, so put your menu or drawers on the left side of the screen.

Communicate user’s location. Highlight the currently selected section. Consider using breadcrumbs.

Tip's & Tricks

Each of the members of the design team should use the same names for all spread UI elements and stay aware of their basic appearance. It facilitates work and cooperation with developers.

Elements, User interface — FlowMapp

https://uploads-ssl.webflow.com/5ef46931a35256f828a1f539/5f2aa92a541aa940bda74320_elements_icon.svg

https://uploads-ssl.webflow.com/5ef46931a35256f828a1f539/5f2be3a4e31604ba279fa518_elements_icon-color.svg

https://uploads-ssl.webflow.com/5ef46931a35256f828a1f539/5f2be3a0317691d9cfceeeb9_elements_icon.svg

Elements

DG abstract icons.svg

Navigation is a set of actions guiding users through the app or website

Navigation

Branch of design in which interface does not end on the device screen, but goes beyond. To create this immersive experience designers can use different technologies such as augmented reality, virtual reality, mixed reality 360° content

Immersive Design

Branch of design in which interface does not end on the device screen, but goes beyond. To create this immersive experience designers can use different technologies such as augmented reality, virtual reality, mixed reality 360° content.

<h3>3 Immersive Design Use Cases</h3>&nbsp;<h4>Gaming</h4>Gaming applications are definitely taken on a new level through immersive design. Instead of limiting yourself to the screen of the gaming device, you will be able to see the universe of the game around you! This effect of live presence gives users new exciting emotions. One of the most acclaimed examples of immersive design in gaming is well-known <a target="_blank" rel="noopener noreferrer" href="https://apps.apple.com/ru/app/pok%C3%A9mon-go/id1094591345">Pokémon Go</a>.‍<h4>Marketing</h4>Immersive design can help brands not only create unique and spectacular advertising campaigns but also offer retailers better ways to present products to potential buyers. For example, through augmented or virtual reality reviews. You can see how immersive design can be used in marketing campaigns watching <a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/watch?v=ENau7AkayN8">this 360° interactive video, created by Oreo</a>.‍<figure class="media"><div data-oembed-url="https://www.youtube.com/watch?v=ENau7AkayN8"><div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;"><iframe src="https://www.youtube.com/embed/ENau7AkayN8" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe></div></div></figure>&nbsp;<h4>Learning and training</h4>When it comes to learning and training, immersive design can significantly reduce the length of lessons and the cost of their implementation. Students can use emulators that are no different from their living prototypes. A good example of immersive design is <a target="_blank" rel="noopener noreferrer" href="https://www.classvr.com/">ClassVR</a> — it’s a platform that involves VR and AR for education and training.

One of the key features of immersive design is use of virtual and augmented reality. Designers allow users to apply UI elements to real objects. That is what IKEA does in IKEA Place. This application allows to try true-to-scale furniture in user’s own apartments or house.

Use 3D elements as much as possible

Along with 3D graphics, you can implement voice navigation capabilities. This will provide interface control even for those users who are simultaneously busy with something else. Music also creates an immersive experience, but be sure that your design works even without it as you can’t be sure that users have an ability to turn the music on.

Use voice directions and music

Personalization is a huge trend that is also relevant for immersive design. You can personalize your design by remembering the previous actions of a particular user, or via the integration of artificial intelligence based tools.

Personalize UX

Tips & Tricks 

Useful Tools

VR engine for creating solutions with 3D experience. 

Amazon_Web_Services_Logo 1.svg

Amazon Sumerian

Unity_Technologies_logo 1.svg

Unity3D

3D modeling, animation, and rendering software for games and design visualization

Design Glossary

Latest Terms

Principal of Closure

Navigation

Immersive Design

Squirclemorphism

Principal of Closure

Navigation

Immersive Design

Squirclemorphism

Editor’s Pick

UX Laws

Composition

Digest