UI/UX Terminology: What Every Client Should Know

DZone 's Guide to

UI/UX Terminology: What Every Client Should Know

Buzzwords no longer — what all developers need to know about UI/UX design.

· Web Dev Zone ·
Free Resource


Get hip to the design terminology you need to know

If you have a look at what UI/UX designers do, you’ll probably see some pictures, photos, or other kinds of drawings. When you start talking to them, what you hear might sound like a collection of buzzwords. They’re not.

We’ll guide you through the key UI and UX terminology that you will definitely hear from designers while they are working on your project.

You may also like: UX Design Trends to Watch for in 2019

First coined by cognitive scientist, Doctor Donald NormanUser experience (UX). This term refers to the way a user perceives a design and how intuitive navigation through the pages of an app is.

  • Customer experience: This is the way a customer interacts and uses software. In most cases, it’s an employee of the company (that has ordered a design service).

  • User experience design/UXD: Here, we have the more practical side of the design— how comfortable it is to use the app and whether the app meets the expectations and requirements of end-users.

  • Graphical user interface/UI/GUI: It’s all about what the user will see on each screen of the app. It’s a pack of various elements, visuals, texts, and so on.

  • Interaction design: Designers predict how end-users will interact with software, and they base their design ideas on these suggestions.

  • The rule of 3 clicks: There’s a theory that users will leave an app or website if they can’t solve their tasks in three clicks or screen taps.

  • Sketch: It’s a picture that contains some raw ideas about the future design of a page element. It can be a simple drawing on paper or even on the office walls. This term is sometimes treated as UX jargon. (It’s also a very popular software suite used by many designers.)

  • Mockup: It’s the full picture of how the future page will look like. It can be in .psd format and contain layers for every single element and block. A designer can offer a .png image to show you what a future page/product will look like. It relates more to UI. An animated mockup (rare!) might also show some UX workflows.

  • Wireframe: It’s a functional sketch of the page or even the whole app. You can see a rough draft of your page and the layout of images/text on it. The goal of a wireframe is to show the performance of the software and if it’s easy to interplay with it. It relates more to UX terminology for user experience design.

  • Prototype: A high-fidelity prototype will give you a full view of the app and its performance. You can analyze the way visual elements look like and how responsive the app is. You can see if it’s comfortable to deal with the app and how it reacts to your requests.

  • Minimum variable product/MVP: It’s a raw version of an application. It can be used by the company to communicate with users and test the app in real-time. It’s one of the most commonly used UX terms.

  • Grid: These are vertical and horizontal lines that create a structure for the page. It lets designers save time for ordering elements and making them look consistent.

  • A rule of 60-30-10: Designers don’t pick up colors and their combinations at random. One of the most common rules is picking up three major colors and using them in 60%+30%+10% proportions.

  • Contrast: A proper contrast will let users distinguish elements on a page one from another. For example, there’s a very high contrast between black and white colors. There can be a sharp line between them or a gradient to make the transition between the colors smooth.

  • Color wheel: A designer can match colors with the help of this wheel. It has a set of colors in a specific order, and there are standard rules of color combinations that work for this wheel.

  • Gestalt: Psychological term that means “the full picture.” A designer should have a basic understanding of the way the information is perceived by the users and how a combination of various visual elements can make a person make a specific action.

  • Mindmap: It’s a visualization of ideas and requirements for future design. It should have a hierarchy to provide an idea of how each element is related to another one. There should be a key concept that will become the core of the future project.

  • Customer journey: Designers can build a map where they will predict the way user will behave while using the new application; each touchpoint should be noted down and tested.

  • Responsive design: It’s related to UX design terminology. Such a design means that the user will have the same experience while using software on different devices and operating systems.

  • User engagement: It’s the way the user reacts to the content that is placed on a specific page — it should provide value, solve problems, or answer questions from end-users.

Related Articles

prototype, sketch, ui and ux, ui terminology, ux design, ux terminology, web dev, wireframe

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}