Web-komponensek.
Minden felület ugyanabból a néhány elemből épül: fejezet-jelölő, cím, egy-két mondat, egy doboz vagy kártya, és egy következő lépés. Az elemek itt élőben, a site saját osztályaival.
Szekció-fej
Hol tart a márkád?
Egy bevezető mondat a cím alatt, legfeljebb 680 px szélesen.
Cikk-dobozok
A cikk elején Röviden, a végén Mit vigyél haza és Következő lépés.
Minden cikk tetején két-három mondat: mit tudsz meg, és miért fontos neked. Ezt idézik az AI-asszisztensek is.
A Brandpedia-szócikkek emberi nyelvű magyarázata, szakszó nélkül, egy hétköznapi példával.
- A márkád a vevőd fejében él.
- A logó a jele, nem a márka.
- Írd le, kinek szólsz.
A cikk végén: egy kérdés a saját cégedre, amit a brandguide/AI-nak feltehetsz.
GYIK
Mennyibe kerül egy logó?
A lenyíló sor kérdése Bold, a válasz Light. A „+” jel ezüst.
Kell-e brandbook egy kis cégnek?
Igen, de egy oldal is elég.
Sötét blokk
A fő döntésnél, ár és CTA mellett. Egy oldalon legfeljebb egyszer-kétszer.
Tedd rendbe a márkádat.
Négy óra Petivel, élőben, legfeljebb 15 fővel.
brandguide/AI-sáv
Minden oldal alján lebeg, 20 px-re az aljától. Az egyetlen árnyékos elem.
Hírlevél-űrlap
Designer vagy? A yellow magazin a tiéd.
Összes komponens
| Komponens | Mire | Szabály |
|---|---|---|
| Szekció-fej (SectionHead) | Minden szekció eleje | Fejezet-jelölő, Bold cím Light kiemeléssel, egy bevezető mondat |
| Röviden (.box) | Cikk teteje | Két-három mondat: mit tudsz meg, és miért fontos neked |
| Közérthetően (.box) | Brandpedia-szócikk | Szakszó nélkül, egy hétköznapi példával |
| Mit vigyél haza (.box) | Cikk vége | 3-5 pont, sárga pöttyel |
| Következő lépés (NextStep) | Cikk vége | Halványsárga doboz, egy kérdés a brandguide/AI-nak |
| GYIK (.faq) | Cikk és landing vége | Lenyíló sorok |
| Cikk-kártya (PostCard) | Listák, hubok | Kép 8 px sarokkal, cím, téma-címke; új cikknél az L-illusztráció kártya-változata (360 px) |
| Témakártya (TopicHub) | /temak/ | M-ábra 96 px (a hub fejlécében 128 px), téma neve |
| AI-sáv (FloatingAi) | Minden oldal | Lebegő mező, az egyetlen árnyék |
| Hírlevél-űrlap (NewsletterForm) | Főoldal, /hirlevel/, cikk vége | Mező a gombbal, alatta a „Designer vagy?” sor |
| Sötét blokk | Fő döntés, ár, CTA | Tinta háttér, 14 px, fehér vagy sárga gomb |
| „Hol tartasz?” ajtók | Főoldal, /kezdd-itt/ | Három kártya P1, P2, P3 állapotával, kertes M-ábrával (főoldal 96, /kezdd-itt/ 128 px) |
| Top 5 doboz | Főoldal hero | Halványsárga doboz, fejlécében M-ábra 72 px |