Manuál vizuálního. stylu. We Make

We Make IT Beautiful

Verze 1.0 | 2013

Manuál vizuálního stylu

Obsah

1.0 Logotyp 1.0.1 Logotyp 1.0.2 Rozkres 1.0.3 Primární barevnost 1.0.4 Sekundární barevnost 1.0.5 Bezpečnostní zóna 1.0.6 Optický střed 1.0.7 Minimální rozměry

4 5 6 6 7 7 7

2.0 Symbol 2.0.1 Primární barevnost 2.0.2 Sekundární barevnost 2.0.3 Bezpečnostní zóna 2.0.4 Optický střed 2.0.5 Minimální rozměry

8 8 9 9 9

3.0 Barvy vizuálního stylu 3.0.1 Definice 3.0.2 Poměry 4.0 Korporátní typografie 4.0.1 Primární písmo 4.0.2 Sekundární (doplňková) písmo 5.0 Mřížka 5.0.1 Provedení 5.0.2 Rozkres

10 11 12 – 13 12 – 13 14 15

6.0 Tiskové aplikace 6.0.1 Krycí list – A 6.0.2 Krycí list – B 6.0.3 Provedení 6.0.4 Rozkres

16 17 18 – 19 20 – 21

6.1 Digitální aplikace 6.1.1 Obálka – provedení 6.1.2 Obálka – rozkres 6.1.3 Vnitřní layout 6.1.4 Animace – provedení 6.1.5 Animace – rozkres

22 23 24 – 25 26 – 27 28 – 29

6.2 Další aplikace 6.2.1 Fontai van 6.2.2 Rollup 6.2.3 Plakáty & billboardy 6.2.4 Lily Fontai

30 – 31 32 33 34 – 35

7.0 Zakázané operace

36 – 37

8.0 Ukázky základních aplikací

38 – 3 9

9.0 Poznámky

40 – 41

1.0.1

Logotyp

STRANA 4

Vlastní logotyp je základní a zároveň minimální jednotkou vizuálního stylu Fontai. Užití samotného loga v povoleném barevném schématu tvoří i bez jakéhokoliv dalšího prvku identity vlastní brand. K užití loga zcela samostatně, bez doprovodných prvků, by však mělo docházet spíše výjimečně a pouze tehdy, nepřipadá-li jiná varianta v úvahu (například je-li logo užíváno v kontextu jiného subjektu či brandu).

Logotyp

1.0 STRANA 5

a ½e

d

g

c

g

c

3f b

1.0.2 Rozkres

½c d

d

½e 60°

d

c

60°

d

½b

d

d

d

d

d

d

g

a

d

c

g

d

d f

c

e

b

d d

a

½c

c

d

d

c+g

d

c

c

½c d d d

d

½c

d

c+g

d

d

Základním stavebním prvkem loga je ohyb stuhy, kde poměr mezi kružnicemi definujícími zaoblenost hrany a šířkou stuhy je „zlatý“. Pomocí tohoto principu je konstruován celý logotyp, který i pro definování všech ostatních vnitřních vztahů využívá stále stejnou posloupnost. Geometrická definice slouží k přesnějšímu pochopení konstrukce logotypu, které se může hodit při práci s ním. Slouží také jako reference, například pro kontrolu vyrobené fyzické světelné reklamy či objektů ve tvaru loga. V žádném případě však není určen ke zpětné rekonstrukci logotypu: vždy pracujeme jen s původními dodanými daty.

c

c

Logotyp je principiálně tvořen idealizovanou stuhou při vynechaném stínování. Geometricky a kompozičně vychází z matematických vztahů definovaných Fibonacciho posloupností.

d

1.0

Logotyp

STRANA 6

Jak již bylo řečeno v kapitole 1.0, ačkoliv logotyp bez zbylých doprovodných prvků není ekvivalentem pro vizuální identitu, jedná se o její základní a zároveň minimální aplikaci. V případech kdy je tedy použití samotného logotypu, vytrženého z kontextu zbytku vizuální identity, jedinou možnou variantou, pracujeme s ním dle následujících, předepsaných pravidel.

1.0.3 Primární barevnost Základním barevným schématem je vždy bílé logo na černém podkladu (podrobné definice barev, viz kapitola 3.0). Zatímco barva pozadí se může měnit a v určitých případech dokonce lišit od definovaných barev vizuálního stylu (například při použití loga jakožto sponzora na plakátu, či letáku), barva loga samotného by se od definovaných variant neměla lišit prakticky nikdy. Jedinou výjimkou, kdy je možné změnu barevnosti tolerovat, je při použití v patičce cizího webu (a to pouze v případech, kdy by stanovená základní barevnost narušovala vizuální jednotu webu).

