Phase 3: Mockup Development

Create trendy UI without a designer + Consider Next.js componentization

Purpose

Quickly validate ideas before actual implementation. Even without a designer, research UI/UX trends to create high-quality prototypes, designed for easy conversion to Next.js components later.

What to Do in This Phase

Screen Mockups: Implement UI with HTML/CSS
Interactions: Implement behavior with basic JavaScript
Data Simulation: Simulate API responses with JSON files
Feature Validation: Test user flows

Deliverables

mockup/
├── pages/          # HTML pages
│   ├── index.html
│   ├── login.html
│   └── ...
├── styles/         # CSS
│   └── main.css
├── scripts/        # JavaScript
│   └── app.js
└── data/           # JSON mock data
    ├── users.json
    └── products.json

docs/02-design/
└── mockup-spec.md  # Mockup specification

PDCA Application

Plan: What screens/features to mock up
Design: Screen structure, interaction design
Do: Implement HTML/CSS/JS
Check: Verify feature behavior
Act: Apply feedback and proceed to Phase 4

Level-wise Application

Level	Application Method
Starter	This stage may be the final deliverable
Dynamic	For validation before next stages
Enterprise	For quick PoC

Core Principles

"Working prototype over perfect code"

- Pure HTML/CSS/JS without frameworks
- JSON files instead of APIs for data simulation
- Fast feedback loops
- Structure considering Next.js componentization

UI/UX Trend Research Methods

Creating Trendy UI Without a Designer

1. Trend Research Sources

Source	Purpose	URL
Dribbble	UI design trends, color palettes	dribbble.com
Behance	Real project case studies	behance.net
Awwwards	Latest web trends from award winners	awwwards.com
Mobbin	Mobile app UI patterns	mobbin.com
Godly	Landing page references	godly.website
Land-book	Landing page gallery	land-book.com

2. 2025-2026 UI/UX Trends

🎨 Visual Trends
├── Bento Grid Layout
├── Glassmorphism
├── Gradient Mesh
├── 3D Elements (minimal 3D elements)
└── Micro-interactions

📱 UX Trends
├── Dark Mode First
├── Skeleton Loading
├── Progressive Disclosure
├── Thumb-friendly Mobile Design
└── Accessibility (WCAG 2.1)

🔤 Typography
├── Variable Fonts
├── Large Hero Text
└── Mixed Font Weights

3. Quick UI Implementation Tools

Tool	Purpose
v0.dev	AI-based UI generation (shadcn/ui compatible)
Tailwind UI	High-quality component templates
Heroicons	Icons
Lucide	Icons (React compatible)
Coolors	Color palette generation
Realtime Colors	Real-time color preview

4. Pre-Mockup Checklist

## UI Research Checklist

- [ ] Analyzed 3+ similar services
- [ ] Decided color palette (Primary, Secondary, Accent)
- [ ] Selected typography (Heading, Body)
- [ ] Chose layout pattern (Grid, Bento, etc.)
- [ ] Collected reference design screenshots

Design for Next.js Componentization

Mockup → Component Transition Strategy

Considering component separation from the mockup stage makes Next.js transition easier.

1. Design HTML Structure in Component Units

<!-- ❌ Bad: Monolithic HTML -->
<div class="page">
  <header>...</header>
  <main>
    <div class="hero">...</div>
    <div class="features">...</div>
  </main>
  <footer>...</footer>
</div>

<!-- ✅ Good: Separated by component units -->
<!-- components/Header.html -->
<header data-component="Header">
  <nav data-component="Navigation">...</nav>
</header>

<!-- components/Hero.html -->
<section data-component="Hero">
  <h1 data-slot="title">...</h1>
  <p data-slot="description">...</p>
  <button data-component="Button" data-variant="primary">...</button>
</section>

2. Separate CSS by Component

mockup/
├── styles/
│   ├── base/
│   │   ├── reset.css
│   │   └── variables.css      # CSS variables (design tokens)
│   ├── components/
│   │   ├── button.css
│   │   ├── card.css
│   │   ├── header.css
│   │   └── hero.css
│   └── pages/
│       └── home.css

3. Create Component Mapping Document

## Component Mapping (mockup → Next.js)

| Mockup File | Next.js Component | Props |
|-------------|------------------|-------|
| `components/button.html` | `components/ui/Button.tsx` | variant, size, disabled |
| `components/card.html` | `components/ui/Card.tsx` | title, description, image |
| `components/header.html` | `components/layout/Header.tsx` | user, navigation |

4. Design Data Structure as Props

// mockup/data/hero.json
{
  "title": "Innovative Service",
  "description": "We provide better experiences",
  "cta": {
    "label": "Get Started",
    "href": "/signup"
  },
  "image": "/hero-image.png"
}

// → When transitioning to Next.js
// components/Hero.tsx
interface HeroProps {
  title: string;
  description: string;
  cta: {
    label: string;
    href: string;
  };
  image: string;
}

Next.js Transition Example

Mockup (HTML):

<!-- mockup/components/feature-card.html -->
<div class="feature-card" data-component="FeatureCard">
  <div class="feature-card__icon">🚀</div>
  <h3 class="feature-card__title">Fast Speed</h3>
  <p class="feature-card__description">We provide optimized performance.</p>
</div>

Next.js Component:

// components/FeatureCard.tsx
interface FeatureCardProps {
  icon: string;
  title: string;
  description: string;
}

export function FeatureCard({ icon, title, description }: FeatureCardProps) {
  return (
    <div className="feature-card">
      <div className="feature-card__icon">{icon}</div>
      <h3 className="feature-card__title">{title}</h3>
      <p className="feature-card__description">{description}</p>
    </div>
  );
}

JSON Data Simulation Example

// scripts/app.js
async function loadProducts() {
  const response = await fetch('./data/products.json');
  const products = await response.json();
  renderProducts(products);
}

JSON Structure → Use as API Schema

// mockup/data/products.json
// This structure becomes the basis for Phase 4 API design
{
  "data": [
    {
      "id": 1,
      "name": "Product Name",
      "price": 10000,
      "image": "/products/1.jpg"
    }
  ],
  "pagination": {
    "page": 1,
    "limit": 10,
    "total": 50
  }
}

Deliverables Checklist

Template

See templates/pipeline/phase-3-mockup.template.md

Next Phase

Phase 4: API Design/Implementation → Mockup is validated, now implement actual backend

phase-3-mockup