6/19/2017 Basic UX/UI Terms Everyone Should Know
https://blog.designveloper.com/2017/06/15/basic-ux-ui-terms/ 1/7
Í
Basic UX/UI Terms Everyone ShouldKnow
Have you ever been in a situation where you knew what you wanted your product to look like, but you
had no idea how to communicate with the design agency what you meant in designer-speak? It felt like
foreign language, didn’t it?
Pretty much every job has its own language or set of terms that those working in that field use on an
everyday level, whether it’s being a doctor, a lawyer or a designer. However, this can be quite a
challenge for clients who are not involved in the design industry. So, that’s why we’re here – make thing
easier.
In case you want to be more prepared as you meet prospective agencies, I’ve compiled some of the
most common UX/UI terminologies to help you make sure you are speaking the same language with
designers.
Related: Basic Glossary Of Web Design Terms For Non-Designers
(https://blog.designveloper.com/2016/10/26/web-design-terms/)
First, let’s make clear what’s different between UX and UI:
W E B S I T E D E S I G N ( H T T P S : / / B L O G . D E S I G N V E L O P E R . C O M / C A T E G O R Y / W E B S I T E -D E S I G N / )
B y V a n D o ( h t t p s : // b l o g . d e s i g n v e l o p e r . c o m / a u t h o r / v a n d o / ) o n J u n e 1 5 , 2 0 1 7
Û
Í
6/19/2017 Basic UX/UI Terms Everyone Should Know
https://blog.designveloper.com/2017/06/15/basic-ux-ui-terms/ 2/7
UX (User experience) : UX focuses on the human interaction with the computer or device.
UI (User Interface): The user interface is simply how a user interacts with the design on a page.
Okay, it’s time to find out others. Let’s scroll!
A/B test ing
At its core, A/B testing is exactly what it sounds like: You take two versions of a product , and present
them side by side to a group of users, to determine which one performs better and which one the users
likes more.
BreadcrumbBreadcrumbs are a navigation trail that show users where they have been on your website. Taking a
website which has a lot of pages as an example, breadcrumb navigation in this case can greatly
enhance the way users find their way around.
Call to ActionIt’s a term used for describing specific texts, images, banners or buttons that encourage the reader or
viewer of a website to take an expected, predetermined action.
Simple examples include: “Click here” or “Buy now”.
Conversion
Í
6/19/2017 Basic UX/UI Terms Everyone Should Know
https://blog.designveloper.com/2017/06/15/basic-ux-ui-terms/ 3/7
This term is used to describe when visitors take whatever action that you want them to make such as:
completing a web form, submitting a request for information, subscribing to a newsletter or making an
e-commerce purchase.
Flat DesignThis is a design philosophy that focuses on clean and minimalist styles. Quite literally, flat means
design that has no dimensional depth. Instead of designing elements that look like you can reach out
and grab them, flat design goes back to the basics of graphics – bright colors, primitive shapes, icons,
etc.
Information ArchitectureIt refers to the organization of the information, dealing with what pages go where in a website’s
structure, what content is contained on each page and how each of these interact with other pages
within the site
Landing pageIn the purest sense, a landing page is any web page that a visitor can arrive at or “land” on. Oftentimes,
a special landing page is designed for a specific business purpose (usually in connection with an
advertising or marketing campaign)
Micro-interaction
Í
6/19/2017 Basic UX/UI Terms Everyone Should Know
https://blog.designveloper.com/2017/06/15/basic-ux-ui-terms/ 4/7
Let’s have a look at this example:. When you see the red and white box icon on Facebook, you
automatically know that you have a new message and immediately click on it to read messages. That’s
micro-interactions.
Micro-interactions make devices more human-like in their moments. As a result, the design is more
usable and enjoyable.
Mock-upMockups are basically real size models of how your design is planned to look.
PrototypeMany people cannot distinguish prototype from wireframe. Look at it this way: Wireframe is just a low
detailed presentation of a product, but prototype is a medium or highly detailed representation of the
final product.
It’s the sample model of the product that gives the ability to test it and see if the solutions and
decisions made about the product are efficient.
PersonasA persona is a profile of your one ideal customer. It is usually a fictional character created based on
your user research and interview data.
Í
6/19/2017 Basic UX/UI Terms Everyone Should Know
https://blog.designveloper.com/2017/06/15/basic-ux-ui-terms/ 5/7
Responsive DesignResponsive design creates the layout magically adjusts itself to fit any sizes of the screen, whether
desktop, mobile or smart phone.
Check it out: 5 Compelling Reasons Why Your Website Should Be Responsive
(https://blog.designveloper.com/2016/09/13/responsive-website-design/)
White SpaceWhite space is also called called negative space. It’s the blank space that surrounds text, images or
other parts of the page. One more thing adding, white space is not necessarily white but uses the
background color of the site.
Wireframe
In short, wireframe is a skeleton of you app or product. As I mentioned above, it’s a low detailed
presentation of a design – no images, no content, no interactive elements. It’s like your website
blueprint. Designers will take the main group of content that you want and lay it out exactly as it will be
on your product.
Í
6/19/2017 Basic UX/UI Terms Everyone Should Know
https://blog.designveloper.com/2017/06/15/basic-ux-ui-terms/ 6/7
ConclusionThat’s a look at some of the more common UX/UI terms you’ll see in the design world. Now you’re
practically a designer, right? Just kidding! But guess what? You are totally ready for your meetings with
a design agency!
By no means is this the be-all-end-all of web design terminology… so feel free to add your own glossary
in the comments as well.
(https://www.facebook.com/sharer/sharer.php?
u=https%3A%2F%2Fblog.designveloper.com%2F2017%2F06%2F15%2Fbasic-
ux-ui-
terms%2F)
(http://twitter.com/intent/tweet?
source=Designveloper
Software
agency
-
Meteor
prime
partner&text=https%3A%2F%2Fblog.designveloper.com%2F2017%2F06%2F15%2Fbasic-
ux-ui-
terms%2F)
¬
(https://plus.google.com/share?
url=https%3A%2F%2Fblog.designveloper.com%2F2017%2F06%2F15%2Fbasic-
ux-ui-
terms%2F)
Ɩ
(http://www.linkedin.com/shareArticle?
mini=true&url=https%3A%2F%2Fblog.designveloper.com%2F2017%2F06%2F15%2Fbasic-
ux-ui-
terms%2F&title=Basic%20UX%2FUI%20Terms%20Everyone%20Should%20Know&summary=Have%20you%20ever%20been%20in%20a%20situation%20where%20you%20knew%20what%20you%20wanted%20your%20product%20to%20look%20like%2C%20but%20you%20had%20no%20idea%20how%20to%20communicate%20with%20the%20design%20agency%20what%20you%20meant%20in%20designer-
speak%3F%20It%20felt%20like%20foreign%20language%2C%20didn%E2%80%99t%20it%3F%20Pretty%20much%20every%20job%20has%20its%20own%20language%20or%20set%20of%20terms%20that%20%5B%26hellip%3B%5D&source=Designveloper
Software
agency
-
Meteor
prime
partner)
ã
(http://www.tumblr.com/share/link?
url=https%3A%2F%2Fblog.designveloper.com%2F2017%2F06%2F15%2Fbasic-
ux-ui-
terms%2F&name=Basic%20UX%2FUI%20Terms%20Everyone%20Should%20Know&description=Have%20you%20ever%20been%20in%20a%20situation%20where%20you%20knew%20what%20you%20wanted%20your%20product%20to%20look%20like%2C%20but%20you%20had%20no%20idea%20how%20to%20communicate%20with%20the%20design%20agency%20what%20you%20meant%20in%20designer-
speak%3F%20It%20felt%20like%20foreign%20language%2C%20didn%E2%80%99t%20it%3F%20Pretty%20much%20every%20job%20has%20its%20own%20language%20or%20set%20of%20terms%20that%20%5B%26hellip%3B%5D)
Ŭ
design termsÜ user experienceÜ user interfaceÜ UX/UI termsÜ web design termsÜwebsite designÜ
Ű Best Free Icon Fonts That Web Designers Can Not Ignore (https://blog.designveloper.com/2017/06/07/best-
free-icon-fonts/)
% (https://blog.designveloper.com)
Y O U M AY A L S O L I K E
Í
Top Related