Guide to UX/UI

We’ve compiled a list of our best UX and UI resources in a comprehensive guide. From tools to tactics, our guide has you covered.
Sign Up Now

Prefer to watch?

What is

UX/UI

?

UX (user experience) design includes responsibilities such as user testing, data analytics, site mapping, user satisfaction, prototyping, and collaboration. UI (user interface) design, on the other hand, focuses on output devices, action buttons, user controls, tools, input devices, content, and visual design.

With the resources included in this guide, you will learn how to use the design process and see real examples of great UX/UI design to help you become a better designer.

What is

UX/UI

?

UX (user experience) design includes responsibilities such as user testing, data analytics, site mapping, user satisfaction, prototyping, and collaboration. UI (user interface) design, on the other hand, focuses on output devices, action buttons, user controls, tools, input devices, content, and visual design.

With the resources included in this guide, you will learn how to use the design process and see real examples of great UX/UI design to help you become a better designer.

Ready to try CloudApp?
Use code REMOTEWORKTRIAL at checkout and get two months of CloudApp Pro for free!
Get Started

Use Case

What’s a Rich Text element?

The 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. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

This is some text inside of a div block.
This is some text inside of a div block.
View Use Case

Articles

Master User Interface Design With These 7 Crucial UI Design Fundamentals

Whether you’re designing a website, an app, or other interactive interface, stellar UI design is crucial. Master user interface design with these 7 UI fundamentals.

Read More
Form Design UX: The 7 Best Practices for User Friendly Forms

Get the most out of your traffic and increase conversions with the following 7 best UX form design practices.

Read More
Guide to UX and UI Design: Best UX/UI Tools, Methods, and Practices

Check out our UX and UI guide about UI, UX, the best UX tools, the best UI tools, and how honing these skills can help take your designs to the next level.

Read More
Master User Interface Design With These 7 Crucial UI Design Fundamentals

Whether you’re designing a website, an app, or other interactive interface, stellar UI design is crucial. Master user interface design with these 7 UI fundamentals.

Read More
Measuring the Success of Your User Experience Design

If the end goal is seamless and simple user experience, here are our best tips to evaluate your user experience design.

Read More
UI vs UX Design: The Difference Explained

Have you ever asked, what is the difference between UX and UI? In short, UI design is the driving force of UX design.

Read More
How to Create a Case Study for your UX and Product Design Portfolio

Most UX and product design case studies contain too much information. A well-designed case study demonstrates your talent, skills, describes an overview of your process and makes a business case for your work. In this post, we go over how to put together a UX and product design case study without overwhelming people.

Read More
Measuring the Success of Your User Experience Design

If the end goal is seamless and simple user experience, here are our best tips to evaluate your user experience design.

Read More
Design Thinking Assumptions: Build, Measure, Learn and Ideate

Learn how to quickly explore problems, ideas, opportunities, and UX assumptions during the design thinking process for better products, services, and designs.

Read More
Design Thinking Empathy: Human-Centric Solutions

Gain a deep understanding of the people you are designing for, and create successful designs by implementing design thinking empathy.

Read More
Design Thinking Prototype Stage: Fail Fast, Fail Often

Learn how to explore problems, ideas, and opportunities within a specific area of focus during the design thinking prototype stage.

Read More
Design Thinking Assumptions: Build, Measure, Learn and Ideate

Learn how to quickly explore problems, ideas, opportunities, and UX assumptions during the design thinking process for better products, services, and designs.

Read More
Design Thinking Define Stage: Identify Your Users’ Core Challenge

In the design thinking define stage, we begin piecing the information we’ve gathered during the empathize stage by analyzing and synthesizing our observations.

Read More
Design Thinking Ideate Stage: The Power of Infinite Possibilities

In the design thinking ideate stage, we ask driving questions to form human-centric solutions, generate infinite ideas, and select the best ideas to prototype.

Read More
Design Thinking Testing Stage: The Difference Between Success and Failure

Get invaluable insight and real user interaction during the design thinking testing stage and find out why testing is crucial to the success of your project.

Read More
Design Thinking Define Stage: Identify Your Users’ Core Challenge

In the design thinking define stage, we begin piecing the information we’ve gathered during the empathize stage by analyzing and synthesizing our observations.

Read More

UX VS. UI

UI vs UX Design: The Difference Explained

Have you ever wondered why user interface and user experience are different? And if they are different, why are they normally grouped together?

Understanding those differences and how to best utilize each concept as a designer, marketer, executive, or generally curious individual is the first step to good UX/UI.


Read article

Tools

10 of the Best UX/UI Design Tools

Are you a UX or UI designer? Dive into our UX and UI guide for an in-depth review of user interface design, user experience design, the best UX tools, the best UI tools, and how honing these skills can help take your designs to the next level.

Read article

Guides

A Systematic Guide to Product Design

Building a successful, well-branded product is one of the biggest challenges a designer might encounter in their career. Finding a consistency in product design is hard. We understand how stressful that can be! Luckily, we’ve created a systematic guide to get you started and added some tips to set you up for success.


Get the Guidebook