linkedin Skip to Main Content
Just announced: CoderPad Play! Engage your team with fun technical challenges.
Back to blog

3 Design Skills You Should Look For In Front-End Candidates

Interviewing

A user-friendly design is an integral part of any application.

As such, ensuring that your future front-end engineers have excellent design skills is essential to any interviews you have with them.

Hiring a front-end engineer without design skills is like making a car that only goes in reverse – it’ll work, but no one in their right mind would use it. 

While the particular design skills you’ll need will depend on your company, project, and team, there are general skill sets that are helpful in front-end engineers no matter what they’re going to build.

Here are three we recommend that you prioritize.

1. Knowledge of semantic layout

With enough HTML hacking and <div> tags, anyone can create a workable web page or application. And that might be fine for a personal website or a business with only one employee.

But if your team is doing any serious web development, knowing how to use semantic layout is crucial for new team members. 

ℹ️ Semantic layout/semantic HTML is the HTML5 feature that adds new HTML tags with a syntax that is more human-readable. It adds richness to the regular <div> and <span> tags by replacing them with elements like <form>, <article>, <nav>, and more. You can find more information on semantic elements here.

First, there is the accessibility aspect – many screen readers used by people with visual or other impairments use HTML semantic elements to determine what to read to the user.

Second, there is the maintenance aspect. Knowing semantic layout allows developers to quickly understand what’s happening in the UI, which helps them to quickly create enhancements to the code and locate and fix any display bugs that might be present. 

Assessing this is relatively easy, as any technical interview question will almost always include HTML manipulation. 

Whether this is done in the JavaScript component or the HTML template, you can quickly see if the candidate uses semantic elements to make the code more readable – are they still using <div> and <span> tags when designing a page layout, or are they using semantic elements like <header> and <aside> to clearly define the HTML content?

2. Attention to detail

While attention to detail is important for creating a friendly, functional UI, it’s even more critical for creating an accessible website that people can use regardless of their dis/abilities.

This attention to detail includes things like:

  • Did the developer include alt text for their images?
  • Do they consider the accessibility tree by making good use of headers and other appropriate elements?
  • Did they add appropriate messaging to interactive elements to ensure they’re well understood?
  • Did they consider text and background color when creating elements that contrast with one another?

One way you can assess these skills is by looking at what details of the UI the candidate focuses on. However, this may be a less-than-ideal way to assess attention to details as some candidates may not think to use this skill set in a stressful interview setting. 

For that reason, we recommend making the “attention to details” assessment a discussion point during the interview. 

For example, gauge their attention to detail by asking them how they’d improve the interface to make it more accessible given more time. Doing so should surface whether they are aware of what trade-offs they had to make in the artificial interview environment.

3. How to use design libraries

Nobody wants their developer redeveloping the wheel. 

Front-end developers should know how to use popular design libraries like Bootstrap, Material UI, and Tailwind CSS so that they’re not recreating features that have already been created. You should be confident that your newest team member won’t spend their first week figuring out how to create a carousel in vanilla JS.

Assessing their knowledge of design libraries can be as simple as asking about specific implementation details of any library you use, or the libraries they choose to use. For instance, why is it beneficial to use a Box component instead of a div when working with MaterialUI?

For a more in-depth review, you can ask them to use a specific library in the assessment, or you can simply encourage them to use external design libraries and see which ones they use to solve the question you ask.

If candidates don’t have developed design skills

While the skills we listed are important, don’t automatically discount a candidate because they don’t check all of them off!

There are often circumstances where the candidate may still be a good fit for your team even if they can’t check off all three skills we listed above:

  • Do they have one or even two of the skills?
  • Do they have adjacent skills that are similar?
  • Do they show a history of being able to learn new things quickly?
  • Do their other skills balance out their lack of skills in design – and do they have a desire to learn design skills?

These are all questions you’ll want to ask before you stop a candidate from proceeding to the next round of an interview because of issues with their design skills.

Interested in what else to look out for in hiring software engineers for your company? Check out these articles: