Kreativní
Expert
Claude
Wireframe a prototyping workflow
Vytvoř low-fidelity až high-fidelity wireframes s kompletním prototyping workflow.
Vyplňte proměnné
3 políNáhled promptu
0 znakůNavrhni wireframing a prototyping workflow pro [PRODUKT/FEATURE]. Typ: [MOBILE APP/WEB APP/DASHBOARD/E-COMMERCE]. Komplexita: [SIMPLE/MEDIUM/COMPLEX]. Struktura: 1) **Project Brief** - problem statement (jaký problém řešíme), target users (kdo bude používat), key features (hlavní funkce), success metrics (jak měříme úspěch), constraints (tech/design/business limity), 2) **Low-Fidelity Wireframes** - paper sketches (quick ideation, 5+ variants), digital grayscale wireframes (layout structure, content hierarchy, navigation flow), annotations (explaining functionality, edge cases, states), responsive layouts (mobile, tablet, desktop breakpoints), 3) **Content Inventory** - page/screen list, content blocks per page, content priority (primary, secondary, tertiary), copy requirements, image/media needs, 4) **User Flows** - task flows (how user completes key tasks), decision points (what choices user makes), error states (what happens when things go wrong), alternative paths (happy path vs edge cases), 5) **Interactive Prototype** - clickable prototype (Figma/Sketch/XD), navigation logic, transitions between screens, micro-interactions, form validation states, 6) **High-Fidelity Mockups** - visual design applied, real content (not lorem ipsum), responsive designs, accessibility considerations (contrast, touch targets), 7) **Component Library** - reusable components documented, variants (primary button, secondary button, disabled), states (default, hover, active, focus, disabled), usage guidelines, 8) **Handoff Documentation** - design specs (spacing, colors, typography), interactive behavior notes, animation specifications, responsive behavior rules, edge cases to handle, 9) **Usability Testing Plan** - test scenarios, tasks for users to complete, success criteria, questions to ask, metrics to track, 10) **Iteration Plan** - findings from testing, prioritized changes, implementation phases. Zahrň 20+ wireframe screens s annotations.
Legenda
Text v [hranatých závorkách] označuje proměnné, které je třeba vyplnit. Po vyplnění se automaticky nahradí vašimi hodnotami.
Tipy pro lepší výsledky
- Buďte konkrétní - čím detailnější zadání, tím lepší výsledky
- Používejte kontext - přidejte relevantní informace pro vaši situaci
- Experimentujte - zkuste různé varianty a porovnejte výsledky