At the most basic level, the user interface (UI) is the series of screens, pages, and visual elements—like buttons and icons—that you use to interact with a device. User experience (UX), on the other hand, is the internal experience that a person has as they interact with every aspect of a company’s products and services. UX is the overall experience a user has with the product, and UI is the things the user will actually interact with and see
There’s a lot of confusion around what UI and UX are, what the main differences are, or if there are any differences at all. They are definitely different things, but they must go hand in hand to create a beautiful and intuitive experience.
The way that I’ve always explained it is to think about building a house. When you’re building a house, you need to think of the broad structure and layout.
Do you need 2 or 3 bedrooms?
Do those bedrooms each have their own bathroom?
Is the living room the first thing you walk into after entering the door?
Is it a one-story or two-story home?
To me, UX is the overall experience of your house (or product). Do things make sense? How does it make your user feel?
The next level of the user’s journey is the interface they actually interact with. Continuing with the house example, the UI is the visual theme throughout the house. What type of wallpaper will you use? Do you have the same flower vases around the house? Or different ones?
The UI is, like its name implies, the things the user will actually interact with and see. This includes buttons, forms, pictures, etc.
UX without UI means you’ve got a frame and structure to your house, but it’s not beautiful and cohesive. UI without UX is like splashing awesome colors and details throughout the house, but having your front door lead straight into a bathroom. You need both to create an awesome end to end experience.
Typically, UX design goes ahead of UI design, because you want to do research, broad sketches, and general workflows first. Then once you’ve got the broad strokes nailed down, you work on the UI design to bring it all together so it feels like a beautiful, well-designed product.