UI/UX Tasarımcısı - Teknik Sorular

Color: Color wheel, complementary, analogous, triadic schemes. Psychology: Blue (trust), red (urgency). Contrast: WCAG AA (4.5:1), AAA (7:1). Typography: Font pairing (serif + sans-serif), hierarchy (h1-h6), line length (50-75 characters), spacing (line-height 1.5-1.8). Tools: Adobe Color, Google Fonts.

Grid: Columns (12-16), gutters, margins. Alignment: Left alignment, visual hierarchy, whitespace. Responsive: Mobile 4 columns, tablet 8, desktop 12. CSS Grid, Flexbox. Breaking points: Content-first, not device-specific. Design consistency: Grid alignment tüm sayfalarda.

Micro-interactions: Feedback (button states), guidance (progress indicators), delight (success animations). Principles: Subtle, purposeful, fast (<300ms). Examples: Loading skeleton, hover effects, error shaking. Tools: Figma smart animate, Lottie. Performance: CSS animations vs JavaScript.

IA design: Content audit, card sorting, user mental models. Sitemaps: Hierarchical structure, navigation depth (max 3 levels). Navigation patterns: Mega menu, breadcrumbs, search. Labeling: User language, not business jargon. Testing: Tree testing, navigation usability.

Wireframe: Low-fidelity, layout, structure. Early stage, quick iteration. Tools: Balsamiq, Figma wireframe. Prototype: High-fidelity, interaction, flow validation. Later stage, usability testing. Tools: Figma, Adobe XD, Framer. Spectrum: Sketch → Wireframe → Mockup → Prototype.

Patterns: Navigation (hamburger, tabs), input (form validation, autofill), feedback (loading, success, error), social (likes, shares). Anti-patterns: Mystery meat navigation, click-through heavy. Resources: Nielsen Norman Group, UI Patterns. Custom vs pattern: Innovation vs familiarity balance.

Elements: Size (bigger = important), color (contrast), position (top-left), whitespace (isolation), typography (weight, size). Principles: F-pattern, Z-pattern reading. Testing: Eye-tracking, heatmaps, first-click testing. A/B testing: Headline variations, CTA placement.

Icons: Consistent style (outline vs filled), meaning clarity, scalability (SVG). Libraries: Material Design, Feather Icons, Lucide. Custom: Brand-aligned icon set. Illustrations: Purpose (onboarding, empty states), style consistency, accessibility (alt text). Tools: Figma, Adobe Illustrator.

Principles: Purposeful (not decorative), smooth (60fps), consistent (easing functions). Duration: Fast transitions (200-300ms), slow for emphasis. Easing: Ease-in-out, spring physics. Examples: Page transitions, micro-interactions, loading animations. Tools: Figma animate, Lottie, After Effects.

Documentation: Design brief (problem, goals), user research (insights, personas), design decisions (rationale), specifications (measurements, colors), usage guidelines. Format: Design doc, presentation, wiki. Tools: Notion, Confluence, Figma comments. Maintenance: Version control, change log.