There seems to be a great deal of confusion when it comes to defining UX and UI, even from company to company (and agency to agency). In fact, leaders in the field don’t necessarily agree what the roles include or what title they should be given.
Which is why we’re ecstatic that Min Ming Lo from Pixelapse put together this great article outlining the differences between design roles. We think it is an excellent guide to what each role typically involves.
Thank you to our client Eye-D Creative, for providing the examples used as visual representation of the roles discussed.
UX DESIGNER (USER EXPERIENCE DESIGNER)
- UX designers are primarily concerned with how the product feels.
- They explore many different approaches to solving a specific user problem.
- They ensure that the product logically flows from one step to the next.
- This might be done by conducting in-person user tests to observe one's behaviour.
- They refine and iterate to create the "best" possible user experience.
Deliverables: Wireframes of screens, storyboards, sitemap
Tools of the trade: Photoshop, Sketch, Illustrator, Fireworks, InVision, Axure, Omnigraffle, Balsamiq, Visio
Example: Homepage wireframe
UI DESIGNER (USER INTERFACE DESIGNER)
- User interface designers are responsible for how the product is laid out.
- They are in charge of designing each screen or page ensuring that the UI visually communicates the path that a UX designer has created.
- This can include small tweaks to the layout to improve the usability.
- Maintaining consistency in visual elements and defining behavior such as how to display error / warning states, fall under the purview of a UI designer.
Deliverables: Flat designs of screens
Tools of the trade: Photoshop, Sketch, Illustrator, Fireworks, Indesign
NOTE: The boundary between UI and UX designers is fairly blurred and it is not uncommon for companies to opt to combine these roles.
VISUAL DESIGNER (GRAPHIC DESIGNER)
- A visual designer is the one who pushes pixels
- Visual designers are not concerned with how screens link to each other, nor how someone interacts with the product.
- Their focus is on crafting beautiful icons, controls, and visual elements and making use of suitable typography.
Deliverables: Pixel perfect designs of the screens
Tools of the trade: Photoshop, Sketch
NOTE: It is also fairly common for UI designers to pull double duty and create the final pixel perfect assets. Some companies choose not to have a separate visual designer role.
Example: Homepage design
INTERACTION DESIGNER (MOTION DESIGNER)
- Interaction designers deal with what the interface does after a user touches it.
- Unlike visual designers who usually deal with static assets, motion designers create any animated elements.
- For example, they decide how a menu should slide in, what transition effects to use, and how a button should fan out.
Deliverables: Animated screen assets
Tools of the trade: AfterEffects, Core Composer, Flash, Origami
UX RESEARCHER (USER RESEARCHER)
- The goal of a researcher is to answer the twin questions of "Who are our users?" and "What do our users want?"
- This entails interviewing users, researching market data, and gathering findings.
- Design is a process of constant iteration. Researchers may assist with this process by conducting A/B tests to tease out which design option best satisfies user needs.
Deliverables: User personas, A/B test results, Investigative user studies & interviews
Tools of the trade: Mic, Paper, Docs, Camtasia
NOTE: UX designers also occasionally carry out the role of UX researchers.
FRONT-END DEVELOPER (UI DEVELOPER)
- Front-end developers are responsible for creating a functional implementation of a product's interface.
- They translate a static mockup into a working, interactive experience.
- They are also responsible for coding the visual interactions that the motion designer comes up with.
Deliverables: The final online product
Example: Live website
There can be a great deal of crossover on these roles, and the title of each role can vary from company to company.
If you want more clarification on UX roles, or want to find out where you sit between junior to senior, then check out this blog post on UX Job Descriptions Made Easy(er).