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

Webflow Ecommerce

Learn how to build and design your Webflow Ecommerce store. Customize every detail and launch a fully functional online store — without writing code.

Manage dynamic content with the Webflow CMS

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

Landing page generator for Ryan Reynolds

Learn how to build a dynamic landing page generator in under 30 minutes.

Web elements

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

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.

CSS styling

Take a closer look at all the creative styling possibilities that CSS offers. Learn how to style elements visually, with the power of Webflow.

Other glossary terms

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

ATAG

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

Layout section

→
A tab in the Add panel that houses prebuilt layouts for your Webflow site.

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.

CRUD

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

Backlink

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

Tag

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

Percent

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

Head code

→
Custom code that's added just before the closing </head> tag in your site's HTML file. Learn more about custom code in head and body tags.

Base tag

→
The base tag specifies the base URL for all relative links within HTML code for a specific page or document.

Item state

→
The default UI state for Collection lists, which displays the items in the Collection. It is the opposite of the empty state.

Graphical User Interface (GUI)

→
A Graphical User Interface (GUI) is a visual medium that enables visual interaction with software applications or electronic devices through elements like icons, buttons, and menus.

Product attribute

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

Asynchronous

→
Asynchronous programming is an approach where programs simultaneously run multiple operations independently without waiting for previous tasks to complete.

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.

Editor toolbar

→
The toolbar that appears at the bottom of the Editor. From here, you can access the various Editor panels to manage page settings, dynamic content, forms, and your Editor account. You can also see and publish the changes you make through the Editor.

Sitemap URL

→
The location your sitemap is stored in relation to your site, and what’s used when submitting your sitemap to search engines.

URL redirect

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

Link field

→
A link field is a form input field that enables you to add links to your designs dynamically. You can connect a link field to text links, buttons, or other link elements to turn them into active links.

Custom font

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

Zapier

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

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.

Display: block

→
Display properties tell browsers how an element should behave on the page. The most common display property keyword category is display: block.

Number field

→
Available in CMS Collections. It lets you insert an integer with or without decimals.

Top of the funnel

→
Top of the funnel (TOFU) refers to the initial marketing funnel stage where potential customers become aware of a brand’s existence.

Sidebar

→
A sidebar, typically positioned on the left or right side of a website or app, is a vertical component that contains supplemental information to enrich a webpage’s primary content.

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.

IP address

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

Columns

→
Columns let you create sections of content that sit side by side on your website, like the columns in newspapers. You can choose how many columns you want and their widths. You can also control how they display on smaller screens — such as stacking them.

Constant

→
In coding, a constant is a fixed value that can’t change, no matter where it appears or what the program uses it for.

Width: auto

→
The way browsers calculate an element's width automatically where Block level elements fill the available space of its parent and Inline elements shrink to the size of its children/content.

Dropdown

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

Last updated

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

Desktop breakpoint

→
A breakpoint, or media query, is the width at which a website’s design and layout adjust to fit screens of different sizes. When designing in Webflow, breakpoints for smaller devices inherit styles from the base — or desktop — breakpoint by default.

Undo

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

List item

→
A list is a Webflow element that displays multiple pieces of content in a structured, visually appealing way. The individual elements that make up the list are called list items.

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.

CSS (Cascading Style Sheets)

→
Cascading Style Sheets (CSS) is a web development language that controls the appearance of elements on a webpage.

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.

Flex child

→
An element contained within a parent element that has display: flex set.

Compile

→
Compiling is the process of converting code from a high-level programming language into a low-level language that computers can understand.

Encapsulation

→
Encapsulation is an object-oriented programming (OOP) process that combines functions and the data they manipulate into a single entity.

Literal

→
In JavaScript, literals are fixed values written directly into the code.

Sibling

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

Closed-loop marketing

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

Tablet breakpoint

→
A Webflow canvas setting for creating styles that affect viewports with a minimum width of 768px and a maximum width of 990px. Also known as the tablet media query.

SaaS

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

Webflow forum

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

Right margin

→
Right margin is a CSS property that defines the space between the right edge of an element and its surroundings.

Span text

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

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.

Input field

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

Background

→
A website background is a visual element behind webpage content, enhancing aesthetic appeal and user engagement.

Dashboard

→
From your Dashboard, you can access, create, and manage all your sites.

Workspace plan

→
A Webflow plan that applies to your entire Workspace.

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.

Widget

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

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

Parameter

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

Automagically

→
Automagically describes complex content or functions that appear as if they were created using magic.

CMS Collection page

→
A dynamic page that Webflow automatically creates for each Collection item. When you design a Collection page, all the pages that are created for each Collection item will have the same template but different content.

Radio button

→
A radio button is a form element for selecting one option from a predefined set of mutually exclusive choices.

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.

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.

Bottom margin

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

Bottom padding

→
Bottom padding is the space between the bottom of an element and its border.

SSL CDN

→
SSL CDN, or Secure Sockets Layer Content Delivery Network, is an option that allows you to serve your images over your own CDN service while using SSL.

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.

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.

Control flow

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

API

→
APIs, or Application Programming Interfaces, are common code protocols that let apps safely exchange data with other apps, software, and hardware.

Collection item

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

Real-Time Streaming Protocol (RTSP)

→
Real-Time Streaming Protocol (RTSP) is a standardized network protocol for transmitting real-time multimedia data like audio and video.

Inline style

→
Inline style applies CSS to an individual HTML element using the "style" attribute within the HTML tag.

Object-oriented programming (OOP)

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

Single Instruction Single Data (SISD)

→
Single Instruction and Single Data Stream (SISD) is a computer architecture where a central processing unit (CPU) executes one instruction at a time on a single data piece.

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.

Display: inline-block

→
The display: inline-block CSS property defines an element’s appearance and behavior. CSS designers use this code to create website layouts.

Localization

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

Style Manager

→
The third tab in the right-side panel where you can rename element classes, preview your class and tag styles, search for classes and tags, and delete any classes that aren’t in use.

Abstraction

→
In object-oriented programming (OOP), abstraction conceals irrelevant details so they don’t interfere with the task at hand.

Component Module

→
A section in the Add Panel that houses pre-built Webflow elements such as sliders, tabs, and lightboxes.

Clickjacking

→
Clickjacking is when a malicious actor deceives website visitors into clicking buttons or links hidden in a fake layer to steal sensitive data or install malware.

Google Universal Analytics Tracking ID

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

Custom domain hosting

→
A Webflow service that lets you point a custom domain to your Webflow-hosted site.

Display: grid

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

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.

404 page

→
A 404 page is an error page a visitor sees when they try to access a non-existent or broken URL on a website.

Text link

→
A typography element that is used to link to other pages or sections of a webpage.

Section

→
A section is an element of design layout that divides a web page into visually distinct segments.

Authorized applications

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

Pages panel

→
A panel in the left toolbar where you can add static pages and folders to your Webflow site. You can also manage and access Utility pages and Collection pages.

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.

Inline Frame (iframe)

→
An inline frame is an HTML element that embeds an HTML document within another webpage.

SSL

→
SSL (secure socket layer) is the standard method for establishing an encrypted link between a web server and a browser.

Mutable

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

Text area

→
A form element that allows site visitors to enter multi-line data.

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.

Website name

→
A website name, or domain, is the title of a website that appears in the browser tab and search engine results.

Null

→
“Null” represents the absence of a value or the presence of invalid objects in computer science and web development.

Below the fold

→
Below the fold refers to the lower portion of a webpage that isn’t immediately visible to visitors upon loading until they scroll down.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more