UXUI Part 1: A Look into UI & UX Design
Tags: design, ux, ui
Published: 2022-10-16 21:05:52

_(Cover Image Source: [Link](https://www.techprevue.com/wp-content/uploads/2016/07/mobile-app-ux-ui-basics.jpg))_

From afar, UI and UX design careers appear to be one of those things that anyone can break into. If you understand people, how they interact with things, and what they like, you essentially understand UI and UX. People from several different types of backgrounds and degrees end up in this growing field. It's where psychology meets design, and where design is king. But what is the difference between the two, and how has UI/UX become such a prominent subject in tech today?

> “UI is the saddle, the stirrups, & the reins. UX is the feeling you get being able to ride the horse.”
> — Dain Miller, Web Developer

On the most basic level UX can be summed up as how things work, while UI is how things look. This may be a grand oversimplification, but in order to differentiate between these two overlapping subjects, it's simply easier to draw a line in the sand. Another way you could think about it, is that UI is a sub-category of UX, and UX is kind of an overarching topic that encompasses UI. UX can mean several different things, while UI is a bit more specific.

<center>![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aoelln4h1p7yml5cw0g9.jpg)</center>

UI, or user interface, is a graphical thing; colors, branding, and making users remember you or your brand are essential ideas to effective UI. Given these things, you can easily imagine someone with an arts or design degree would be strongly suited for UI. Someone who can make effective decisions about a simple button click animation or imagery on an app/website, can drastically improve traffic to your business, and create a deep feeling of connection with your target audience. But strong UI can also be beneficial outside the scope of capitalistic endeavors. Web features like larger fonts, accessible colors, high contrast environments, and interchangeable visual modes can add value for individuals with impairments. This can all be achieved by using and implementing well thought out UI design.      

> “People ignore design that ignores people.”
— Frank Chimero, Designer

UX, or user experience, is about experience. _(Duh)_ It's about how something looks and works in order to create an easy and enjoyable experience for the user. Getting feedback from users is also very important. Testing things, getting feedback, and then deeply analyzing that feedback is important to the UX process. You must ask yourself, on a psychological level, what appeals to a user, and compare what they like vs. what they don't like. Is the user having a good experience regardless of how the product works? Does the user learn to use your product easily? These are just two of the many questions you can ask yourself in the planning and analysis stages of successful UX design.

> “If I had an hour to solve a problem and my life depended on the solution, I would spend the first 55 minutes determining the proper question to ask, for once I know the proper question, I could solve the problem in less than five minutes.”
> — Albert Einstein, Theoretical Physicist

To better understand the concept of UX design lets take a quick look at the 5 key stages of the UX process according to [CareerFoundry](https://careerfoundry.com/):
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vjr44k4w9zldxhduo1qi.png)
**First stage:** In the **_understand_** stage, we take a close look at what users or customers want/need from your build, and then create a concept that actually solves or addresses those wants/needs. At this point it's important to pay attention to the small details. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28gyrgsl0fsfm161ytjt.png)
**Second stage:** In the **_analyze_** stage we examine how users already perceive a product, and then understand how weaknesses in the product should be addressed or where to maintain the product's strengths. This could be done by intense testing, or just simply asking the right questions in regards to your finished product. This stage is where a cohesive direction for your design is born.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zps1lqrsap6hukuz1uau.png)
**Third Stage:** Simply put, in the **_ideate_** stage we come up with ideas. This is where the problems we worked so hard to comprehend in the previous stage are addressed, and we come up with concrete ideas to fix those problems. This stage can be accomplished in several ways including digitally, in person meetings, or brainstorming on your own.     
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwas65m8vp8y8uzmd69c.png)
**Fourth Stage:** In the _**validate**_ stage we take our idea or ideas from the previous stage and put them to the test. Assuming multiple ideas were generated in the third stage, this is the time where bad ideas are filtered out, and the great ideas rise to the top. This stage can be accomplished by sketching mock-ups or creating prototypes to mimic your final product whenever it may come to fruition.    
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xk432koro8slcooxihiv.png)
**Fifth Stage:** The _**iterate**_ stage occurs throughout all five stages. It is the process of revisiting and re-researching your previous problems, ideas, and concepts. This stage is something that can always be built on and improved. It essentially never ends because products and user are always changing/evolving.
<br>
So there you have it, a quick look and introduction into the world of UX and UI design. As someone leaning more towards the front-end development side of web/software engineering, this was incredibly helpful in understanding the important processes that occur when creating a finished product. I hope it was also helpful for you!

 
















_(Vin Diagram Source: [Link](https://creative.artisantalent.com/ux-ui-or-graphic-design-whats-the-difference))_
<br>