Ask 100 designers to explain the difference between UX and UI and you’ll likely get 100 different answers. Ask the general public the same question and you’ll probably get that blank look generally reserved for the bill at a really expensive steakhouse. So, first things first, let’s explain what we’re talking about here. User experience (UX) and user interface (UI) are two distinct phases that go into designing your app. Here at RevUnit, they are usually done by the same person or team.
For the purpose of this article, let’s use a little analogy. Imagine, if you will, that building any app or website is just like building a house. A big, beautiful, tech laden home full of all sorts of magical things on super fast WI-FI. You wouldn’t just start by dropping bricks on the ground and slapping on some paint. To build a quality house, you must start with a solid architectural blueprint, then select an appropriate style, and finally work with a builder throughout construction. Apps are the same way. We generate the blueprints, design the interface, and our developers create all the code that brings it to life.
User Experience - "UX"
User Experience is the foundation for every successful digital design – the architecture of your app. This is where we create the blueprints – aka, wireframes – that guide the design and development. The goal of UX is to make sure that things are simple and easy to use all while making sure to meet the project objectives and requirements.
In UX, our design team steps into the shoes of the user and considers how he or she would use the app. We focus on what functionality and content should be shown on the screen and when and where it should appear. We examine what actions the user could take in the screen flow, how the navigation works, and where all controls are located.
But wait! There’s more! We also consider all the variations of each screen – such as what happens if there is no content to display, or form success and error states, and how the screens adapt to various devices like desktop, tablet, and mobile phones. And that’s just the beginning. This phase requires a very technical mindset that focuses only on functionality. In fact, wireframes are usually simple line drawings. We’re not thinking about colors, styles, images, logos, or animations. This is all about layout and functionality, all of the visual elements come next when we develop the user interface.
User Interface - "UI"
User interface is generally what most people think of when they hear “design.” It’s the fun side where colors, graphics, and animations take the architecture from basic line drawings to glorious technicolor. This is also when you’ll start seeing full color design comps. The UI phase begins when the UX architecture is complete and our designers know how many screens, elements, and variations must be created. Now we can kick the right side of our brain into overdrive and create the app’s look and feel because we are freed from the technical and structural considerations made when creating the UX. We might still move things around a bit based on user testing or feedback, it’s just not our main focus anymore.
The UI builds the visual elements of an app using color palettes and font styles from brand guidelines. We paint the buttons and interface components, bring icons to life with animations, and create screen transitions. Each of the device variations are rendered so our developers know exactly how to scale images and fonts. While it is the most fun, there is still a lot for us to do once we’ve finished the interface design. We export out all the graphics, style guides, and animations for our developers to bring the app to life. Don’t worry though, during development we’re still there to make sure it’s all visually correct and to hunt down any usability issues.
Why Not Do Both At The Same Time?
Imagine writing a note in one hand and painting with a roller in the other. On a ladder. Twelve feet in the air. Sure, you might be able do it, but you probably shouldn’t. Even if you are in the circus. UX and UI require different kinds of thinking – UX is very technical and left-brained, whereas UI is much more creative and right-brained. (And sometimes in meetings we may be a little harebrained, but that’s another article.) By separating out each role, we can tune our thinking to really focus on doing our best work.
That’s not to say every job needs a dedicated round of UX and detailed wireframes. Sometimes all we need to create a plan are a few sketches and to talk with the whole team. That way when we fire up the computer we have a idea of what we need to create and aren’t staring at a blank canvas with no idea what to do.
We balance left-brained, right-brained, and sometimes the harebrained.
There we have it - user experience is the app’s architecture and user interface is the look and feel. This is just a small glimpse into the whole design process when we create an app but hopefully clears things up a bit.
Interested in seeing how we can bring your idea to life? Explore all of our services here. Tell them Brian sent you.