10 Essential UI/UX/FE Developer Interview Questions *

answer badge

SOLID is an acronym for five object-oriented programming (OOP) principles. Primarily developed by Robert C. Martin and Barbara Liskov, the principals are intended to make code more maintainable, reusable, flexible, and easy to understand. These well-known principals are as follows:

  1. Single Responsibility Principle: A class should have no more than one responsibility.
  2. Open-closed Principle: A software entity should be open for extension, but closed to modification.
  3. Liskov Substitution Principle: Objects shall be replaceable with instances of subtypes without breaking the application.
  4. Interface Segregation Principle: Many client-specific interfaces are better than one general-purpose interface.
  5. Dependency Inversion Principle: Depend on abstractions, not concretions.

Not every shop uses OOP—some will use functional programming (FP) instead, or some other paradigm. But for OOP-oriented projects, the above principles are considered by many to be good practice. So regardless of whether the candidate can answer this question, you should take the time to check the candidate’s (OOP-specific) work to see if it embodies these principles.

question badge

What tools are currently in your UX tool belt and why?

answer badge

It’s easy to list a bunch of different products and services that UX designers might use; it’s much harder to explain why they chose to adopt such a tool. What we want to hear from the candidate is an understanding of the tools available and clear reasoning for choosing them. Or to put it another way, knowing is not understanding.

Even if you don’t have the most significant understanding of the UX tooling landscape, the candidate’s answer can give us insight about their current skill level.

Here are examples of things we want to hear:

  1. We used X at my previous place of work and because of its implementation we were successfully able to hit our quarterly key performance indicator (KPI) goals.
  2. I’ve tried both X and Y, and I found X was more robust in visualizing data and also allowed for easier collaboration between team members.
  3. I found out about X during an online UX design course I purchased.

Here are examples of things we do not want to hear and could be clues that the candidate hasn’t taken the time to explore what’s available:

  1. I like X because it’s what I’m used to.
  2. I use X because it’s what the majority of other UX designers use.
question badge

What’s the difference between interaction design (IxD) and UX design?

answer badge

There is less of a difference and more of an overlap between the two. Like UX design, IxD is heavily user-oriented.

But IxD specifically focuses on how a digital product communicates with a user during the (many) different possible types of interactions there may be.

Whenever the user interacts with the product, we can use movement, color, sound, imagery, and tactile feedback to convey context and elicit emotion. This can improve the experience a user has with our product.

Because this school of thought is focused so heavily on human perception, successful IxD should always result in a product that feels intuitive and natural.

Find top UI, UX, and front-end developers today. Toptal can match you with the best engineers to finish your project.

Hire Toptal’s UI, UX, and front-end developers
question badge

What is A/B testing?

answer badge

Sometimes referred to as split testing, an A/B test is where you serve multiple variations of software to your users and track how successful one design or feature is over another. Through the process of elimination, a company can select (or continue to A/B test sub-variants of) the highest-performing design.

This lowers the risk of rolling out a new interface or feature, while ensuring the highest possible rate of user adoption.

question badge

A website is rendering below 60 frames per second when scrolling. What are some ways we can reduce the number of frame repaints?

answer badge

If the scrolling on a website is stuttery because the browser is painting too frequently, we can try the following:

  1. Wrap and debounce JavaScript animations and input handlers in requestAnimationFrame(). This tells the browser that we wish to perform an animation and requests that the browser calls a function to update an animation before the next repaint. Another added benefit is that animations in inactive browser tabs will pause, freeing up needed resources.
  2. Use less expensive CSS styles. Styles such as box-shadow and border-radius are costly to calculate. By reducing their use, we can improve our site’s scrolling performance.
  3. Reduce the complexity of our CSS selectors. Over half the time used to calculate our computed styles is devoted to selector matching. By simplifying our CSS selector specificity, we can gain a performance boost.
  4. Reduce or improve element layout changes. When a browser needs to change the width or height of an element, it needs to calculate if any other entities are affected. This has the potential to create a cascading effect that can be expensive.
question badge

How do you avoid a flash of unstyled content (FOUC) while still keeping your site accessible to all users?

answer badge

A FOUC happens when the HTML for a site has loaded, but the styles have not, resulting in a style-less mess for a short duration of time.

Some developers might try to hide the page until the site has fully loaded. But such techniques usually rely on JavaScript, which means that if the user has JavaScript disabled, they will never see the page.

The most accessible method then is to simply include the styles of your site directly in the <head> section of the document as opposed to linking to them. The tradeoff is the overall HTML load time will increase.

Alternatively, if you wanted to get creative, you could use a snippet of inline styles in the <head> that would hide the page, with overriding inline styles at the bottom of the page. This would remove the need for JavaScript, while eliminating the FOUC and keeping the above-the-fold loading time to a minimum.

question badge

What is the difference between progressive advancement and graceful degradation?

answer badge

Progressive advancement (also known as “mobile first”) is an approach to designing responsive software that prioritizes smaller devices—which are more restrictive in nature—resulting in more straightforward designs. Then, as we design up the chain to larger devices, we can begin to take advantage of more space and interaction options such as tooltips on hover.

The thought behind this approach is that we can nail down our key features first in the most accessible way possible, moving onto the “nice to haves” that come with larger screens second.

On the other hand, graceful degradation is an approach that ensures key features of a website continue to work on smaller and older devices it wasn’t originally designed for.

question badge

What are some advantages of declaring and using system fonts in our websites and applications?

answer badge

Ever since our online experiences have been moving to smaller devices, our font libraries have been slowly changing. Traditional highly legible sans-serif fonts like Helvetica and Arial are less readable at smaller sizes, and so the need arose for new fonts specifically designed for smaller screens. Google developed “Roboto;” Apple, “San Francisco;” and Microsoft, “Segoe UI” for this reason.

By using these system-supplied fonts in our websites and applications:

  1. We save the user from having to download an external font from a CDN, resulting in slightly faster loading times and no flashing from font changes.
  2. Because the font in use will be the operating system’s default font, our application or website will appear more like a native app.
  3. If our designs require it, we can render tiny text without losing legibility.
question badge

Can you explain why the srcset and sizes attributes were introduced?

answer badge

Before HTML5, the img tag only allowed us to specify a single source image.

The problem that arose came with the introduction of smaller devices and the adoption of responsive web design. As a general rule, we want to reduce load times and serve content to the user only when it’s needed: Having a desktop-sized header image loading on small handheld devices is unnecessary and costly.

The srcset and sizes attributes solve this problem by allowing us to set an array of images that will load dynamically based the media queries we set within the sizes attribute.

question badge

What is utility-first CSS and what are some of its advantages?

answer badge

The common approach of block-element modification (BEM) aims at abstracting styles into reusable class names for component level styling. Unlike BEM, utility-first CSS is an approach to building interfaces where CSS classes generally contain a single style, are named based on that style, and little abstraction takes place.

Some advantages include:

  1. Due to less abstraction, stylesheets are easier to read and maintain.
  2. Because classes are unassuming, we are not locked into predefined styles, allowing us to build more unique interfaces without adding additional class declarations.
  3. Unassuming class names can also help to streamline the process of onboarding new employees and/or improve the workflow between current devs and non-technical employees.
  4. In the event that you need to create an abstraction, thanks to the low-level nature of the classes, there’s less of a chance that making a style change will break other parts of the site.
* There is more to interviewing than tricky technical questions, so these are intended merely as a guide. Not every “A” candidate worth hiring will be able to answer them all, nor does answering them all guarantee an “A” candidate. At the end of the day, hiring remains an art, a science — and a lot of work.
Submit an interview question
Submitted questions and answers are subject to review and editing, and may or may not be selected for posting, at the sole discretion of Toptal, LLC.
All fields are required
Thanks for submitting your question.
Our editorial staff will review it shortly. Please note that submitted questions and answers are subject to review and editing, and may or may not be selected for posting, at the sole discretion of Toptal, LLC.
Looking for UI/UX/FE Developer experts? Check out Toptal’s UI, UX, and front-end developers.
Tomislav Krnic
Croatia
Tomislav is a full-stack developer and designer with over 15 years of experience. He has recently focused on React Native Mobile development and real-time databases. He has founded or co-founded six businesses with three successful exits. He prides himself on a proven record of building full solutions with tangible results.
Tiago Silva
Portugal
Tiago left his position at Microsoft to co-found Hive. From then on, building up Hive has led him through working on projects in every kind of language and environment, performing every skill imaginable from sales, to project management and hardcore development. For him, programming is an art form, and he gets a kick out of making his code as elegant as possible.
Carlos Ramirez III
United States
Carlos is a professional software engineer and web developer specializing in the Ruby on Rails framework. He has worked with tech companies in New York's Silicon Alley for over five years, helping to build technology-based businesses from the ground up. He has a bachelor's degree in computer science from Williams College and has been in the software industry for nearly ten years.