10 Essential UI/UX/FE Interview Questions *
Toptal sourced essential questions that the best UI, UX, and front-end developers can answer. Driven from our community, we encourage experts to submit questions and offer feedback.Hire a Top UI, UX, and Front-end Developer Now
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.
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:
- Single Responsibility Principle: A class should have no more than one responsibility.
- Open-closed Principle: A software entity should be open for extension, but closed to modification.
- Liskov Substitution Principle: Objects shall be replaceable with instances of subtypes without breaking the application.
- Interface Segregation Principle: Many client-specific interfaces are better than one general-purpose interface.
- 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.
A website is rendering below 60 frames per second when scrolling. What are some ways we can reduce the number of frame repaints?
If the scrolling on a website is stuttery because the browser is painting too frequently, we can try the following:
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.
Use less expensive CSS styles. Styles such as
border-radiusare costly to calculate. By reducing their use, we can improve our site’s scrolling performance.
- 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.
- 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.
Apply to Join Toptal's Development Network
and enjoy reliable, steady, remote Freelance UI, UX, and Front-end Developer Jobs
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.
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.
How do you avoid a flash of unstyled content (FOUC) while still keeping your site accessible to all users?
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.
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
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:
- 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.
- 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.
- 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:
- I like X because it’s what I’m used to.
- I use X because it’s what the majority of other UX designers use.
What are some advantages of declaring and using system fonts in our websites and applications?
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:
- 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.
- Because the font in use will be the operating system’s default font, our application or website will appear more like a native app.
- If our designs require it, we can render tiny text without losing legibility.
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.
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
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:
- Due to less abstraction, stylesheets are easier to read and maintain.
- Because classes are unassuming, we are not locked into predefined styles, allowing us to build more unique interfaces without adding additional class declarations.
- 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.
- 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.
Looking for UI, UX, and Front-end Developers?
Looking for UI, UX, and Front-end Developers? Check out Toptal’s UI, UX, and front-end developers.
Freelance UI, UX, and Front-end Developer
Freelance UI, UX, and Front-end Developer
Tomislav is a full-stack developer and designer with over 20 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.Show More
Freelance UI, UX, and Front-end Developer
Carlos is a professional software engineer and full-stack web developer specializing in the Ruby on Rails framework. He has worked with tech companies for over a decade, helping to build technology-based businesses from the ground up. He has a bachelor's degree in computer science from Williams College.Show More
Toptal Connects the Top 3% of Freelance Talent All Over The World.