While UX Designers are in charge of the overall functionality of the product, User Interface (UI) Designers are mainly concerned about how the product is laid out, and what the product’s visual communication elements are.
For example, a UI designer will make sure every page, screen or other step that a user will experience is designed within the path that the UX designer has created. They are also responsible for maintaining the overall consistency and implementing style guides across the whole visual communication of the product.
![What’s the difference between UI and UX design? This distinction is often lost on many people.]()
What’s the difference between UI and UX design? This distinction is often lost on many people.
Another crucial difference is that, unlike UX designers, it’s not unusual for UI designers to have a good grasp of front-end development and coding skills. This is because they are responsible for actually building interactive interfaces, not just designing them based on what UX designers intend.
The Challenge
From the confusion that many have about the difference between UX and UI, it’s not a big surprise to see companies hiring one person to fill both shoes. This guide will help you clarify the differences between these two design practices and help you understand how to identify your new ideal UI designer.
User interface designer job postings tend to only include information about what the employer thinks a UI designer is, going in two opposite directions.
The first direction is thinking of user interface designers as their overall graphic designers. This leads to assigning such tasks as branding, illustrations and even print design.
The other direction ends up recruiting UI designers to do what UX designers do. This happens when employers don’t know the difference between the two, or for financial reasons: Hiring a two-in-one designer.
Needless to say, neither of these extremes is the correct way to look at your potential UI designer, and that, in fact, is the current challenge of the industry.
Luke Wroblewski, a Google Product Designer, explains it:
“Information architecture defines the structure of information. Interaction design lets people manipulate and contribute to that information. Visual design communicates these possibilities to people. The user interface is the sum of all these things.”
As you, hopefully, understand by now, UX designer and UI designer are two completely different roles and one person should not be hired to do both.
User Interface (UI) Designer Interview Questions
Responsibilities and requirements for UI designers are always expanding and changing, just like any other technology related job. So, here is a list of interview questions that your next UI designer should be familiar with and should be able to answer without confusion or surprise.
Q: Why is wireframing important? Do you use/create wireframes yourself?
In most teams, it will be the UX designer’s job to create wireframes once s/he has gathered necessary user information and data. Though it does not mean that your UI designer will not know anything about wireframing, because, in a lot of teams, it’s still a UI designer (or both) whose responsibility it is to create wireframes. After all, every UI designer has to know how to “read” and understand a wireframe given to them.
When asked the above question, your prospective UI designer should give an answer along the lines of the following:
A wireframe is ultimately a visualization tool or blueprint to present stages, steps, functions, structure and content of a web page, site or screen. Wireframes are intended to be simple and basic, lacking such design elements as typography, color or graphics, because the number one purpose for wireframes is to represent functionality.
Q: How do you implement prototyping in your workflow?
Similarly to wireframing, prototyping is, more often than not, provided by the UX designer. Therefore, any UI designer should be aware of why prototyping takes place, and how to utilize it, in the workflow.
Put simply, prototyping is for design exploration and time saving purposes. To make sure UI designers don’t waste their time designing and redesigning specific user interactions, prototypes are used to create mockups of how design elements will be used.
Prototypes allow UI designers to identify any potential issues that might come in conflict with what the UX designer or architect has intended.
Q: How do you collaborate with UX Designer(s) and Developer(s)?
Your prospective user-interface designer should feel comfortable answering this question, mainly because both UX and UI designers are design focused, so quite often they understand each other without much explanation.
When UI designers need to adjust, change, add or remove something provided by UX designer, they should focus their communication on wireframes, UI elements, personas and on how it will affect the entire user journey. UI and UX designers should also test the product and give feedback to the developer during development stages.
Q: What is Aesthetic-Usability Effect?
This is a phenomenon that states that a good-looking design will always be perceived as more usable than one that is less appealing, even though that might not be the case.
This phenomenon was demonstrated by two researchers, Kaori Kashimura and Masaaki Kurosu, in their study at Hitachi in Tokyo. They asked test participants to rate the beauty and usability of interfaces. The final study results proved that even when trying to evaluate the interface in its functional aspects, the user would still end up strongly affected by the aesthetic aspect of the interface.
A good UI designer will keep in mind that this effect might easily influence a user’s opinion more than expected. This, in turn, might affect a user’s behavior and their perception of how easy it is to use the designed system.
Q: What is Atomic Design and Its five components?
This is a fairly recent, yet widely recognized methodology introduced by Brad Frost in 2013. Atomic Design was created to design interfaces that focus on designing elements and their combinations, rather than designing web pages one by one. This is a basic explanation of what this methodology was created for. Knowing all five of its components should give your prospective designer some golden bonus points.
-
Atoms: These are the smallest and most basic building blocks. These are applied to web interfaces as labels, input fields, text boxes, buttons, etc. They can also contain color, palettes, fonts, etc.
-
Molecules: When atoms are combined, we get molecules: groups of atoms, bonded together that are the smallest fundamental units of a compound. Molecules can take on their own properties, too.
-
Organisms: Organisms are formed by using molecules as our building blocks. When molecules are joined together, it becomes a relatively complex and distinct section of an interfaces that has been created: an organism.
-
Templates: This stage should already make sense to clients. Understandably, templates are mostly groups of organisms put together to form pages. This is the stage that allows us to see things, such as layouts, coming together.
-
Pages: This is used as specific instances of templates to give a precise understanding of what the final output will look like. Pages ultimately become the highest level of fidelity, which allows UX and UI designers, together, to test the effectiveness of the design system.
Q: How do you make sure you stay up-to-date with industry standards?
Digital design is always changing; its standards are always improving. So, the worst mistake your prospective designer could do is be out-of-date with the industry s/he represents.
A good answer to this question would include the candidate’s favorite resources, books, blogs, podcasts or YouTube channels s/he keeps an eye on for the latest industry information. It would also be useful to hear of designers that inspire the candidate. A good designer knows that there’s never enough inspiration, never enough creativity resources and never enough to know and learn; therefore, you would want to see your prospective designer “light up” at this question.
Q: What is Call To Action (CTA)? Should a UI Designer care about it?
CTA is one of the most important, if not the most important, element of why websites, platforms, applications and digital interfaces are created. In short, it’s an element that will prompt a user to take a certain, desired action; actions such as buying products, downloading reports, sharing content, donating money, and so on. Part of the UX designer’s wireframe and prototype should identify the Call To Action that, ideally, will persuade users to engage.
A good UI designer should always notice CTA indications and should make sure that it gets a lot of attention when designing this element. Most of the time, it requires a specific and, more prominent color styling, different size, typography, placement and alignment, all of which UI designers control.
Q: How much do you know about color theory and color psychology?
Answering this question should never be a problem to a good UI designer. This is foundational thinking. Color theory is, basically, a set of guidelines and laws that are intended to trigger emotions, set moods and guide someone’s attention by using colors in very specific ways.
Essentially, color theory and psychology consist of two color groups: warm colors and cool colors. Warm colors, such as orange, yellow and red, are known to awaken enthusiasm, energy, positivity and happiness. Cool colors, green, purple and blue, create a trustworthy, calm, relaxing and peaceful environment.
Individual colors, too, have their own inherent abilities to awaken certain emotions. For example, red conveys the suggestion of danger, caution and hazard.
All in all, a good UI designer will always use the power of color theory and color psychology to strengthen the desired message.
Q: What are your thoughts on user-interface (UI) style guides?
In answering this question, your candidate should cover such aspects as: What is a UI style guide, why was it created, what it is used for? What experiences has the candidate had when using style guides?
Similarly to Atomic Design, UI style guides are created, used and maintained to ensure consistency across a product, web site, applications or any other type of design project with different interface stages.
Style guides cover everything from branding, colors, typography, layouts to a set of standards specifically designed for a particular company. They are used to improve work efficiency across teams, and make new member’s onboarding process simpler, more effective and agile.
Q: How important do you think element mapping is in the work you do?
Every good UI designer will design elements considering their shape, form, size, color, location and alignment. This means that your candidate should understand that element mapping is a crucial part of the design work.
Simply explained, mapping is the implied relationship between controls and their effects. If an element creates an effect that the user expects, then the element has good mapping.
For example, think about a set of images aligned horizontally that can be moved to the left or right. Underneath should be controls or buttons indicating that these images can be moved to either side. To move the images to the left side you would expect to click on the button aligned with the left side. Therefore, actually aligning this button to the left would, indeed, match the user’s expectations, which means this element has good mapping.
Q: What is Minimum Viable Product (MVP)?
Sometimes, designers create ego-centric work. It happens when all the UX requirements are met by the UI designer, but s/he continues adding design work to use his or her creativity, or to test out new practices, or to add elements that the designer feels are necessary, based on taste and preferences.
MVP works the opposite way; it means creating and designing a basic version of a product that early adopters can use or buy. The main goal is to bring the product to the market as soon as possible without any non-essential features.
Additional features and design elements are added based on the feedback of real users rather than a designer’s ideas and assumptions. Many of the world’s most popular products have been developed using MVP practice; Twitter is an example.
Q: Do you think Mobile-First Design is effective, and why?
Ideally, your candidate will explain that when Responsive Web Design (RWD) was introduced and gained popularity, Mobile-First Design practice was created to make the designer’s job more effective and efficient.
In this practice, designing starts from the smallest anticipated screen size and only then follow with enhancement on larger screen sizes. This approach saves time and increases a designer’s efficiency; when the design process starts with a large screen, designers tend to get into difficulty later trying to place elements onto smaller screens.
Q: How do you apply Ockham’s Razor to your design work?
This principle is as simple as the Pareto Principle (also known as 80 / 20 rule). It simply says that whenever we have to make a decision between two options, the simplest should be selected.
UI designers use Ockham’s Razor when choosing between two designs or two design elements with the same function. Simplicity should always be chosen over complexity. Or in other words, s/he needs to choose the option which makes fewer assumptions.
Q: What is your personal experience with Participatory Design?
If not describing personal experience, your prospective UI designer should, at least, tell you in his or her own words what Participatory Design is and what it is used for.
Essentially, this term means having everyone (employees, partners, customers, stakeholders, end-users) involved in the design process to make sure that the end product matches their needs, expectations and can be freely used by them.
Q: When do you use Style Tiles?
Style tiles are similar to Atomic Design methodology, prototypes, wireframes or style guides. Style tiles are there to make it easier for the client (end-user) to understand what the initial website, product or application will look like. Style tiles are thought of as something between a mood board and a mockup.
In fact, they are often used to replace the traditional first mockups. In most cases, style tiles are generated very early in the design lifecycle, certainly earlier than mockups. Style tiles are also known for getting a better sense of feedback sooner.
Q: How Visual Weight should be used effectively?
Just like Call To Action (CTA) and Color Theory, Visual Weight is part of the fundamental knowledge a UI designer should have. Visual weight means giving a design element “power” to stand out and get user’s attention.
Not all elements have the same amount of “heaviness”. For example, CTA elements are more important than a simple label or an abstract image. Giving higher levels of “heavy” to certain elements are usually achieved by using contrast.
This isn’t necessarily a contrast of colors; it can be contrast of placement or size, too. A CTA button might look larger (or heavier) simply because it is designed to take up more space than surrounding elements. This puts more visual weight (more importance) on the CTA button.
Q: Can you walk me through your design decisions?
And finally, a great question to determine if your new designer knows how to make good design decisions. Ask the candidate to look at his or her portfolio, or a live product, website or application, that s/he designed, and walk you through while describing different aspects and elements.
Ideally, you should expect to hear the designer’s reasons for why s/he decided to give buttons a certain size, shape, color, placement and alignment. All design thinking should be revealed by this question. It would show that everything s/he designs is intentional, not experimental or accidental.
