--- 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. --- # 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 1. [Landing Pages](#landing-pages) 2. [Dashboard Layouts](#dashboard-layouts) 3. [E-commerce Pages](#e-commerce-pages) 4. [Authentication Pages](#authentication-pages) 5. [Blog & Content Pages](#blog--content-pages) 6. [Application Layouts](#application-layouts) 7. [Mobile App Screens](#mobile-app-screens) 8. [Admin Panels](#admin-panels) 9. [Profile Pages](#profile-pages) 10. [Settings 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-action placements - Mobile-specific adaptations where applicable Use these templates as starting points for your design process. They can be: - Shared with stakeholders for early feedback - Used as blueprints for development - Modified to match your specific needs - Combined to create complex layouts - Referenced during design discussions The wireframes focus on structure and function rather than visual design, making them perfect for: - Early-stage planning - Client presentations - Developer handoffs - Design system planning - Documentation