University
Home
Search
⌘E
Dashboard
Try Webflow — it's free
Learn
Courses
Docs
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

Landing page generator for Ryan Reynolds

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

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.

CSS grid in Webflow

An overview of CSS grid. Use the grid layout in Webflow to get more control over your designs and create powerful, responsive layouts — faster.

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.

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.

Localize your site in Webflow

Learn how to localize a site for different languages and regions. Translate text, customize and manage content, and optimize SEO settings, so your site reaches a wider audience.

Other glossary terms

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

Form submission

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

Minimum width (min width)

→
The min-width CSS property defines an element's minimum width. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

Backlink

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

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

Cascading rules

→
The order in which a Webflow site's CSS styles flow from desktop to mobile breakpoints.

Widget

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

Left padding

→
Left padding is a CSS property that defines the space between an element's left border and its content.

Empty elements

→
Empty or void elements are HTML elements that don’t require a closing tag because they contain no content.

Last updated

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

Syntax

→
Syntax is the name for the rules specifying a programming language's structure and formatting.

Comment

→
A comment is a text note in source code that offers context, internal information, or other guidance to any developers using it.

HyperText Markup Language (HTML)

→
A standard markup language that web browsers use to display websites.

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.

Language code

→
A language code is a standardized code of letters and numbers that represent different languages.

XML sitemap (sitemap.xml)

→
An XML (Extensible Markup Language) sitemap is a text file that lists a website's pages to help search engines crawl and index them.

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.

Web Accessibility Initiative (WAI)

→
The Web Accessibility Initiative (WAI) is a World Wide Web Consortium (W3C) project to enhance accessibility for users with disabilities.

Media section

→
A section of the Add panel that holds multimedia elements like images, video, and Lottie animation.

Smoke test

→
A smoke test, also called build verification testing or confidence testing, is a preliminary examination to determine the basic functionality of a software, website, or application.

Switch field

→
Available in CMS Collections. This field offers you a powerful filtering tool for Collection items. For example, you could create a switch labeled "Featured?" for Blog Posts, and then switch on the toggle to showcase particular posts.

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.

Beacon

→
A beacon — also called a web beacon or web bug — is an HTML-embedded object that tracks user behavior on a web page.

Button

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

Forms section

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

Flex-order

→
In CSS, flex-order is a property that allows you to manipulate the default source order of the items within a flex container. Flex-order is especially useful when you want content to display differently on mobile than on desktop.

Attribute

→
An attribute in HTML is a term inside an opening tag of an element, such as a font or color, that provides additional information about the element.

Closing tag

→
A closing tag is an instructional piece of code that ends a section of page content in HTML.

SCA and PSD2 Regulations

→
Mid-September 2019, new European requirements for authenticating online payments were introduced in Europe as part of the second Payment Services Directive (PSD2). The Strong Customer Authentication (SCA) requirements apply to businesses in the European Economic Area (EEA) that accept online card payments from cardholders whose banks are also located in the EEA.Webflow Ecommerce payments are PSD2 and SCA compliant (i.e., support 3D Secure payments) for European customers.If you’re a merchant in the European Economic Area (EEA), all you need to do to ensure that your Webflow Ecommerce store is PSD2 and SCA compliant for your European customers is to republish your store if it wasn’t published on or after September 11, 2019. Read more about how to make your ecommerce store compliant in our Payment gateway article.

Null

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

Webflow Support

→
The place to go when you need help using Webflow.

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.

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.

JSON

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

SaaS

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

BiDi

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

Style panel

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

Optimizely

→
A web app that helps you measure how different site designs impact user behavior.

Hit

→
A hit is a request to a web server from a browser for a specific resource.

Publish destination

→
The specific domain or subdomain where your Webflow site is displayed.

Meta title

→
A meta title is an HTML element that defines a web page's title and appears in browser tabs and search snippets on search engine results pages (SERPs) as a clickable headline.

Contextual advertising

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

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.

Password protection

→
Password protection is a security feature restricting certain website areas to authorized users, requiring a secret phrase or key to access them.

Pseudocode

→
Pseudocode is a simplified, informal representation of programming code that outlines a program’s structure and logic without strict syntax.

Deprecated

→
Deprecated HTML tags are old tags replaced by updated alternatives in modern web design and development.

Descriptor

→
A CSS descriptor sets specific properties and values of an at-rule (@-rule) element, dictating its appearance and behavior on a web page.

Parent

→
The element directly above in the hierarchy tree.

Micro conversion

→
Micro conversions are small but important user actions on a website that contribute to the overall conversion funnel.

Child

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

Duplicate element

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

Alt text

→
Alt text, short for alternative text, refers to text that describes online images.

Syntax error

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

Input field

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

Second-level domain (SLD)

→
A second-level domain (SLD) is the part of a domain name that precedes a top-level domain (TLD).

Element breadcrumbs

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

Heading

→
A heading is a text element that provides a title or headline for a section of content on a webpage. These elements guide users and search engines through your content.

Parent folder

→
A parent folder is a directory containing one or more folders and files.

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.

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

Collection field

→
An individual field within a Collection. You'll select which fields to display in dynamic Collection lists and Collection pages.

Free plan

→
The perfect Webflow subscription&nbsp;for getting started, giving you access to all Designer features, so you can start building a site right away.

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.

Collection item

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

List

→
An element that contains ordered (numbered) or unordered (bulleted) lists.

Common targets

→
All elements on the page targeted by the same selector.

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.

PNG (Portable Network Graphics)

→
PNG, short for Portable Network Graphics, is a lossless image format known for its transparency support and quality retention after compression.

URL

→
A Uniform Resource Locator (URL) is a standardized web address format that allows users to identify and access an online resource.

Field label

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

Typography section

→
A section in the Style panel that houses CSS properties related to how typography is displayed such as font, font size and height, and align.

Selector state

→
A pseudo-class that allows you to change the styles of an element when it is hovered, pressed, or focused.

Webclip

→
A 256 x 256 px image associated with your website that shows up when your website link is saved to an iPhone home screen.

Effects

→
A section in the Style panel that houses CSS properties for changing how an element appears, such as its opacity, outline, and box shadows.

Display: block

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

Safe

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

Export

→
A downloadable ZIP file that contains your Webflow site's HTML, CSS, JS, and image files.

Webflow CMS

→
Webflow's content management system (CMS) is where dynamic content (Collections and their Collection items) is stored and maintained so you can reference it throughout your site. A CMS lets you input data in one location, then use Collection template pages or Collection lists to display that content without having to update the content displays one at a time.

Gamut

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

Certified

→
A digital certificate is a data file embedded in the site that signals the site’s safety to visitors, internet service providers (ISPs), and servers.

Product attribute

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

Rich text element

→
Allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually.

Element

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

Link

→
A link, short for hyperlink, is a clickable website element that enables navigation between different web resources.

Checkbox

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

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.

Flex child

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

Width

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

GIF

→
A GIF (Graphics Interchange Format) is a digital image format that uses multiple frames of an image or soundless video to create a short, looping animation.

Dashboard

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

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.

Header

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

Java

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

Hyperlink

→
Hyperlinks are clickable elements that allow users to navigate between web pages, documents, or other types of digital content.

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.

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.

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.

Margin

→
Margins are an essential spacing element of web design, dictating the amount of whitespace between a box and its surroundings.

Flex-grow

→
The flex-grow CSS property defines how much an element grows relative to other flexible items inside the same flex parent.

Text area

→
A form element that allows site visitors to enter multi-line data.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more