feat(wds): Revise WDS presentation documentation for clarity and engagement
Updated the WDS presentation documentation to enhance clarity and user engagement. Key changes include revised content for various phases, improved descriptions with actionable links, and updated titles to better reflect the focus of each phase. This update aims to empower designers by providing clearer guidance and resources throughout the design workflow.
This commit is contained in:
Mårten Angner
parent
2cdf7b4d4e
commit
a3c51fa228
|
|
@ -94,78 +94,78 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
|||
**OBJECT ID**: `wds-capabilities-headline`
|
||||
- **Component**: H2 heading
|
||||
- **Content:**
|
||||
- **EN:** "What You Can Create with WDS"
|
||||
- **EN:** "What You Will be ablet to Craccomplish with WDS"
|
||||
- **Rationale**: Direct, action-oriented, focuses on designer capability
|
||||
|
||||
#### Introduction Text
|
||||
**OBJECT ID**: `wds-capabilities-intro`
|
||||
- **Component**: Body paragraph
|
||||
- **Content:**
|
||||
- **EN:** "Each phase produces professional deliverables that guide your project from concept from idea to implementation. In the WDS documentaion you find tutorials, example documents, and step-by-step guidance for creating each artifact with AI agent support."
|
||||
- **Rationale**: Sets expectations, explains the links lead to learning resources, emphasizes support available
|
||||
- **EN:** "With the help of the WDS agents you will be able to deliver both strategy and design and utilize your design skills to get a seat at the table."
|
||||
- **Rationale**: Empowers designers with strategic positioning, emphasizes designs as powerful prompts for development
|
||||
|
||||
#### Phase 1: Win Client Buy-In
|
||||
**OBJECT ID**: `wds-capability-phase-1`
|
||||
- **Component**: Capability card
|
||||
- **Icon**: 🎯 (target/presentation)
|
||||
- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized presentation board. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle."
|
||||
- **Content:**
|
||||
- **Title (EN):** "Win Client Buy-In"
|
||||
- **Description (EN):** "Present your vision in business language that stakeholders understand. Get everyone aligned on goals, budget, and commitment before you start. Stop projects from dying in "maybe" meetings. Saga helps you articulate value and create professional agreements."
|
||||
- **Output (EN):** "→ [Project Pitch](https://github.com/whiteport/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/project-pitch.md) & [Service Agreement](https://github.com/whiteport/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/service-agreement.md)"
|
||||
- **Description (EN):** "Present your vision in business language that stakeholders understand. Get everyone aligned on goals, budget, and commitment before you start.<br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/project-pitch.md">More about the Project Pitch</a></b><br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/service-agreement.md">More about the Service Agreement</a></b>"
|
||||
|
||||
#### Phase 2: Define Your Project
|
||||
#### Phase 2: Project Clarity & Direction
|
||||
**OBJECT ID**: `wds-capability-phase-2`
|
||||
- **Component**: Capability card
|
||||
- **Icon**: 📋 (clipboard/document)
|
||||
- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized compass/north star symbol. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle."
|
||||
- **Content:**
|
||||
- **Title (EN):** "Define Your Project"
|
||||
- **Description (EN):** "Get crystal clear on what you're building, who it's for, and why it matters. Create a strategic foundation that guides every design decision. No more scope creep or confused teams. This brief becomes your north star when things get messy."
|
||||
- **Output (EN):** "→ [Product Brief](https://github.com/whiteport/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/product-brief.md)"
|
||||
- **Title (EN):** "Project Clarity & Direction"
|
||||
- **Description (EN):** "Get crystal clear on what you're building, who it's for, and why it matters. Create a strategic foundation that guides every design decision.<br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/product-brief.md">More about the Product Brief</a></b>"
|
||||
|
||||
#### Phase 3: Map Business Goals to User Needs
|
||||
**OBJECT ID**: `wds-capability-phase-3`
|
||||
- **Component**: Capability card
|
||||
- **Icon**: 🗺️ (map/compass)
|
||||
- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized network of connected nodes or a bridge connecting two points, representing mapping and connection. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle."
|
||||
- **Content:**
|
||||
- **Title (EN):** "Map Business Goals to User Needs"
|
||||
- **Description (EN):** "Connect what the business wants to what users actually need. Identify the emotional triggers and pain points that make your design work. Stop guessing and start designing with psychological insight. Cascade helps you create personas grounded in real driving forces."
|
||||
- **Output (EN):** "→ [Trigger Map & Personas](https://github.com/whiteport/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/trigger-map.md)"
|
||||
- **Description (EN):** "Connect what the business wants to what users actually need. Identify the emotional triggers and pain points that drive behavior and design with psychological insight.<br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/trigger-map.md">More about the Trigger Map & Personas</a></b>"
|
||||
|
||||
#### Phase 4: Architect the Platform
|
||||
**OBJECT ID**: `wds-capability-phase-4`
|
||||
- **Component**: Capability card
|
||||
- **Icon**: 🏗️ (building/architecture)
|
||||
- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized foundation or building blocks representing technical foundation. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle.."
|
||||
- **Content:**
|
||||
- **Title (EN):** "Architect the Platform"
|
||||
- **Description (EN):** "Define the technical foundation, data structure, and system architecture. Make smart decisions about what to build and how it fits together. Bridge the gap between design vision and technical reality. Idunn helps you think through the platform without getting lost in code."
|
||||
- **Output (EN):** "→ [Platform PRD & Architecture](https://github.com/whiteport/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/platform-prd.md)"
|
||||
- **Title (EN):** "Nail Down the Platform Requirements"
|
||||
- **Description (EN):** "Define the technical foundation, data structure, and system architecture. Make smart decisions about what to build and how it all fits together seamlessly.<br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/platform-prd.md">More about the Platform PRD & Architecture</a></b>"
|
||||
|
||||
#### Phase 5: Design the Experience
|
||||
**OBJECT ID**: `wds-capability-phase-5`
|
||||
- **Component**: Capability card
|
||||
- **Icon**: 🎨 (palette/design)
|
||||
- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized design pen tool or cursor on a canvas/frame, representing UX design. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle."
|
||||
- **Content:**
|
||||
- **Title (EN):** "Design the Experience"
|
||||
- **Description (EN):** "Turn sketches into complete specifications with interactive prototypes. Capture not just WHAT it looks like, but WHY you designed it that way. Preserve your design intent from concept to code. Freyja helps you create specifications that developers actually understand and respect."
|
||||
- **Output (EN):** "→ [Page Specifications & Prototypes](https://github.com/whiteport/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/page-specifications.md)"
|
||||
- **Description (EN):** "Turn sketches into complete specifications with interactive prototypes. Capture not just what it looks like, but why you designed it that way and preserve your intent.<br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/page-specifications.md">More about Page Specifications & Prototypes</a></b>"
|
||||
|
||||
#### Phase 6: Build Your Design System
|
||||
**OBJECT ID**: `wds-capability-phase-6`
|
||||
- **Component**: Capability card
|
||||
- **Icon**: 🧩 (puzzle pieces/system)
|
||||
- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows stylized modular components or a grid pattern representing a design system. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle."
|
||||
- **Content:**
|
||||
- **Title (EN):** "Build Your Design System"
|
||||
- **Description (EN):** "Extract reusable components, patterns, and design tokens from your pages. Create consistency across your entire product without starting from scratch every time. Scale your design decisions efficiently. Stop reinventing buttons and start building systems."
|
||||
- **Output (EN):** "→ [Component Library & Design Tokens](https://github.com/whiteport/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/design-system.md)"
|
||||
- **Description (EN):** "Extract reusable components, patterns, and design tokens from your pages. Create consistency across your entire product without starting from scratch every time.<br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/design-system.md">More about the Component Library & Design Tokens</a></b>"
|
||||
|
||||
#### Phase 7: Hand Off to Developers
|
||||
**OBJECT ID**: `wds-capability-phase-7`
|
||||
- **Component**: Capability card
|
||||
- **Icon**: 📦 (package/delivery)
|
||||
- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized package or box with an arrow indicating transfer/delivery. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle."
|
||||
- **Content:**
|
||||
- **Title (EN):** "Hand Off to Developers"
|
||||
- **Description (EN):** "Package everything developers need in organized PRD documents with epics and stories. No more "what did you mean by this?" meetings. No more guesswork or lost design intent. Idunn creates implementation guides that turn your specs into buildable tasks."
|
||||
- **Output (EN):** "→ [Design Delivery PRD](https://github.com/whiteport/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/design-delivery-prd.md)"
|
||||
- **Description (EN):** "Package everything developers need in organized PRD documents with epics and stories. No more guesswork or lost design intent during implementation.<br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/design-delivery-prd.md">More about the Design Delivery PRD</a></b>"
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,114 @@
|
|||
# WDS Presentation Page - Icon Generation Prompts
|
||||
|
||||
## Base Style Specifications
|
||||
|
||||
**Color Palette:**
|
||||
- Primary: White (#FFFFFF) for main icon elements
|
||||
- Accent: Whiteport Red (#EA345D) for strategic highlights
|
||||
- Background: Transparent
|
||||
|
||||
**Style Guidelines:**
|
||||
- Simplistic, modern, geometric design
|
||||
- Clean lines, minimal details
|
||||
- Matching Whiteport logo aesthetic (bold, confident, professional)
|
||||
- Icon size: 128x128px (high resolution)
|
||||
- Monochrome with single red accent element per icon
|
||||
- Flat design, no gradients or shadows
|
||||
- PNG format with transparent background
|
||||
|
||||
---
|
||||
|
||||
## Phase 1: Win Client Buy-In
|
||||
|
||||
**Icon Concept:** Presentation/Target/Handshake
|
||||
|
||||
**Generation Prompt:**
|
||||
|
||||
"Create a minimalist icon in white monochrome with a single red accent element. The icon shows a presentation board or target symbol with an arrow hitting bullseye. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic. White main elements on transparent background with one strategic red accent (the bullseye or arrow tip). 128x128px, PNG format with transparent background."
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: Define Your Project
|
||||
|
||||
**Icon Concept:** Document/Compass/North Star
|
||||
|
||||
**Generation Prompt:**
|
||||
|
||||
"Create a minimalist icon in white monochrome with a single red accent element. The icon shows a document or blueprint with a compass/north star symbol. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic. White main elements on transparent background with one strategic red accent (the north star point or compass needle). 128x128px, PNG format with transparent background."
|
||||
|
||||
---
|
||||
|
||||
## Phase 3: Map Business Goals to User Needs
|
||||
|
||||
**Icon Concept:** Map/Connection Network/Bridge
|
||||
|
||||
**Generation Prompt:**
|
||||
|
||||
"Create a minimalist icon in white monochrome with a single red accent element. The icon shows a network of connected nodes or a bridge connecting two points, representing mapping and connection. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic. White main elements on transparent background with one strategic red accent (central node or connection point). 128x128px, PNG format with transparent background."
|
||||
|
||||
---
|
||||
|
||||
## Phase 4: Architect the Platform
|
||||
|
||||
**Icon Concept:** Building Blocks/Foundation/Blueprint Grid
|
||||
|
||||
**Generation Prompt:**
|
||||
|
||||
"Create a minimalist icon in white monochrome with a single red accent element. The icon shows a foundation or building blocks structure, representing technical architecture. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic. White main elements on transparent background with one strategic red accent (cornerstone block or central structural element). 128x128px, PNG format with transparent background."
|
||||
|
||||
---
|
||||
|
||||
## Phase 5: Design the Experience
|
||||
|
||||
**Icon Concept:** Pen Tool/Cursor/Canvas Frame
|
||||
|
||||
**Generation Prompt:**
|
||||
|
||||
"Create a minimalist icon in white monochrome with a single red accent element. The icon shows a design pen tool or cursor on a canvas/frame, representing UX design. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic. White main elements on transparent background with one strategic red accent (pen tip or cursor arrow). 128x128px, PNG format with transparent background."
|
||||
|
||||
---
|
||||
|
||||
## Phase 6: Build Your Design System
|
||||
|
||||
**Icon Concept:** Component Grid/Modular Blocks/System Pattern
|
||||
|
||||
**Generation Prompt:**
|
||||
|
||||
"Create a minimalist icon in white monochrome with a single red accent element. The icon shows modular components or a grid pattern representing a design system. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic. White main elements on transparent background with one strategic red accent (one highlighted module or grid intersection). 128x128px, PNG format with transparent background."
|
||||
|
||||
---
|
||||
|
||||
## Phase 7: Hand Off to Developers
|
||||
|
||||
**Icon Concept:** Package/Arrow Transfer/Handoff Symbol
|
||||
|
||||
**Generation Prompt:**
|
||||
|
||||
"Create a minimalist icon in white monochrome with a single red accent element. The icon shows a package or box with an arrow indicating transfer/delivery. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic. White main elements on transparent background with one strategic red accent (arrow or delivery indicator). 128x128px, PNG format with transparent background."
|
||||
|
||||
---
|
||||
|
||||
## Usage Instructions
|
||||
|
||||
1. Use these prompts with AI image generators (Midjourney, DALL-E, or Stable Diffusion)
|
||||
2. For Midjourney, add: `--style raw --v 6` for cleaner results
|
||||
3. Ensure PNG format with transparent background
|
||||
4. Verify red accent color matches Whiteport brand (#EA345D)
|
||||
5. Icons should be 128x128px high resolution
|
||||
|
||||
---
|
||||
|
||||
## File Naming and Location
|
||||
|
||||
**Save generated icons to:**
|
||||
`/docs/4-scenarios/1.1-wds-presentation/icons/`
|
||||
|
||||
**Naming Convention:**
|
||||
- `phase-1-win-client-buy-in.png`
|
||||
- `phase-2-define-project.png`
|
||||
- `phase-3-map-goals-needs.png`
|
||||
- `phase-4-architect-platform.png`
|
||||
- `phase-5-design-experience.png`
|
||||
- `phase-6-build-design-system.png`
|
||||
- `phase-7-hand-off-developers.png`
|
||||
|
||||
Loading…
Reference in New Issue