Arculati kézikönyv
Ez a dokumentum írja le, hogyan néz ki a Bestudion, és mi az elvárás mindenkivel szemben, aki a nevében megszólal. Nem ízlés kérdése — szabályok, amiktől a márka húsz év alatt is felismerhető marad.
A név
Nem kitalált szó. Három szó egymásba tolva, megosztott betűkkel.
the best studio on the net. A „best" és a „studio" közösen birtokolja az st-t, a „studio" és az „on" pedig az o-t. Kilenc betű, három szó, plusz a domain, ami befejezi a mondatot.
Elvárás: aki a cég nevében beszél, tudja ezt a mondatot. Ez az arculat gerince, és ez az, amit egy ügyfélnek harminc másodperc alatt el lehet mondani.
A jel
Minden pötty egy világ: egy projekt vagy egy terület.
A jel egy rendszer, nem embléma. Világok keringenek a név körül, a stúdió pedig a középpont — nem külön pötty, hanem maga a név.
A pálya narancs: az a stúdió saját vonala, ami mindet összefogja. Ezért nem tűnik el a márkaszín akkor sem, ha a világok a saját színüket viszik.
Ha új projekt indul, hozzáadunk egy pöttyöt. A logó nem elavul — nő. Öt világ fölött viszont favicon-méretben összefolyik, ezért a jelben maximum hat lehet. A jel nem leltár.
Négy hivatalos változat
Más nincs. Ha egy felülethez egyik sem jó, előbb kérdezz.
Méret és védőtávolság
140 pixel a határ. Ez alatt a „tudion" vékony szára szétesik, és a legkisebb világok pontokká zsugorodnak. Onnantól nem kicsinyítünk tovább — átváltunk a jelre, felirat nélkül.
Védőtávolság: a jel körül minden irányban legalább akkora üres sáv, mint a legnagyobb világ átmérője. Szöveg, keret, másik logó ide nem lóg be.
Kis méretben a pálya elmarad — 64 px alatt a vékony vonal csak zajt csinál, a méretkülönbség önmagában elég a mélységhez.
Mozgás
Két külön dolog: a folyamatos keringés és az egyszer lefutó névtörténet.
Keringés — mindig megy
| Paraméter | Érték | Miért |
|---|---|---|
| Fordulat | 24 mp | Lassabb, mint amit a szem követni akar. Jelen van, nem vonja el a figyelmet. |
| Dőlés | 1 : 0.32 | Laposabbnál csíkká válik, kerekebbnél elveszik a nézőpont. |
| Mélység-skála | 0.45 – 1.55× | Ez adja a térbeliséget, nem az árnyék. |
| Fedettség | 0.35 – 1.00 | A hátsó világ halványabb. |
| Rétegzés | hátul a felirat mögé | Enélkül a szó nem a rendszer közepén van, csak előtte. |
| Sebesség | linear | Bolygók nem gyorsulnak. Az „ease" itt hazugság lenne. |
Névtörténet — ritkán
| Idő | Történik |
|---|---|
| 0,30 – 1,10 | best kiemelve |
| 1,10 – 1,90 | studio — az st nem vált, mindkettőhöz tartozik |
| 1,90 – 2,60 | on — az o marad |
| 2,60 – 3,30 | .net |
| 3,30 – | nyugalmi állapot; a keringés megy tovább |
A bestudion.net végig teljesen látszik. Csak a
vastagság és a szín vándorol rajta — semmi nem jelenik meg és semmi nem tűnik el.
Mikor fut: első látogatáskor egyszer, utána 30 napig nem.
Csak a nyitóoldalon. prefers-reduced-motion esetén soha.
Prezentáció-nyitóban és videó-főcímben mindig, mert ott új közönség ül előtte.
Alapszínek
A narancs az eredeti logóból mérve. A szürkék hidegre hangoltak, hogy a narancs mellett ne szürküljenek be.
A leggyakoribb hiba a narancs szövegként. A #EE7203
fehéren csak 3.0:1 — az akadálymentességi minimum 4.5:1. Nagy címsorban
elmegy, futó szövegben nem. Erre való a #A85200.
Projektszínek
Egy világ, egy szín. A hat szín egyenletesen osztja a színkört, azonos telítettségen és világosságon — ezért néznek ki családként, nem szivárványként.
| Projekt | Hex | Hue | Kontraszt | Mi ez | |
|---|---|---|---|---|---|
| bestudion | #EE7203 | 28° | — | a stúdió — pálya, kiemelés | |
| keygen | #2C7B52 | 148° | 5.2 : 1 | licencelés | |
| vitrio | #16718F | 200° | 5.6 : 1 | SaaS · kirakat | |
| mirroros | #5D4B9E | 262° | 7.0 : 1 | eszköz · okostükör | |
| fenntartott | #96368A | 320° | 6.1 : 1 | a következő projekt | |
| restora | #B33246 | 352° | 6.2 : 1 | SaaS · vendéglátás |
Alkategória-változatok
Minden projekthez van saját jel: az ő világa színben és előtérben, a többi semlegesben.
A méret nem rangsor. A kiemelt világ azért nagyobb, mert ő van fókuszban — nem azért, mert fontosabb.
Tipográfia
Egy groteszk, két súly. Középső súlyt nem használunk — attól lesz mosódott.
| Szerep | Súly | Méret | Betűköz |
|---|---|---|---|
| Címsor | 700 | 28–40 pt | −0.03em |
| Alcím | 300 | 18–22 pt | −0.015em |
| Futó szöveg | 300 | 9.5–11 pt | 0 |
| Kiemelés | 700 | ugyanaz | 0 |
| Címke, adat | mono 400 | 7–8 pt | +0.1em |
| Szóvédjegy | 700 + 300 | — | −0.037em |
Betűtípus-elvárás: semleges groteszk, ami a román ș
és ț betűket is rendesen rajzolja (vesszővel, nem cedillával).
Ideális egy variable font — akkor a mozgó változatban a súly
folyamatosan át tud menni, nem ugrik.
Amit soha
Hat konkrét tiltás. Mindegyik azért van, mert valaki előbb-utóbb megpróbálja.
Ne torzítsd. Csak arányos méretezés.Ne színezd át. A narancs a márka.Ne tegyél rá árnyékot vagy színátmenetet.Ne tedd nyugtalan háttérre. Sima felület kell.A projektszínes változat nem az elsődleges. Számlán, szerződésen monokróm.A jel önmagában csak 140 px alatt, vagy ott, ahol a név úgyis szerepel mellette.Használati szabályok
Enélkül a projektszínek szétverik a márkát ahelyett, hogy építenék.
| Hol | Melyik | Miért |
|---|---|---|
| bestudion.net | narancs + grafit | A stúdió oldalán a projektszínek vendégek, nem gazdák. |
| Projekt saját oldala | a projekt színe vezet | Narancs csak a lábléc-aláírásban: „egy bestudion projekt". |
| Portfólió, felsorolás | mind a hat | Itt mutatja meg magát a rendszer. |
| Számla, szerződés | csak monokróm | Itt a cég szerepel, nem a termék. |
| Favicon, app-ikon | a saját projektszín | Több fül nyitva: a szín különbözteti meg őket. |
| Hibaüzenet | szemantikus szín | A piros ott „baj", nem „restora". |
| E-mail aláírás | statikus, monokróm | Animáció soha — sok kliens nem is játssza le. |
Elvárások
- A jelet soha nem rajzoljuk újra — a mellékelt SVG-ket használjuk.
- A szóvédjegyet nem gépeljük be kézzel máshova; a súlyozás és a narancs
irésze a jelnek. - Új projekt = új szín a színkörön, legalább 40°-ra a meglévőktől, azonos telítettségen.
- Ha egy felülethez egyik változat sem passzol, az nem ok új változat gyártására — előbb kérdés.
- A
restorakarminja közel van a hibapiroshoz. Ahol sok a hibaüzenet, a szemantikus pirosat kell sötétebbre venni, nem a márkaszínt.
Történet
A Bestudion 2010-ben jött létre. Az arculat azóta kétszer változott — a mostani a harmadik.
Az első két logó forrásfájlja (.psd) megvan az archívumban.
Az arculatváltás nem tagadja meg őket: a narancs és a
pöttyök mindkettőből származnak.
Letöltés
Minden fájl vektoros, ahol lehet. A PNG-k átlátszó háttérrel.
