University
Home
Search
⌘E
Dashboard
Try Webflow — it's free
Learn
Courses
Docs
Videos
Interactive Learning
Glossary
Certifications
Engage
Support
Community
Events
Forum
Accessibility
Switch to Light mode
Switch to Dark mode
High contrast
Glossary
User interface (UI)

User interface (UI)

A user interface (UI) is any visual element humans interact with on a device, webpage, or application.

There are 3 types of user interfaces:

  • Graphical user interface (GUI) — virtual environments and operating systems where users interact with various apps and tasks and perform actions through graphical elements such as windows, buttons, menus, and icons. Examples include Windows, MacOS, iOS, Android, and Linux.
  • Voice-user interface (VUI) — software that allows users to use voice recognition and natural language processing technologies to execute specific actions. Examples include Siri, Google Assistant, and Alexa.
  • Gesture-based user interface — platforms that allow users to interact with virtual platforms using gestures like tapping, scrolling, swiping, and other physical movements. Examples include Tap to Pay on iPhone, virtual reality (VR) headsets, and gesture recognition in cars and smart home devices.

Each UI type has 4 essential components:

  • Navigational components — guide users through the UI, providing elements like back arrows, hamburger menus, and scrollbars for easy navigation.
  • Input controls — enable users to enter information or make selections using checkboxes, text fields, radio buttons, and other elements.
  • Informational elements — display relevant information, such as volume control, screen brightness, or a video progress bar.
  • Containers — organize content into logical sections, using elements like subheadings, dividers, or cards to improve readability and page structure.

An effective UI design enhances a website's functionality and aligns it with user expectations by providing a visually appealing and intuitive user experience. 

Webflow’s extensive collection showcases the community’s best UI designs. Get inspired and start creating your own designs with customizable UI kits — find the best ones for your website or learn how to create your own for future sites.

Relevant courses

Client's guide to the Editor

This is the Client's guide to the Webflow Editor. Share these lessons to get your clients up and running.

Interactions & animations course

Learn how to animate multiple elements managed on a single timeline — bring your designs to life with rich, sequenced interactions and animations.

Web elements

A comprehensive look at the building blocks and elements Webflow puts at your fingertips — start designing websites visually, with confidence.

CMS & dynamic content

Learn how to use Webflow CMS to build completely custom websites powered by dynamic content, and define your content's structure and style.

21-day design portfolio course

Build and visually design a full portfolio website within the span of 21 days.

Ultimate web design course

From the fundamentals to advanced topics — learn how to build sites in Webflow and become the designer you always wanted to be.

Other glossary terms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Folder

→
A folder is a subdirectory of your site's root folder for organizing web pages.

Email template

→
Email templates — or pre-designed HTML layouts — ensure consistent branding and visual aesthetic in marketing campaigns.

DNS records

→
DNS records store important information about domains and hostnames. They function like maps, directing DNS queries to the desired endpoint.

Display: inline

→
The display: inline CSS property is a display option that controls an element’s appearance and layout.

Authorized applications

→
Third-party applications that you've given access to your personal and/or website data.

Entity

→
An entity is a representation of a special character that causes syntax conflicts in HTML (Hypertext Markup Language).

Height: auto

→
The "height: auto" CSS property automatically adjusts an element’s height based on its content.

Collection list layout

→
Lets you control how Collection items display inside a Collection list. The default layout option has each item covering the full width of the parent element. You can change this to display Collection items in 2, 3, 4, or 6 columns.

Google Universal Analytics Tracking ID

→
A unique ID you can use to link your Google Analytics account to your Webflow site.

ASCII

→
The American Standard Code for Information Interchange (ASCII) is an encoding standard that assigns numerical values to characters and translates them into computer-readable code.

Duplicate element

→
To copy an element and its content, styles, and settings.

ALPN

→
ALPN stands for Application-Layer Protocol Negotiation. It’s a Transport Layer Security (TLS) extension that aids client and server identification during secure data transfers.

Shared Workspace template

→
Shared Workspace templates are templates made from your own sites. They can help you create sites with similar layouts and increase your efficiency when designing. Your Workspace members will also have access to your shared Workspace template(s).

Synchronous

→
Synchronous programming refers to sequentially executed operations.

ATAG

→
Authoring Tool Accessibility Guidelines (ATAG) are a layered rule-set that influence how designers and developers create a more accessible internet.

Zapier

→
A web app that helps you connect multiple third-party services together based on triggers and actions.

Checkbox

→
Checkboxes are HTML structures that allow visitors to input data.

Bottom margin