1.0.4 Sekundární barevnost Pro použití loga na bílém či světlém pozadí volíme jeho černou variantu (podrobné definice barev, viz kapitola 3.0). Jedná se o méně preferované schéma, avšak v určitých případech si jej okolnosti mohou vynutit.

Logotyp

1.0 STRANA 7

x

1.0.5 Bezpečnostní zóna

y

Bezpečnostní zóna určuje minimální (nikoliv optimální, ten bývá zpravidla větší) odstup logotypu od dalšího obsahu (text, obrázky, grafika, prvky webu atd.), případně od okraje formátu.

y

Bezpečnostní zóna je definovaná rozměrem x (šířka střední části písmene „f“ ve slově „fontai“) a rozměrem y (šířka volného prostoru uprostřed písmene „o“ ve slově „fontai“. Konkrétní použití zmíněných rozměrů zobrazuje sousedící nákres.

x x

x

1.0.6 optický střed

w w

v

v

Optický střed je užitečný ke kompozičně správnému umístění loga na formát. Kvůli kompenzaci horní dotažnice písmene „t“, které je jediným písmenem logotypu přesahujícím střední výšku ostatních písmen, se nenachází ve skutečném středu objektu, ale o něco níže. Optický střed je tak průsečíkem horizontály procházející prostředkem střední výšky písma a vertikály procházející skutečným horizontálním středem logotypu.

1.0.7 MINIMÁLNÍ ROZMĚRY Pro tisk v 300 dpi a dig. zobrazení v 72 dpi A) Bílé logo na tmavém podkladě TISK: šířka ≥ 8 mm DIGITÁLNÍ: šířka ≥ 55 px B) Černé logo na světlém podkladě TISK: šířka ≥ 8 mm DIGITÁLNÍ: šířka ≥ 55 px

2.0

Symbol

STRANA 8

Symbol Fontai je jakousi “minimální verzí” loga a jako taková by se měla používat pouze v případech, kdy je s ohledem na technologická omezení vyloučeno použití logotypu. Mezi obligátní případy použití značky patří například ikonografie (favikona, ikona mobilní aplikace) kde je technologické omezení stanovené nedostatečným prostorem a rozlišením, nebo 3D výstupy, u nichž je potřeba, aby výsledný produkt byl v jednom kuse.

2.0.1 Primární barevnost Základním barevným schématem je vždy bílý symbol na černém podkladu (podrobné definice barev, viz kapitola 3.0). Zatímco barva pozadí se může měnit a v určitých případech dokonce lišit od definovaných barev vizuálního stylu (například při použití značky jakožto sponzora na plakátu, či letáku), barva symbolu samotného by se od definovaných variant neměla lišit prakticky nikdy. Jedinou výjimkou, kdy je možné změnu barevnosti tolerovat je při použití v patičce cizího webu (a to pouze v případech, kdy by stanovená základní barevnost narušovala vizuální jednotu webu).

2.0.2 Sekundární barevnost Pro použití symbolu na bílém či světlém pozadí volíme jeho černou variantu (podrobné definice barev, viz kapitola 3.0). Jedná se o méně preferované schéma, avšak v určitých případech si jej okolnosti mohou vynutit.

SYMBOL

2.0 STRANA 9

2.0.3 Bezpečnostní zóna

2x

Bezpečnostní zóna určuje minimální (nikoliv optimální, ten bývá zpravidla větší) odstup symbolu od dalšího obsahu (text, obrázky, grafika, prvky webu atd.), případně od okraje formátu.

x

Bezpečnostní zóna je definovaná rozměrem x. Ten odpovídá polovině rozměru 2x (šířka stěny symbolu od jejího úplného levého okraje k mezeře v jeho středu). Konkrétní použití zobrazuje sousedící nákres.

x x

x

2.0.4 Optický střed

z

Optický střed je užitečný ke kompozičně správnému umístění značky na formát. Vzhledem k absolutní symetrii značky se však nachází v jejím skutečném středu a při umisťování do formátu tak, na rozdíl od logotypu, není nutné jej bezpodmínečně konstruovat či určovat.

z

z

z

2.0.5 Minimální rozměry Pro tisk v 300 dpi a dig. zobrazení v 72 dpi A) Bílé logo na tmavém podkladě TISK: šířka ≥ 3 mm DIGITÁLNÍ: šířka ≥ 10 px B) Černé logo na světlém podkladě TISK: šířka ≥ 3 mm DIGITÁLNÍ: šířka ≥ 10 px

3.0.1

Barvy vizuálního stylu – definice

STRANA 10

Barvy užívané ve vizuální komunikaci jsou pravděpodobně vůbec nejvýraznějším rozlišovacím a určujícím prvkem vizuální identity. Jejich dodržování je tedy přirozeně klíčové pro budování a udržování této identity. V reklamních kampaních lze použít i barvy jiné či odvozené, avšak vždy je třeba pečlivě zvažovat, zda tento krok nenarušuje snadnou identifikovatelnost a rozeznatelnost. Kompletní změna barevného schématu je pak prakticky ve všech případech nepřípustná: určující barvy (černou a bílou, případně modrou a červenou) by návrh měl obsahovat vždy.

Fontai černá – tisk

Fontai černá – digitální

PANTONE Process Black CMYK A 0 | 0 | 0 | 100 * CMYK B 20 | 20 | 0 | 100 **

RGB 0 | 0 | 0 HSB 0 | 0 | 0 HEX #0000000

* Pro drobné plochy: text, linky a pod. ** Pro větší tištěné plochy

Bílá – tisk

Bílá – digitální

Pro přímý tisk bílou barvou na černý podklad (ofset, sítotisk a pod.) použijeme u větších ploch podtisk stříbrnou barvou, jež zajistí lepší krytí.

RGB 255 | 255 | 255 HSB 0 | 0 | 100 HEX #FFFFFF

Doplňková modrá – tisk

Doplňková modrá – DIGITALní

PANTONE 306 CMYK 76 | 0 | 5 | 0

RGB 20 | 215 | 255 HSB 190 | 92 | 100 HEX #14D7FF

Doplňková červená – tisk

Doplňková červená – digitální

PANTONE WARM RED CMYK 0 | 86 | 80 | 0

RGB 255 | 0 | 0 HSB 0 | 100 | 100 HEX #FF0000

Barvy vizuálního stylu – poměry

3.0.2

Následující schéma demonstruje doporučené poměrové hodnoty pro práci s barvami vizuálního stylu. V případě práce s jednolitými barevnými poli by výrazně převládající barvou měla být vždy černá (cca 85%), následovaná bílou (cca 10%) s volitelnými modrými (cca 3%) a případně červenými (cca 2%) akcenty. Hodnoty barevných poměrů jsou však pouze přibližné a při práci s barvami vizuálního stylu je důležité řídit se především zdravým rozumem.

STRANA 11

4.0

Korporátní typografie

STRANA 12

Písmo tvoří spolu s logem, barevným schématem a mřížkovým systémem jednu z hlavních složek vizuálního stylu. Důsledné užívání předepsaných řezů definovaného písma je tak klíčovou podmínkou k nastolení jednotné a snadno identifikovatelné identity.

4.0.1 Primární písmo Primárním korporátním písmem je font FF DIN, a to konkrétné verze FF DIN Regular a FF DIN Bold. Písmo používáme všude, kde je to technicky, typograficky a licenčně možné. Výjimku tvoří sazba textu v menších velikostech u digitálních aplikací a případně sazba textu dopisů a dokumentů, kde lze použít systémový font Verdana. Veškerý zvýrazněný text na webu, jako jsou nadpisy a tlačítka, sázíme verzí FF DIN Regular, nebo FF DIN Bold s weblicencí, anebo využíváme streamovací služby, nabízené například portálem www.fonts.com. Licence k písmu lze zakoupit na stránkách písmolijny FontFont (www.fontfont.com), případně je lze získat přes distributory jakými jsou například FontShop (www.fontshop.com) nebo MyFonts (www.myfonts. com).

4.0.2 Sekundární (doplňkové) písmo Doplňkovým písmem je systémový font Verdana. Sekundární písmo je určeno pro pro použití v těch případech, kde primární nepřipadá v úvahu. Jedná se především o sazbu drobnějšího textu v digitálních médiích (web, aplikace). Lze ho též použít pro sazbu textu v dopisech či dokumentech. V žádném případě nelze použít k akcidenční sazbě a v reklamě.

Korporátní typografie

4.0 STRANA 13

5.0.1

Mřížka – provedení

STRANA 14

Mřížka je v případě vizuální identity Fontai prvkem, který koncepčně zastřešuje a propojuje všechny ostatní elementy vizuální identity. Její jednoduché uspořádání stanovuje jasná pravidla, která usnadňují společné použití logotypu, typografie i předepsaných barev. Zároveň vytváří výrazný vizuální prvek, abstraktně ilustrující obor podnikání společnosti Fontai – technologie. Ačkoliv vizuální styl nevylučuje práci s jeho jednotlivými prvky i bez použití mřížky, její používání je silně doporučeno, neboť až správným propojením jednotlivých prvků může vzniknout jednotný a skutečně funkční vizuální styl. V plošných (tištěných i digitálních) aplikacích se používá vždy v rozvržení zobrazeném na ilustraci níže.

Fontai Vokáčova 1181/6 140 00 Praha 4 Czech Republic +420 123 456 789 [email protected] www.fontai.com

Main headline. May contain up to six lines of text and it's use is mandatory.


2013/2014

Second headline column is voluntary.

Third headline column should be used only rarely.

Mřížka – rozkres

5.0.2

Následující rozkres demonstruje rozmístění jednotlivých prvků na mřížce. Každá buňka viditelné mřížky obsahuje dalších 40 × 40 buněk pomocné, jemnější mřížky, sloužící k přesnému zarovnání jednotlivých objektů. Purpurové linky vymezují prostor pro vkládání objektů. Ten běžně začíná 5 pomocných buněk od okraje viditelné mřížky a žádný objekt, s výjimkou loga, by tuto hranici neměl přesahovat. Logo, vzhledem ke své konstrukci (viz sekce 1.1.4) tvoří výjimku a je do vymezeného prostoru umístěné tak, aby se jeho horního okraje dotýkalo střední dotažnicí. Prostor pro vložení libovolného textu znázorňují žlutá pole. Na spodní okraj vymezeného prostoru se umisťuje pouze claim a datum vytvoření.

STRANA 15




2013/2014


Third headline column should be used only rarely.

6.0

Tiskové aplikace

STRANA 16

V případě tiskových výstupů používáme mřížku jako krycí list (obálku) dokumentů. Obálka má vždy tvar čtverce a je z pravidla menší (podrobné rozkresy viz kapitola 6.0.3) než zbytek dokumentu. Nezakrývá tak jeho vnitřní listy až do krajů a na straně s menším přesahem překrývá pouze minoritní část plochy stránky. To umožňuje zobrazení určitého náhledu do vnitřku dokumentů, který lze využít například při práci s fotografiemi či výraznou barevností na prvních a posledních stranách vnitřního sešitu. Doporučená tloušťka bílých linek mřížky je u tiskovin do velikosti A3 (resp. A2 v nepřehnutém stavu) 0,1 mm, nicméně vždy je třeba brát v potaz technické limity zvolené reprodukční techniky a výsledný vizuální dojem.

6.0.1 Krycí list – A První možností jak umístit obálku na sešit vnitřních listů je s přesahem ze zadní strany na přední. Velikost přesahu na přední stranu ovlivňuje celkový formát dokumentu (zejména jaho šířka), důležité je vždy zachovat na zadní straně stejně velké okraje na všech třech stranách. Zachování rovnoměrných okrajů na straně zadní potom samo definuje velikost přesahu mřížky na stranu přední. Tato možnost je vhodná především v případech, kdy vrchní list vnitřního sešitu pracuje s celopotištěním (fotografií, jednolitým barevným polem), umožňuje totiž zobrazit jeho výraznou část a vzniká tak jakýsi ekvivalent časopisové obálky, kde přehyb mřížky vytváří logo (hlavičku) a fotografie, či barevné pole obrazový motiv. Její použití je doporučováno především pro externí komunikaci (propagační materiály).

Tiskové aplikace

6.0 STRANA 17

6.0.2 Krycí list B Druhou možností je varianta s přesahem z přední strany na zadní. Platí stejná pravidla jako u varianty A, pouze s tím rozdílem, že krycí list překrývá převážnou část přední strany a jeho zbytek (jehož velikost je závislá na šířce formátu) přesahuje na stranu zadní. Tato možnost je vhodná v případech, kdy vrchní list obsahuje informace, které by neměly být viditelně exponovány (převážně text), nebo obsah krycího listu nepůsobí dostatečně reprezentativně a esteticky. Její použití je tak doporučováno například pro interní komunikaci (manuály, technické dokumenty), nebo nabídky (dokumenty s obsahem citlivého charakteru).

6.0.3

Tiskové aplikace – provedení

STRANA 18

Následující ilustrace zobrazuje veškeré potenciální možnosti použití mřížky na standardizovaných formátech A3, A4 a A5. Pro každý formát existují dvě možnosti umístění mřížky – s přesahem mřížky ze zadní strany na přední a s přesahem mřížky z přední strany na zadní (prostorový nákres a doporučení pro používání jednotlivých verzí viz odstavce 6.0.1 a 6.0.2). Je silně doporučeno pracovat se standardizovanými formáty, neboť jejich rozměrová posloupnost je vhodně vyřešena s ohledem na budování jednotné identity a zároveň jsou pro ně vytvořeny podrobné rozkresy (viz 6.0.4).







