football2801/pictureFrame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c842a1028fcc5a6b52865cd082cfb677183ce916
pictureFrame/_bmad-output/planning-artifacts/ux-design-directions.html
T
football2801 2a2c8ae343 docs: add UX design specification and visual explorers 
Complete 14-step UX design spec covering core experience, emotional
response, design system (Vue 3 + TypeScript + SCSS + Konva.js), 6
color themes, Direction 5 (Minimal Card), user journeys, component
strategy, UX patterns, and responsive/accessibility requirements.
Includes interactive theme explorer and design direction mockups.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-27 21:54:01 -04:00

508 lines
32 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pictureFrame — Design Directions</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', -apple-system, sans-serif; background: #1a1614; color: #f0ece8; padding: 24px 16px 48px; }
h1 { text-align: center; font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.subtitle { text-align: center; color: #8a7e78; font-size: 13px; margin-bottom: 32px; }
.dir-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 28px; flex-wrap: wrap; }
.dir-tab { padding: 8px 18px; border-radius: 100px; border: 2px solid #3a3230; background: #2a2220; color: #c0b0a8; cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.2s; }
.dir-tab:hover { border-color: #c4622a; color: #f0ece8; }
.dir-tab.active { background: #c4622a; border-color: #c4622a; color: white; }
.dir-section { display: none; }
.dir-section.active { display: block; }
.dir-header { text-align: center; margin-bottom: 24px; }
.dir-header h2 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.dir-header p { font-size: 14px; color: #a09088; max-width: 480px; margin: 0 auto; line-height: 1.6; }
/* Phone shell */
.phone-row { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
.phone-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.phone-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #8a7e78; }
.phone { width: 260px; background: #111; border-radius: 36px; padding: 12px; box-shadow: 0 8px 40px rgba(0,0,0,0.6), inset 0 0 0 2px #333; }
.phone-screen { background: #fff8f0; border-radius: 26px; overflow: hidden; min-height: 480px; display: flex; flex-direction: column; }
/* Shared UI atoms */
.status-bar { display: flex; justify-content: space-between; padding: 8px 16px 4px; font-size: 10px; font-weight: 700; color: #8a7060; }
.screen-body { flex: 1; overflow: hidden; }
.bottom-nav { display: flex; justify-content: space-around; padding: 8px 0 10px; border-top: 1px solid #f0e0d4; background: white; }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9px; font-weight: 700; color: #c0a090; }
.nav-item.on { color: #c4622a; }
.nav-icon { font-size: 18px; }
/* Atoms */
.px { padding: 0 16px; }
.screen-title { font-size: 22px; font-weight: 800; color: #2a1e16; padding: 14px 16px 8px; }
.screen-sub { font-size: 12px; color: #a08070; padding: 0 16px 12px; }
.chip { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 10px; font-weight: 700; background: #fde8da; color: #c4622a; margin: 0 2px; }
.chip-g { background: #daeee4; color: #2a5a3e; }
.photo-thumb { border-radius: 10px; background: #e8d8c8; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.card-white { background: white; border-radius: 12px; padding: 12px; box-shadow: 0 1px 6px rgba(196,98,42,0.08); }
.fab { width: 52px; height: 52px; border-radius: 50%; background: #c4622a; display: flex; align-items: center; justify-content: center; font-size: 24px; color: white; box-shadow: 0 4px 16px rgba(196,98,42,0.4); }
.section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #c0a090; padding: 0 16px 6px; }
.row { display: flex; align-items: center; }
.divider { height: 1px; background: #f0e0d4; margin: 8px 16px; }
/* Insight boxes */
.insights { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 560px; margin: 0 auto; }
@media (max-width: 500px) { .insights { grid-template-columns: 1fr; } }
.insight { background: #2a2220; border-radius: 12px; padding: 14px 16px; border-left: 3px solid #c4622a; }
.insight h4 { font-size: 12px; font-weight: 700; color: #f0ece8; margin-bottom: 4px; }
.insight p { font-size: 12px; color: #907870; line-height: 1.5; }
.insight.pro { border-color: #4aaa70; }
.insight.pro h4 { color: #7adda0; }
.insight.con { border-color: #d06050; }
.insight.con h4 { color: #f09080; }
</style>
</head>
<body>
<h1>pictureFrame — Design Directions</h1>
<p class="subtitle">5 layout approaches · Warm Craft theme · tap to explore</p>
<div class="dir-tabs">
<button class="dir-tab active" onclick="showDir(1)">1 · Photo Grid</button>
<button class="dir-tab" onclick="showDir(2)">2 · Frame-Centric</button>
<button class="dir-tab" onclick="showDir(3)">3 · Upload-First</button>
<button class="dir-tab" onclick="showDir(4)">4 · Activity Feed</button>
<button class="dir-tab" onclick="showDir(5)">5 · Minimal Card</button>
</div>
<!-- ════ DIRECTION 1: Photo Grid ════ -->
<div class="dir-section active" id="dir1">
<div class="dir-header">
<h2>1 · Photo Grid</h2>
<p>Home is a mosaic of your photos. The frame assignment is a secondary action. Feels like a personal gallery that happens to connect to a frame.</p>
</div>
<div class="phone-row">
<div class="phone-wrap">
<div class="phone-label">Home</div>
<div class="phone">
<div class="phone-screen">
<div class="status-bar"><span>9:41</span><span>●●●</span></div>
<div class="screen-title">Your Photos</div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;padding:0 12px 12px;">
<div class="photo-thumb" style="height:80px;">🏔️</div>
<div class="photo-thumb" style="height:80px;grid-row:span 2;height:163px;">👨‍👩‍👧</div>
<div class="photo-thumb" style="height:80px;">🌅</div>
<div class="photo-thumb" style="height:80px;">🎄</div>
<div class="photo-thumb" style="height:80px;">🐕</div>
<div class="photo-thumb" style="height:80px;">🎂</div>
<div class="photo-thumb" style="height:80px;">🏖️</div>
<div class="photo-thumb" style="height:80px;">❄️</div>
</div>
<div style="position:absolute;bottom:72px;right:20px;" class="fab" style="position:relative;">+</div>
<div class="bottom-nav">
<div class="nav-item on"><span class="nav-icon">📷</span><span>Photos</span></div>
<div class="nav-item"><span class="nav-icon">🖼️</span><span>Frames</span></div>
<div class="nav-item"><span class="nav-icon">↗️</span><span>Shared</span></div>
<div class="nav-item"><span class="nav-icon">👤</span><span>Me</span></div>
</div>
</div>
</div>
</div>
<div class="phone-wrap">
<div class="phone-label">Photo Detail</div>
<div class="phone">
<div class="phone-screen">
<div class="status-bar"><span>9:41</span><span>●●●</span></div>
<div class="photo-thumb" style="height:220px;border-radius:0;font-size:64px;">🏔️</div>
<div style="padding:14px 16px 0;">
<div style="font-size:15px;font-weight:700;color:#2a1e16;margin-bottom:4px;">Lake Trip 2024</div>
<div style="font-size:12px;color:#a08070;margin-bottom:12px;">Added 3 days ago · On 2 frames</div>
<div style="display:flex;gap:8px;margin-bottom:14px;">
<span class="chip">Margaret's Frame</span>
<span class="chip">Living Room</span>
</div>
<div style="display:flex;gap:8px;">
<div style="flex:1;background:#c4622a;color:white;border-radius:100px;padding:10px;text-align:center;font-size:12px;font-weight:700;">Edit & Add</div>
<div style="flex:1;background:#f0e8df;color:#c4622a;border-radius:100px;padding:10px;text-align:center;font-size:12px;font-weight:700;">Share</div>
</div>
</div>
<div class="bottom-nav" style="margin-top:auto;">
<div class="nav-item on"><span class="nav-icon">📷</span><span>Photos</span></div>
<div class="nav-item"><span class="nav-icon">🖼️</span><span>Frames</span></div>
<div class="nav-item"><span class="nav-icon">↗️</span><span>Shared</span></div>
<div class="nav-item"><span class="nav-icon">👤</span><span>Me</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="insights">
<div class="insight pro"><h4>✓ Familiar</h4><p>Feels like Apple Photos or Google Photos — users know how to navigate it immediately.</p></div>
<div class="insight pro"><h4>✓ Photo-forward</h4><p>The content (photos) is the hero. Great for libraries with many images.</p></div>
<div class="insight con"><h4>✗ Frame is secondary</h4><p>The physical frame — the whole point — is buried under a tab, not the first thing you see.</p></div>
<div class="insight con"><h4>✗ Upload entry unclear</h4><p>Floating "+" button competes with the grid. Upload vs. camera roll confusion likely.</p></div>
</div>
</div>
<!-- ════ DIRECTION 2: Frame-Centric ════ -->
<div class="dir-section" id="dir2">
<div class="dir-header">
<h2>2 · Frame-Centric</h2>
<p>Home shows your frames first. Each frame has a current photo preview. You navigate into a frame to add or manage photos for it. The frame is always the destination.</p>
</div>
<div class="phone-row">
<div class="phone-wrap">
<div class="phone-label">Home</div>
<div class="phone">
<div class="phone-screen">
<div class="status-bar"><span>9:41</span><span>●●●</span></div>
<div class="screen-title">Your Frames</div>
<div style="padding:0 12px 12px;display:flex;flex-direction:column;gap:10px;">
<div class="card-white" style="display:flex;gap:12px;align-items:center;">
<div class="photo-thumb" style="width:64px;height:40px;flex-shrink:0;">👨‍👩‍👧</div>
<div style="flex:1;">
<div style="font-size:13px;font-weight:700;color:#2a1e16;">Margaret's Frame</div>
<div style="font-size:11px;color:#a08070;">14 photos · Updates daily</div>
</div>
<span class="chip-g chip" style="font-size:9px;">Live</span>
</div>
<div class="card-white" style="display:flex;gap:12px;align-items:center;">
<div class="photo-thumb" style="width:64px;height:40px;flex-shrink:0;">🏠</div>
<div style="flex:1;">
<div style="font-size:13px;font-weight:700;color:#2a1e16;">Living Room</div>
<div style="font-size:11px;color:#a08070;">6 photos · Updates weekly</div>
</div>
<span class="chip-g chip" style="font-size:9px;">Live</span>
</div>
<div style="border:2px dashed #e0c8b8;border-radius:12px;padding:14px;text-align:center;">
<div style="font-size:12px;color:#c0a090;font-weight:600;">+ Add a frame</div>
</div>
</div>
<div class="bottom-nav">
<div class="nav-item on"><span class="nav-icon">🖼️</span><span>Frames</span></div>
<div class="nav-item"><span class="nav-icon">📚</span><span>Library</span></div>
<div class="nav-item"><span class="nav-icon">↗️</span><span>Shared</span></div>
<div class="nav-item"><span class="nav-icon">👤</span><span>Me</span></div>
</div>
</div>
</div>
</div>
<div class="phone-wrap">
<div class="phone-label">Frame Detail</div>
<div class="phone">
<div class="phone-screen">
<div class="status-bar"><span>9:41</span><span>●●●</span></div>
<div style="padding:14px 16px 6px;display:flex;align-items:center;gap:10px;">
<div style="font-size:12px;color:#a08070;">← Frames</div>
</div>
<div style="font-size:18px;font-weight:800;color:#2a1e16;padding:0 16px 4px;">Margaret's Frame</div>
<div style="font-size:11px;color:#a08070;padding:0 16px 12px;">14 photos · Updates daily</div>
<div style="display:flex;gap:8px;padding:0 12px 12px;">
<div style="flex:1;background:#c4622a;color:white;border-radius:100px;padding:9px;text-align:center;font-size:12px;font-weight:700;">+ Add Photo</div>
<div style="background:#f0e8df;color:#c4622a;border-radius:100px;padding:9px 14px;font-size:12px;font-weight:700;">Settings</div>
</div>
<div class="section-label">On this frame</div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;padding:0 12px;">
<div class="photo-thumb" style="height:72px;">🏔️</div>
<div class="photo-thumb" style="height:72px;">👨‍👩‍👧</div>
<div class="photo-thumb" style="height:72px;">🌅</div>
<div class="photo-thumb" style="height:72px;">🎄</div>
<div class="photo-thumb" style="height:72px;">🐕</div>
<div class="photo-thumb" style="height:72px;">🎂</div>
</div>
<div class="bottom-nav" style="margin-top:auto;">
<div class="nav-item on"><span class="nav-icon">🖼️</span><span>Frames</span></div>
<div class="nav-item"><span class="nav-icon">📚</span><span>Library</span></div>
<div class="nav-item"><span class="nav-icon">↗️</span><span>Shared</span></div>
<div class="nav-item"><span class="nav-icon">👤</span><span>Me</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="insights">
<div class="insight pro"><h4>✓ Frame is the hero</h4><p>Every interaction starts with "which frame?" — keeps the physical gift front and center.</p></div>
<div class="insight pro"><h4>✓ Clear mental model</h4><p>Navigate into a frame → add photos to it. Mirrors how users think about the product.</p></div>
<div class="insight con"><h4>✗ Library is secondary</h4><p>Your full photo library is a tab away. Users who want to browse all photos have to look for it.</p></div>
<div class="insight con"><h4>✗ Multi-frame add is extra steps</h4><p>Adding one photo to multiple frames requires navigating between frame detail screens.</p></div>
</div>
</div>
<!-- ════ DIRECTION 3: Upload-First ════ -->
<div class="dir-section" id="dir3">
<div class="dir-header">
<h2>3 · Upload-First</h2>
<p>The upload action IS the home screen. A big prominent upload button with recent activity below. The app communicates: the main thing you do here is put photos on frames.</p>
</div>
<div class="phone-row">
<div class="phone-wrap">
<div class="phone-label">Home</div>
<div class="phone">
<div class="phone-screen">
<div class="status-bar"><span>9:41</span><span>●●●</span></div>
<div style="padding:20px 16px 16px;">
<div style="font-size:22px;font-weight:800;color:#2a1e16;margin-bottom:4px;">pictureFrame</div>
<div style="font-size:12px;color:#a08070;">Hey Matt 👋</div>
</div>
<div style="margin:0 12px 16px;background:#c4622a;border-radius:16px;padding:20px;text-align:center;color:white;">
<div style="font-size:32px;margin-bottom:8px;">📷</div>
<div style="font-size:15px;font-weight:800;margin-bottom:4px;">Add a photo</div>
<div style="font-size:11px;opacity:0.8;">Crop, add stickers, put it on a frame</div>
</div>
<div class="section-label">Recent</div>
<div style="display:flex;flex-direction:column;gap:8px;padding:0 12px;">
<div style="display:flex;gap:10px;align-items:center;background:white;border-radius:10px;padding:10px;">
<div class="photo-thumb" style="width:40px;height:40px;flex-shrink:0;font-size:18px;">🏔️</div>
<div style="flex:1;">
<div style="font-size:12px;font-weight:700;color:#2a1e16;">Lake Trip</div>
<div style="font-size:10px;color:#a08070;">Margaret's Frame · 2 days ago</div>
</div>
</div>
<div style="display:flex;gap:10px;align-items:center;background:white;border-radius:10px;padding:10px;">
<div class="photo-thumb" style="width:40px;height:40px;flex-shrink:0;font-size:18px;">🎄</div>
<div style="flex:1;">
<div style="font-size:12px;font-weight:700;color:#2a1e16;">Christmas 2024</div>
<div style="font-size:10px;color:#a08070;">Living Room · 5 days ago</div>
</div>
</div>
</div>
<div class="bottom-nav" style="margin-top:auto;">
<div class="nav-item on"><span class="nav-icon">🏠</span><span>Home</span></div>
<div class="nav-item"><span class="nav-icon">📚</span><span>Library</span></div>
<div class="nav-item"><span class="nav-icon">🖼️</span><span>Frames</span></div>
<div class="nav-item"><span class="nav-icon">👤</span><span>Me</span></div>
</div>
</div>
</div>
</div>
<div class="phone-wrap">
<div class="phone-label">Upload Flow Step 1</div>
<div class="phone">
<div class="phone-screen">
<div class="status-bar"><span>9:41</span><span>●●●</span></div>
<div style="padding:14px 16px 6px;display:flex;align-items:center;justify-content:space-between;">
<div style="font-size:13px;color:#a08070;">Cancel</div>
<div style="font-size:14px;font-weight:700;color:#2a1e16;">Crop Photo</div>
<div style="font-size:13px;font-weight:700;color:#c4622a;">Next →</div>
</div>
<div style="margin:8px 12px;background:#f0e8df;border-radius:14px;aspect-ratio:5/3;display:flex;align-items:center;justify-content:center;border:3px solid #c4622a;position:relative;">
<div style="font-size:56px;">🏔️</div>
<div style="position:absolute;bottom:8px;right:8px;background:rgba(196,98,42,0.15);border-radius:6px;padding:3px 7px;font-size:9px;font-weight:700;color:#c4622a;">Margaret's Frame</div>
</div>
<div style="padding:12px 16px 0;font-size:11px;color:#a08070;text-align:center;">Pinch and drag to fit the frame shape</div>
<div style="padding:10px 16px 0;display:flex;gap:8px;justify-content:center;">
<div style="background:#f0e8df;color:#c4622a;border-radius:100px;padding:8px 16px;font-size:11px;font-weight:700;">Landscape</div>
<div style="background:#c4622a;color:white;border-radius:100px;padding:8px 16px;font-size:11px;font-weight:700;">Portrait</div>
</div>
<div class="bottom-nav" style="margin-top:auto;">
<div class="nav-item on"><span class="nav-icon">🏠</span><span>Home</span></div>
<div class="nav-item"><span class="nav-icon">📚</span><span>Library</span></div>
<div class="nav-item"><span class="nav-icon">🖼️</span><span>Frames</span></div>
<div class="nav-item"><span class="nav-icon">👤</span><span>Me</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="insights">
<div class="insight pro"><h4>✓ Intent is unmistakable</h4><p>First thing you see is "add a photo." The app's purpose is communicated before anything else.</p></div>
<div class="insight pro"><h4>✓ Upload funnel is the flow</h4><p>Tapping the big button goes straight into crop → sticker → add to frame. No detours.</p></div>
<div class="insight con"><h4>✗ Repeat visitors see the same home</h4><p>After the 10th upload, the big prompt feels redundant. No sense of the growing collection.</p></div>
<div class="insight con"><h4>✗ Library/frames are tabs</h4><p>Managing existing content requires navigation rather than being surfaced on home.</p></div>
</div>
</div>
<!-- ════ DIRECTION 4: Activity Feed ════ -->
<div class="dir-section" id="dir4">
<div class="dir-header">
<h2>4 · Activity Feed</h2>
<p>Home is a chronological feed of what's happened — photos added, shares received, approvals needed. Upload lives as a persistent top button. Feels connected and social.</p>
</div>
<div class="phone-row">
<div class="phone-wrap">
<div class="phone-label">Home</div>
<div class="phone">
<div class="phone-screen">
<div class="status-bar"><span>9:41</span><span>●●●</span></div>
<div style="padding:14px 16px 8px;display:flex;align-items:center;justify-content:space-between;">
<div style="font-size:18px;font-weight:800;color:#2a1e16;">Recent</div>
<div style="background:#c4622a;color:white;border-radius:100px;padding:7px 14px;font-size:12px;font-weight:700;">+ Photo</div>
</div>
<div style="display:flex;flex-direction:column;gap:1px;padding:0 12px 12px;">
<div style="background:white;border-radius:12px 12px 4px 4px;padding:12px;margin-bottom:2px;">
<div style="font-size:10px;color:#a08070;margin-bottom:6px;">Sarah shared a photo · 1h ago</div>
<div style="display:flex;gap:10px;align-items:center;">
<div class="photo-thumb" style="width:48px;height:48px;flex-shrink:0;font-size:20px;">🎂</div>
<div style="flex:1;">
<div style="font-size:12px;font-weight:700;color:#2a1e16;">Birthday Party</div>
<div style="font-size:10px;color:#a08070;">Tap to approve for a frame</div>
</div>
<div style="background:#fde8da;color:#c4622a;border-radius:100px;padding:5px 10px;font-size:10px;font-weight:700;">Approve</div>
</div>
</div>
<div style="background:white;border-radius:4px;padding:12px;margin-bottom:2px;">
<div style="font-size:10px;color:#a08070;margin-bottom:6px;">You added a photo · 2 days ago</div>
<div style="display:flex;gap:10px;align-items:center;">
<div class="photo-thumb" style="width:48px;height:48px;flex-shrink:0;font-size:20px;">🏔️</div>
<div style="flex:1;">
<div style="font-size:12px;font-weight:700;color:#2a1e16;">Lake Trip 2024</div>
<div style="font-size:10px;color:#a08070;">On Margaret's Frame</div>
</div>
</div>
</div>
<div style="background:white;border-radius:4px 4px 12px 12px;padding:12px;">
<div style="font-size:10px;color:#a08070;margin-bottom:6px;">Frame updated · 5 days ago</div>
<div style="font-size:12px;font-weight:600;color:#2a1e16;">Margaret's Frame cycled to a new photo</div>
</div>
</div>
<div class="bottom-nav">
<div class="nav-item on"><span class="nav-icon">📋</span><span>Feed</span></div>
<div class="nav-item"><span class="nav-icon">📚</span><span>Library</span></div>
<div class="nav-item"><span class="nav-icon">🖼️</span><span>Frames</span></div>
<div class="nav-item"><span class="nav-icon">👤</span><span>Me</span></div>
</div>
</div>
</div>
</div>
<div class="phone-wrap">
<div class="phone-label">Approve Flow</div>
<div class="phone">
<div class="phone-screen">
<div class="status-bar"><span>9:41</span><span>●●●</span></div>
<div style="padding:14px 16px 6px;display:flex;align-items:center;gap:8px;">
<div style="font-size:12px;color:#a08070;">← Feed</div>
</div>
<div style="font-size:16px;font-weight:700;color:#2a1e16;padding:0 16px 4px;">Sarah shared a photo</div>
<div style="font-size:11px;color:#a08070;padding:0 16px 12px;">Add it to one of your frames?</div>
<div class="photo-thumb" style="height:160px;margin:0 12px 14px;font-size:64px;">🎂</div>
<div class="section-label">Choose a frame</div>
<div style="display:flex;flex-direction:column;gap:8px;padding:0 12px 12px;">
<div style="display:flex;gap:10px;align-items:center;background:white;border-radius:10px;padding:10px;border:2px solid #c4622a;">
<div class="photo-thumb" style="width:40px;height:25px;flex-shrink:0;font-size:14px;">👵</div>
<div style="font-size:12px;font-weight:700;color:#2a1e16;">Margaret's Frame</div>
<div style="margin-left:auto;font-size:16px;">✓</div>
</div>
<div style="display:flex;gap:10px;align-items:center;background:white;border-radius:10px;padding:10px;">
<div class="photo-thumb" style="width:40px;height:25px;flex-shrink:0;font-size:14px;">🏠</div>
<div style="font-size:12px;font-weight:700;color:#2a1e16;">Living Room</div>
</div>
</div>
<div style="padding:0 12px;"><div style="background:#c4622a;color:white;border-radius:100px;padding:12px;text-align:center;font-size:13px;font-weight:700;">Add to Margaret's Frame</div></div>
<div class="bottom-nav" style="margin-top:auto;">
<div class="nav-item on"><span class="nav-icon">📋</span><span>Feed</span></div>
<div class="nav-item"><span class="nav-icon">📚</span><span>Library</span></div>
<div class="nav-item"><span class="nav-icon">🖼️</span><span>Frames</span></div>
<div class="nav-item"><span class="nav-icon">👤</span><span>Me</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="insights">
<div class="insight pro"><h4>✓ Approvals surface naturally</h4><p>Shared photos that need approval appear inline in the feed — no hunting for a notification.</p></div>
<div class="insight pro"><h4>✓ Feels alive</h4><p>The home screen changes as photos are added and frames cycle. Gives the app a sense of activity.</p></div>
<div class="insight con"><h4>✗ Complexity for simple users</h4><p>Margaret opening the app sees a feed with notifications and actions. Might be overwhelming.</p></div>
<div class="insight con"><h4>✗ Upload is a button, not the hero</h4><p>The core action (add a photo) competes with the feed content for attention.</p></div>
</div>
</div>
<!-- ════ DIRECTION 5: Minimal Card ════ -->
<div class="dir-section" id="dir5">
<div class="dir-header">
<h2>5 · Minimal Card</h2>
<p>Home is clean and spacious — one frame card prominently displayed with its current photo, a clear "Add Photo" action, and simple navigation. Maximum focus, minimum noise.</p>
</div>
<div class="phone-row">
<div class="phone-wrap">
<div class="phone-label">Home (1 frame)</div>
<div class="phone">
<div class="phone-screen">
<div class="status-bar"><span>9:41</span><span>●●●</span></div>
<div style="padding:16px 16px 8px;display:flex;align-items:center;justify-content:space-between;">
<div style="font-size:18px;font-weight:800;color:#2a1e16;">pictureFrame</div>
<div style="font-size:20px;">👤</div>
</div>
<div style="margin:0 12px 16px;background:white;border-radius:16px;overflow:hidden;box-shadow:0 2px 12px rgba(196,98,42,0.1);">
<div class="photo-thumb" style="height:140px;border-radius:0;font-size:56px;">👨‍👩‍👧</div>
<div style="padding:14px;">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">
<div style="font-size:15px;font-weight:700;color:#2a1e16;">Margaret's Frame</div>
<span class="chip-g chip" style="font-size:9px;">Live</span>
</div>
<div style="font-size:11px;color:#a08070;margin-bottom:12px;">14 photos · Next cycle in 6 hours</div>
<div style="background:#c4622a;color:white;border-radius:100px;padding:11px;text-align:center;font-size:13px;font-weight:700;">+ Add a Photo</div>
</div>
</div>
<div class="section-label">Library</div>
<div style="display:flex;gap:6px;padding:0 12px;overflow:hidden;">
<div class="photo-thumb" style="width:64px;height:64px;flex-shrink:0;font-size:22px;">🏔️</div>
<div class="photo-thumb" style="width:64px;height:64px;flex-shrink:0;font-size:22px;">🌅</div>
<div class="photo-thumb" style="width:64px;height:64px;flex-shrink:0;font-size:22px;">🎄</div>
<div class="photo-thumb" style="width:64px;height:64px;flex-shrink:0;font-size:22px;">🐕</div>
</div>
<div class="bottom-nav" style="margin-top:auto;">
<div class="nav-item on"><span class="nav-icon">🏠</span><span>Home</span></div>
<div class="nav-item"><span class="nav-icon">📚</span><span>Library</span></div>
<div class="nav-item"><span class="nav-icon">🖼️</span><span>Frames</span></div>
<div class="nav-item"><span class="nav-icon">👤</span><span>Me</span></div>
</div>
</div>
</div>
</div>
<div class="phone-wrap">
<div class="phone-label">Home (2+ frames)</div>
<div class="phone">
<div class="phone-screen">
<div class="status-bar"><span>9:41</span><span>●●●</span></div>
<div style="padding:16px 16px 8px;font-size:18px;font-weight:800;color:#2a1e16;">pictureFrame</div>
<div style="display:flex;flex-direction:column;gap:10px;padding:0 12px 12px;">
<div style="background:white;border-radius:14px;overflow:hidden;box-shadow:0 2px 8px rgba(196,98,42,0.08);">
<div class="photo-thumb" style="height:80px;border-radius:0;font-size:36px;">👨‍👩‍👧</div>
<div style="padding:10px 12px;display:flex;align-items:center;justify-content:space-between;">
<div>
<div style="font-size:13px;font-weight:700;color:#2a1e16;">Margaret's Frame</div>
<div style="font-size:10px;color:#a08070;">14 photos</div>
</div>
<div style="background:#c4622a;color:white;border-radius:100px;padding:6px 12px;font-size:11px;font-weight:700;">+ Add</div>
</div>
</div>
<div style="background:white;border-radius:14px;overflow:hidden;box-shadow:0 2px 8px rgba(196,98,42,0.08);">
<div class="photo-thumb" style="height:80px;border-radius:0;font-size:36px;">🏠</div>
<div style="padding:10px 12px;display:flex;align-items:center;justify-content:space-between;">
<div>
<div style="font-size:13px;font-weight:700;color:#2a1e16;">Living Room</div>
<div style="font-size:10px;color:#a08070;">6 photos</div>
</div>
<div style="background:#c4622a;color:white;border-radius:100px;padding:6px 12px;font-size:11px;font-weight:700;">+ Add</div>
</div>
</div>
</div>
<div class="bottom-nav" style="margin-top:auto;">
<div class="nav-item on"><span class="nav-icon">🏠</span><span>Home</span></div>
<div class="nav-item"><span class="nav-icon">📚</span><span>Library</span></div>
<div class="nav-item"><span class="nav-icon">🖼️</span><span>Frames</span></div>
<div class="nav-item"><span class="nav-icon">👤</span><span>Me</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="insights">
<div class="insight pro"><h4>✓ Frame + action in one glance</h4><p>You see the frame's current photo AND the "Add Photo" button together. Purpose is immediate.</p></div>
<div class="insight pro"><h4>✓ Scales cleanly</h4><p>One frame: big featured card. Two+ frames: stacked cards, each with their own Add button.</p></div>
<div class="insight pro"><h4>✓ Closest to the mental model</h4><p>The frame is the hero, the photo is the content, the action is obvious. No secondary navigation needed for the primary job.</p></div>
<div class="insight con"><h4>✗ Library is below the fold</h4><p>The photo library strip is a hint, not a feature. Power users with large libraries need to go to the Library tab.</p></div>
</div>
</div>
<script>
function showDir(n) {
document.querySelectorAll('.dir-section').forEach(s => s.classList.remove('active'));
document.querySelectorAll('.dir-tab').forEach(t => t.classList.remove('active'));
document.getElementById('dir' + n).classList.add('active');
document.querySelectorAll('.dir-tab')[n-1].classList.add('active');
}
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink