How to Differentiate UX and UI

I’m in the last segment of my immersive software engineering boot camp in which the next step is to enter the job hunt. Entering the program, I had no comprehension of the skills that I would be exiting with. To be honest, I knew almost nothing about computer science or what software engineers even did.

I like to point out that I thought maybe someday (throughout the span of my career) it might be cool to learn everything that is presented in all six learning modules on freecodecamp.org. Well, my program covered all of them.

That being said, I’ve taken in a lot of information and explored many facets of development. Now that I’m closer to applying to jobs I’m exploring what type of position I might be most interested in. There are the obvious distinctions between front-end and back-end, but there also seem to be more specific titles as well.

A frequent title I see is UI developer, UX designer, or some combination of the two. Not knowing exactly what either UX or UI is I decided to parse them out. In this post, I’ll define what UX and UI are, how they differ, and how they work together.

User Experience - UX

User experience, or UX, is a design technique that focuses on a user's feelings during and after an interaction with a product. The emphasis here is on feel. A UX designer puts themself in a user’s shoes when thinking about how a product should work. These questions can range from asking, ‘how does the user feel?’ to ‘how easy is it to do blank?’.

The UX designer does not focus on the look of a product but is empathic to the user. It is common for a UX designer to not be involved with any coding. Their work may be done surveying potential customers and analyzing data.

Common UX job descriptions:

• Interpret data to create solutions
• Tell a story focused on end-user
• Use design research methods
• Define and clarify best practices
• Plan and architect

User Interface - UI

User interface, or UI, is all about how a product looks and functions. There are many types of UI and the one I will focus on in this post is graphical user interface.

UI developers are often creative types. They think through how buttons and user inputs should interact as well as adhering to style guides via typography and color schemes. A UI developer considers how a user will interact with a product and work to make the product intuitive and logical

Common UI job descriptions:

• Execute visual design concepts
• Adhere to style guides
• Experience with HTML, CSS
• Attention to detail
• Build custom tools

Separating UX and UI

As we can see from the above descriptions, UX and UI are different parts of the design process. UX happens before any tangible product and focuses on the user. UI, on the other hand, is an iterative process that takes place as a product is built. A UI developer's main concern is how a product looks.

I like to think of the user story’s role in this process. When we write a user story we describe what a user can do. The user experience can be determined as we walk through a product and identify user actions. The user story can then go on to define what buttons should exist and where components should live for intuitive use of the product.

While user experience and user interface are unique processes they are most certainly intertwined. UX designers create wireframes or prototypes then UI developers create an aesthetically pleasing covering. One can not excel without the other.

Choosing Between UX and UI

After defining UX and UI I think both roles interest me. I enjoy being creative and crafting how an application will look. I'm equally concerned with the ease of use and if a user likes interacting with my application. I think I will continue to strengthen my HTML and CSS skills in the chance that I decide to pursue a UI specific role.

Resources Used
What are the Similarities & Differences Between UI Design & UX Design?
The Difference Between UX And UI Design - A Layman’s Guide
Wikipedia