"Ant, what's the difference between UX and UI?" I get asked this question A LOT.
The difference between UX and UI is the part of the design cycle you are in. UX (User Experience) is always at the beginning. It's when you are trying to find out what problem you are trying to solve for your user. This includes research, idea development, prototyping, and testing. UI (User Interface) is later on in the design cycle. It is where you use visual design elements such as Typography, Color, and Images to bring the design to life and apply your branding. UI design takes the basic understanding from UX and transforms it into a final visual design that the developers will then use to create a working version.
Surprisingly most companies who hire UX and UI designers don't even know this difference.
This confusion has given birth in recent years to the UX/UI Unicorn: A mythical user experience designer with an advanced and adaptive skill range. Outstanding skills in graphic design, rapid prototyping, front-end development, user testing, technical specifications, marketing, and branding.
Don't worry you don't have to be a Unicorn, this falls into the category of Jack of all trades, master of none.
To help you out understand the differences I have put together my thoughts below (these are my personal views and as we know everywhere has different views on this subject):
UX: User Experience
User Experience (UX) in my opinion is best to be thought of as the beginning of the design cycle. It's where you try to understand what problem you are trying to solve for your users. Every business at its core solves a problem and people come to you because you offer a solution.
To understand your users better there are various techniques a UX designer can use. This is part of the first phase of the User-Centered design process. To help you understand the UCD process I have put together this diagram.
Once the research phase is complete the UX designer now has a deeper understanding of the problem that his users are trying to solve. This then leads to a conception phase where the designer will propose solutions to the problem. The solution can be illustrated as simple screen designs, sketches or storyboards. The fidelity doesn't matter at this phase, it's all about the idea.
The main goal is to collaborate and get feedback from colleagues quickly, do not get too attached to any design. My own opinion is that when we design on a computer there is an attachment to the work which isn't there on paper, it's harder to throw away.
The next phase is to take the chosen design and add more details, make it more real. At this stage, the wireframe (the page template) could be made and interactions added although I believe should be no detailed design work at this stage. It should be all about the content and no discussions about any specific color or font.
This wireframe will then be tested with users (various user testing strategies) and refined over and over again until the design meets the user's expectations. Once the UX designer is happy then the wireframe can be passed over to...
UI: User Interface
User Interface (UI) Design is where the attention to detail comes in. Once the wireframes have been passed over from UX the UI designer can start adding in the visual design. Now there are many companies where a UX/UI designer will do both roles BUT there are also many people especially skilled in either one.
A UI designer will normally have a background in an art subject like graphic design and be best placed to make detailed decisions on visual aspects like typography and photography. A great UI design can make or break a great wireframe. If the imagery is not right or the visual style does not match the theme of the content then the website will not work effectively.
UX and UI need to work in sync. A choice of color on a button can sometimes double click-through rate. A powerful image can dramatically increase sales on a chosen product. When used together properly they can supercharge a website.
I believe that both UX and UI are essential to any amazing digital experience. I have specialized in both professions over my career and understand that there are key differences between the roles. There is no right or wrong answer on this subject and it's up to the preference of the company if these are 2 separate roles or not. I can see over the next few years these roles being separated but still working in a team. This has worked well wherever I have seen it in action and builds a solid team of specialists.
If you are new to UX/UI I understand that it can be confusing where to start. That's why I've done the hard work for you and pulled together The Ultimate UX Toolkit to get you started. I've made this available for free for the next few hours don't miss out and download now!