A3

2013/2014


2013/2014


Tiskové aplikace – provedení

6.0.3


2013/2014



STRANA 19






2013/2014

A4


2013/2014







A5

2013/2014


6.0.4

Tiskové aplikace – rozkres

STRANA 20

Podrobné rozkresy mřížky pro standardizované formáty A3, A4 a A5 slouží společně s rozkresem mřížky (viz kapitola 5.0, sekce 5.0.2) k přesné konstrukci tiskových aplikací pracujících s mřížkou jako s krycím listem (viz odstavce 6.0.1 a 6.0.2). Pro každou variantu jsou definované specifické velikosti písma, proporčně odpovídající použitému formátu. Důležité však je, že všechny formáty pracují s konstantní velikostí okraje krycího listu. Ten musí na straně, kterou zakrývá z větší části, vždy začínat 10 mm od okraje vnitřního sešitu.


10 mm 13 pt

10 mm


13 pt

20 pt



20 pt


20 pt


10 mm We Make IT Beautiful

A3

10 mm 13 pt

2013/2014

10 mm

A3

13 pt

2013/2014

20 pt


Tiskové aplikace – rozkres

6.0.4 STRANA 21

10 mm

14 pt

9 pt

10 mm

10 pt

Main headline. May contain up to six lines of text and it's use is mandatory. We Make IT Beautiful


9 pt


2013/2014

10 mm


14 pt


7 pt 10 mm

10 mm

9 pt

7 pt


2013/2014

10 mm

10 mm


10 pt


7 pt 10 mm

7 pt 10 mm


10 mm

14 pt

10 pt



2013/2014

14 pt


10 mm

7 pt

A4


9 pt


9 pt

10 mm

A5

10 mm

2013/2014

7 pt

10 pt


6.1.1

Digitální aplikace – obálka – provedení

STRANA 22

Mřížka pro digitální výstupy (prezentace, nabídky, interní návody) rozměrově vychází z nejběžnějšího formátu kancelářského papíru, tedy A4. Je tomu tak proto, aby si klienti (v případě nabídek) nebo zaměstnanci (v případě prezentací či interních návodů) mohli daný dokument bez problémů vytisknout na kancelářských, případně domácích tiskárnách. Ve většině případů je doporučeno zvolit horizontální layout, který umožňuje efektivnější využití plochy zobrazovače digitálního obsahu při zobrazování elektronické verze a přitom nekomplikuje používání vytištěné verze. Doporučená tloušťka linek mřížky v digitálních, bitmapových výstupech je 1 px. U digitálních výstupů vektorových formátů platí 0,1 mm.




2013/2014





A4

A4

2013/2014


Digitální aplikace – obálka – rozkres

6.1.2

Ze své podstaty je rozkres mřížky pro digitální výstupy prakticky totožný s rozkresem mřížky pro tiskové výstupy, formát A4. Jediný rozdíl je v tom, že narozdíl od tiskové varianty je zde překryv listu s mřížkou pouze virtuální a v případě vytištění dokumentu je tak mřížka přímo natisklá na vrchním listu sešitu.

STRANA 23

9 pt


10 mm We Make IT Beautiful

2013/2014

9 pt

9 pt

9 pt


10 mm

10 mm

9 pt

133 mm



9 pt

10 mm


10 mm

2013/2014

10 mm Fontai Vokáčova 1181/6 140 00 Praha 4 Czech Republic +420 123 456 789 [email protected] www.fontai.com

9 pt

9 pt

9 pt 133 mm

10 mm

10 mm Fontai Vokáčova 1181/6 140 00 Praha 4 Czech Republic +420 123 456 789 [email protected] www.fontai.com

10 mm

A4

A4

9 pt 10 mm

6.1.3

Dig. aplikace – vnitřní layout (vertikální)

STRANA 24

Rozkresy vnitřních layoutů prezentací by měly sloužit především pro kontrolu, případně pochopení principu jejich tvorby při vytváření potenciálních variant, či mutací. V drtivé většině případů by pro tvorbu prezentací měly být používány předpřipravené elektronické šablony.

53 mm

112 mm

18 mm 1.0 Headline

