メニュー
Ready-to-use wireframe templates for common page types and layouts. Use when searching for wireframe templates, page layouts, or design inspiration.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Angular Material components quick reference. Use when searching for Material component APIs, theming patterns, or CDK utilities.
Comprehensive patterns for BEM, OOCSS, SMACSS, ITCSS, and CUBE CSS with selection guides and implementation strategies
Comprehensive enterprise CSS architecture patterns for large-scale applications with design systems, governance, and team workflows
Comprehensive Leaflet patterns for custom markers, styled popups, controls, GeoJSON, clustering, and dark mode. Use when searching for Leaflet styling, marker customization, popup design, or interactive map features.
Comprehensive map styling patterns for Leaflet, Mapbox, and GIS visualizations. Use when searching for map theming, marker styling, popup designs, or choropleth patterns.
Comprehensive Mapbox GL JS patterns for custom styles, 3D visualization, animations, and data-driven maps. Use when searching for Mapbox styling, 3D buildings, heat maps, or advanced map visualizations.
| name | wireframe-templates |
| description | Ready-to-use wireframe templates for common page types and layouts. Use when searching for wireframe templates, page layouts, or design inspiration. |
A comprehensive collection of ASCII wireframes and templates for common web and mobile page types. Use these as starting points for your designs.
Use Case: Product marketing page for SaaS applications
Desktop Wireframe:
┌────────────────────────────────────────────────────────────────┐
│ [Logo] Home Features Pricing About [Sign In] │
└────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ │
│ HERO SECTION │
│ │
│ Transform Your Business with AI │
│ Automate workflows and boost productivity │
│ │
│ [Start Free Trial] [Watch Demo] │
│ │
│ [Hero Image/Animation] │
│ │
└────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ Trusted by 10,000+ companies │
│ [Logo] [Logo] [Logo] [Logo] [Logo] [Logo] │
└────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ │
│ FEATURES SECTION │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ [Icon] │ │ [Icon] │ │ [Icon] │ │
│ │ │ │ │ │ │ │
│ │ Feature 1 │ │ Feature 2 │ │ Feature 3 │ │
│ │ Description │ │ Description │ │ Description │ │
│ │ │ │ │ │ │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ │
│ HOW IT WORKS SECTION │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ [Screenshot/Demo] │ │
│ │ Step 1 │ │
│ │ Connect your tools │ │
│ │ Description... │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Step 2 [Screenshot/Demo] │ │
│ │ Configure automation │ │
│ │ Description... │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ │
│ PRICING SECTION │
│ │
│ ┌────────────┐ ┌────────────┐ ┌────────────┐ │
│ │ Starter │ │ Pro │ │ Enterprise │ │
│ │ │ │ POPULAR │ │ │ │
│ │ $29/mo │ │ $99/mo │ │ Custom │ │
│ │ │ │ │ │ │ │
│ │ ✓ Feature │ │ ✓ Feature │ │ ✓ Feature │ │
│ │ ✓ Feature │ │ ✓ Feature │ │ ✓ Feature │ │
│ │ ✓ Feature │ │ ✓ Feature │ │ ✓ Feature │ │
│ │ │ │ │ │ │ │
│ │ [Get Started] │ │ [Get Started] │ │ [Contact Us] │ │
│ └────────────┘ └────────────┘ └────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ │
│ TESTIMONIALS SECTION │
│ │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ "Great product!" │ │ "Love it!" │ │
│ │ │ │ │ │
│ │ [Avatar] │ │ [Avatar] │ │
│ │ John Doe │ │ Jane Smith │ │
│ │ CEO, Company │ │ CTO, Company │ │
│ └──────────────────┘ └──────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ │
│ CTA SECTION │
│ │
│ Ready to get started? │
│ Start your free 14-day trial today │
│ │
│ [Start Free Trial] │
│ │
└────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ FOOTER │
│ │
│ Product Company Resources Social │
│ Features About Blog Twitter │
│ Pricing Team Docs LinkedIn │
│ Use Cases Careers Support Facebook │
│ │
│ © 2025 Company Name. All rights reserved. │
└────────────────────────────────────────────────────────────────┘
Mobile Wireframe:
┌───────────────────────┐
│ [☰] Logo [Sign In]│
├───────────────────────┤
│ │
│ Transform Your │
│ Business with AI │
│ │
│ Automate workflows │
│ and boost │
│ productivity │
│ │
│ [Start Free Trial] │
│ [Watch Demo] │
│ │
│ [Hero Image] │
│ │
├───────────────────────┤
│ Trusted by 10k+ │
│ companies │
│ [Logo][Logo][Logo] │
├───────────────────────┤
│ │
│ FEATURES │
│ │
│ ┌───────────────────┐ │
│ │ [Icon] │ │
│ │ │ │
│ │ Feature 1 │ │
│ │ Description │ │
│ └───────────────────┘ │
│ │
│ ┌───────────────────┐ │
│ │ [Icon] │ │
│ │ │ │
│ │ Feature 2 │ │
│ │ Description │ │
│ └───────────────────┘ │
│ │
└───────────────────────┘
Use Case: Mobile app download page
Wireframe:
┌────────────────────────────────────────────────────────────────┐
│ [Logo] Home Features [Download] │
└────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ │
│ ┌────────────────────────┐ ┌─────────────────────────┐ │
│ │ │ │ │ │
│ │ The Best Way to │ │ [Phone Mockup] │ │
│ │ Manage Your Tasks │ │ [App Screenshot] │ │
│ │ │ │ │ │
│ │ Available on iOS and │ │ │ │
│ │ Android │ │ │ │
│ │ │ │ │ │
│ │ [App Store Badge] │ │ │ │
│ │ [Google Play Badge] │ │ │ │
│ │ │ │ │ │
│ │ ⭐⭐⭐⭐⭐ 4.8 │ │ │ │
│ │ 10M+ Downloads │ │ │ │
│ │ │ │ │ │
│ └────────────────────────┘ └─────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ KEY FEATURES │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ [Icon] │ │ [Icon] │ │ [Icon] │ │ [Icon] │ │
│ │ │ │ │ │ │ │ │ │
│ │ Simple │ │ Fast │ │ Secure │ │ Smart │ │
│ │ & Easy │ │ Sync │ │ Data │ │ AI │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
Use Case: Data visualization and metrics dashboard
Wireframe:
┌────────────────────────────────────────────────────────────────┐
│ [☰] Dashboard [🔍] [🔔] [👤] │
└────────────────────────────────────────────────────────────────┘
┌──────────┬─────────────────────────────────────────────────────┐
│ │ │
│ [Home] │ ┌───────┐ ┌───────┐ ┌───────┐ ┌───────┐ │
│ │ │ 1,234 │ │ 567 │ │ $50k │ │ 89% │ │
│ Analytics│ │ Users │ │Active │ │Revenue│ │Growth │ │
│ │ │ ↑ 12% │ │ ↑ 8% │ │↑ 23% │ │ ↑ 5% │ │
│ Reports │ └───────┘ └───────┘ └───────┘ └───────┘ │
│ │ │
│ Settings │ ┌─────────────────────────┐ ┌─────────────────┐ │
│ │ │ │ │ │ │
│ Users │ │ Revenue Chart │ │ Recent │ │
│ │ │ ┌────────────────────┐ │ │ Activity │ │
│ Billing │ │ │ 📈 │ │ │ │ │
│ │ │ │ │ │ │ • New user │ │
│ │ │ │ │ │ │ • Purchase │ │
│ │ │ └────────────────────┘ │ │ • Comment │ │
│ │ │ │ │ • Upload │ │
│ │ │ [Last 30 days ▼] │ │ │ │
│ │ └─────────────────────────┘ └─────────────────┘ │
│ │ │
│ │ ┌───────────────────────────────────────────────┐ │
│ │ │ User Growth │ │
│ │ │ ┌──────────────────────────────────────────┐ │ │
│ │ │ │ │ │ │
│ │ │ │ [Bar Chart] │ │ │
│ │ │ │ │ │ │
│ │ │ └──────────────────────────────────────────┘ │ │
│ │ └───────────────────────────────────────────────┘ │
│ │ │
└──────────┴─────────────────────────────────────────────────────┘
Use Case: Task and project tracking
Wireframe:
┌────────────────────────────────────────────────────────────────┐
│ [Logo] Project Dashboard [+ New Project] [🔍] [👤] │
└────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ My Projects | Team Projects | Archived │
├────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────┐ ┌──────────────────────┐ │
│ │ Website Redesign │ │ Mobile App v2.0 │ │
│ │ ━━━━━━━━━━━━━ 75% │ │ ━━━━━━━━━━━━━ 45% │ │
│ │ │ │ │ │
│ │ 📅 Due: Mar 15 │ │ 📅 Due: Apr 30 │ │
│ │ 👥 5 members │ │ 👥 8 members │ │
│ │ ✓ 12/16 tasks done │ │ ✓ 9/20 tasks done │ │
│ │ │ │ │ │
│ │ [View Details] │ │ [View Details] │ │
│ └──────────────────────┘ └──────────────────────┘ │
│ │
├────────────────────────────────────────────────────────────────┤
│ UPCOMING TASKS │
├────────────────────────────────────────────────────────────────┤
│ │
│ ☐ Design homepage mockup Due: Today │
│ Website Redesign [High Priority] │
│ │
│ ☐ Review pull request #234 Due: Tomorrow │
│ Mobile App v2.0 [Medium Priority] │
│ │
│ ☐ Client meeting preparation Due: Mar 10 │
│ Website Redesign [High Priority] │
│ │
└────────────────────────────────────────────────────────────────┘
Use Case: Browse products in a category
Desktop Wireframe:
┌────────────────────────────────────────────────────────────────┐
│ [Logo] [Search bar...] [Cart] [Account] │
│ Home > Electronics > Laptops │
└────────────────────────────────────────────────────────────────┘
┌──────────────┬─────────────────────────────────────────────────┐
│ FILTERS │ Laptops (234 products) [Grid] [List] Sort▼ │
│ ├─────────────────────────────────────────────────┤
│ Category │ │
│ ☑ Laptops │ ┌────────┐ ┌────────┐ ┌────────┐ │
│ ☐ Tablets │ │ [Img] │ │ [Img] │ │ [Img] │ │
│ ☐ Phones │ │ │ │ │ │ │ │
│ │ │ MacBook│ │ Dell │ │ HP │ │
│ Price │ │ Pro │ │ XPS │ │ Spectre│ │
│ $500 ▬▬●▬▬ │ │ │ │ │ │ │ │
│ ↓ ↓ │ │ $1,299 │ │ $999 │ │ $1,099 │ │
│ $0 $2000 │ │ ⭐4.8 │ │ ⭐4.6 │ │ ⭐4.7 │ │
│ │ │ │ │ │ │ │ │
│ Brand │ │ [Cart] │ │ [Cart] │ │ [Cart] │ │
│ ☑ Apple │ └────────┘ └────────┘ └────────┘ │
│ ☑ Dell │ │
│ ☐ HP │ ┌────────┐ ┌────────┐ ┌────────┐ │
│ ☐ Lenovo │ │ [Img] │ │ [Img] │ │ [Img] │ │
│ │ │ │ │ │ │ │ │
│ Rating │ │ Lenovo │ │ Asus │ │ Acer │ │
│ ⭐⭐⭐⭐⭐ │ │ ThinkPad │ │ ROG │ │ Swift │ │
│ ⭐⭐⭐⭐ & up│ │ │ │ │ │ │ │
│ │ │ $899 │ │ $1,599 │ │ $799 │ │
│ [Clear All] │ │ ⭐4.5 │ │ ⭐4.9 │ │ ⭐4.4 │ │
│ │ │ │ │ │ │ │ │
│ │ │ [Cart] │ │ [Cart] │ │ [Cart] │ │
│ │ └────────┘ └────────┘ └────────┘ │
│ │ │
│ │ [1] [2] [3] ... [20] [Next] │
│ │ │
└──────────────┴─────────────────────────────────────────────────┘
Use Case: View individual product details
Wireframe:
┌────────────────────────────────────────────────────────────────┐
│ [Logo] [Search bar...] [Cart(3)] [Account] │
│ Home > Electronics > Laptops > MacBook Pro 16" │
└────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ │
│ ┌────────────────────────┐ ┌──────────────────────────┐ │
│ │ │ │ MacBook Pro 16" │ │
│ │ [Main Image] │ │ Apple M3 Max │ │
│ │ │ │ │ │
│ │ │ │ ⭐⭐⭐⭐⭐ 4.8 (234) │ │
│ │ │ │ │ │
│ │ │ │ $2,499.00 │ │
│ └────────────────────────┘ │ Was $2,999.00 (Save 17%)│ │
│ │ │ │
│ [Thumb] [Thumb] [Thumb] │ Color: │ │
│ │ ⚪ ⚫ ⚫ │ │
│ │ │ │
│ │ Storage: │ │
│ │ [512GB] [1TB] [2TB] │ │
│ │ │ │
│ │ Quantity: [1 ▼] │ │
│ │ │ │
│ │ [Add to Cart] │ │
│ │ [Buy Now] │ │
│ │ │ │
│ │ ✓ Free shipping │ │
│ │ ✓ 30-day returns │ │
│ │ ✓ 1-year warranty │ │
│ └──────────────────────────┘ └──────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ [Description] [Specifications] [Reviews] [Q&A] │
├────────────────────────────────────────────────────────────────┤
│ │
│ The MacBook Pro 16" with M3 Max delivers exceptional │
│ performance for professionals... │
│ │
│ Key Features: │
│ • Apple M3 Max chip │
│ • 36GB unified memory │
│ • 16.2" Liquid Retina XDR display │
│ • Up to 22 hours battery life │
│ │
└────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ CUSTOMER REVIEWS (234) │
│ │
│ ⭐⭐⭐⭐⭐ "Amazing performance!" │
│ By John D. | Verified Purchase | 2 days ago │
│ This laptop is incredibly fast. The M3 Max chip handles │
│ everything I throw at it... │
│ [👍 Helpful (23)] [Report] │
│ │
│ ───────────────────────────────────────────────────────────── │
│ │
│ ⭐⭐⭐⭐⭐ "Worth every penny" │
│ By Sarah M. | Verified Purchase | 1 week ago │
│ Best laptop I've ever owned. Battery life is incredible... │
│ [👍 Helpful (45)] [Report] │
│ │
│ [Load More Reviews] │
└────────────────────────────────────────────────────────────────┘
Use Case: Review items before checkout
Wireframe:
┌────────────────────────────────────────────────────────────────┐
│ [Logo] [Search bar...] [Cart(3)] [Account] │
└────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ │
│ Shopping Cart (3 items) │
│ │
└────────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────┬─────────────────────────┐
│ │ ORDER SUMMARY │
│ ┌──────────────────────────────────┐│ │
│ │ [Img] MacBook Pro 16" ││ Subtotal: $3,397.00 │
│ │ Space Black, 1TB ││ Shipping: Free │
│ │ ││ Tax: $271.76 │
│ │ $2,499.00 ││ ───────────────────── │
│ │ Qty: [1 ▼] [Remove] ││ Total: $3,668.76 │
│ └──────────────────────────────────┘││ │
│ ││ [Proceed to Checkout] │
│ ┌──────────────────────────────────┐││ │
│ │ [Img] AirPods Pro ││ ───────────────────── │
│ │ White ││ │
│ │ ││ We Accept: │
│ │ $249.00 ││ 💳 Visa │
│ │ Qty: [2 ▼] [Remove] ││ 💳 Mastercard │
│ └──────────────────────────────────┘││ 💳 Amex │
│ ││ 💳 PayPal │
│ ┌──────────────────────────────────┐││ │
│ │ [Img] USB-C Cable ││ │
│ │ 2m, White ││ │
│ │ ││ │
│ │ $19.00 ││ │
│ │ Qty: [5 ▼] [Remove] ││ │
│ └──────────────────────────────────┘││ │
│ ││ │
│ [← Continue Shopping] ││ │
│ ││ │
└──────────────────────────────────────┴─────────────────────────┘
Use Case: User authentication
Wireframe:
┌────────────────────────────────────────────────────────────────┐
│ │
│ │
│ ┌──────────────────┐ │
│ │ │ │
│ │ [Logo] │ │
│ │ │ │
│ │ Welcome Back │ │
│ │ │ │
│ │ Email │ │
│ │ [____________] │ │
│ │ │ │
│ │ Password │ │
│ │ [____________] │ │
│ │ │ │
│ │ ☐ Remember me │ │
│ │ │ │
│ │ [Sign In] │ │
│ │ │ │
│ │ Forgot password?│ │
│ │ │ │
│ │ ──────OR────── │ │
│ │ │ │
│ │ [G] Google │ │
│ │ [f] Facebook │ │
│ │ │ │
│ │ Don't have an │ │
│ │ account? Sign Up│ │
│ │ │ │
│ └──────────────────┘ │
│ │
│ │
└────────────────────────────────────────────────────────────────┘
Use Case: New user signup
Wireframe:
┌────────────────────────────────────────────────────────────────┐
│ │
│ ┌──────────────────┐ │
│ │ │ │
│ │ [Logo] │ │
│ │ │ │
│ │ Create Account │ │
│ │ │ │
│ │ Full Name │ │
│ │ [____________] │ │
│ │ │ │
│ │ Email │ │
│ │ [____________] │ │
│ │ │ │
│ │ Password │ │
│ │ [____________] │ │
│ │ 🔒 Strong │ │
│ │ │ │
│ │ Confirm Password│ │
│ │ [____________] │ │
│ │ │ │
│ │ ☐ I agree to │ │
│ │ Terms of │ │
│ │ Service │ │
│ │ │ │
│ │ [Create Account]│ │
│ │ │ │
│ │ ──────OR────── │ │
│ │ │ │
│ │ [G] Google │ │
│ │ [f] Facebook │ │
│ │ │ │
│ │ Already have an │ │
│ │ account? Sign In│ │
│ │ │ │
│ └──────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
Use Case: Blog listing with featured posts
Wireframe:
┌────────────────────────────────────────────────────────────────┐
│ [Logo] Home Articles Categories About [Subscribe] │
└────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ │
│ FEATURED POST │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ [Large Featured Image] │ │
│ │ │ │
│ │ FEATURED │ │
│ │ How to Build a Scalable Web Application │ │
│ │ Learn best practices for building apps... │ │
│ │ │ │
│ │ By John Doe | Mar 15, 2025 | 8 min read │ │
│ │ [Read More →] │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ LATEST ARTICLES │
│ │
│ ┌────────────────────┐ ┌────────────────────┐ │
│ │ [Image] │ │ [Image] │ │
│ │ │ │ │ │
│ │ Understanding │ │ Introduction to │ │
│ │ TypeScript │ │ React Hooks │ │
│ │ Generics │ │ │ │
│ │ │ │ │ │
│ │ Mar 14 | 5 min │ │ Mar 13 | 7 min │ │
│ │ [Read →] │ │ [Read →] │ │
│ └────────────────────┘ └────────────────────┘ │
│ │
│ ┌────────────────────┐ ┌────────────────────┐ │
│ │ [Image] │ │ [Image] │ │
│ │ │ │ │ │
│ │ CSS Grid vs │ │ Node.js Best │ │
│ │ Flexbox │ │ Practices │ │
│ │ │ │ │ │
│ │ Mar 12 | 6 min │ │ Mar 11 | 9 min │ │
│ │ [Read →] │ │ [Read →] │ │
│ └────────────────────┘ └────────────────────┘ │
│ │
│ [Load More] │
│ │
└────────────────────────────────────────────────────────────────┘
Use Case: Individual blog post
Wireframe:
┌────────────────────────────────────────────────────────────────┐
│ [Logo] Home Articles Categories About [Subscribe] │
└────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ │
│ How to Build a Scalable Web Application │
│ │
│ By John Doe | Published Mar 15, 2025 | 8 min read │
│ Development, Architecture, Best Practices │
│ │
│ [Share] [Bookmark] [Comment] │
│ │
└────────────────────────────────────────────────────────────────┘
┌──────────────────────────────────┬─────────────────────────────┐
│ │ CONTENTS │
│ [Featured Image] │ │
│ │ 1. Introduction │
│ │ 2. Architecture │
│ Building scalable web │ 3. Database Design │
│ applications requires careful │ 4. Caching Strategy │
│ planning and architecture... │ 5. Deployment │
│ │ 6. Monitoring │
│ ## Architecture Patterns │ │
│ │ ─────────────────────── │
│ There are several patterns │ │
│ you can use... │ ABOUT THE AUTHOR │
│ │ │
│ ```typescript │ [Avatar] │
│ // Code example │ John Doe │
│ interface Config { │ Senior Developer │
│ port: number; │ │
│ } │ Bio about the author... │
│ ``` │ │
│ │ [Twitter] [LinkedIn] │
│ ## Database Design │ │
│ │ ─────────────────────── │
│ When designing your │ │
│ database... │ RELATED POSTS │
│ │ │
│ [Diagram/Image] │ • API Design Best │
│ │ Practices │
│ ## Conclusion │ • Microservices │
│ │ Architecture │
│ In this article, we covered... │ • Database Scaling │
│ │ │
└──────────────────────────────────┴─────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ COMMENTS (23) │
│ │
│ [Avatar] Jane Smith 2 hours ago │
│ Great article! Really helpful explanation of... │
│ [Reply] [Like (5)] │
│ │
│ [Avatar] John Doe (Author) 1 hour ago │
│ Thanks! Glad you found it useful. │
│ [Reply] [Like (2)] │
│ │
│ ─────────────────────────────────────────────────────────── │
│ │
│ [Add a comment...] │
│ [Post Comment] │
│ │
└────────────────────────────────────────────────────────────────┘
Use Case: Web-based email application
Wireframe:
┌────────────────────────────────────────────────────────────────┐
│ [☰] Mail [🔍 Search] [⚙️] [👤] │
└────────────────────────────────────────────────────────────────┘
┌──────────┬───────────────┬───────────────────────────────────┐
│ │ │ │
│ [✏️ New] │ Inbox (23) │ Re: Project Update │
│ │ │ From: john@example.com │
│ Inbox │ ┌───────────┐│ To: me │
│ (23) │ │📧 John ││ Mar 15, 2025 10:30 AM │
│ │ │ Re: Proj ││ │
│ Starred │ │ Thanks... ││ ─────────────────────────────── │
│ (5) │ │ 10:30 AM ││ │
│ │ └───────────┘││ Hi there, │
│ Sent │ │ │
│ │ ┌───────────┐││ Thanks for the update on the │
│ Drafts │ │📧 Sarah ││ project. I've reviewed the │
│ (2) │ │ Meeting ││ documents and have a few │
│ │ │ Can we... ││ questions: │
│ Trash │ │ 9:15 AM ││ │
│ │ └───────────┘││ 1. Timeline for phase 2? │
│ │ │ 2. Budget allocation? │
│ Labels │ ┌───────────┐││ 3. Team assignments? │
│ • Work │ │📧 Team ││ │
│ • Personal││ Weekly... ││ Let me know when you're │
│ • Important│ Important ││ available to discuss. │
│ │ │ Yesterday ││ │
│ │ └───────────┘││ Best regards, │
│ │ │ John │
│ │ [1][2][3]... ││ │
│ │ │ ─────────────────────────────── │
│ │ │ [Reply] [Reply All] [Forward] │
│ │ │ │
└──────────┴───────────────┴───────────────────────────────────┘
Use Case: Real-time messaging app
Wireframe:
┌────────────────────────────────────────────────────────────────┐
│ [☰] Messages [🔍] [+] [⚙️] │
└────────────────────────────────────────────────────────────────┘
┌───────────────────┬────────────────────────────────────────────┐
│ │ [Avatar] Team Project [📞] [📹] [ℹ️] │
│ [🔍 Search...] ├────────────────────────────────────────────┤
│ │ │
│ ┌───────────────┐│ ┌──────────────────────────────┐ │
│ │[👤] John Doe ││ │ John: Hey team, quick update ⏰ 10:30│ │
│ │ Hey team... ││ └──────────────────────────────┘ │
│ │ 2m ago (2)││ │
│ └───────────────┘││ ┌────────────────────────┐ │
│ │ │ You: Thanks for sharing│ 10:32│
│ ┌───────────────┐│ └────────────────────────┘ │
│ │[👤] Sarah M. ││ │
│ │ Looking good! ││ ┌──────────────────────────────┐ │
│ │ 1h ago ││ │ Sarah: Looking great! 👍 │ 10:35 │
│ └───────────────┘│ └──────────────────────────────┘ │
│ │ │
│ ┌───────────────┐││ ┌────────────────────────┐ │
│ │[👥] Design... ││ │ You: Should we schedule│ 10:40│
│ │ New mockups ││ │ a call to discuss? │ │
│ │ Yesterday ││ └────────────────────────┘ │
│ └───────────────┘││ │
│ ││ ┌──────────────────────────────┐ │
│ ┌───────────────┐││ │ John: Sure! 3pm works? │ 10:42 │
│ │[👤] Mike K. ││ └──────────────────────────────┘ │
│ │ See you... ││ │
│ │ Mar 14 ││ ┌────────────────────────┐ │
│ └───────────────┘│ │ You: Perfect! See you │ 10:43│
│ │ │ then │ │
│ │ └────────────────────────┘ │
│ │ │
│ ├────────────────────────────────────────────┤
│ │ [Type a message...] [📎] [😊]│
└───────────────────┴────────────────────────────────────────────┘
Use Case: Social media or news feed
Mobile Wireframe:
┌───────────────────────┐
│ ⏰ 9:41 🔋📶 │
├───────────────────────┤
│ Feed [🔍] [+] │
├───────────────────────┤
│ │
│ Stories │
│ ○ ○ ○ ○ ○ ○ → │
│ You Sam Li Jen ... │
│ │
├───────────────────────┤
│ [👤] John Doe • 2h │
│ ┌───────────────────┐ │
│ │ │ │
│ │ [Post Image] │ │
│ │ │ │
│ └───────────────────┘ │
│ │
│ Amazing sunset today! │
│ #nature #photography │
│ │
│ ❤️ 234 💬 12 📤 5 │
│ │
├───────────────────────┤
│ [👤] Sarah M. • 4h │
│ ┌───────────────────┐ │
│ │ │ │
│ │ [Post Image] │ │
│ │ │ │
│ └───────────────────┘ │
│ │
│ New project launch! │
│ So excited! 🎉 │
│ │
│ ❤️ 156 💬 8 📤 3 │
│ │
├───────────────────────┤
│ │
│ [Load More...] │
│ │
├───────────────────────┤
│ [🏠] [🔍] [+] [💬] [👤]│
│ Home Search Add Chat │
└───────────────────────┘
Use Case: User profile page
Mobile Wireframe:
┌───────────────────────┐
│ ⏰ 9:41 🔋📶 │
├───────────────────────┤
│ [←] Profile [⚙️] │
├───────────────────────┤
│ │
│ [Profile Pic] │
│ │
│ John Doe │
│ @johndoe │
│ │
│ Product Designer at │
│ TechCorp │
│ 📍 San Francisco │
│ │
│ [Edit Profile] │
│ │
├───────────────────────┤
│ 234 156 89 │
│ Posts Followers │
│ Following │
├───────────────────────┤
│ [Grid] [List] │
├───────────────────────┤
│ │
│ ┌──────┐ ┌──────┐ │
│ │[Img] │ │[Img] │ │
│ │ │ │ │ │
│ └──────┘ └──────┘ │
│ │
│ ┌──────┐ ┌──────┐ │
│ │[Img] │ │[Img] │ │
│ │ │ │ │ │
│ └──────┘ └──────┘ │
│ │
│ ┌──────┐ ┌──────┐ │
│ │[Img] │ │[Img] │ │
│ │ │ │ │ │
│ └──────┘ └──────┘ │
│ │
├───────────────────────┤
│ [🏠] [🔍] [+] [💬] [👤]│
└───────────────────────┘
Use Case: System administration interface
Wireframe:
┌────────────────────────────────────────────────────────────────┐
│ [☰] Admin Panel [🔍] [🔔 3] [👤 Admin] │
└────────────────────────────────────────────────────────────────┘
┌──────────────┬─────────────────────────────────────────────────┐
│ │ │
│ 📊 Dashboard │ ┌───────┐ ┌───────┐ ┌───────┐ ┌───────┐ │
│ │ │ 1,234 │ │ 567 │ │ 89 │ │ 23 │ │
│ 👥 Users │ │ Total │ │ Active│ │ New │ │ Issues│ │
│ │ │ Users │ │ Users │ │ Today │ │ Open │ │
│ 📦 Products │ └───────┘ └───────┘ └───────┘ └───────┘ │
│ │ │
│ 📝 Orders │ ┌─────────────────────────┐ ┌───────────────┐ │
│ │ │ User Registrations │ │ System Status │ │
│ 💰 Revenue │ │ ┌─────────────────────┐ │ │ │ │
│ │ │ │ 📈 │ │ │ ✅ All OK │ │
│ 📊 Analytics │ │ │ │ │ │ │ │
│ │ │ └─────────────────────┘ │ │ CPU: 23% │ │
│ 📧 Messages │ │ [Last 7 days ▼] │ │ RAM: 45% │ │
│ │ └─────────────────────────┘ │ Storage: 67% │ │
│ ⚙️ Settings │ └───────────────┘ │
│ │ ┌─────────────────────────────────────────┐ │
│ │ │ Recent Activity │ │
│ │ ├─────────────────────────────────────────┤ │
│ │ │ • New user registration: john@email.com │ │
│ │ │ 2 minutes ago │ │
│ │ │ │ │
│ │ │ • Order #1234 completed │ │
│ │ │ 5 minutes ago │ │
│ │ │ │ │
│ │ │ • Product updated: MacBook Pro │ │
│ │ │ 10 minutes ago │ │
│ │ │ │ │
│ │ │ [View All Activity] │ │
│ │ └─────────────────────────────────────────┘ │
│ │ │
└──────────────┴─────────────────────────────────────────────────┘
Use Case: Manage system users
Wireframe:
┌────────────────────────────────────────────────────────────────┐
│ [☰] Admin Panel > Users [🔍] [🔔 3] [👤 Admin] │
└────────────────────────────────────────────────────────────────┘
┌──────────────┬─────────────────────────────────────────────────┐
│ │ │
│ 📊 Dashboard │ Users (1,234) [+ Add User] │
│ │ │
│ 👥 Users │ [🔍 Search users...] [Filter ▼] [Export] │
│ │ │
│ 📦 Products │ ┌──────────────────────────────────────────┐ │
│ │ │ ☑ Name Email Role Actions │ │
│ │ ├──────────────────────────────────────────┤ │
│ 📝 Orders │ │ ☐ John Doe │ │
│ │ │ john@ex... Admin [Edit] [Delete] │ │
│ 💰 Revenue │ │ │ │
│ │ │ ☐ Jane Smith │ │
│ 📊 Analytics │ │ jane@ex... User [Edit] [Delete] │ │
│ │ │ │ │
│ 📧 Messages │ │ ☐ Mike Jones │ │
│ │ │ mike@ex... Editor [Edit] [Delete] │ │
│ ⚙️ Settings │ │ │ │
│ │ │ ☐ Sarah Lee │ │
│ │ │ sarah@e... User [Edit] [Delete] │ │
│ │ │ │ │
│ │ │ ... more users ... │ │
│ │ │ │ │
│ │ └──────────────────────────────────────────┘ │
│ │ │
│ │ [Select All] [Bulk Actions ▼] │
│ │ [1] [2] [3] ... [50] │
│ │ │
└──────────────┴─────────────────────────────────────────────────┘
Use Case: Public user profile
Wireframe:
┌────────────────────────────────────────────────────────────────┐
│ [Logo] Home Explore Messages Notifications [🔍] [👤] │
└────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ [Cover Photo] │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ [Profile Picture] │
│ │
│ John Doe [Follow] [Message] │
│ @johndoe [More ▼] │
│ │
│ Product Designer at TechCorp │
│ 📍 San Francisco, CA │
│ 🔗 johndoe.com │
│ 📅 Joined March 2020 │
│ │
│ 234 Following | 1.2K Followers │
│ │
└────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ [Posts] [About] [Photos] [Videos] │
├────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ John Doe 2 hours ago│ │
│ │ │ │
│ │ Just finished working on a new design system! 🎨 │ │
│ │ │ │
│ │ [Image Preview] │ │
│ │ │ │
│ │ ❤️ 234 💬 12 🔄 5 📤 Share │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ John Doe Yesterday │ │
│ │ │ │
│ │ Excited to announce I'm speaking at DesignConf 2025! │ │
│ │ │ │
│ │ ❤️ 156 💬 8 🔄 3 📤 Share │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ [Load More Posts] │
│ │
└────────────────────────────────────────────────────────────────┘
Use Case: User account configuration
Wireframe:
┌────────────────────────────────────────────────────────────────┐
│ [Logo] Home Explore Messages Notifications [🔍] [👤] │
└────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ Settings │
└────────────────────────────────────────────────────────────────┘
┌──────────────────┬─────────────────────────────────────────────┐
│ │ │
│ 👤 Account │ PROFILE INFORMATION │
│ │ │
│ 🔒 Privacy │ Photo │
│ │ [Profile Picture] [Change] │
│ 🔔 Notifications │ │
│ │ Full Name │
│ 🎨 Appearance │ [John Doe_____________] │
│ │ │
│ 🔐 Security │ Username │
│ │ [@johndoe____________] │
│ 💳 Billing │ │
│ │ Email │
│ 🔌 Integrations │ [john@example.com____] │
│ │ ✓ Verified │
│ 📧 Email │ │
│ │ Bio │
│ 🌐 Language │ [Product designer at ________] │
│ │ [TechCorp. Passionate about_] │
│ 🗑️ Data & Privacy│ [creating great UX.__________] │
│ │ │
│ │ Location │
│ │ [San Francisco, CA___] │
│ │ │
│ │ Website │
│ │ [https://johndoe.com_] │
│ │ │
│ │ [Cancel] [Save Changes] │
│ │ │
│ │ ─────────────────────────────────────── │
│ │ │
│ │ ACCOUNT PREFERENCES │
│ │ │
│ │ ☑ Make my profile public │
│ │ ☑ Show email on profile │
│ │ ☐ Allow messages from anyone │
│ │ │
│ │ [Save Preferences] │
│ │ │
└──────────────────┴─────────────────────────────────────────────┘
Use Case: Privacy and data controls
Wireframe:
┌────────────────────────────────────────────────────────────────┐
│ Settings > Privacy │
└────────────────────────────────────────────────────────────────┘
┌──────────────────┬─────────────────────────────────────────────┐
│ │ │
│ 👤 Account │ PRIVACY CONTROLS │
│ │ │
│ 🔒 Privacy │ Profile Visibility │
│ │ ⚫ Public │
│ 🔔 Notifications │ ⚪ Friends only │
│ │ ⚪ Private │
│ 🎨 Appearance │ │
│ │ Who can message you? │
│ 🔐 Security │ [Everyone ▼] │
│ │ Options: Everyone, Friends, No one │
│ 💳 Billing │ │
│ │ Who can see your email? │
│ 🔌 Integrations │ [Only me ▼] │
│ │ │
│ 📧 Email │ Who can tag you in posts? │
│ │ [Friends ▼] │
│ 🌐 Language │ │
│ │ [Save Changes] │
│ 🗑️ Data & Privacy│ │
│ │ ─────────────────────────────────────── │
│ │ │
│ │ DATA & DOWNLOADS │
│ │ │
│ │ Download your data │
│ │ Get a copy of your information │
│ │ [Request Download] │
│ │ │
│ │ ─────────────────────────────────────── │
│ │ │
│ │ BLOCKING & RESTRICTIONS │
│ │ │
│ │ Blocked users (3) │
│ │ [Manage Blocked Users] │
│ │ │
│ │ Muted words │
│ │ [Manage Muted Words] │
│ │ │
└──────────────────┴─────────────────────────────────────────────┘
This Wireframe Templates Library provides:
Each template includes:
Use these templates as starting points for your design process. They can be:
The wireframes focus on structure and function rather than visual design, making them perfect for: