UI UX interview questions with answers

I have recently faced few interviews for a position of UI UX lead. I will add here some of the UI UX lead interview questions with answers. If anyone interesting read this article.

1. how browser rendering works?

If you are a UI engineer you need to know how browser rendering work. first of all, you need to know the difference between a browser and a browser engine.  A web browser is a piece of software that loads files from a remote server. Within different browsers, there’s a part of the browser that figures out what to display to you based on the files it receives. This is called the browser engine

And also data is sent over the internet as “packets” sized in bytes. The browser reads the raw bytes of data, and not the actual characters of code you have written.  The browser goes through transforming the raw bytes of datahtml into the DOM before anything can happen. See the be bellow flow.

Bytes –> characters –> tokens –> node — > DOM

In the same way, the CSS rendering happening. It’s from row bytes off CSS to CSSOM. See the bellow flow

CSS Bytes –> characters –> tokens
–> node — >CSSOM

The DOM and CSSOM tree structures are two independent structures. browser engine now combines the DOM and CSSOM trees into something called a render tree. The special thing is rendering tree contains all visible element (display: hidden elements are not in the render tree but in the DOM)

DOM + CSSOM = Render tree

The next stage called layout’ stage or ‘reflow’ stage. Browser figures out exact position and size of each element with the browser viewport.

What about JavaScript? most important things to remember is that whenever the browser encounters a script tag, the DOM construction is paused. The entire DOM construction process is halted until the script finishes executing that’s why we normally include the JavaScript at the bottom. That’s why the location of your JavaScript actually matters.

you can add async tag to unlock the DOM rendering process.

E.g.: <script src="https://link-to-app.js" async>

I have answered this question like 60%. You need to know the basics of how the browser renders your HTMLCSS, and JS

Please refer to this link for more details.

Lets move to the next UI UX interview questions with answers

2. What do you know about CSS methodologies?

There are CSS methodologies / best practices to follow. When your project grows you may face a big performance issue if you do not use a proper CSS methodology.

You need to explain about few of above methodologies.

2. How do you reuse media queries?

Actually, this is kind of indirect question to check about your knowledge of using SASS / LESS. Using CSS variable you can define your all media breakpoint then you can reuse this CSS variable within media queries.

and also you need to know about the advantages of using CSS preprocessors such as,

    • Nested syntax

    • Ability to define variables

    • Ability to define mixins

    • Mathematical functions

    • Operational functions (such as “lighten” and “darken”)

  • Joining of multiple files

3. What you know about UI design patterns

This is a very common and easy question but I was a little confused I have messed this up with software design pattern but that was wrong 🙂

User Interface Design patterns are solved common design problems. Design patterns are standard reference points for the experienced user interface designer.

there are two types I found on the internet

  1. User Interface Design Patterns
  2. Persuasive Design Patterns

Please refer this link for more

Lets move to the fourth UI UX interview questions with answers

4. Can you write the code for iterate an array using ES6 (Javascript 6)?

this is a simple test whether you know about ES6 syntax. again this is a very basic question.

var arr = ['a', 'b', 'c'];
ES5
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
ES6

for (let i of arr) {
console.log(i);
}

You need to know all the new syntax in ES6

Please Read more using this link 

5. What are the steps you follow in the UX process

I could answer this question but it’s again a simple question but we need to remember the terms.

I found the below steps in the internet

  1. Understand the requirement
  2. Do a research (Analyze competitors / latest trends etc…)
  3. Sketch
  4. Design
  5. Implement
  6. Evaluate

6. What is the software development process that your team has used in the recent project? can you little explain it?

My answer was Agile Scrum

Scrum has standups/progress review every day. There is a person called facilitator (scrum master) who focus completely on the process. Sprint planning meeting/standup meetings/code review meeting/sprint reviews are comes with Scrum.

Scrum is a lightweight agile project management framework with broad applicability for managing and controlling iterative and incremental projects of all types. With Scrum methodology, the “Product Owner” works closely with the team to identify and prioritize system functionality in form of a “Product Backlog”. The Product Backlog consists of features, bug fixes, non-functional requirements, etc. – whatever needs to be done in order to successfully deliver a working software system. With priorities are driven by the Product Owner, cross-functional teams estimate and sign-up to deliver “potentially shippable increments” of software during successive Sprints, typically lasting 30 days. Once a Sprint’s Product Backlog is committed, no additional functionality can be added to the Sprint except by the team. Once a Sprint has been delivered, the Product Backlog is analyzed and reprioritized, if necessary, and the next set of functionality is selected for the next Sprint. (source from the Internet).

Lets move to the next UI UX interview questions with answers

7. What are new things come with bootstrap 4?

Bootstrap 4 use flexbox for the grid, Not support IE 9 / IOS 6

Bootstrap 4 use SASS not LESS

Bootstrap use REM CSS methodology

Can customize device breakpoint etc..

Click this link for more.

7. Have you developed single page applications(SPA) using React or Angular ?

This is a simple question but you should have give a confident answer as ‘YES’ if you have mentioned React or Angular in your CV. React or angular is the most popular framework/library to develop a single page applications and if you are worked on a react/angular project obviously its a single page application.

 

Read the latest UX trends

Read the latest UI trends

Add a Comment

Your email address will not be published.