# UI/UX Basics

## What is UI/UX?

These are perhaps two of the most fundamental concepts in developing for the web, and can make or break a site/application.

- UI - User Interface
- UX - User Experience

### Difference Between UI and UX

<table border="1" id="bkmrk-user-interface-user-" style="border-collapse: collapse; width: 54.5679%; height: 126px;"><colgroup><col style="width: 50.0618%;"></col><col style="width: 50.0618%;"></col></colgroup><tbody><tr><td>**User Interface**  
</td><td>**User Experience**</td></tr><tr><td>Colors &amp; Fonts</td><td>Target audience &amp; users</td></tr><tr><td>Interactivity</td><td>Flow of site/app</td></tr><tr><td>Layout</td><td> </td></tr></tbody></table>

[Here's an article from Figma that explains the differences](https://www.figma.com/resource-library/difference-between-ui-and-ux/).

## Fundamentals of UI/UX

The following is a great crash course into the world of UI/UX, and how to get started with learning design.

<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" frameborder="0" height="315" src="https://www.youtube.com/embed/wIuVvCuiJhU?si=nzoR9SPwX6jBkE8G" title="YouTube video player" width="560"></iframe>

## Materials and Resources

[Figma](https://www.figma.com/) is a great, industry-standard resource with a free tier for learning how to design, and creating designs.

- Figma also provides [terrific articles](https://www.figma.com/resource-library/design-basics/) that are a great primer into designing for web.