1.3 Subheadline A Předkladatelem této nabídky je Ing. Michal Jíra, absolvent oboru Manažerská Informatika na Technické univerzitě v Liberci. Jeho prvním vlastním projektem byla implementace čárových kódů do výroby ve společnosti Grupo Antolin Bohemia v roce 2000. Po pěti letech působení ve společnosti T-Mobile Czech Republic (implementace eshopu, crm) založil v roce 2006 společnost J.I.R. Associates s.r.o. a po dvouleté externí spolupráci na internetových projektech se společností Miton CZ začal budovat vlastní značku na řízení projektů Fontai.com.

9 mm

FF DIN Bold FF DIN Regular 10 pt

FF DIN Bold 15 pt

1.3 Subheadline B Fontai.com je nyní vlajkovou lodí mezi značkami společnosti J.I.R. Associates s.r.o. se specializací na realizaci technologických projektů s využitím internetových přistupů. Za 3 roky své existence bylo pod hlavičkou fontai zrealizováno 23 projektů, zhruba třetina projektů byla většího rozsahu než požadovaný systém od TMCZ.

9 mm

Hlavní referencí je platforma pro klienta goparking.cz, kde byl dodán plně automatizovaný rezervační a obchodní systém. Následná integrace parkovacího, navigačního a kamerového systému se schopností rozpoznávat registrační značky vozidel vytvořila jeden robustní funkční celek s velkou ambicí zajistit zákazníkům co největší možný servis s co nejmenším vynaložením pracovních sil.

7 mm

86

18 mm

18 mm

FF DIN Regular 10 pt 9 mm

18 mm

Dig. aplikace – vnitřní layout (horizontální)

6.1.3 STRANA 25

61 mm

91 mm

91 mm

Subheadline A Předkladatelem této nabídky je Ing. Michal Jíra, absolvent oboru Manažerská Informatika na Technické univerzitě v Liberci. Jeho prvním vlastním projektem byla implementace čárových kódů do výroby ve společnosti Grupo Antolin Bohemia v roce 2000. Po pěti letech působení ve společnosti T-Mobile Czech Republic (implementace eshopu, crm) založil v roce 2006 společnost J.I.R. Associates s.r.o. a po dvouleté externí spolupráci na internetových projektech se společností Miton CZ začal budovat vlastní značku na řízení projektů Fontai.com.

Hlavní referencí je platforma pro klienta goparking.cz, kde byl dodán plně automatizovaný rezervační a obchodní systém. Následná integrace parkovacího, navigačního a kamerového systému se schopností rozpoznávat registrační značky vozidel vytvořila jeden robustní funkční celek s velkou ambicí zajistit zákazníkům co největší možný servis s co nejmenším vynaložením pracovních sil.

18 mm 1.0 Headline

FF DIN Bold 15 pt

Fontai.com je nyní vlajkovou lodí mezi značkami společnosti J.I.R. Associates s.r.o. se specializací na realizaci technologických projektů s využitím internetových přistupů. Za 3 roky své existence bylo pod hlavičkou Fontai zrealizováno 23 projektů, zhruba třetina projektů byla většího rozsahu než požadovaný systém od TMCZ.

Kontaktní údaje: Ing. Michal Jíra J.I.R. Associates s.r.o. / Fontai.com +420732229000 Vokáčova 6, 140 00 Praha 4 [email protected] www.jira.cz, www.fontai.com


7 mm

86

18 mm

18 mm


FF DIN Regular 10 pt 9 mm

9 mm

18 mm

6.1.4

Dig. aplikace – Animace – provedení

STRANA 26

Pro práci s mřížkou v animacích platí v základu stejná pravidla, jako v případě všeobecných digitálních aplikací (viz 6.1.1). K základní sadě instrukcí (umístění od okraje, zachování čtvercového tvaru virtuálně přesahujícího okraje formátu) ale přibývají ještě definice pro animaci mřížky a speciální rozkresy založené na poměrových hodnotách (viz 6.2.2). Animace mřížky by měla probíhat následujícím způsobem: Na obrazovce běží video, mřížka přijede z vrchního okraje obrazovky a zastaví se tak, aby byla vzdálenost od spodního okraje stejná, jako od okrajů postranních. Rychlost pohybu není konstantní, ale postupně se zpomaluje. Při výjezdu z horního okraje je tak nejvyšší a nad spodním okrajem nejnižší.




2013/2014




2013/2014



2013/2014

Dig. aplikace – Animace – provedení

6.1.4

