UI/UX Terms Everyone Should Know

Intro

This article is dedicated to people that have to communicate with designers. Is designer your friend or colleague? Do you hire designers team to work on your project? Did you meet a cute designer on the party? That doesn’t really matter. While having a conversation about designing stuff, be sure to speak the same language with designers. This article is intended to shed some light on the most commonly used UI/UX terms.

Wireframe

wireframe The wireframe is a low detailed presentation of a design. It is not just a set of grey blocks, though it may look that way. It’s a skeleton of the design that should contain all the important elements of the final product. It must clearly show the main groups of content, the data structure, and the description of the user interaction with the interface. Wireframe describes the scope of work on the project for all the team: the developers, designers, copywriters, managers — they all need a well-crafted wireframe.

Prototype

Prototype The prototype, that is often confused with wireframe — is a medium or highly detailed representation of the final product, that simulates user interaction with the interface. It should allow the user to rate the content and interface and test the primary options of communication with the app (as if it was finished). It may not look exactly like the final product, but it definitely should not be sketched in shades of gray. Interactions must be modeled accurately and be close enough to the final product.

Mockup

Mockup The mockup is a medium or high detailed static representation of the design. Good mockup represents the information structure, renders the content and demonstrates the basic functionality in static. Due to its visual nature, mockups are easier for perception than grey-blocked models and the process of Mockup creation is less time-consuming compared to prototypes. That’s why mockups are often used for the approval of the interested parties, not involved in the development process.

Responsive design

Responsive design Let’s move from design models to design types, and start with the responsive design term. You may ask me: “What can design respond to?”. The answer is — the type of the device used to interact with your app or website. There is a huge fragmentation of the devices with the access to the internet nowadays. Your web or mobile app should look amazing regardless the screen size and resolution. Some blocks might be relocated during the adaptation, menus might be displayed differently, but all the functionality and content is being saved.

Flat design

Flat design Flat design is a design philosophy, which is based on simplicity and functionality. There are no techniques used to apply depth: no gradients, shadows, textures, and highlights that give a realistic view of the object. Flat design refers to the basics of graphics — bright colors, simple forms, buttons, and icons.

Skeuomorphic design

Skeuomorphic design Skeuomorphic design is the complete oppositeness to the flat design. Do you remember the design of the older Apple’s iOS versions? Applications and icons looked like they were taken from reality. That is the essence of skeuomorphism. After several years of widespread popularity skeuomorphic design lost its positions and now you can meet it rarely, in a few specific industries, for example, gastronomy.

Empty state

Empty state Empty state — is a term indicating the free space between the elements on the page. It is not used as a separate element but serves as a frame in the structure. Those are not only good from aesthetic point of view but also improve the website’s usability and serve as guidelines for users.

Metro interface

Metro interface Metro interface is also known as the "Microsoft design language”. It was developed by Microsoft and is used today in many of the company's products. Roads signs served as the inspiration for its creation. Its task — to be simple and clear. The main thing here is to think about the usability, not the artwork.

Red Route

Red Route A red route is an investigative approach to structuring the frequent and critical activities of the end users. Defining the red routes for your site means that you'll be able to identify and eliminate any usability obstacles on the key user journeys. It’s used to make sure the user’s journeys through your app will be as smooth and quick as possible

Gamification

Gamification Gamification is a process of the user entertainment during the app use. The main task of it — to make the most boring and unloved actions funnier to execute. Gamification allows you to increase the average time spent by the user in your app. Be careful with the gaming elements, overcommitting in those may turn into a loss of the initial app concept.

Landing page

Landing page The concept of the landing page was created in the US more than 10 years ago by internet marketers. At one point, they realized that the competition between companies on the web grows continuously, websites and online stores are becoming better and better and it’s becoming harder and harder for the user to understand why one company is better than another. The landing page is a webpage with the most simple navigation possible and a single call to action option. The main goal of the page is to increase the amount of the requests from potential clients.

Outro

Those are just few most common terms used during the designers' hard-work process, which is obviously not limited to creating few icons here and few screens there. There is a huge religion hidden behind the scenes. I hope this short article provides you with some better understanding of some commonly used UX/UI terms. Feel free to ask any questions in the comments in case of any additional information needed.

Enjoyed reading?
Get the set of design TIPS & TRICKS from professionals:

Comments