User Interface Designer Interview Questions And Answers
Download UI Designer Interview Questions and Answers PDF
Sharpen your UI Designer interview expertise with our handpicked 29 questions. These questions are specifically selected to challenge and enhance your knowledge in UI Designer. Perfect for all proficiency levels, they are key to your interview success. Secure the free PDF to access all 29 questions and guarantee your preparation for your UI Designer interview. This guide is crucial for enhancing your readiness and self-assurance.
29 UI Designer Questions and Answers:
UI Designer Job Interview Questions Table of Contents:
1 :: Suppose If background and colour should always be set together, why do they exist as separate properties?
The reasons for this are as follows:
- It increases the legibility of the style sheets. The background property is a complex property in CSS. If it is combined with color, the complexity will further increase.
- Color is inherited, but background isn’t. This can further increase the confusion.
Read More- It increases the legibility of the style sheets. The background property is a complex property in CSS. If it is combined with color, the complexity will further increase.
- Color is inherited, but background isn’t. This can further increase the confusion.
2 :: Please distinguish between Static vs. Dynamic HTML?
The easiest difference is static HTML once rendered cannot be changed on the other hand dynamic HTML can be changed.
Static web pages cannot have database access but dynamic pages can be connected to database.
Using static HTML no interactions persist between user and server but dynamic HTML has capability to interact with the user.
Static HTML does not require server side coding but dynamic HTML requires server side coding.
No animation, games can be developed using the static HTML but on the other hand dynamic HTML can perform this task.
Read MoreStatic web pages cannot have database access but dynamic pages can be connected to database.
Using static HTML no interactions persist between user and server but dynamic HTML has capability to interact with the user.
Static HTML does not require server side coding but dynamic HTML requires server side coding.
No animation, games can be developed using the static HTML but on the other hand dynamic HTML can perform this task.
3 :: Do you know what are different ways to integrate a CSS into a Web page?
There are three ways to integrate CSS into a Web page
a.) Inline: HTML elements may have CSS applied to them via the STYLE attribute.
b.) Embedded: By placing the code in a STYLE element within the HEAD element.
c.) Linked/ Imported: Place the CSS in an external file and link it via a link element.
Read Morea.) Inline: HTML elements may have CSS applied to them via the STYLE attribute.
b.) Embedded: By placing the code in a STYLE element within the HEAD element.
c.) Linked/ Imported: Place the CSS in an external file and link it via a link element.
4 :: Do you know which browsers support DHTML and how will non-supporting browsers handle DHTML?
Version of Netscape navigator and Internet Explorer higher than 4.0 or 4.0 supports DHTML in easy way. But as compared to both browsers Internet Explorer 4.0+ supports the DHTML in the best way.
DHTML includes JavaScript to make the page dynamic and regardless of which scripts is written for and the scripts are designed in such a way that it can be compatible with as many numbers of browsers as possible. The most important thing that must be kept in the mind is that we must test the code before running it over the server or making it live. Also we certainly cannot guarantee that all users will use the browser that will support the scripts.
Read MoreDHTML includes JavaScript to make the page dynamic and regardless of which scripts is written for and the scripts are designed in such a way that it can be compatible with as many numbers of browsers as possible. The most important thing that must be kept in the mind is that we must test the code before running it over the server or making it live. Also we certainly cannot guarantee that all users will use the browser that will support the scripts.
5 :: What is external Style Sheet? How would you link to it?
- External Style Sheet can be called as a template/document/file which contains style information and can be linked with more than one HTML documents.
- Using this the entire site can be formatted and styles just by editing one file.
- The file is linked with HTML documents via the LINK element inside the HEAD element.
<HEAD> <LINK REL=STYLESHEET HREF="style.css" TYPE="text/css"> </HEAD>
Read More- Using this the entire site can be formatted and styles just by editing one file.
- The file is linked with HTML documents via the LINK element inside the HEAD element.
<HEAD> <LINK REL=STYLESHEET HREF="style.css" TYPE="text/css"> </HEAD>
6 :: Tell me what are the advantages and disadvantages of Embedded Style Sheets?
The advantages of Embedded Style Sheets are:
- It is possible to create classes for use on multiple tag types in the document
- Under complex situations, selector and grouping methods can be used to apply styles.
- No extra download is required to import the information.
The disadvantages of Embedded Style Sheets are:
- It is not possible to control the styles for multiple documents from one file, using this method.
Read More- It is possible to create classes for use on multiple tag types in the document
- Under complex situations, selector and grouping methods can be used to apply styles.
- No extra download is required to import the information.
The disadvantages of Embedded Style Sheets are:
- It is not possible to control the styles for multiple documents from one file, using this method.
7 :: Can you explain what are the advantages and disadvantages of External Style Sheets?
The advantages of External Style Sheets are:
- Using them, the styles of multiple documents can be controlled from one file.
- Classes can be created for use on multiple HTML element types in many documents.
- In complex situations, selector and grouping methods can be used to apply styles.
The disadvantages of External Style Sheets are:
- In order to import style information for each document, an extra download is needed.
- Until the external style sheet is loaded, it may not be possible to render the document.
- For small number of style definitions, it is not viable.
Read More- Using them, the styles of multiple documents can be controlled from one file.
- Classes can be created for use on multiple HTML element types in many documents.
- In complex situations, selector and grouping methods can be used to apply styles.
The disadvantages of External Style Sheets are:
- In order to import style information for each document, an extra download is needed.
- Until the external style sheet is loaded, it may not be possible to render the document.
- For small number of style definitions, it is not viable.
8 :: Tell me what are the advantages and disadvantages of Inline Styles?
The advantages of Inline Styles are:
- It is especially useful for small number of style definitions.
- It has the ability to override other style specification methods at the local level.
The disadvantages of Inline Styles are:
- It does not separate out the style information from content.
- The styles for many documents can not be controlled from one source.
- Selector grouping methods can not be used to handle complex situations.
- Control classes can not be created to control multiple element types within the document.
Read More- It is especially useful for small number of style definitions.
- It has the ability to override other style specification methods at the local level.
The disadvantages of Inline Styles are:
- It does not separate out the style information from content.
- The styles for many documents can not be controlled from one source.
- Selector grouping methods can not be used to handle complex situations.
- Control classes can not be created to control multiple element types within the document.
9 :: What is Positioning?
Is some what where we need the object to be placed in the graphical view i:e on screen. If we talk in DHTML sense then we have two types of positioning: Relative and Absolute.
Read More10 :: What is Relative Positioning?
Relative positioning is the same as the current HTML3 layout and is best reserved for situations where you want to be sure that the content will revert to this default inside a document that also uses absolute positioning.
Read More11 :: What is Absolute Positioning?
In DHTML absolute positioning means that the object will remain at the same position regardless of the condition of other elements and the size of the browser. In simple languages if an object/image is absolutely positioned (STYLE="position: absolute;"), with an offset of 150 pixels to the right and 250 pixels down from the left-hand corner of the browser screen then it will avail this position what ever the circumstances may be.
Read More12 :: What is Style Modifications?
Style modification indicates the changes in the presentation or the view part that are being made in web page. This part comes under Cascading Style Sheet where the user style his web page by using the attributes and the tags that are pre-defined in CSS.
Read More13 :: What is Event Handling?
As explained earlier Events is the beating heart of any JavaScript application. For handling event in DHTML we attach event handler to HTML elements. The event handler waits until a certain event, for instance a click on a link, takes place. When it happens it handles the event by executing some JavaScript code that has been defined by us. After it has executed the code the event handler comes to its initial state and waits for the user to fire any event. Hence to handle events in DHTML we need to register an event handler.
Read More14 :: How to eliminate the blue border around linked images on web page?
This can be done by specifying the border property for linked images in your CSS as none:
For e.g.
a img { border: none ; }
However, this makes it difficult for the users to differentiate between the clickable and non-clickable images.
Read MoreFor e.g.
a img { border: none ; }
However, this makes it difficult for the users to differentiate between the clickable and non-clickable images.
15 :: Explain difference between DHTML and HTML?
The first and foremost difference is HTML is markup language but DHTML is not a language.
DHTML stands with combination of HTML, CSS, JavaScript and DOM but HTML alone is an enough although static.
HTML cannot have nay server side code but DHTML may contain server side code also.
In HTML there is no need for database connectivity but DHTML may require to connect to database as it interacts with user.
Read MoreDHTML stands with combination of HTML, CSS, JavaScript and DOM but HTML alone is an enough although static.
HTML cannot have nay server side code but DHTML may contain server side code also.
In HTML there is no need for database connectivity but DHTML may require to connect to database as it interacts with user.
16 :: Do you know what is CSS selector?
- Basically it is a string that identifies the elements to which a particular declaration or set of declarations will apply.
- It can also be referred to as a link between the HTML document and the style sheet.
- It is equivalent of HTML elements.
For example :
A {text-indent: 12pt}
Here, the selector is A, which is called as type selector.
Read More- It can also be referred to as a link between the HTML document and the style sheet.
- It is equivalent of HTML elements.
For example :
A {text-indent: 12pt}
Here, the selector is A, which is called as type selector.
17 :: Do you know the Working of DHTML?
DHTML as it is combination of HTML as well as JavaScript and it uses the HTML to render the text on the browser. It also uses DOM dynamic Object Model which renders its every element as an Object that can be changed by setting properties and methods. This is done with the help of Scripting. DHTML is part of the general computing trend of late '90s. This is a trend different from structured programming, with a focus on actions and toward object-based programming, where the objects can be compared to nouns in our language.
DHTML allows scripting languages to change variable in a web page's definition language, which in turn affects the look and function of otherwise "static" HTML page content, after the page has been fully loaded and during the viewing process.
Read MoreDHTML allows scripting languages to change variable in a web page's definition language, which in turn affects the look and function of otherwise "static" HTML page content, after the page has been fully loaded and during the viewing process.
18 :: What is Tweening?
- It is the short form for in-betweening.
- It is the process of generating intermediate frames between two images.
- It gives the impression that the first image has smoothly evolved into the second one.
- It is an important method used in all types of animations.
- In CSS3, Transforms(matrix,translate,rotate,scale etc) module can be used to achieve tweening.
Read More- It is the process of generating intermediate frames between two images.
- It gives the impression that the first image has smoothly evolved into the second one.
- It is an important method used in all types of animations.
- In CSS3, Transforms(matrix,translate,rotate,scale etc) module can be used to achieve tweening.
19 :: Explain what is DHTML and what are the features of DHTML?
DHTML stands for Dynamic HTML. The first thing that we need to clear about DHTML is that it is neither a language like HTML, JavaScript etc. nor a web standard. It is just a combination of HTML, JavaScript and CSS. It just uses these languages features to build dynamic web pages. DHTML is a feature of Netscape Communicator 4.0, and Microsoft Internet Explorer 4.0 and 5.0 and is entirely a "client-side" technology.
Features of DHTML:
Simplest feature is making the page dynamic.
Can be used to create animations, games, applications, provide new ways of navigating through web sites.
DHTML use low-bandwidth effect which enhance web page functionality.
Dynamic building of web pages is simple as no plug-in is required.
Facilitates the usage of events, methods and properties and code reuse.
Read MoreFeatures of DHTML:
Simplest feature is making the page dynamic.
Can be used to create animations, games, applications, provide new ways of navigating through web sites.
DHTML use low-bandwidth effect which enhance web page functionality.
Dynamic building of web pages is simple as no plug-in is required.
Facilitates the usage of events, methods and properties and code reuse.
20 :: What is RWD?
- RWD is the abbreviation for Responsive web design.
- In this technique, the designed page is perfectly displayed on every screen size and device, be it desktop, mobile, laptop or any other device. You don’t need to create a different page for each device.
Read More- In this technique, the designed page is perfectly displayed on every screen size and device, be it desktop, mobile, laptop or any other device. You don’t need to create a different page for each device.
21 :: Explain the attributes that make up a DHTML?
The attributes that make up DHTML are HTML, JavaScript, CSS and DOM. These are explained below as:
JavaScript: Whether we call it JavaScript, Jscript, or ECMAScript, it is the most common language used today for client-side scripting. The main reason for this JavaScript comes with virtually every browser. In DHTML JavaScript JavaScript comes with virtually every browser. For example, an onload event could execute a JavaScript function to query the browser’s cookies collection to determine whether the user is a first-time visitor to the page.
CSS: It stands for Cascading Style Sheet. This is used for the presentation part of the web page. In simple words it holds the designing of the page. The look & feel of the page completely depends on CSS. In DHTML CSS rules can be modified at both the document and the element level using JavaScript with event handlers, they can add a significant amount of dynamism with very little code.
DOM: It stands for Dynamic Object Model and it is the weakest link in DHTML as many of the browser does not support the DOM functionality. It defines the object and its properties. It is a standard way of accessing and manipulating the static content. The Document Object Model is a platform and language-neutral interface that allows program and scripts to dynamically access the content and update it.
HTML: It stands for Hyper Text Markup Language. As the names suggest it is not a programming language, it is a markup language which consists of a set of markup tags.
Read MoreJavaScript: Whether we call it JavaScript, Jscript, or ECMAScript, it is the most common language used today for client-side scripting. The main reason for this JavaScript comes with virtually every browser. In DHTML JavaScript JavaScript comes with virtually every browser. For example, an onload event could execute a JavaScript function to query the browser’s cookies collection to determine whether the user is a first-time visitor to the page.
CSS: It stands for Cascading Style Sheet. This is used for the presentation part of the web page. In simple words it holds the designing of the page. The look & feel of the page completely depends on CSS. In DHTML CSS rules can be modified at both the document and the element level using JavaScript with event handlers, they can add a significant amount of dynamism with very little code.
DOM: It stands for Dynamic Object Model and it is the weakest link in DHTML as many of the browser does not support the DOM functionality. It defines the object and its properties. It is a standard way of accessing and manipulating the static content. The Document Object Model is a platform and language-neutral interface that allows program and scripts to dynamically access the content and update it.
HTML: It stands for Hyper Text Markup Language. As the names suggest it is not a programming language, it is a markup language which consists of a set of markup tags.
22 :: Do you know what is the use of CSS sprites?
- A web page with large number of images takes a longer time to load. This is because each image separately sends out a http request.
- The concept of CSS sprite helps in reducing this loading time for a web page by combining various small images into one image. This reduces the numbers of http request and hence the loading time.
Read More- The concept of CSS sprite helps in reducing this loading time for a web page by combining various small images into one image. This reduces the numbers of http request and hence the loading time.
23 :: Can you explain how to handle events with DHTML?
A DHTML application supports numerous events, many of them quite analogous to those of a standard VB application. Events are the beating heart of any JavaScript application. For handling event in DHTML we attach event handler to HTML elements. The event handler waits until a certain event, for instance a click on a link, takes place. When it happens it handles the event by executing some JavaScript code that has been defined by us. After it has executed the code the event handlers comes to its initial state and wait for the user to fire any event. Hence to handle events in DHTML we need to register an event handler.
Read More24 :: User Interface Designer Job Interview Questions Part One!
What is CSS? Explain its features.
Why do you use CSS?
What is a style sheet?
Why do you need a style sheet over regular HTML?
List different types of Style Sheets and how do you link to them?
Explain Class.
Explain Grouping.
What are the functions of following selectors? a.) h1 b.) .warning c.) #footer
Explain Embedded Style Sheet. How would you link to it?
Explain External Style Sheet. How would you link to it?
What is selector? Explain: a.) ID Selector b.) Contractual Selector c.) Attribute Selector d.) Parent Child Selector
What are the advantages and disadvantages of following style methods? a.) External Style Sheets b.) Embedded Style Sheets c.) Inline Styles
Situation - You want to set up a minimum width for IE. How would you do that?
Read MoreWhy do you use CSS?
What is a style sheet?
Why do you need a style sheet over regular HTML?
List different types of Style Sheets and how do you link to them?
Explain Class.
Explain Grouping.
What are the functions of following selectors? a.) h1 b.) .warning c.) #footer
Explain Embedded Style Sheet. How would you link to it?
Explain External Style Sheet. How would you link to it?
What is selector? Explain: a.) ID Selector b.) Contractual Selector c.) Attribute Selector d.) Parent Child Selector
What are the advantages and disadvantages of following style methods? a.) External Style Sheets b.) Embedded Style Sheets c.) Inline Styles
Situation - You want to set up a minimum width for IE. How would you do that?
25 :: User Interface Designer Job Interview Questions Part Two!
Situation - You want to place a text over an image. How would you do that?
Situation - You want to combine multiple sheets into one. How would you do that?
Situation - You want to specify background images. How would you do that?
Explain following elements: a.) Inline b.) Block c.) Parent d.) Children
How do you separate content and design in CSS?
Explain pseudo classes.
Explain: a.) CSS declaration b.) Important declaration
Situation - You just set the background image and you want it to be non-repeating. What would you do?
Differentiate between ID and Class.
You want to have a you text-links without an underline. How would you do that?
Explain cascading order.
You want links of different colours on the same page. How would you do that?
Explain: a.) Value b.) Initial value
How would you style the following? a.) Table cells b.) Forms
Are there any WYSIWYG editors available for creation of style sheets?
You want to justify your text. How would you do that?
I want to place two paragraphs adjacent to each other. How should I do it?
Read MoreSituation - You want to combine multiple sheets into one. How would you do that?
Situation - You want to specify background images. How would you do that?
Explain following elements: a.) Inline b.) Block c.) Parent d.) Children
How do you separate content and design in CSS?
Explain pseudo classes.
Explain: a.) CSS declaration b.) Important declaration
Situation - You just set the background image and you want it to be non-repeating. What would you do?
Differentiate between ID and Class.
You want to have a you text-links without an underline. How would you do that?
Explain cascading order.
You want links of different colours on the same page. How would you do that?
Explain: a.) Value b.) Initial value
How would you style the following? a.) Table cells b.) Forms
Are there any WYSIWYG editors available for creation of style sheets?
You want to justify your text. How would you do that?
I want to place two paragraphs adjacent to each other. How should I do it?