Diagnostika
Mootorituli põleb või auto käitub teisiti kui varem? Alusta veaotsingust.
Küsi aega diagnostikaks →Kliendi bränd peab olema ühesugune veebis, trükises ja ikoonides.
Teenusettevõttele, kes uuendab brändi ja kodulehte korraga. · veeb, trükis, ikoonid
- ikooni
- 28
- tokenifail kõigele
- 1
- uus nisbel.ee
- Live
← Case studyCase study · brändi- ja disainisüsteem
Brändi- ja disainisüsteem
Ühe auto korraga töötava Tallinna autostuudio bränd, disainisüsteem, trükised ja uus veebileht – kõik ühest tokenifailist. Selle lehe iga plokk on interaktiivne: proovi.
- 148 KBavalehe esimene laadimine (enne 920 KB)
- −36 %lehe pikkus telefonis (14 741 → 9 438 px)
- 93tokenit ühes failis
- 25komponenti
- 28ikooni ühel joonestikul
- 5trükist samast süsteemist
Lihtsalt. Inimlikult. Ausalt.
Üks auto korraga. Üks süsteem kõigeks.
Olukord
Leht oli kompileeritud React-koopia, mida lapiti kuue skriptiga. 12 pealkirja, kaks tööprotsessi, tühjad juhtumiuuringud ja logo vale sinisega. Peapealkiri ei öelnud, et tegu on autoremondiga.
Põhimõte
Lihtsalt. Inimlikult. Ausalt. Kliendi mure enne enesekiitust, ainult kinnitatud lubadused, üks valge tegevusnupp vaate kohta ja logost tulev sinine kaldriba ainsa brändimärgina.
Tulemus
Disainisüsteem tokenitest komponentideni, viis trükist ja uus staatiline leht: kuus lehte, üks skript, üks vorm, mis koostab sõnumi ja laseb kliendil selle ise SMS-i või WhatsAppiga saata.
Logo jääb samaks. Muutub ainult taust.
Vali taust ja vaata, kas sinine „AUTOSTUUDIO“ jääb loetavaks. Lülita sisse tühja ruumi ruudustik ja vähenda suurust, kuni logo muutub loetamatuks.
2X = ½ h
Lubatud · AUTOSTUUDIO 3,4 : 1- Ära venita
- Ära muuda värve
- Ära pööra
- Ära lisa efekte
Üks tume teema. Üks aktsent.
Klõpsa värvil, et kopeerida väärtus. Kontrast arvutatakse otse siin lehel WCAG valemiga valitud tausta vastu.
Pinnad
Tekst
Bränd
Olekud
Üks kirjatüüp. Õhuke suur kiri.
Inter kõigeks. Muuda näidisteksti ja vaata, kuidas iga stiil sinu sõnadega välja näeb. Pikad eesti liitsõnad poolitatakse automaatselt.
display-xl72px / 1.05 · 300 · -0.025em
Autoremont ja diagnostika Tallinnas
heading-148px / 1.1 · 300 · -0.01em
Mis sinu autoga toimub?
title24px / 1.3 · 600 · 0
Lepime esmase kontrolli kokku
body16px / 1.6 · 400 · 0
Räägi, mida märkad, millal probleem tekib ja mida on varem tehtud.
label12px / 1.4 · 500 · 0.3em
Levinud mured
field-label12px / 1.4 · 500 · 0.12em
E-post või telefon
numeral18px / 1 · 400 · 0
01 02 03
Miks valida NisbelE-post või telefon
Sektsiooni silt 0,3em on brändi tunnus. Vormisilt sai 0,12em, et päringuvormi oleks kiire täita.
Ruum kasvab 4 px sammuga, nurgad koos elemendiga.
radius-sm8px
radius-md12px
radius-lg18px
radius-xl24px
radius-pill32px
Väli 8 px, kaart 12, protsessi rida 18, paneel 24, nupp täiesti ümar.
Komponendid, mis käituvad.
Kõik on päris: vajuta nuppe, kirjuta väljale vale telefoninumber, ava küsimus.
Nupud
Tekstiväli
Valik
Küsimus
Ei. Päring aitab töösoovi läbi rääkida. Aeg on kokku lepitud siis, kui oleme selle sinuga kinnitanud.
Tööprotsess
- 01Kirjeldad muret
- 02Lepime esmase kontrolli kokku
- 03Selgitame tulemusi
Teenuse kaart
Vajutus vastab kohe. Vabastus vetrub.
Nisbeli liikumine on kriitiliselt summutatud vedru (Apple’i damping 1,0, response 0,4): jõuab paika ilma üle hüppamata. Muuda parameetreid ja vajuta „Liiguta“.
- duration-press100ms
- duration-fast150ms
- duration-base250ms
- duration-spring600ms
- ease-outcubic-bezier(0.2, 0, 0, 1)
- ease-springlinear(0, 0.24 10%, 0.56 20%, …
28 ikooni, üks joonestik.
24 × 24, joon 2 px, ümarad otsad, värv tuleb tekstist. Otsi, vali suurus ja klõpsa, et kopeerida SVG.
Sama süsteem paberil.
Arve, saateleht ja märkmeplokk A4-l, visiitkaart 90 × 50 mm ümarate nurkadega. Klõpsa kaardil, et seda pöörata. Arvel on pangaandmete asemel näidis.
90 × 50 mm · R3 · Pööra kaarti
Vähem lehte. Rohkem päringuid.
Lohista joont: vasakul vana leht, paremal uus. Mõõdetud 17.10.2026 samas brauseris.
EnnePärast| Mõõdik | Enne | Pärast |
|---|---|---|
| Andmemaht avalehel | 920 KB | 148 KB |
| Laadimisaeg | 4–6 s | < 1 s |
| Päringud / skriptid | 25 / 10 | 5 / 1 |
| Lehe pikkus telefonis | 14 741 px | 9 438 px |
| H2-pealkirju | 12 | 6 |
Mis kliendile üle anti.
- Tokenid
- tokens.json → tokens.css, 93 tokenit
- Komponendid
- 25 HTML+CSS mustrit koos kasutusjuhisega
- Logo reeglid
- LOGO.md: versioonid, tühi ruum, taustad, keelud
- Liikumine
- MOTION.md: vedrud, vajutus, vähendatud liikumine
- Trükised
- Arve, saateleht, märkmeplokk, visiitkaart
- Veebileht
- 6 lehte, build-, kontroll- ja avaldamisskript
Tahad sama tasemega süsteemi?
RäägimeSinu süsteem
Kui vajad sarnast süsteemi, vasta päringus kolmele küsimusele:
- Mis bränd või toode see on?
- Mitu pinda (veeb, äpp, trükis …)?
- Millal peab see valmis olema?