Was ist enthalten

Eine SKILL.md (die Anleitung) + eine Startvorlage. Eine Vorschau:

Playful UI/UX Portfolio

When to use

• You are a UI/UX designer whose work is colorful, characterful, and fun, but your portfolio reads like everyone else's grid of screenshots
• You are applying for product design roles and need hiring managers to see your process, not just your finished screens
• Your portfolio has 15 projects and no case studies, or 2 case studies that each run 3,000 words nobody finishes
• You want the site itself to prove the playfulness — micro-interactions, tone, and layout — while staying fast and readable
• You are rebuilding your portfolio from scratch and want a structure you can fill in project by project, not a template you have to fight

Workflow

1. Define the promise (input: your work + target roles → output: positioning statement)
   Write one paragraph: who you design for, what kind of problems you love, and what makes your approach different — in your own voice, with the playfulness turned up to the level you actually want to be hired for. Name the roles you are targeting (product designer, interaction designer, design systems with personality) and the 3–5 projects that best prove the promise. Everything that does not support the promise gets cut or demoted: a portfolio is an argument, not an archive.
2. Structure the site (input: positioning statement → output: site map + homepage flow)
   Plan five sections: Home (promise + 3 best projects + one line of personality), Work (all projects, scannable, filterable by type), Case studies (2–4 deep dives), About (photo, story, tools, what you are looking for), Contact (one clear way to reach you). On the homepage, order matters: promise first, proof second, personality third — a visitor should understand what you do within five seconds and see your best work within two scrolls. Sketch the homepage as blocks with sizes before writing any copy; if the blocks do not sell the promise, the copy will not save them.
3. Shape each case study (input: project materials → output: case study outlines)
   Give every featured project the same spine: Problem (one paragraph, whose pain and why it mattered), Constraints (time, platform, team, technical limits — constraints are where craft shows), Process (3–5 key decisions, each with the options you weighed and why you chose), Outcome (what shipped, what changed, with honest numbers or honest qualitative evidence), What I would do differently (one paragraph — hiring managers trust this more than any success claim). Keep each case study to 600–900 words plus images: long enough to show thinking, short enough to finish. For non-featured projects, write a 2–3 sentence card instead — a small portfolio that is finished beats a big one that is half-empty.
4. Design the playfulness (input: site map + case studies → output: interaction + visual spec)
   Specify where the fun lives and where it does not: playful on hover states, page transitions, the 404 page, section headers, and the About page; disciplined on case study body text, navigation, and forms. List the concrete interactions (a cursor that winks, cards that tilt, a toggle that switches the site's mood) with their trigger, motion, and fallback for reduced-motion preferences. Set the rules: motion under 300ms, always respects the visitor's reduced-motion setting, never blocks reading, never autoplays sound. Playfulness that a visitor can turn off — or that turns itself off for them — is craft; playfulness that traps them is a gimmick.
5. Write the copy and the launch checklist (input: everything above → output: full site copy + checklist)
   Write every word: homepage promise, project cards, case studies, About, contact, button labels, alt text for every image, and the meta description. Read it aloud and cut jargon, then check the launch list: mobile layout, load time, links all working, contact form tested end to end, images compressed, alt text present, reduced-motion respected, one analytics check, and a friend's five-second test ("what do I do?"). Ship when the checklist passes — a live portfolio with three strong case studies beats a perfect one that stays in drafts.

Vorschau der Startvorlage

Playful UI/UX Portfolio — Build Planner

One portfolio, one argument. Fill this in before building any pages.

Positioning statement

Who I design for: {…} Problems I love: {…} What makes my approach different: {…} (in my own voice, playfulness at the level I want to be hired for) Target roles: {e.g. product designer / interaction designer} Proof projects (3–5): {1} / {2} / {3}

Cut list (does not support the promise): {…}

Site map

Homepage block flow: promise → proof → personality Five-second test: a visitor understands what I do in 5 seconds — [ ] tested with a friend

Case study template (repeat per featured project, 600–900 words + images)

Das Skill-Paket selbst (SKILL.md + Vorlage) ist auf Englisch verfasst.

Das komplette Skill-Paket kaufen — $4.99 Pro — alle 511 Skills