Web Designer
Interview Questions & Answers — Complete Guide
HTML CSS Bootstrap jQuery Figma Photoshop
Basic se Advanced level tak — sab kuch ek jagah
Contents
01 HTML Interview Questions
02 CSS Interview Questions
03 Bootstrap Interview Questions
04 jQuery Interview Questions
05 Figma Interview Questions
06 Photoshop Interview Questions
07 General / HR Round Questions (Web Designer specific)
01. HTML Interview Questions
Basic → Intermediate → Advanced
BASIC
Q1. HTML kya hai?
HTML (HyperText Markup Language) ek markup language hai jo web pages ki structure banane ke liye use hoti hai. Ye tags aur elements ke through content
ko browser mein display karti hai. Ye programming language nahi, markup language hai.
Q2. HTML tags aur elements mein kya difference hai?
Tag opening/closing bracket wala part hota hai jaise <p> ya </p> . Element opening tag + content + closing tag ka poora combination hota hai, jaise
<p>Hello</p> .
Q3. Semantic HTML kya hota hai? Examples do.
Semantic tags apne naam se hi meaning batate hain ki unke andar kis type ka content hai. Examples: <header> , <nav> , <article> , <section> ,
<footer> , <aside> . Ye SEO aur accessibility ke liye better hote hain compare to <div> / <span> .
Q4. <div> aur <span> mein difference?
<div> block-level element hai (naya line se start hota hai, full width leta hai). <span> inline element hai (sirf jitni content ki width chahiye utni leta hai, line
break nahi karta).
Q5. HTML5 mein kya naya add hua?
New semantic tags (header, footer, nav, article, section), audio/video tags without plugins, canvas & SVG for graphics, form input types (email, date,
number), local storage/session storage, geolocation API.
Q6. Block level vs Inline elements?
Block elements (div, p, h1-h6, ul) apni line par full width lete hain. Inline elements (span, a, strong, img) sirf content jitni space lete hain aur next element
same line par aa sakta hai.
Q7. Attribute kya hota hai? Example do.
Attribute HTML tag ko extra information deta hai, opening tag ke andar likha jata hai. Example: <img src="[Link]" alt="photo"> — yahan src aur alt
attributes hain.
Q8. HTML mein comment kaise likhte hain?
<!-- ye comment hai --> — comments browser mein display nahi hote, sirf code samajhne ke liye hote hain.
INTERMEDIATE
Q9. id aur class attribute mein kya difference hai?
id ek page par unique hota hai (ek baar hi use hota hai), class multiple elements par repeat ho sakta hai. CSS priority mein id, class se zyada
specific/strong hota hai.
Q10. Forms mein GET aur POST method mein difference?
GET data ko URL mein visible bhejta hai, limited data size, non-secure data ke liye theek hai (search, filters). POST data ko request body mein bhejta hai,
secure aur large data (login, file upload) ke liye use hota hai.
Q11. Iframe kya hai aur kab use karte hain?
<iframe> ek HTML document ko doosre document ke andar embed karne ke liye use hota hai — jaise YouTube video embed karna, Google Maps location
dikhana.
Q12. HTML mein data-* attributes kya hote hain?
Ye custom attributes hain jo hum apna data element par store karne ke liye banate hain, jaise data-id="5" . Isse JavaScript/jQuery mein easily access kar
sakte hain: [Link] .
Q13. Meta tags ka kya use hai?
Meta tags <head> mein page ke baare mein extra info dete hain jo browser/search engine use karte hain — jaise charset, viewport (responsive ke liye),
description (SEO ke liye).
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Q14. Lazy loading kya hota hai images ke liye?
<img src="[Link]" loading="lazy"> — is attribute se image tab hi load hoti hai jab wo user ke viewport ke paas aati hai, isse page speed better hoti hai.
ADVANCED
Q15. DOCTYPE ka kya role hai?
<!DOCTYPE html> browser ko batata hai ki ye HTML5 document hai, taki browser standards mode mein render kare na ki quirks mode mein (jisse
old/inconsistent rendering hoti hai).
Q16. Web accessibility (a11y) ke liye HTML mein kya best practices follow karni chahiye?
Semantic tags use karo, images mein alt text do, form inputs ko label se link karo, proper heading hierarchy (h1→h6) rakho, ARIA roles zarurat par add
karo, keyboard navigation test karo.
Q17. Canvas aur SVG mein difference?
Canvas pixel-based hai, JavaScript se draw hota hai, resize karne par blur ho sakta hai, animations/games ke liye better hai. SVG vector-based hai, XML
markup hota hai, resize par sharp rehta hai, icons/logos ke liye better hai.
Q18. Progressive enhancement kya hota hai?
Ek strategy jisme sabse pehle basic HTML content sabko available karte hain, phir CSS aur JS se enhancement add karte hain — taki purane browsers ya
slow connection par bhi content accessible rahe.
Q19. Void/self-closing elements kya hote hain? Examples.
Wo elements jinki closing tag nahi hoti kyunki unke andar content nahi hota — jaise <img> , <br> , <input> , <hr> , <meta> .
Q20. localStorage, sessionStorage aur cookies mein difference?
localStorage data permanently browser mein rehta hai jab tak manually delete na kare (~5-10MB). sessionStorage sirf tab open rehne tak rehta hai. Cookies
server ko bhi bheje jaate hain har request ke saath, size limit chhota hota hai (~4KB), expiry set kar sakte hain.
Tip: Interview mein semantic HTML aur accessibility ke sawaal aajkal bahut common hain — inhe zaroor practice karo.
02. CSS Interview Questions
Basic → Intermediate → Advanced
BASIC
Q1. CSS kya hai aur ise kitne tarike se apply kar sakte hain?
CSS (Cascading Style Sheets) HTML elements ko style karne ke liye use hoti hai. 3 tarike: Inline ( style="color:red" ), Internal ( <style> tag head mein),
External ( .css file link karke).
Q2. CSS Box Model kya hai?
Har element ek box hoti hai jisme layers hoti hain: Content → Padding → Border → Margin. Total width = content + padding + border + margin (dono sides).
Q3. Class selector aur ID selector mein syntax difference?
Class ke liye dot use karte hain: .classname { } . ID ke liye hash: #idname { } . ID specificity mein class se strong hoti hai.
Q4. Position property ki values kya hain?
static (default), relative (apni normal position se shift), absolute (nearest positioned parent ke relative), fixed (viewport ke relative, scroll par fix
rehta hai), sticky (scroll tak relative, fir fixed ho jata hai).
Q5. Display: none aur visibility: hidden mein difference?
display:none element ko completely hata deta hai (space bhi nahi leta). visibility:hidden element ko invisible kar deta hai lekin uski space page par
reserve rehti hai.
Q6. Pseudo-class aur pseudo-element mein difference?
Pseudo-class element ki state define karta hai, single colon: :hover , :focus , :nth-child() . Pseudo-element element ke specific part ko target karta hai,
double colon: ::before , ::after , ::first-line .
INTERMEDIATE
Q7. Flexbox kya hai? Main properties batao.
Flexbox ek 1-dimensional layout system hai (row ya column mein items arrange karne ke liye). Main properties: display:flex , justify-content
(horizontal align), align-items (vertical align), flex-direction , flex-wrap , gap .
Q8. CSS Grid kya hai aur Flexbox se kab better hai?
Grid ek 2-dimensional layout system hai (rows aur columns dono control kar sakte). Poore page layout ya complex grid designs ke liye Grid better hai.
Flexbox 1D content align karne ke liye (navbar, card row) better hai.
Q9. Responsive design kaise achieve karte hain?
Media queries use karke: @media (max-width: 768px) { } . Saath mein flexible units (%, vw, vh, rem), flexible images ( max-width:100% ), aur mobile-first
approach follow karte hain.
Q10. em, rem, px, %, vh/vw units mein difference?
px fixed unit hai. em parent element ke font-size ke relative hai. rem root (html) ke font-size ke relative hai (isliye zyada predictable). % parent element
ke relative. vh/vw viewport height/width ke relative.
Q11. Specificity kaise calculate hoti hai CSS mein?
Order: Inline style (1000) > ID (100) > Class/attribute/pseudo-class (10) > Element/pseudo-element (1). Jyada specificity wala rule win karta hai, agar same
ho to jo baad mein likha wo apply hota hai.
Q12. CSS mein !important ka use kab karte hain?
!important ek rule ko forcefully sabse zyada priority deta hai, specificity ko override kar deta hai. Best practice: isse avoid karo, sirf emergency/override
situations mein use karo kyunki debugging mushkil ho jati hai.
Q13. CSS transitions aur animations mein difference?
Transition simple state change (A se B) par smooth effect deta hai, trigger chahiye hota hai (hover, click). Animation @keyframes ke through multiple steps
define kar sakte hain aur automatically bina trigger ke bhi chal sakti hai, loop bhi kar sakti hai.
ADVANCED
Q14. CSS preprocessors (SASS/SCSS) kyun use karte hain?
Variables, nesting, mixins, functions, partials (files split karna) jaise features milte hain jo plain CSS mein nahi hote, isse code reusable aur maintainable
banta hai. Compile karke normal CSS mein convert hota hai.
Q15. CSS Variables (custom properties) kaise use karte hain?
Define: :root { --main-color: #333; } . Use: color: var(--main-color); . Ye runtime par JavaScript se bhi change ho sakte hain, SASS variables se alag
ye browser ke DOM mein live rehte hain.
Q16. Z-index kaise kaam karta hai aur stacking context kya hai?
z-index sirf positioned elements (relative/absolute/fixed/sticky) par kaam karta hai. Stacking context ek "layer group" hota hai jo naya context create hone
par uske andar ke z-index values sirf usi context ke andar compare hote hain, bahar nahi.
Q17. CSS mein critical rendering path optimize kaise karte hain?
Critical CSS ko inline karo (above-the-fold), baaki CSS ko async/defer load karo, unused CSS remove karo, CSS ko minify/compress karo, aur render-blocking
resources kam karo.
Q18. BEM naming convention kya hai?
BEM = Block Element Modifier. Naming pattern: .block__element--modifier . Example: .card__title--highlighted . Isse CSS naming consistent aur
conflict-free rehti hai bade projects mein.
Q19. CSS mein "reflow" aur "repaint" kya hote hain?
Reflow (layout) tab hota hai jab element ka size/position change hota hai — browser ko poori layout recalculate karni padti hai (expensive). Repaint tab hota
hai jab sirf visual style change ho (color) bina layout change kiye (cheaper). Performance ke liye reflows minimize karne chahiye.
Q20. Container queries kya hain (modern CSS)?
Media queries viewport size dekhti hain, lekin container queries element ke parent container ki size ke hisaab se style apply karti hain — components ko
truly reusable banane ke liye useful, chahe wo kisi bhi layout mein ho.
@container (min-width: 400px) {
.card { flex-direction: row; }
}
Tip: Flexbox vs Grid ka practical difference live coding round mein zaroor puchha jata hai — dono ke examples ready rakho.
03. Bootstrap Interview Questions
Basic → Intermediate → Advanced
BASIC
Q1. Bootstrap kya hai?
Bootstrap ek free, open-source CSS framework hai jo pre-built components (buttons, navbar, cards, modals) aur responsive grid system deta hai, jisse fast
aur consistent UI banti hai bina sab kuch CSS se scratch se likhe.
Q2. Bootstrap grid system kaise kaam karta hai?
12-column system based hai. Structure: container > row > col . Example: <div class="row"><div class="col-md-6">...</div></div> — is column ki
width medium screens par 6/12 = 50% hogi.
Q3. Bootstrap ke breakpoints kya hain?
sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px), xxl (≥1400px). Mobile-first approach follow karta hai, matlab bina prefix wale classes sabse
chhoti screen ke liye hoti hain.
Q4. Container aur container-fluid mein difference?
.container fixed max-width leta hai har breakpoint par (responsive but bounded). .container-fluid hamesha 100% width leta hai, screen jitni bhi ho.
Q5. Bootstrap CDN se kaise link karte hain?
Head mein CSS link aur body ke end mein JS bundle link karte hain:
<link href="[Link] rel="stylesheet">
<script src="[Link]
INTERMEDIATE
Q6. Bootstrap utility classes kya hote hain? Examples do.
Ready-made helper classes for common styling — jaise spacing ( m-3 , p-2 ), text ( text-center , text-danger ), display ( d-flex , d-none ), colors ( bg-
primary ). Inse custom CSS likhne ki zarurat kam ho jati hai.
Q7. Bootstrap components mein JavaScript ki zarurat kab padti hai?
Interactive components jaise Modal, Dropdown, Carousel, Tooltip, Collapse, Toast — inko kaam karne ke liye Bootstrap ka JS bundle (jo [Link] bhi include
karta hai) chahiye hota hai.
Q8. Bootstrap 4 aur Bootstrap 5 mein main differences?
Bootstrap 5 mein: jQuery dependency hata di gayi (pure JS), IE11 support hataya, new utility API, form controls redesign, RTL support built-in, aur naye
components jaise Offcanvas.
Q9. Bootstrap mein columns ko offset kaise karte hain?
offset-md-3 jaisi class use karke column ko left se space de sakte hain bina extra empty column banaye. Ye grid ke andar centering ya spacing ke liye
useful hai.
ADVANCED
Q10. Bootstrap default theme customize kaise karte hain?
Bootstrap Sass source files use karke apne khud ke variables (colors, spacing, fonts) _variables.scss mein override kar sakte hain, phir custom build
compile karte hain. Ya CSS custom properties (Bootstrap 5.2+) ke through bhi theme variables override kar sakte hain.
Q11. Bootstrap ke sath custom CSS conflicts kaise avoid karte hain?
Apni CSS ko Bootstrap ke baad load karo (specificity ke liye), custom classes use karo Bootstrap ki classes overwrite karne ki jagah, aur zarurat par CSS
specificity/scoping (BEM ya custom prefix) follow karo.
Q12. Bootstrap ka file size optimize kaise kar sakte hain production ke liye?
Sirf zarurat ke components ko Sass se import karo (poora [Link] nahi), PurgeCSS use karke unused CSS remove karo, aur minified version use karo.
Q13. Bootstrap grid ko CSS Grid/Flexbox ke sath compare karo.
Bootstrap grid Flexbox par based hai aur pre-defined classes deta hai — fast development ke liye achha hai lekin utna flexible/custom nahi jitna raw CSS
Grid ho sakta hai. Complex custom layouts ke liye raw CSS Grid zyada control deta hai.
Tip: Grid system (col-md, col-lg) ke practical examples zaroor practice karo — ye almost har interview mein poocha jata hai.
04. jQuery Interview Questions
Basic → Intermediate → Advanced
BASIC
Q1. jQuery kya hai?
jQuery ek lightweight JavaScript library hai jo DOM manipulation, event handling, animation aur AJAX calls ko simple aur cross-browser compatible tareeke
se karne deti hai, kam code likh kar.
Q2. jQuery ka basic syntax kya hai?
$(selector).action() . Example: $("p").hide(); — ye sabhi paragraph tags ko hide kar dega. $ jQuery ka shortcut/alias hai.
Q3. Document ready function kyun use karte hain?
Ye ensure karta hai ki jQuery code tabhi chale jab poora DOM load ho chuka ho, warna elements na milne ki wajah se code fail ho sakta hai.
$(document).ready(function(){
// code yaha
});
// short form:
$(function(){ /* code */ });
Q4. jQuery mein element select karne ke common selectors kya hain?
ID: $("#id") , Class: $(".class") , Element: $("p") , Attribute: $("[data-id='5']") , aur combination bhi possible hai jaise $("[Link]") .
Q5. jQuery mein CSS kaise apply/change karte hain?
$("p").css("color", "red"); — single property. Multiple ke liye object: $("p").css({color: "red", fontSize: "16px"});
INTERMEDIATE
Q6. jQuery event handling kaise karte hain?
$("button").click(function(){ ... }); ya better/modern way: $("button").on("click", function(){ ... }); . .on() preferred hai kyunki ye multiple
events aur dynamic elements ke liye bhi kaam karta hai.
Q7. jQuery mein AJAX call kaise karte hain?
$.ajax() , $.get() , $.post() methods use hote hain server se data fetch/send karne ke liye bina page reload kiye.
$.ajax({
url: "[Link]",
method: "GET",
success: function(response){ [Link](response); }
});
Q8. jQuery mein DOM elements add/remove kaise karte hain?
Add: .append() , .prepend() , .after() , .before() . Remove: .remove() (element + events hata deta hai), .empty() (sirf andar ka content hata deta
hai, element rakhta hai).
Q9. .each() function kya karta hai?
Ye selected elements ke collection par loop chalata hai, har element par same function apply karne ke liye. Example: $("li").each(function(index, el){
[Link](index); });
Q10. jQuery mein animation kaise karte hain?
Built-in methods: .hide() , .show() , .fadeIn() , .fadeOut() , .slideUp() , .slideDown() , aur custom animation ke liye .animate({property: value},
duration) .
ADVANCED
Q11. Event delegation kya hai jQuery mein?
Dynamic elements (jo baad mein add hue) par events bind karne ke liye parent element par listener lagate hain: $(document).on("click", ".dynamic-btn",
function(){...}); . Isse elements future mein add hone par bhi event kaam karta hai.
Q12. $(this) ka use kab aur kaise karte hain?
this event handler ke andar us specific element ko refer karta hai jis par event trigger hua. $(this) use karke usko jQuery object mein wrap karke jQuery
methods apply kar sakte hain, jaise $(this).addClass("active") .
Q13. jQuery vs Vanilla JavaScript — aaj kal jQuery ki relevance kya hai?
Modern browsers mein Vanilla JS (querySelector, fetch, addEventListener) bahut powerful ho chuki hai, isliye naye projects mein jQuery ki zarurat kam ho
gayi hai. Lekin legacy projects, WordPress themes, aur quick prototyping mein jQuery abhi bhi common hai.
Q14. jQuery mein chaining kya hoti hai?
Multiple methods ko ek hi statement mein ek dusre ke baad call karna, kyunki har jQuery method wahi jQuery object return karta hai. Example:
$("p").css("color","red").slideUp(300).slideDown(300);
Q15. Performance ke liye jQuery selectors optimize kaise karte hain?
ID selectors sabse fast hote hain, complex selectors avoid karo, selectors ko variable mein cache karo (baar baar DOM query mat karo), aur specific parent
context ke andar search karo ( $(".item", "#container") ).
Tip: jQuery ka event delegation aur AJAX ka concept clearly explain kar pana zyada mattar karta hai rattafied answers se.
05. Figma Interview Questions
Basic → Intermediate → Advanced
BASIC
Q1. Figma kya hai?
Figma ek cloud-based UI/UX design tool hai jo browser mein chalta hai, real-time collaboration allow karta hai (multiple designers ek file par ek saath kaam
kar sakte hain), aur wireframing, prototyping, design systems banane ke liye use hota hai.
Q2. Frame aur Group mein kya difference hai?
Frame ek container hai jiska defined size hota hai, auto-layout aur constraints support karta hai, aur usually screens/artboards banane ke liye use hota hai.
Group sirf elements ko temporarily saath rakhta hai bina extra layout properties ke.
Q3. Figma mein Component kya hota hai?
Component ek reusable design element hai (jaise button, card) jise ek jagah define karke pura project mein baar baar use kar sakte hain. Master component
change karne par uske saare "instances" automatically update ho jaate hain.
Q4. Artboard/Frame sizes kaise set karte hain design ke liye?
Frame tool (F key) select karke right panel mein preset sizes milte hain — jaise Desktop (1440x1024), Mobile (iPhone sizes), Tablet — ya custom
width/height bhi enter kar sakte hain.
INTERMEDIATE
Q5. Auto Layout kya hai aur kyun important hai?
Auto Layout Figma ka feature hai jo elements ko automatically arrange aur resize karta hai jaise Flexbox CSS mein hota hai — spacing, padding, direction
(horizontal/vertical) control kar sakte hain. Ye responsive designs banane mein bahut madad karta hai.
Q6. Constraints kya hote hain Figma mein?
Constraints define karte hain ki koi element frame ke resize hone par kaise behave karega — jaise Left/Right/Center/Scale/Stretch. Isse responsive design
behavior preview kar sakte hain.
Q7. Design system aur Style Guide Figma mein kaise banate hain?
Color styles, text styles, effect styles (shadows), aur reusable components ek shared library file mein banate hain, phir team ke doosre files usko import/use
kar sakte hain — isse consistency maintain hoti hai.
Q8. Figma prototype kaise banate hain?
Prototype tab mein jaake frames ke beech connections (interactions) banate hain — jaise "On Click → Navigate to Screen 2", animation type (instant,
dissolve, smart animate) choose karke clickable working mockup banate hain.
Q9. Figma se developer ke liye assets/CSS kaise export karte hain?
Right panel mein "Inspect" tab se CSS, iOS, Android code snippets copy kar sakte hain. Images/icons "Export" section se PNG/SVG/JPG formats mein export
ho sakte hain multiple resolutions (@1x, @2x, @3x) ke saath.
ADVANCED
Q10. Variants kya hote hain Figma components mein?
Variants ek hi component ke different states/versions ko organize karte hain (jaise button ke Default, Hover, Disabled states) ek hi component set ke andar,
jisse dropdown se easily switch kar sakte hain design panel mein.
Q11. Figma mein plugins ka kya role hai? Kuch popular plugins batao.
Plugins Figma ki functionality extend karte hain. Popular examples: "Unsplash" (stock images), "Content Reel" (dummy content), "Iconify" (icons), "Stark"
(accessibility/contrast checker), "Autoflow" (flow diagrams).
Q12. Figma Variables (design tokens) kya hain?
Variables reusable values hote hain (colors, numbers, strings) jinhe design mein bind kar sakte hain — jaise light/dark mode ke liye alag color modes define
karke, ek hi component ko dono themes mein kaam karwa sakte hain bina duplicate banaye.
Q13. Design handoff developers ke saath kaise smooth karte hain Figma mein?
Proper naming conventions rakho layers/frames ki, Auto Layout use karo taki spacing clear ho, design tokens/styles consistently apply karo, comments add
karo specific instructions ke liye, aur "Dev Mode" (Figma ka feature) use karo jisse developers ko exact specs/code mil sake.
Tip: Auto Layout aur Components/Variants ka practical demo dena interview mein bahut positive impression deta hai.
06. Photoshop Interview Questions
Basic → Intermediate → Advanced
BASIC
Q1. Photoshop mein Layers kya hote hain?
Layers transparent sheets ki tarah hote hain jo ek dusre ke upar stack hote hain — har layer par alag content edit kar sakte hain bina doosri layers ko
disturb kiye. Web design mein alag alag elements (background, text, buttons) ko alag layers mein rakha jata hai.
Q2. RGB aur CMYK color mode mein difference?
RGB (Red, Green, Blue) screens/digital use (web, apps) ke liye hota hai — light additive hoti hai. CMYK (Cyan, Magenta, Yellow, Black) printing ke liye hota
hai. Web design mein hamesha RGB mode use karte hain.
Q3. Resolution/DPI kya hota hai web design ke liye?
Web ke liye 72 DPI (dots per inch) standard hai kyunki screens resolution ke hisaab se render karti hain, print ke liye 300 DPI chahiye hota hai high quality
ke liye.
Q4. Selection tools kaunse kaunse hain Photoshop mein?
Marquee tool (rectangle/ellipse), Lasso tool (freehand), Magic Wand (color-based), Quick Selection tool (smart edge detection), Pen tool (precise paths).
INTERMEDIATE
Q5. Smart Object kya hota hai aur ye kyun important hai?
Smart Object ek container hota hai jo original image/vector data preserve karta hai — jitni marzi resize karo, quality loss (pixelation) nahi hota kyunki
original data intact rehta hai non-destructively.
Q6. Layer masks kya hote hain aur kaise use karte hain?
Layer mask ek layer ke parts ko hide/show karne ka non-destructive tarika hai — kaale rang se paint karo to hide hota hai, safed se paint karo to show hota
hai, bina actual pixels delete kiye. Isse baad mein easily undo/edit kar sakte hain.
Q7. Blending modes kya karte hain?
Ye define karte hain ki ek layer neeche wali layer ke saath colors kaise mix/interact karegi — jaise Multiply (darken), Screen (lighten), Overlay (contrast
enhance). Web design mein overlays/effects create karne ke liye useful.
Q8. Web design ke liye slicing/export ka process kya hai?
"Slice tool" ya modern "Export As" feature use karke design ke specific parts ko PNG/JPG/SVG format mein export karte hain, jisse developers directly
HTML/CSS mein use kar sakein. Assets ko "@1x, @2x, @3x" resolutions mein bhi export karte hain responsive/retina displays ke liye.
Q9. Adjustment layers kya hain?
Non-destructive tarika hai image ke color/tone (Brightness/Contrast, Hue/Saturation, Levels, Curves) adjust karne ka bina original pixels ko permanently
change kiye — inhe kabhi bhi edit/delete kar sakte ho.
ADVANCED
Q10. Photoshop mein UI mockups banane ka workflow kya hota hai?
Sabse pehle Artboards (correct screen size) banao, grid/guides set karo consistency ke liye, reusable elements ko Smart Objects/Layer groups mein organize
karo, aur consistent naming convention follow karo taki developer handoff smooth ho.
Q11. Actions aur Batch Processing kya hote hain?
Actions ek series of steps ko record karke automate karte hain (jaise resize + save specific format), Batch Processing us action ko multiple files par ek saath
apply kar deta hai — bahut time save hota hai bulk image editing mein.
Q12. Web design ke liye image optimize karne ke best practices?
"Save for Web" feature use karo (legacy) ya "Export As" (modern) sahi format choose karke — Photos ke liye JPG, transparency/icons ke liye PNG ya SVG, aur
naye format WebP jo better compression deta hai. File size vs quality ka balance rakhna important hai loading speed ke liye.
Q13. Photoshop vs Figma — web designer ke liye kab kaunsa use karte hain?
Figma UI/UX design, wireframing, prototyping, aur collaboration ke liye better hai (specially responsive design ke liye Auto Layout ke saath). Photoshop
photo editing, complex graphics, image retouching, aur detailed visual effects ke liye zyada powerful hai.
Tip: Web design ke liye "Save for Web / Export As" ka correct format+resolution choose karna practical round mein zaroor puchha jata hai.
07. General / HR Round Questions
Web Designer specific — Behavioral & Portfolio
Q1. Apne aap ko introduce karo (as a Web Designer).
Short mein apni experience, skills (HTML, CSS, Bootstrap, jQuery, Figma, Photoshop), kuch achieve kiye hue projects, aur apna passion for design/UX batao.
Confidence ke saath 1-2 minute mein crisp answer do.
Q2. Apna design process/workflow explain karo — kisi project ki shuruaat kaise karte ho?
Requirement gathering → Research/inspiration → Wireframe (low-fidelity) → Figma mein high-fidelity mockup → Feedback/iteration → Developer handoff →
Testing. Ek real project ka example de kar batao to zyada impactful hoga.
Q3. Responsive design ka approach kaise decide karte ho?
Mobile-first approach follow karte hain, breakpoints define karte hain (mobile, tablet, desktop), flexible grid/units use karte hain, aur real devices/browser
dev tools par test karte hain.
Q4. Ek difficult client feedback/criticism ko kaise handle karte ho?
Feedback ko personally na lekar objectively suno, clarifying questions poocho reason samajhne ke liye, aur data/best-practices ke saath apna reasoning
explain karo agar disagree karte ho, lekin final client ki need ko priority do.
Q5. Deadline pressure mein multiple projects kaise manage karte ho?
Priority ke hisaab se tasks ko organize karo, time-blocking/to-do list use karo, stakeholders ko realistic timelines proactively communicate karo, aur zarurat
par help maango time se.
Q6. UI aur UX mein kya difference hai?
UI (User Interface) visual elements — colors, typography, layout, buttons — se related hai. UX (User Experience) overall user journey/feel se related hai —
kitna easy/intuitive hai use karna. Dono ek dusre ko complement karte hain.
Q7. Design trends ke saath updated kaise rehte ho?
Design blogs/websites (Dribbble, Behance, Awwwards) follow karo, design communities join karo, competitor/inspiration research karo regularly, aur naye
tools/features try karte raho.
Q8. Apna best project/portfolio piece explain karo.
Problem statement, tumhara design solution, tools use kiye, challenges face kiye aur unhe kaise solve kiya, aur final result/impact (metrics ho to aur behtar)
— is structure mein STAR method (Situation, Task, Action, Result) follow karke batao.
Tip: Portfolio ready rakho aur 2-3 projects deeply explain karne ki practice karo — recruiters practical demo bahut pasand karte hain.