Palvelu — Visuaalinen järjestelmä
Brändi-identiteetti
Kaikki mitä yhtenäisen brändin rakentamiseen tarvitaan – yhdessä paikassa. Typografia, värit, linkit, painikkeet, kulmat ja välistykset muodostavat järjestelmän, joka pitää ilmeen johdonmukaisena kaikkialla.
01 — Typografia
Hierarkia ja leipäteksti
Otsikot Instrument Serif -fontilla tasoilla 1–5, leipäteksti Apfel Grotezk -fontilla.
Heading 1 · Instrument Serif · 60 / 1.2
Aa Brändin ääni
Heading 2 · Instrument Serif · 46 / 1.0
Aa Selkeä viesti
Heading 3 · Instrument Serif · 32 / 1.2
Aa Osioiden otsikot
Heading 4 · Apfel Grotezk · 22 / 1.2
Aa Väliotsikko
Heading 5 · Instrument Serif · 19 / 1.2
Aa Pienin otsikko
Body · INTER · Light 300
Kevyt leipäteksti sopii ilmaviin kappaleisiin ja pitkiin teksteihin, joissa rauhallinen rytmi parantaa luettavuutta.
Body · Apfel Grotezk · Regular 400
Perusleipäteksti on järjestelmän selkäranka: sitä käytetään kappaleissa, listoissa ja kuvateksteissä kautta sivuston.
Body · Apfel Grotezk · Medium 500
Medium-paino korostaa avainsanoja ja pieniä otsikkomaisia nostoja ilman, että koko kappale muuttuu liian raskaaksi.
02 — Värit
Värimaailma
Pohjaväreistä tekstiin ja reunaviivoihin. Rauhallinen cream-pohja, lähes musta teksti ja hillitty sininen korostus.
Pohja / Background
rgb(245, 244, 239)
Teksti / Text
rgb(6, 8, 6)
Himmeä teksti / Muted
rgba(6, 8, 6, 0.58)
Reuna / Border
rgba(158, 158, 158, 0.42)
Korostus / Accent
rgb(76, 139, 176)
Tausta ensisijainen / Primary
rgb(245, 244, 239)
Tausta toissijainen / Secondary
rgb(6, 8, 6)
Tausta vaihtoehto / Alternative
rgb(76, 139, 176)
03 — Linkit
Linkkien tyylit
Neljä linkityyliä eri käyttötarkoituksiin: peruslinkki, alleviivattu, korostettu ja aktiivinen.
Peruslinkki · hover alleviivaa
Alleviivattu · aina
Korostuslinkki · värillinen
Aktiivinen · nykyinen sivu
04 — Painikkeet
Painikkeet
Neljä painiketyyliä: ensisijainen, vaalea, reunaviiva ja läpinäkyvä.
Primary · ensisijainen
Light · vaalea + ikoni
Stroke · reunaviiva
Transparent · läpinäkyvä
05 — Kulmat
Radiukset
Yhtenäinen kulmaskaala: pienet syötteet, keskikokoiset kortit ja täysin pyöristetyt pillit.
Pieni · syötteet
10px
Keskikoko · kortit
20px
Täysi · pillit & napit
500px
07 — Ikonit & logo
Ikonit ja logo
Yhtenäinen, ohutviivainen ikonisarja ja logon suoja-alue.
Ikonisarja
Logo
Visa Rikala
TEKSTILOGO
Logoesimerkkejä
Abstrakti symboli
VR
Monogrammi
Kuvamerkki
Emblemi & teksti
Kuvituslogo
Liikemerkki
08 — Liike
Animaatiot & liike
Liike ja ajoitus eivät ole koristelua – ne kertovat brändin luonteen. Hidas, pehmeä animaatio viestii premium-vaateliikkeen rauhallista arvokkuutta, kun taas nopea ja napakka liike sopii halpaketjun energiseen ”tartu heti” -tunnelmaan. Samalla sisällöllä saadaan aikaan täysin eri viesti.
Laadukas
Ease out · 0,4 s
Selkeä ja täsmällinen. Sopii useimpiin siirtymiin ja arjen vuorovaikutuksiin.
Premium
Ease out · 0,8 s
Hitaampi ja arvokkaampi. Korostaa laatua ja antaa liikkeelle tilaa hengittää.
Leikkisä
Spring · bounce 0,2
Kimmoisa jousi tuo eloa ja persoonaa pieniin yksityiskohtiin ja mikrointeraktioihin.
Napakka
Ease in · 0,2 s
Nopea ja terävä. Antaa välittömän tuntuman napautuksiin ja painikkeisiin.
Pehmeä
Ease in-out · 0,6 s
Tasainen kiihdytys ja jarrutus. Tuntuu rauhalliselta ja hallitulta.
Energinen
Spring · bounce 0,6
Reipas jousi näyttävämmillä ylityksillä. Tuo huomiota ja iloista yllätystä.
Liikettä hyödynnetään sivuston eri kohdissa kuten esim. osioiden esiintulossa vierityksen aikana, painikkeiden ja korttien hover-tiloissa, navigaation ja valikoiden avautumisessa, sivulatauksen siirtymissä sekä pienissä mikrointeraktioissa kuten lomakkeiden palautteessa ja ikonien korostuksissa.
Aloitetaan
Rakennetaan brändillesi yhtenäinen ilme
Varaa maksuton aloituspalaveri, niin suunnitellaan yrityksellesi näyttävä ja johdonmukainen visuaalinen järjestelmä.