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.

Manage dynamic content with the Webflow CMS

Learn how to create, manage, and display dynamic content across your site using the Webflow CMS.

Accessibility on the web

Learn about accessibility on the web and how to create inclusive and accessible sites without writing code.

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.

Welcome to Webflow

Discover what Webflow offers, how it works behind-the-scenes, and tips and tricks for starting your learning journey.

Figma to Webflow

Learn the entire design process from idea to final output as we take you through Figma, Cinema 4D and Octane, and Webflow.

Other glossary terms

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

States dropdown menu

→
The dropdown menu to the right of the Selector field that allows you to access and change the styles of an element when it is hovered, pressed, or focused.

Bug

→
A bug is an error, fault, or flaw in an application or software that causes the program to behave unexpectedly, often producing inaccurate and invalid output.

Sibling

→
An element that shares the same parent of another element.

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.

Public site

→
A Webflow site that is publicly visible in your public profile and in Made in Webflow search results.

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.

Compile time

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

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.

Top margin

→
Top margin is a CSS property that defines the space between the top edge of an element and its surroundings, such as other elements, the browser window, or the edge of a container.

Domain-Specific Language (DSL)

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

External link

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

Field label

→
A field label is descriptive text that helps users understand what information to enter in an input field on a web form.

Pagination settings

→
Through the pagination settings, you can preview Collection list pages by choosing the page number from the page dropdown list, or you can switch to the previous or next page using the arrow keys.

Collection list

→
A Collection list is a Webflow element that lets you dynamically display content from a CMS Collection.

Folder settings

→
Allows you to manage your folders.

Preview mode

→
A feature that allows you to see how your site would be displayed in a browser without needing to publish your site or leave the Designer.

Backlink

→
A backlink, also referred to as an inbound link, is a hyperlink from one website to another website.

Call stack

→
A call stack is an ordered list of the functions (or stack frames) a program has to execute before it returns a result.

Style panel

→
The first tab in the right-side panel that allows you to assign classes to elements and style them.

Cryptanalysis

→
Cryptanalysis examines cryptographic systems to find weaknesses that could allow attackers to uncover plaintext or break encryption.

IP address

→
An IP (Internet Protocol) address is a unique string of characters identifying devices connected to the internet.

Jank

→
Jank describes subpar functionality in a web interface that hinders or disrupts user activity.

Call-to-action (CTA)

→
A call-to-action (CTA) is a website feature that prompts visitors to perform a specific action.

Product attribute

→
Product attributes are specific characteristics that define purchasable merchandise or commodities and provide relevant information to customers.

Duplicate element

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

Optimization

→
Optimization is a systematic approach to improve a website's appearance, functionality, and visual appeal to enhance the user experience, improve search engine rankings, and achieve business objectives.

Authorized applications

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

Parameter

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

Idempotent

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

Designer

→
The main interface where you can build sites.

Modal window

→
A modal window (or modal) is a web element that displays above all content and restricts user interaction until it’s manually dismissed.

Cryptographic hash function

→
A cryptographic hash function takes an input message of any length, such as a file, message, or password, and uses a mathematical formula to produce a fixed-size output (hash).

Application context

→
An application context is a set of data that identifies an application’s tasks, where those tasks originate, and how those tasks are configured.

Image

→
A Webflow element that displays graphical files on your website.

Display: grid

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

Profile settings

→
The area where you can manage your profile, email settings, and security settings.

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.

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.

Dropdown

→
A dropdown, or dropdown menu, is a pre-built navigation element you can add to almost any part of a website.

JSON

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

Localization

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

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.

Map

→
A Webflow element that embeds an interactive Google Map in your site.

Input field

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

Traffic

→
Traffic, or web traffic, refers to the number of users who visit a website over a period of time.

Gutters

→
Gutters refer to the whitespace between content columns on a webpage.

Em

→
An em in CSS is a scalable and relative unit of measurement that defines the size of an element relative to its parent's font size.

Webflow forum

→
The place to go when you need help with your site's design, custom code, etc. Visit the forum.

Tag

→
A Hypertext Markup Language (HTML) tag is a code snippet that defines and describes the structure and content of web pages.

Control flow

→
The control flow is the order in which a computer program executes its instructions or statements, guided by control structures.

