What is the difference between UI and UX?

In digital design, user interface (UI) refers to the interactivity, look, and feel of a product screen or web page, while user experience (UX) covers a user’s overall experience with the product or website. Read on to find out what it takes to design engaging UI, and create a memorable UX.

Defining UI vs UX design

People sometimes confuse the two, but UI is actually a specialized subset of UX. According to Figma Designer Advocate Hugo Raymond, engaging UI lays the foundation for a positive overall user experience with a digital product or website. "Effective user interface design brings together usability and interactive design to build an emotive connection between users and products," he explains.

4 key UI design considerations

To create engaging UI, designers consider these four key elements:

1. Page layout. Ideally, the organization of a web page or mobile app screen should seem intuitive to users. But to organize it that way, UI designers have to make dozens of well-considered decisions—from the header position to the amount of white space.
2. Color scheme and font selection. UI designers carefully choose the colors and fonts on a digital product interface for consistency, accessibility, and brand alignment.
3. Interactive elements. From button design to drop-down menus, UI designers style digital product screens to make user flows intuitive.
4. Wireframe and prototype fidelity. UX designers often put together basic wireframes and prototypes. UI designers can help transform them into high-fidelity, functional, interactive product mockups

5 steps to UX design

There's more to UX design than meets the eye on a user interface. The UX design process involves market research, wireframe development, prototype testing, and cross-functional collaboration.

There are five essential steps to successful UX design:

1. Consumer and competitor research

To deliver a positive user experience, UX designers need to understand their target audience. Through UX research, they discover what their users like, what problems and pain points they’re facing, and how they behave online or while using an app or software. UX designers may also perform competitor analysis using a SWOT analysis template to define their product niche.

UX designers often consolidate user research findings into buyer or user personas, which are detailed descriptions of target audience types. Pro tip: with the FigJam user persona template, it's easy to create and share personas with teams.

2. Information architecture

Once UX designers understand users’ needs and behaviors, they can create information architecture (IA) for their product or site. Designers use IA as a visual blueprint, outlining essential navigation, content hierarchy, features, and interactions.

One key IA tool is a flowchart template, which designers use to map out key user flows and decision points. IA flowcharts help teams understand at a glance how the product is intended to work—and where there's a gap that may require additional features or updates.

3. Wireframes and prototypes

With IA sketched out, UX designers can start turning ideas into tangible models, such as wireframes and prototypes. Teams use these proofs of concept to test ideas, define requirements, and set feature priorities. Figma's online prototypes facilitate collaboration among designers, developers, and product owners, bringing everyone together to produce a more responsive, accessible, usable, and engaging end product.

4. Testing and troubleshooting

Product mockup tools created by Figma's community of professional designers help UX designers, developers, and product owners see how features will work in practice. If testing reveals issues like confusing navigation, menus, or forms, the team can adjust them before launch.

5. Ongoing updates

Even after a digital product has entered the market, a UX designer’s job is never truly done. With new user feedback and back-end analytics, they can design updates and improvements.For example, analytics may reveal that an e-commerce checkout process is too long, leading to a high cart abandonment rate. To address this issue, UX designers may streamline some checkout steps.

Do you really need a UI designer to create UI?

Startups sometimes build a minimum viable product without a dedicated UI designer—but there are drawbacks. "Graphic designers often own responsibilities for brand alignment, and will help provide some brand guidelines to build UI," Hugo says. "But graphic designers traditionally focus on static printed design, so they may need to get up to speed on accessibility and responsive design—key skills UI designers bring to the table."

How to recognize successful UX design

What does UX success look like? According to Peter Morville, author of Information Architecture for the World Wide Web, successful UX answers yes to these seven user experience questions:

• Is the site or product useful?
• Is it usable?
• Is it desirable?
• Have you made it findable—that is, will a user know where to find what they're looking for?
• Is it accessible?
• Is it credible?
• Is it valuable?

Where do UX and UI overlap?

Scan online job listings, and you'll notice employers seeking UX/UI designers— digital designers who can fulfill both roles. This may be a stretch, but it's possible, says Hugo.

"You can work in a team where you have UI designers and UX designers as separate disciplines," he says. "But a product designer or UX designer might take on UI responsibilities, working alongside someone like a business analyst to understand all of the scenarios that need to be covered."

While UI is generally understood as a specialized subset of UX work, there are three key areas of overlap:

1. User-centered design expertise. Both disciplines require designers to develop empathy for the end user and consider how users want to use a product or site.
2. Cross-functional teams. Designers working on UI and UX must collaborate closely with graphic designers and developers to make products and sites appealing, accessible, and usable.
3. Design tools. UX and UI designers use many of the same tools, such as Figma’s design system software , prototyping tool, UI design tool and UX design tool.

Enhance UI and UX design with Figma

No matter what challenges you face as a digital designer, you've got the tools you need to flex and improve your UI and UX designs with Figma. You can use Figma's readymade templates with simple drag-and-drop features to craft flowcharts, wireframes, prototypes, and more.

All of your work on Figma will be autosaved online, so you can access it from anywhere you have internet access. Teamwork is a breeze with Figma's collaboration tools, so your team can share progress, make edits, and hand off without a hitch.

Ready to put your UI and UX knowhow to work?

Start your next digital design with Figma.

Go to next section