→
The spacing between the bottom border of an element and the element(s) below it.

Collection item

→
An individual item within a Collection. For example, in a “Blog Posts” Collection, the Collection items are individual blog posts.

Flex-align

→
A flexbox property that lets you customize the alignment behavior of flex children, based on the cross-axis of the flex container. The cross axis is the opposite of the flex-direction property, so if you set the direction to vertical, the cross axis is horizontal. Options include start, center, end, baseline, and stretch.

Widget

→
A widget is an interactive element embedded in a user interface that facilitates specific user actions or displays important information at a glance.

Pixel

→
A pixel (px) is the smallest unit of measure in a digital image or display, representing a single point of color or light.

Username

→
The ID used to log into your Webflow account.

Accessibility tree

→
A webpage’s accessibility tree indicates which parts of the page are compatible with assistive technologies such as braille displays, screen readers, and voice commands.

.htaccess

→
.htaccess is a powerful configuration file that allows you to configure and control how your website functions.

BigInt

→
BigInt, which stands for “big integer,” is a JavaScript data type. JavaScript uses data types to decide how to treat a piece of data.

Mutable

→
In JavaScript, mutable objects are dynamic elements that allow post-creation changes and modifications.

Compile time

→
Compile time is the length of time it takes for a compiler to convert high-level code into low-level code.

Display: grid

→
The display: grid CSS property defines a website element (such as a button or header) as a grid container.

Plugin

→
A plugin, also called an add-on or extension, is a software component that enhances the host or browser or application by adding new features or capabilities to it.

Robots.txt

→
A robots.txt file instructs search engine crawlers which webpages and sections they can or can't crawl and index.

Object-oriented programming (OOP)

→
Object-oriented programming (OOP) is a programming approach that organizes code into self-contained units of data, functions, and behavior.

JSON

→
JSON, short for JavaScript Object Notation, is a human-readable, lightweight format for recording, storing, and exchanging data.

Last published

→
The last time your site was published.

Last updated

→
The last time someone made a change to your site.

Bottom bar

→
A bottom bar is a navigation bar at the bottom of an app or webpage.

Site

→
What you create in Webflow! You can publish sites to a webflow.io staging subdomain for free, export the code on a paid plan, add hosting on any paid plan, or add a Site plan to any site to connect your custom domain and unlock hosting features.

RGB (Red-Green-Blue)

→
RGB, an acronym for Red, Green, Blue, is a color model that screen displays use to represent various colors.

Custom font

→
A custom font is any non-system-default typeface you manually upload to your website.

Child

→
A child element is an element nested within a parent element in a hierarchy.

Gamut

→
Color gamut describes the full range of colors a device can reproduce on its display.

Container

→
An element that contains content.

Localization

→
Localization (l10n) involves adapting digital content and applications to meet a specific region or culture’s language and conventions.

CRLF

→
On Windows-based systems, the sequence of two ASCII characters representing a line break in text files is called "Carriage Return, Line Feed," or CRLF.

SaaS

→
Software as a Service (SaaS) is a cloud-based approach to delivering software on a subscription basis without requiring local installation.

JavaScript

→
JavaScript is a programming language web developers use to create dynamic interactions and effects for web pages and applications.

Static page

→
A static page is a document with fixed content that makes up an individual web page on your site.

Plain text field

→
A plain text field is an input field for short-form text without formatting or styling.

Urgency

→
Urgency is a marketing term and psychological trigger that incites potential customers and website visitors to act swiftly.

Video field

→
Available in CMS Collections. You can add videos via a link — not an embed code — from an online video host like Vimeo or YouTube. Just paste in the video link and it’ll appear in the native video format from the 3rd-party video player.

Span text

→
The span tag is used to style inline-text.

Element breadcrumbs

→
A navigational aid that displays in the bottom of the Webflow Designer to help you keep track of the element you're interacting with in relation to its hierarchy.

Twitter button

→
A Webflow element that embeds a Twitter Follow or Tweet button into your site.

URL redirect

→
URL redirect, or URL forwarding, is a web server function that automatically sends users from one web address to another.

Paragraph

→
A typography element used for displaying multi-sentence text content.

Element

→
Elements are individual HTML components that constitute a webpage’s structure and contents.

Delete element

→
To remove an element and its content from your website.

Top padding

→
The inside spacing between the top border of an element and the elements inside it.

Idempotent

→
Idempotency is a computing principle where multiple applications of a function or operation produce the same result as a single execution.

Domain-Specific Language (DSL)

→
A Domain-Specific Language (DSL) is computer script that solves software problems in a specific domain.

Meta description

→
An HTML attribute you can use to give a short description of the contents of a webpage. Search engines often display this in results pages (SERPs).

Navbar

→
A navbar, or navigation bar, is an interactive user element with a menu or a set of links to a website’s main sections.

Padding

→
Padding is a CSS property defining the space between an element's borders and its content.

URI

→
A Uniform Resource Identifier (URI) is a string of characters identifying an online resource.

Unbranded form submission notification

→
Form submission notifications that have no reference to Webflow (e.g., notifications sent from “no-reply@webforms.io” instead of “no-reply@webflow.com”).

Footer code

→
Footer code creates a section at the bottom of every web page that displays important information like disclaimers, copyright or contact information, and links to related documents.

Footer

→
A footer is a section at the bottom of a web page.

Baseline

→
The baseline is the fixed invisible line that serves as the base for letters. It’s used as a measurement for line height and x-height.

Input field

→
An HTML input field, represented by the syntax <input>, is a web page element where users input data, like text and numbers.

External link

→
External links direct users to different websites and impact a site's search engine visibility and rankings.

Percent

→
A measurement unit relative to an element's parent.

Button

→
A button is an interactive element that facilitates user actions.

Basic section

→
A section of the Add panel that contains the elements that act as a website's fundamental building blocks (e.g., div block, list, button, etc.).

Browser

→
A browser, or web browser, is a software program that allows users to access, navigate, and interact with websites on the internet.

Syntax error

→
Syntax error refers to a mistake in code that violates the programming language’s rules and prevents the code from executing correctly.

Algorithm

→
An algorithm is a set of rules or steps that help solve problems or carry out specific tasks.

Flex-basis

→
Flex-basis is a CSS property used in flexboxes that sets the initial size of a flex item before it grows or shrinks.

Bounding box

→
A bounding box is a rectangular border around a website element (e.g., a heading, paragraph, or image) that appears during the design process.

Display: flex

→
The most flexible display property in CSS is the aptly named display: flex, which allows you to create flexible layouts with elements that you can align and distribute vertically or horizontally.

Header

→
A header is a section at the top of a webpage.

Read-only link

→
A way for others to test/debug your Webflow site in the Designer without being able to save or make permanent changes.

Receipt emails

→
Email confirmations you receive upon making Webflow payments.

Closed-loop marketing

→
Closed-loop marketing is an ecommerce marketing strategy that uses customer data to create and improve targeted content.

Locked site

→
When you have more unhosted sites in your Dashboard than your Workspace plan allows, those additional sites past your limit will be “locked” until you upgrade your plan. When you upgrade, you’ll be allowed more unhosted sites (up to the limit for your Workspace plan) and will be able to access your previously locked sites.

Java

→
Java is an object-oriented programming language for building dynamic, interactive web applications across platforms

Web server

→
A web server is a computer program or hardware device that delivers web content to clients using HTTP. It handles client requests for web pages, images, and videos.

Webflow branding

→
A visible “Made in Webflow” badge displayed in the bottom right corner of Webflow sites. Webflow branding also appears in the site’s HTML. Learn more about Webflow branding.

X-Ray mode

→
A grayscale view of your site’s canvas that visually displays each element’s border, margin, and padding when hovered over.

Link block

→
A link block operates much like a div block, an HTML element for grouping and organizing other HTML elements (like text, images, and forms) into block-level containers. But in the case of a link block, what’s inside the block becomes a link.

Network Address Translation (NAT)

→
NAT (Network Address Translation) is a technique that enables communication between devices with private internet protocol addresses and the public internet.

Save as Backup

→
The ability to manually save a version of your site that you can restore at a later date using the keyboard shortcut Command + Shift + S (on Mac) or Control + Shift + S (on Windows).‍

Forms section

→
A section of the Add panel that houses form elements like inputs, checkboxes, and radio buttons.

Facebook button

→
A Facebook button is a clickable element on a website that allows users to connect to or share content on the social media platform.

Conditional

→
Conditionals, also known as conditional statements or expressions, are coding instructions that tell a program to execute an action for a certain condition.

Parameter

→
A parameter is a programming variable or value that transfers data between functions.

Subdomain indexing

→
When a search engine crawls your site's Webflow subdomain (e.g., your-site.webflow.io).

Workspace plan

→
A Webflow plan that applies to your entire Workspace.

Form submission

→
When someone sends data through one of your site's forms.

Prefetch

→
Prefetch is a technique that proactively loads and caches resources to improve website performance and user experience.

Base tag

→
The base tag specifies the base URL for all relative links within HTML code for a specific page or document.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more