Barvy

Barevná paleta značky Smart Chip odráží její hravou a dynamickou povahu. Naše hlavní barvy – černá a bílá – tvoří výrazný a nadčasový základ. Akcentní barvy dodávají flexibilitu a živost, což nám pomáhá přizpůsobit se různým náladám a situacím a zároveň zachovat celkový svěží a ucelený dojem.

Základní barvy

Barevná paleta je Černá a Bílá v kombinaci s Barva zvýraznění. Černá a bílá jsou jednoduché barvy, které zajišťují maximální možný kontrast a čitelnost. Různé barvy zvýraznění, zobrazené jako lineární přechod, dodávají nádech energie a odrážejí hravé způsoby, jakými Smart Chip usnadňuje život.

Černá

CMYK (sytá černá)
60/40/40/100

Hex
#000000

Bílá

CMYK
0/0/0/0

Hex
#ffffff

Barvy zvýraznění

Doplňkové barvy doplňují a rozšiřují základní barvy. Tvoří klíčovou součást naší dynamické vizuální identity. Využíváme je k tomu, abychom designům dodali rozmanitost a vdechli život našemu vizuálnímu jazyku.

Při výběru barvy zohledněte náladu či tón svého návrhu. Každý barevný přechod vyvolává jiný dojem. Například, Stylová fialová je to klidná barva, díky čemuž se ideálně hodí k tématům s uvolněnější atmosférou. Na druhou stranu, Zářivá oranžová je živá a energická, ideální pro dynamický nebo akční obsah. Zamyslete se nad poselstvím, které chcete sdělit, a vyberte barvu, která tento příběh nejlépe podpoří.

Existuje jedno velmi důležité pravidlo: V jednom rozvržení nepoužívejte více než jednu barvu. Každá barva zvýraznění by měla být samostatná.

Zářivá oranžová

CMYK
0/46/78/0 > 0/86/70/0

Hex
#ffa041 > #fc3a3c

Deep Blue

CMYK
79/24/6/2 > 90/69/0/0

Hex
#0393bc > #004cd5

Stylová fialová

CMYK
47/59/0/0 > 80/82/0/0

Hex
#9d77c4 > #554195

Měď

CMYK
0/46/78/0 > 24/58/86/15

Hex
#ffa041 > #b26e31

Elektrická modrá

CMYK
65/0/0/0 > 70/54/0/0

Hex
#23c8fe > #647cff

Teplá fialová

CMYK
40/72/0/0 > 68/74/0/0

Hex
#a85fa2 > #6e539e

Hezká růžová

CMYK
5/54/34/0 > 0/85/69/0

Hex
#ea9091 > #ed4343

Klidná zeleň

CMYK
62/0/92/0 > 86/29/88/16

Hex
#71b541 > #197642

Červený poplach

CMYK
0/76/55/0 > 0/100/68/0

Hex
#ff5a5a > #e6003c

Přechody a křivky

Kde je to možné, používáme pro zvýrazňovací barvy barevné přechody v kombinaci s ústředním designovým prvkem zvaným Křivky. Zde se dozvíte, jak je vyrobit a jak je používat.

Křivky

Křivky se používají hlavně jako pozadí. Dodávají jim větší vizuální zajímavost, hloubku a dojem pohybu.

Křivky vznikají změnou měřítka, otočením a oříznutím ikony čipu. Měřítko, natočení a oříznutí si zvolte sami, ale nezobrazujte příliš velkou část ikony. Měly by vypadat jako abstraktní křivky a pruhy, nikoli jako samotná ikona.

Křivky jsou vždy umístěny na pozadí. Pozadí využívá stejný přechod jako křivky, avšak v jiném směru.

Směr přechodů není pevně daný. Můžete je u každého nového návrhu libovolně měnit a dokonce je animovat. Díky tomu působí křivky živě a svěže.

Nemusíte využívat celý rozsah přechodu od začátku do konce. Můžete se “zaměřit” pouze na jeho část. Tím se naše barevná paleta ještě více rozšíří, přičemž barvy zůstanou stále rozpoznatelné.

Dávejte však pozor, aby to bylo stále rozpoznatelné jako přechod. Nevybírejte část, která je tak malá, že vypadá jako jednolitá barva.

Křivky nejsou povinné – někdy platí, že méně je více. Vyhněte se jejich použití u menších prvků, jako jsou tlačítka nebo malé obrázky.

Vytváření nových barev

Paleta zvýrazňovacích barev je navržena tak, aby její barvy dobře ladily a daly se použít v mnoha různých kontextech. Pokud však žádný přechod nevyhovuje vašemu konkrétnímu návrhu, můžete si vytvořit vlastní.

Vytváření nových přechodů se hodí zejména při kombinování nadpisu s obrázkem. V tomto příkladu je pro nadpis použit vlastní přechod, který dokonale ladí s obrázkem.

Barvy byly vytvořeny tak, že se z obrázku odebraly vzorky a následně se zvýšila sytost a jas. Díky tomu nový přechod ladí se stávající paletou barev.

Při vytváření nových barev je třeba dodržovat několik pravidel:

Nepřehánějte to! Snažte se držet schválené barevné palety a nové barvy vytvářejte jen v případě nutnosti.

Nevytvářejte nový přechod, který by byl příliš podobný již existujícímu. Pokud stávající barva vyhovuje, držte se jí.

Držte se tón v tónu. Nepřecházejte z červené na modrou, ale z jasně červené na středně červenou.

Hodnoty udržujte v souladu se stávajícími přechody. Nevybírejte příliš syté, tlumené, světlé ani tmavé odstíny.

Základní barevné principy

Při navrhování nového rozvržení si můžete vybrat mezi černým nebo bílým pozadím. Bílé pozadí působí čistě, otevřeně a přitažlivě. Černé pozadí evokuje technologii, eleganci a sílu. Vyberte si to, které nejlépe odpovídá vašemu projektu, sdělení a cílové skupině.

Ať už si vyberete kteroukoli z těchto možností, použijte kontrastní barvu k rozčlenění rozvržení, zvýraznění určitých informací, nasměrování pozornosti nebo zdůraznění určitého bodu.

Při tvorbě více stránkových rozvržení nepřeskakujte bezhlavě z jedné barvy na druhou. Rozčleňte svůj návrh na témata nebo kapitoly, a každé z nich přiřaďte vlastní barvu. V rámci každé kapitoly se této barvy držte. Tím zajistíte jednotnost a zabráníte nepřehlednému vzhledu stránek.

Barvy můžete použít pro pozadí, nadpisy, ikony nebo jakékoli jiné prvky, u nichž je vhodné přidat trochu barvy.

Aby byl design čistý a jednotný, nikdy nemíchejte různé barvy na stejné stránce, s výjimkou případů, kdy je to nezbytné z důvodu funkčních prvků (jako jsou chybová hlášení nebo upozornění).

Co nedělat

Vyhněte se prosím následujícím chybám.

V jednom rozvržení nepoužívejte různé barvy.

Nepoužívejte křivky bez pozadí.

Nepoužívejte křivky na pozadí jiné barvy.

Nezobrazujte ikonu čipu příliš výrazně.

Nekombinujte přechod s jinou barvou.

Nevytvářejte nové přechody, které porušují pravidla.

Nepoužívejte barvy pro označení ani pro celé textové bloky.

Nepoužívejte jednobarevné odstíny, pokud to není naprosto nezbytné.

Příklady

Zde je několik příkladů použití barev a křivek. Všimněte si rozdílů v měřítku, ořezovém faktoru, natočení a rozsahu přechodu křivek.