Po dostatečně dlouhé době na přečtení textů mřížka pokračuje v pohybu dolů až se kompletně zasune do spodní hrany obrazovky. Rychlost pohybu je na začátku animace nejnižší a postupně zrychluje (akcelerace). V případě, že se v průběhu videa mají objevovat popisky, vyjede horní okraj mřížky ze spodního okraje obrazovky a popisek je zobrazen na něm. Pokud se popisek má změnit, mřížka zajede za spodní okraj obrazovky a následně vyjede s novým popiskem. Platí stejná pravidla pro rychlost pohybu. Při příjezdu tedy mřížka zpomaluje, při odjezdu naopak zrychluje. Závěrečný titulek na konci videa je řešený stejným způsobem jako jakýkoliv popisek v průběhu videa.

STRANA 27

Some sort of headline plus usual text going like this.




2013/2014


6.1.5

Dig. aplikace – Animace – rozkres

STRANA 28

S ohledem na nepřeberné množství rozličných rozlišení zobrazovačů digitálního obsahu, jsou rozkresy pro použití mřížky v animacích založeny na poměrových hodnotách. Pro správné vytvoření mřížky, aplikované na konkrétní rozlišení, je třeba vydělit šířku rozlišení třiceti. Tím získáme hodnotu x, která je rovna velikosti odsazení mřížky od okraje a zároveň díky ní lze vypočítat velikost, respektive výšku písma. Konkrétní data pro výpočet velikosti písma lze vyčíst na souvisejících ilustracích.

28 x

⅓x

⅓x



¼x

2013/2014


¼x x

x

x

Dig. aplikace – Animace – rozkres

6.1.5 STRANA 29

¼x

Some sort of headline plus usual text going like this.

6.2.1

Další aplikace – Fontai Van

STRANA 30

Dodávka Fontai je ilustrativním příkladem použití vizuálního stylu u 3D objektů. Základní principy (práce s logem, mřížkou, barvou, písmem) jsou zde zachovány, mřížka je však rozšířena na „nekonečnou“ síť a objekt obaluje. Vkládání textu i logotypu pak funguje obdobně jako při práci s tiskovinami či standardními dokumenty: vše zarovnáváme do levého horního rohu jednotlivých buněk mřížky (viz 5.0.2). U aplikace mřížky na 3D objekty a tiskoviny větší než A3 (resp. A2 v nepřehnutém stavu) obzvlášť platí, že tloušťka linek mřížky by měla být zvolena s ohledem na technické možnosti použité technologie a výsledný vizuální dojem.

No. 1 Fontai Transportation Device

Další aplikace – Fontai Van

6.2.1

Často může docházet k situaci, kdy bude potřeba tloušťka linek mřížky mnohonásobně větší, než udávají pravidla pro standardní tiskoviny. Ať už jsou důvody pro rozšíření linek technického (rozlišení technologie, vlastnosti materiálu), nebo estetického rázu (nevhodný poměr velikosti formátu k definované tloušťce linky, např. na billboardu), úprava jejich tloušťky není nutně na škodu. Důležité je zejména použití zdravého rozumu, zachování vizuální kvality a především přibližného optického poměru tloušťky linek mřížky ve vztahu k ostatním objektům (linky by měly být vždy tenčí, než průměrná tloušťka tahu písma).

STRANA 31

6.2.2

Další aplikace – rollup

STRANA 32

Rollup využívá fragment základní mřížky (stejné, jako pro standardní dokumenty) umístěný na spodní konec plachty tak, že její hrana půlí odshora druhý řádek buněk mřížky. Text sdělení umístíme na optický střed plachty a zarovnáme jej na levý praporek. Je důležité zdůraznit, že odstup textu od levé hrany formátu bude ve většině případů větší, než je odstup mřížky od té samé hrany. Na pozadí můžeme použít fotografii či podklad dle vlastního uvážení, vždy ale takový, který nenarušuje čitelnost textu. Druhou variantou je pak pozadí černé. Barva loga, případně textu, vychází ze základních barevných definic vizuálního stylu a může být tudíž bílá nebo černá (v závislosti na zajištění optimální čitelnosti).

Random ad text will be placed here. Up to eight lines.

Další aplikace – plakáty & billboardy

6.2.3

Práce s plakátem a billboardem je obdobná jako práce s roll upem. V případě horizontálních formátů však fragment mřížky umísťujeme na levou hranu, nikoliv na hranu spodní. Text zarovnáváme do levého horního rohu formátu, zarovnáváme jej na levý praporek. Podobně jako u rollupu, text umísťujeme ve větší vzdálenosti od okrajů formátu (tedy levé a horní hrany) než je vzdálenost mřížky od horní a spodní hrany formátu. Barva textu vychází ze základních barevných definic vizuálního stylu a může být tudíž bílá nebo černá (v závislosti na zajištění optimální čitelnosti).

STRANA 33




6.2.4

Další aplikace – Lily Fontai

STRANA 34

V případě potřeby použití maskota Fontai v kontextu vizuálního stylu je třeba zacházet s mřížkou jako s pozadím, a to v lehce upravené podobě. Místo černé použijeme kruhový přechod z tmavě šedé do černé, čímž umožníme Lily vrhnout na pozadí stín. Kýženým výsledným dojmem je fotografie osoby s pomocí přímého blesku: Lily je kontrastní a bledá, vrhá přímý a symetrický stín na lehce „osvětlené“ pozadí. Případné logo a claim umísťujeme v souladu s pravidly pro práci s mřížkou, a to do levé spodní buňky mřížky.

Další aplikace – Lily Fontai

6.2.4 STRANA 35

7.0

Zakázané operace

STRANA 36

Pro snazší představu o tom, jak s logotypem a mřížkou nepracovat, uvádíme několik názorných příkladů. Pokyny zde uvedené se částečně překrývají s instrukcemi uvedenými v různých kapitolách tohoto manuálu, považujeme je však za natolik důležité, že je shrnujeme zvlášť a v grafické podobě. Příklady demonstrující nevhodnou práci s logotypem, se vesměs vztahují i pro práci se značkou Fontai.

Legenda A) B) C) Zákaz změn proporcí logotypu. Stejný zákaz platí pro práci s veškerým písmem a fotografiemi. D) Zákaz umisťování vrženého stínu pod logotyp, a to v jakékoliv podobě. Logo vždy používáme v „čisté formě“. E) Zákaz používání logotypu ve formě obrysů. F) Logotyp samoúčelně neotáčíme. G) Zákaz přemisťování a přeskupování prvků logotypu. Logotyp používáme pouze v definovaných verzích, nikdy jej sami neupravujeme pro konkrétní případy, a to ani v případě, že by změna byla v daném kontextu žádoucí. Z hlediska budování jednotné identity podobná změna není žádoucí nikdy.

A

B

F

G

K

L

H) Zákaz umisťování textu či rušivých objektů před i za logotyp. Logotyp musí být za všech okolností snadno čitelný. I) Logotyp neumisťujeme do „kontejnerů“. Ty výrazně mění vizuální podobu loga a narušují tak budování jednotné identity. J) Zákaz změn barev logotypu. Vždy volíme pouze barvy definované manuálem. K) Zákaz posouvání mřížky. Mřížka vždy musí vždy zachovávat stejnou tloušťku okrajů se třemi stranami dokumentu. L) M) Zákaz manipulace s množstvím buněk mřížky. U aplikací na dvourozměrný podklad zachováváme množství buněk na počtu 4 × 4. N) Zákaz transformace mřížky a to i proporčně. Vzdálenost od okrajů u tištěných dokumentů zůstává vždy stejná, v případě elektronických aplikací je potřeba dodržovat poměrově nadefinované rozměry. O) Zákaz změn barev mřížky. Podkladová barva mřížky by měla zůstat vždy černá.

Zakázané operace

7.0 STRANA 37

C

D

E

H

I

J

M

N

O

Krycí list – B

Přebal – krycí list – B

2013/2014


2013/2014






2013/2014


2013/2014




Krycí list – A





8.0 Ukázky základních aplikací

STRANA 38 Následující doustrana slouží jako ilustrace použití principů pro tvorbu Fontai firemních tiskovin. Názorně prezentuje jednak samotnou práci s krycím listem (u vázaných tiskovin) a jednak práci s fotografií (případně ilustrací, či barevnou plochou) jako s potiskem prvního listu vnitřního bloku (opět u vázaných tiskovin), nebo jako s podkladem u tištěných, nevázaných výstupů (rollup, billboard, či plakát). Fotografie mají pouze ilustrační charakter a nepředstavují předepsané vodítko pro výběr obrazových podkladů.

Přebal – krycí list – A Rollup

Random will be p Up to six


Ukázky základních aplikací

8.0 STRANA 39

Billboard

Random ad text will be placed here. Up to six lines.

m ad text placed here. x lines.





Plakát – horizontální


Plakát – vertikální

9.0 STRANA 40

Poznámky

Poznámky

9.0 STRANA 41

verze 1.0 – první vydání

© 2013 FRVR™ všechna práva vyhrazena all rights reserved

Fontai Vokáčova 1181/6 140 00 Praha 4 Czech republic +420-226-254-035 [email protected] www.fontai.com

Manuál vizuálního. stylu. We Make

Recommend Documents