web-design-pro

Web Design Pro (Modern Design Engineering)

Beyond the aesthetics of web design, a professional-level skillset that integrates system design, performance optimization, accessibility, and game-specific UX.

1. Design Systems & Tokens

Manage design decisions with data to eliminate the gap between design and code.

Token Hierarchy

Primitive Tokens (Raw): Foundational values (e.g., blue-500: #3B82F6)
Semantic Tokens (Meaning): Assign role and context (e.g., action-primary: var(--blue-500))
Component Tokens (Specific): Component-specific (e.g., btn-bg: var(--action-primary))

Implementation Guide

CSS Custom Properties: Real-time theme switching possible with browser-native tokens.
Tokens Studio (Figma): Extract JSON/CSS directly from design sources.
Automation: When tokens change, Style Dictionary etc., to distribute to each platform at build time.

2. UI/UX Methodologies

A framework for solving users' "real" problems.

Key Methodologies

Jobs to be Done (JTBD): "Players don't want to read a game introduction; they want to confirm within 3 seconds whether this game is fun." -> Place gameplay video instead of text in the Hero section.
Design Thinking: Iteration of Empathize - Define - Ideate - Prototype - Test.
Design Sprints: A compressed process to validate core hypotheses within 2-5 days.

3. Responsive Design Patterns

Modern CSS techniques that provide a perfect layout on all devices.

Fluid Typography & Layout

clamp() Use: Fluidly adjust font size/spacing according to screen size without media queries.
```
h1 { font-size: clamp(2rem, 5vw + 1rem, 4rem); }
```
Container Queries: Component design that responds to the parent container size, not the viewport.
Mobile-First: Write the 320px mobile layout as the default, and @media (min-width: ...)progressively enhance.

4. Accessibility Standards (WCAG 2.1)

The foundation of design that ensures no user is left out.

Key Checkpoints

Semantic HTML: <div> Instead of <nav>, <main>, <article>, <section> use.
Color Contrast: Text contrast of 4.5:1 or higher (AA level standard).
Keyboard Friendly: All interactions must be possible via Tab/Enter.
ARIA Labels: For icon-only buttons, always aria-label assign.
Reduced Motion: prefers-reduced-motionRespect and control excessive animation.

5. Performance & Web Vitals

Speed is user experience.

Core Web Vitals (2024 standards)

LCP (Largest Contentful Paint): Largest Contentful Paint < 2.5s.
INP (Interaction to Next Paint): Interaction response speed < 200ms. (Replaces FID)
CLS (Cumulative Layout Shift): Layout shift < 0.1.

Optimization Techniques

Image optimization: Use WebP/AVIF, width/height Prevent CLS by specifying.
Preload: Prioritize loading critical fonts and Hero images.
Defer JS: Non-essential scripts are handled with defer나 async.

6. Game UI/UX Specifics

UI techniques that maximize player immersion.

Game UI Patterns

Immediate Feedback: Provide immediate visual/auditory feedback for every click/hover.
Visual Hierarchy: Place the most important Action (e.g., Play Now) at the top of the F-Pattern.
Immersive Layout: The UI must match the game's world-building textures, fonts, and tone.

7. Actionable Skills for eastsea.monster Redesign

3 techniques applicable immediately:

Fluid Typography (clamp): Change the font size of all pages to clampto make transitions between mobile and desktop smooth.
WebP Batch Conversion: Convert all game thumbnails and assets to WebP to improve LCP.
Hero Video Autoplay: Place a muted gameplay video in the Hero section instead of a static image (applying JTBD).

Best-Practice Checklist for Game Portfolio

Is there a gameplay video (muted) in the Hero section?
Does the main font change fluidly through clamp()?
Are all images in WebP format and is width/heightspecified?
Can all games be selected and played using only the Tab key?
Do buttons react (scale/glow) on hover?
Is the Lighthouse accessibility score 90 or higher?
prefers-reduced-motion Is the flashing effect turned off when set?