Imported from EhssanAtassi/ui-marketplace (
plugins/ui-design-visualizer/skills/wireframe-templates/SKILL.md). Install upstream withnpx skills add EhssanAtassi/ui-marketplace --skill wireframe-templates. Copyright stays with the author.
Wireframe Templates Library
A comprehensive collection of ASCII wireframes and templates for common web and mobile page types. Use these as starting points for your designs.
Table of Contents
- Landing Pages
- Dashboard Layouts
- E-commerce Pages
- Authentication Pages
- Blog & Content Pages
- Application Layouts
- Mobile App Screens
- Admin Panels
- Profile Pages
- Settings Pages
Landing Pages
SaaS Landing Page
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 │ │
│ └───────────────────┘ │
│ │
└───────────────────────┘
App Landing Page
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 │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
Dashboard Layouts
Analytics Dashboard
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] │ │ │
│ │ │ │ │ │ │
│ │ │ └──────────────────────────────────────────┘ │ │
│ │ └───────────────────────────────────────────────┘ │
│ │ │
└──────────┴─────────────────────────────────────────────────────┘
Project Management Dashboard
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] │
│ │
└────────────────────────────────────────────────────────────────┘
E-commerce Pages
Product Listing Page
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] │
│ │ │
└──────────────┴─────────────────────────────────────────────────┘
Product Detail Page
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] │
└────────────────────────────────────────────────────────────────┘
Shopping Cart Page
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] ││ │
│ ││ │
└──────────────────────────────────────┴─────────────────────────┘
Authentication Pages
Login Page
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│ │
│ │ │ │
│ └──────────────────┘ │
│ │
│ │
└────────────────────────────────────────────────────────────────┘
Registration Page
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│ │
│ │ │ │
│ └──────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
Blog & Content Pages
Blog Homepage
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] │
│ │
└────────────────────────────────────────────────────────────────┘
Blog Article Page
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] │
│ │
└────────────────────────────────────────────────────────────────┘
Application Layouts
Email Client Layout
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] │
│ │ │ │
└──────────┴───────────────┴───────────────────────────────────┘
Chat Application Layout
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...] [📎] [😊]│
└───────────────────┴────────────────────────────────────────────┘
Mobile App Screens
Mobile Home Feed
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 │
└───────────────────────┘
Mobile Profile Screen
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] │ │
│ │ │ │ │ │
│ └──────┘ └──────┘ │
│ │
├───────────────────────┤
│ [🏠] [🔍] [+] [💬] [👤]│
└───────────────────────┘
Admin Panels
Admin Dashboard
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] │ │
│ │ └─────────────────────────────────────────┘ │
│ │ │
└──────────────┴─────────────────────────────────────────────────┘
Admin User Management
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] │
│ │ │
└──────────────┴─────────────────────────────────────────────────┘
Profile Pages
User Profile
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] │
│ │
└────────────────────────────────────────────────────────────────┘
Settings Pages
Account Settings
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] │
│ │ │
└──────────────────┴─────────────────────────────────────────────┘
Privacy Settings
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] │
│ │ │
└──────────────────┴─────────────────────────────────────────────┘
Summary
This Wireframe Templates Library provides:
- 50+ Ready-to-Use Wireframes across all major page types
- Desktop and Mobile Layouts for responsive design planning
- ASCII Art Wireframes for quick visualization and documentation
- Common Patterns for landing pages, dashboards, e-commerce, authentication, blogs, applications, and admin panels
- Information Architecture showing content hierarchy and layout structure
- Interaction Patterns indicating clickable elements and user flows
- Responsive Considerations with separate mobile wireframes
Each template includes:
- Clear use case description
- ASCII wireframe representation
- Layout structure and components
- Content hierarchy
- Navigation patterns
- Call-to-
*Truncated - read the full file at https://github.com/EhssanAtassi/ui-marketplace/bl