Vizuális szándék (VIS) megfogalmazása
Day 5 of 30 · The Playbook 2026 – Mesterkurzus Designereknek
Írsz egy egymondatos, mérhető vizuális szándékot, ami minden döntésnek irányt ad.
Tanulási cél
- Megírsz egy tömör Visual Intent Statementet (hang, tonalitás, sűrűség, merészség, mozgás).
- Felállítasz 3-5 tengelyt (pl. melegség ↔ technikai, játékos ↔ komoly).
- Készítesz vizuális példákat (jó/rossz) a szándékhoz.
- Összekötöd a szándékot a tokenekkel (pl. színtartomány, tipó súlyok, mozgás-idők).
- Beépíted a Playbook elejére.
- Biztosítod, hogy minden döntésnél alkalmazod a szándékot.
Miért fontos
- Egységes irányt ad, csökkenti a vita-időt.
- Segít, hogy minden komponens ugyanazt az élményt közvetítse.
- Segít dönteni, mikor utasíts el egy trendet.
Magyarázat
Visual Intent Statement (VIS)
- 1 mondat: „A termékünk vizuális nyelve [hangulat], miközben [üzleti cél]; a [sűrűség], [merészség], [mozgás] skálán itt helyezkedik el.”
- Legyen mérhető (pl. „CTA kontraszt min. 7:1”, „animáció 150–250 ms ease-in-out”).
Tengelyek
- Melegség ↔ Technikai
- Barátságos ↔ Formális
- Sűrű ↔ Levegős
- Statikus ↔ Mozgékony
- Merész ↔ Visszafogott
Példák
Jó: „Visual Intent: barátságos-tech, levegős, visszafogott mozgás. CTA #FAB908, szöveg #111827, tipó Inter 600, spacing 8-12-16, animáció 180 ms ease.”
Rossz: „Legyen menő, startupos.” – nem mérhető, nem irány.
Gyakorlat (vezetett, 10-15 perc)
- Írd meg a VIS-t az 5 tengellyel, 1 mondatban.
- Kapcsold össze tokenekkel: fő színpár, tipó súlyok, spacing skála, animáció időzítés.
- Adj 2 vizuális példát (jó/rossz) és rövid magyarázatot.
Gyakorlat (önálló, 5-10 perc)
Mutasd meg egy fejlesztőnek a VIS-t, kérd, hogy értelmezze 1 komponensre (pl. kártya), és finomítsátok.
Önellenőrzés
- Van 1 mondatos VIS.
- A VIS összekötve tokenekkel és komponensekkel.
- Van jó/rossz példa, ami illusztrálja.
- A VIS a Playbook elején szerepel.
Opcionális mélyítés
- IDEO – Design Language: https://www.ideo.com/blog/design-language-systems
- Atlassian Voice & Tone: https://atlassian.design/foundations/voice-and-tone