{"id":15849,"date":"2022-08-25T07:03:37","date_gmt":"2022-08-25T14:03:37","guid":{"rendered":"https:\/\/coderpad.io\/?p=15849"},"modified":"2023-05-28T14:34:13","modified_gmt":"2023-05-28T21:34:13","slug":"front-end-design-skills","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/interviewing\/front-end-design-skills\/","title":{"rendered":"3 Design Skills You Should Look For In Front-End Candidates"},"content":{"rendered":"\n<p>A user-friendly design is an integral part of any application.<\/p>\n\n\n\n<p>As such, ensuring that your future front-end engineers have excellent design skills is essential to any interviews you have with them.<\/p>\n\n\n\n<p>Hiring a front-end engineer without design skills is like making a car that only goes in reverse \u2013 it\u2019ll work, but no one in their right mind would use it.&nbsp;<\/p>\n\n\n\n<p>While the particular design skills you\u2019ll 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\u2019re going to build.<\/p>\n\n\n\n<p>Here are three we recommend that you prioritize.<\/p>\n\n\n<aside class=\"\n    cta-banner\n     cta-banner--bg-green      cta-banner--has-media \"\ndata-block-name=\"cta-banner\">\n    <div class=\"inner\">\n        <div class=\"content\">\n                            <h2 class=\"headline\">Ready to start interviewing?<\/h2>\n            \n                            <div class=\"cta-buttons\">\n                                    <a href=\"\/sales\/\" class=\"button  js-cta--get-a-demo\"  data-ga-category=\"CTA\" data-ga-label=\"Ready to start interviewing?|Get a demo\">Get a demo<\/a>\n                                <\/div>\n                    <\/div>\n                    <div class=\"media\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"238\" height=\"146\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/illustration-of-two-people-chatting-in-app-windows.png\" class=\"attachment-large size-large\" alt=\"\" \/>\n            <\/div>\n            <\/div>\n<\/aside>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"semantic-layout\">1. Knowledge of semantic layout<\/h2>\n\n\n\n<p>With enough HTML hacking and <code>&lt;div&gt;<\/code> 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.<\/p>\n\n\n\n<p>But if your team is doing any serious web development, knowing how to use semantic layout is crucial for new team members.&nbsp;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2139\ufe0f 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 <code>&lt;div&gt;<\/code> and <code>&lt;span&gt;<\/code> tags by replacing them with elements like <code>&lt;form&gt;<\/code>, <code>&lt;article&gt;<\/code>, <code>&lt;nav&gt;<\/code>, and more. You can find more information on semantic elements <a href=\"https:\/\/www.w3schools.com\/html\/html5_semantic_elements.asp\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n<\/blockquote>\n\n\n\n<p>First, there is the accessibility aspect \u2013 many screen readers used by people with visual or other impairments use HTML semantic elements to determine what to read to the user.<\/p>\n\n\n\n<p>Second, there is the maintenance aspect. Knowing semantic layout allows developers to quickly understand what\u2019s 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.&nbsp;<\/p>\n\n\n\n<p>Assessing this is relatively easy, as any technical interview question will almost always include HTML manipulation.&nbsp;<\/p>\n\n\n\n<p>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 \u2013 are they still using <code>&lt;div&gt;<\/code> and <code>&lt;span&gt;<\/code> tags when designing a page layout, or are they using semantic elements like <code>&lt;header&gt;<\/code> and <code>&lt;aside&gt;<\/code> to clearly define the HTML content?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Attention to detail<\/h2>\n\n\n\n<p>While attention to detail is important for creating a friendly, functional UI, it\u2019s even more critical for creating an accessible website that people can use regardless of their dis\/abilities.<\/p>\n\n\n\n<p>This attention to detail includes things like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Did the developer include alt text for their images?<\/li>\n\n\n\n<li>Do they consider the accessibility tree by making good use of headers and other appropriate elements?<\/li>\n\n\n\n<li>Did they add appropriate messaging to interactive elements to ensure they\u2019re well understood?<\/li>\n\n\n\n<li>Did they consider text and background color when creating elements that contrast with one another?<\/li>\n<\/ul>\n\n\n\n<p>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.&nbsp;<\/p>\n\n\n\n<p>For that reason, we recommend making the \u201cattention to details\u201d assessment a discussion point during the interview.&nbsp;<\/p>\n\n\n\n<p>For example, gauge their attention to detail by asking them how they\u2019d 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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. How to use design libraries<\/h2>\n\n\n\n<p>Nobody wants their developer redeveloping the wheel.&nbsp;<\/p>\n\n\n\n<p>Front-end developers should know how to use popular design libraries like <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap<\/a>, <a href=\"https:\/\/mui.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Material UI<\/a>, and <a href=\"https:\/\/tailwindcss.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tailwind CSS<\/a> so that they\u2019re not recreating features that have already been created. You should be confident that your newest team member won\u2019t spend their first week figuring out how to create a <a href=\"https:\/\/getbootstrap.com\/docs\/5.2\/components\/carousel\/\" target=\"_blank\" rel=\"noreferrer noopener\">carousel<\/a> in vanilla JS.<\/p>\n\n\n\n<p>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 <code>Box<\/code> component instead of a <code>div<\/code> when working with MaterialUI?<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">If candidates don\u2019t have developed design skills<\/h2>\n\n\n\n<p>While the skills we listed are important, <strong>don\u2019t automatically discount a candidate because they don\u2019t check all of them off<\/strong>!<\/p>\n\n\n\n<p>There are often circumstances where the candidate may still be a good fit for your team even if they can\u2019t check off all three skills we listed above:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Do they have one or even two of the skills?<\/li>\n\n\n\n<li>Do they have adjacent skills that are similar?<\/li>\n\n\n\n<li>Do they show a history of being able to learn new things quickly?<\/li>\n\n\n\n<li>Do their other skills balance out their lack of skills in design \u2013 and do they have a desire to learn design skills?<\/li>\n<\/ul>\n\n\n\n<p>These are all questions you\u2019ll want to ask before you stop a candidate from proceeding to the next round of an interview because of issues with their design skills.<\/p>\n\n\n\n<p>Interested in what else to look out for in hiring software engineers for your company? Check out these articles:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/coderpad.io\/interview-front-end-developers\/\">How to Interview Front-end Developers<\/a><a href=\"https:\/\/coderpad.io\/blog\/interviewing\/two-technical-questions-to-ask-your-intermediate-front-end-candidates\/\"><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/coderpad.io\/blog\/interviewing\/returning-to-the-office-dont-bring-these-bad-technical-interview-elements-with-you\/\">Returning to the Office? Don\u2019t Bring These Bad Technical Interview Elements With You<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/coderpad.io\/blog\/interviewing\/5-tips-for-interviewing-frontend\/\">How to Run Front-End Developer Interviews That Don&#8217;t Suck<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/coderpad.io\/blog\/interviewing\/3-great-technical-questions-for-junior-front-end-candidates\/\">3 Great Technical Questions to Ask Your Junior Front-End Engineering Candidates<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/coderpad.io\/blog\/interviewing\/a-holistic-guide-to-diversity-and-inclusion-in-the-technical-hiring-process\/\">A Holistic Guide to Diversity and Inclusion in the Technical Hiring Process<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Hiring a front-end engineer without design skills is like making a car that only goes in reverse \u2013 it\u2019ll work, but no one in their right mind would use it.\u00a0Here&#8217;s how to find engineers that can make things look good.<\/p>\n","protected":false},"author":12,"featured_media":15887,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[12],"tags":[],"persona":[],"blog-programming-language":[],"keyword-cluster":[],"class_list":["post-15849","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-interviewing"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/15849","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/comments?post=15849"}],"version-history":[{"count":49,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/15849\/revisions"}],"predecessor-version":[{"id":34317,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/15849\/revisions\/34317"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/15887"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=15849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=15849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=15849"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=15849"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=15849"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=15849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}