Urgency

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

Total Site Pages

→
The amount of pages your site currently has.

Deployment

→
In software and web development, deployment is the process of moving code from one environment to another, usually in the form of changes or updates.

Keyboard shortcuts

→
Keyboard shortcuts are combinations of keys on a computer keyboard that perform a specific action or command within an application or operating system.

Container

→
An element that contains content.

Ligature

→
A ligature in typography groups adjacent letters or characters into one glyph.

Custom font

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

RSS

→
Really Simple Syndication (RSS) is a web format that automatically distributes frequently updated content to subscribers, eliminating the need for subscribers to check the website manually to stay up to date.

Argument

→
An argument is an independent value a function receives to deliver a specific output.

BiDi

→
BiDi stands for bidirectional. When a document is BiDi, it supports text that reads from right to left and left to right.

Homepage

→
The page people see when they visit your site's root domain. Read more about the homepage.

Header

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

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.

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.).

Decryption

→
Decryption is the process of reverting encrypted data to its original format.

UI state

→
The UI state changes how Collection lists display when you’re designing. The Items state is the default option, and shows the items that you have within the Collection. The Empty state doesn’t show these items and gives the designer the opportunity to design for a circumstance if/when there is no data to be displayed in the Collection list.

Client-side

→
Client-side is the user-facing part of a web app, responsible for processing user input and displaying content.

Structured Query Language (SQL)

→
Structured Query Language (SQL) is a programming language that enables storing, retrieving, and manipulating information in a relational database.

Safe

→
"Safe" is a Hypertext Transfer Protocol (HTTP) method that doesn't modify the server's state or resources.

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.

Browser

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

File Transfer Protocol (FTP)

→
File Transfer Protocol (FTP) allows for the transfer of files between two parties over TCP/IP-based communication channels, such as the internet.

Cipher

→
In cryptography, a cipher is a digital security algorithm that encrypts and decrypts data.

URI

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

Static content

→
Static content is content that’s not bound to any Collections or dynamic elements.

Minimum height

→
The min-height CSS property defines an element’s minimum height.

Pixel

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

Deep copy

→
In programming, a deep copy is a replica of an object that doesn’t share the same references as the original. That way, if you make changes to the duplicate, the original stays the same.

User interface (UI)

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

Publish site

→
The act of updating your live site to reflect new design changes.

Redo

→
To move forward one step while making changes to a Webflow site.

Contextual advertising

→
Contextual advertising is a form of paid advertising that matches web content with ad intent.

Image field

→
Available in CMS Collections. With this field, you can upload images from your computer and use them as dynamic items in your individual Collection item.

Footer

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

Height

→
Defines how tall an element can be. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

Conditional

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

Typography

→
A section in the Add panel that houses typography elements such as headings and paragraphs.

Subdomain

→
The part of a domain that comes before the root domain (e.g., blog.yourwebsite.com is a subdomain whereas yourwebsite.com is the root domain).

Last updated

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

DHTML

→
DHTML, or Dynamic HTML, is a web-development technique combining HTML, CSS, and JavaScript to create dynamic, interactive web pages and complex web applications.

CRUD

→
CRUD stands for Create, Read, Update, and Delete — the four basic operations all software applications should perform.

Widget

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

Design mode

→
The mode that enables a designer to build in Webflow.

Object-oriented programming (OOP)

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

Utility pages

→
Utility pages are default, customizable templates for your site’s 404 page, Password page, and Search results page.

Dither

→
Dithering is a design technique that simulates additional colors on a display to smooth transitions in images with limited color palettes.

Flex-justify

→
A flexbox property that lets you customize the alignment behavior of flex children, based on the main axis of the flex container — that is, whatever you defined as the flex-direction. Options include start, center, end, baseline, and stretch.

Tabs

→
A Webflow component that displays a pane of content associated with a tab menu button.

Left toolbar

→
The vertical bar of tools on the left side of the Webflow Designer. It holds the Add panel, Symbols panel, Navigator panel, Pages panel, CMS panel, Ecommerce panel, Assets panel, Settings panel, Site Activity log, Audits, Search, Video tutorials, and Help.

Left padding

→
Left padding is a CSS property that defines the space between an element's left border and its content.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more