phase-3-mockup

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

1. Screen Mockups: Implement UI with HTML/CSS
2. Interactions: Implement behavior with basic JavaScript
3. Data Simulation: Simulate API responses with JSON files
4. 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

• UI Research

  • Collected reference designs (minimum 3)
  • Decided color palette
  • Selected fonts

• Mockup Implementation

  • HTML separated by component units
  • Design tokens defined with CSS variables
  • Data simulated with JSON

• Next.js Transition Preparation

  • Component mapping document created
  • Props interfaces defined
  • Verified reusable structure

---

Template

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

Next Phase

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