DEV Community

sholm
sholm

Posted on

Simply Learning UI/UX

UI and UX are important to designing a good application. They provide great value to the user in keeping them using our application in the long run. But understanding what these design "styles" mean can be a bit overwhelming. So with this dev-post I hope to give a simple overview and understanding on what UI/UX are, and add value to your application with UI and UX design.
So first, lets start by understand what UI and UX mean!

What is UX

UX stands for the type of design called user experience. UX is not exclusive to digital products and represents a basic understanding of "How great a product is to use". UX isn't just one thing, its an amalgam of how an application "feels" when it comes to using it.
This becomes very apparent when you relies that us, the users decide whether we like a application in 50 milliseconds.

What is UI

UI stands for the user interface. This type of design prioritizes getting the user "to where they need to be". you wouldn't use Google if you had to go through menus and click stuff 7 times before you got to search anything. keeping the user sufficiently satisficed with the information were telling them, keeps our website simple and intuitive to use.

Now if you are still a little confused on what exactly UI and UX are, that's completely fine. The differences between UI and UX cant completely be covered since they are so closely connected, but we can look at good examples to start differentiating them in our head. So here lets look at,

Examples of good UI/UX

UX DESIGN
Good UX design is about solving problems for your users. when our applications are cluttered or not informative enough we start creating problems for our user, like "how do I get to this page" or clicking on multiple tabs till finally finding the one you need. So having these examples of what good UX design is hopefully helps you.

  1. Simplicity
    Googles home page has kept it simple since 1998. The initial first look of your application does matter in if people will continue to use it, at least compared to a competitor.

  2. User Choice
    Imagine how annoying Netflix would be if autoplay didn't exists and you had to click the episodes individually to watch them. that would be an example of bad UX design at least to the majority of users, but giving the choice of having autoplay off gives great benefit to people who can only watch one or two episode. this is great UX design because it solves multiple problems for multiple different types of users.

UI DESIGN
UI design is much more reliant on good UX to succeed then vice versa. while UI is much more seen as the visual aspect of our application. it adds much more value when coupled with great UX design. So please keep in mind your UX design when brainstorming on better UI choices

  1. Consistency
    When going onto an application for the first time, we start to learn how to properly use it within our fist mouse movements. so keeping our application familiar to our users is key in good UI.
    If our expected user was a YouTube viewer. keeping pause and play on space and 'k' would make for a good design choice. keeping the expected user in mind is also a very smart decision when creating your application.

  2. Interactivity
    UI is also sometimes thought of as "User interaction", while this idea is false interaction of our application is a key component in good UI. an example of this would be ferrari's website. the animations at the navbar giving a bigger view of what the next choice could be makes the selections easier and honestly just fun to use.

CONCLUSION

I hope this dev-post made it a bit easier to understand what UI/UX are and some general ideas that you can use for your application.
if you would like to continue learning about UI/UX here are the sources that I used to make this post and YOU SHOULD TOO!

SOURCES

UX vs. UI Design: What's the Difference? [2022 Guide]

Wondering what the difference is between UX and UI design? This guide explains and contrasts User Experience Design with User Interface Design.

careerfoundry.com

User Interface (UI) Design | Insights & Inspiration | Adobe XD Ideas

Learn about the different types of user interface design as well as fundamental design requirements for each type. Read more at Adobe XD Ideas.

favicon xd.adobe.com

What is User Experience (UX) Design? | Interaction Design Foundation (IxDF)

What is User Experience (UX) Design? User experience (UX) design is the process design teams use to create products that provide meaningful and relevant experiences to users. UX design involves the...

favicon interaction-design.org

What Makes Good UI Design? | Fuzzy Math

In this guide, Fuzzy Math describes the core components that go into good UI design. Learn more and view shining examples of a clean interface.

fuzzymath.com

Top comments (0)