Suunnittelusanasto
Keskeiset termit visuaalisen designin ymmärtämiseen — tasauksesta tyhjään tilaan.
- Alapidennys (Descender)
- Pienaakkosen osa joka laskee peruslinjan alapuolelle (g, j, p, q, y). Pitkät alapidennykset tarvitsevat riittävän rivinkorkeuden välttääkseen törmäykset.
- Clamp
- CSS-funktio — clamp(min, preferred, max) — joka luo juoksevia arvoja jotka skaalautuvat minimin ja maksimin välillä. Käytetään responsiiviseen typografiaan ja välistykseen.
- CSS-muuttuja (CSS Custom Property)
- CSS:ssä määritelty muuttuja (--color-accent: #5B7B6A). StyleShift käyttää ~60 muuttujaa hallitakseen jokaista visuaalista osa-aluetta kustakin tyylistä.
- Display-kirjasin (Display Type)
- Kirjasimia jotka on suunniteltu suuriin kokoihin — otsikoihin, julisteisiin, nimiöihin. Usein koristeellisia tai äärimmäisiä lihavuudeltaan. Ei tarkoitettu leipätekstiin.
- Easing
- Miten animaatio kiihtyy tai hidastuu. Lineaarinen = mekaaninen. Ease-out = luonnollinen saapuminen. Ylilyönti = leikkisä pomppu. Käyrä on persoonallisuus.
- Fraktuura (Blackletter)
- Tiheiden, kulmikkaiden kirjasinten perhe johdettuna keskiaikaisesta käsikirjoituksesta. Kutsutaan myös fraktuuraksi tai gootinkirjaimeksi. Käytetään Gothic-tyylissä tällä sivustolla.
- Gestalt
- Visuaalisen havainnon periaatteita — läheisyys, samankaltaisuus, sulkeutuminen, jatkuvuus. Aivot ryhmittävät ominaisuuksia jakavat elementit havaituiksi kokonaisuuksiksi.
- Grid
- Näkymätön sarakkeiden ja rivien kehikko joka jäsentää sisällön. Luo johdonmukaisuuden, tasauksen ja ennustettavan rytmin sivun poikki.
- Groteski (Sans-serif)
- Kirjasin ilman päätteitä (pieniä viivoja kirjainten päissä). Viestii moderniutta, selkeyttä, tehokkuutta. Helvetica, Inter, Roboto.
- Hahmo/tausta (Figure/Ground)
- Suhde objektin (hahmo) ja sitä ympäröivän tilan (tausta) välillä. Hyvä design tekee tästä suhteesta selkeän ja tarkoituksellisen.
- Hierarkia (Hierarchy)
- Järjestys jossa katse kohtaa elementit. Luodaan koolla, painolla, värillä, sijainnilla ja tilalla. Jokainen design tarvitsee sitä.
- Horror Vacui
- Latinaa: 'tyhjän tilan pelko.' Viktoriaaninen taipumus täyttää jokainen pinta kuviolla ja koristeella. Minimalismin vastakohta.
- Juokseva typografia (Fluid Typography)
- Tekstiä joka skaalautuu sulavasti näkymän leveyden mukaan käyttäen clamp()-funktiota tai näkymäyksiköitä, sen sijaan että hyppäisi taitepisteissä.
- Kerning
- Kahden tietyn merkin välisen tilan säätö. Eroaa trackingista (joka vaikuttaa kaikkiin merkkeihin tasaisesti).
- Komplementtivärit (Complementary Colors)
- Värit jotka ovat vastakkain väriympyrässä (esim. punainen/syaani, sininen/oranssi). Ne luovat maksimikontrastin ja visuaalista energiaa vierekkäin asetettuna.
- Kontrasti (Contrast)
- Mikä tahansa ero kahden elementin välillä — koko, väri, paino, tekstuuri. Ilman kontrastia kaikki on samanarvoista eikä mikään viesti hierarkiaa.
- Koriste (Ornament)
- Koriste-elementtejä joilla ei ole toiminnallista tarkoitusta — reunuksia, koukeroita, jakajia. Jotkut tyylit omaksuvat sen (Victorian); toiset hylkäävät sen (Bauhaus).
- Korkeus (Elevation)
- Material Designissa pinnan korkeus taustan yläpuolella, mitattuna dp-yksiköissä. Korkeammat pinnat heittävät suurempia varjoja ja ovat tärkeämpiä.
- Litteä design (Flat Design)
- Tyyli joka poistaa varjot, liukuvärit ja tekstuurit kiinteiden värien ja yksinkertaisten muotojen hyväksi. iOS 7 (2013) popularisoi sen. Monien nykyisten webtyylien esi-isä.
- Lähivärit (Analogous Colors)
- Värit jotka sijaitsevat vierekkäin väriympyrässä (esim. vihreä, turkoosi, sininen). Ne luovat luonnollisen harmonian koska ne jakavat taustalla olevia sävyjä.
- Mitta (Measure)
- Tekstipalstan leveys, ihanteellisesti 45–75 merkkiä riviä kohden. Liian leveä = katse kadottaa paikkansa. Liian kapea = teksti tuntuu ahtaalta.
- Monokromaattinen (Monochromatic)
- Väriskeema joka käyttää yhtä sävyä eri valööreissä ja saturaatioissa. Luo hienostuneen yhtenäisyyden minimaalisella riskillä epäsoinnusta.
- Negatiivinen tila (Negative Space)
- Tyhjä alue elementtien ympärillä ja välissä. Ei 'ei mitään' — se on aktiivista suunnittelumateriaalia joka luo fokusta, hengitystilaa ja hierarkiaa.
- Näkymä (Viewport)
- Verkkosivun näkyvä alue selainikkunassa. Responsiivinen suunnittelu mukauttaa asettelun näkymän kokoon.
- Peittävyys (Opacity)
- Kuinka läpinäkyvä elementti on, arvosta 0 (näkymätön) arvoon 1 (kiinteä). Käytetään kerrostukseen, tunnelmaan ja syvyyteen ilman kovia reunoja.
- Peruslinja (Baseline)
- Näkymätön linja jolla kirjaimet istuvat. Johdonmukaiset peruslinjat sarakkeiden poikki luovat tasauksen ja järjestyksen.
- Piiskanlyöntikaari (Whiplash Curve)
- Art Nouveaun tunnusomainen viiva — pitkä, kiemurteleva, epäsymmetrinen kaari joka liikkuu kuin valoa kohti kasvava köynnös. Ranskaksi 'coup de fouet'.
- Pääte / antiikva (Serif)
- Pienet viivat kirjainten päissä. Antiikvakirjasimet kantavat lämpöä, perinnettä ja auktoriteettia. Garamond, Playfair, Crimson.
- Reunan pyöristys (Border-radius)
- CSS-ominaisuus joka pyöristää kulmat. 0px = terävä (Art Deco, brutalismi). 8px = ystävällinen (Nordic). 20px = kuplamainen (Y2K Aero). Luku kantaa persoonallisuutta.
- Riviväli (Leading)
- Tekstirivien välinen pystysuora tila (line-height CSS:ssä). Nimetty lyijyliuskojen mukaan jotka asetettiin rivien väliin metallilatomossa.
- Rytmi (Rhythm)
- Elementtien toistoa välein — luoden tempon, ennustettavuuden ja virtauksen. Nopea rytmi = energinen. Hidas rytmi = seremoniallinen.
- Sarakeväli (Gutter)
- Sarakkeiden välinen tila gridissä. Leveämmät välit tuntuvat avoimemmilta; kapeammat välit tuntuvat tiheämmiltä.
- Saturaatio (Saturation)
- Värin intensiteetti. Täysin kylläinen = eloisa. Desaturoitu = vaimea/harmaa. Säätelee paletin energiatasoa.
- Skeuomorfismi (Skeuomorphism)
- Design joka jäljittelee todellisen maailman materiaaleja — nahkatekstuureja, paperivarjoja, metallisia painikkeita. Hallitsi ennen litteää designia. Neomorphism on sen henkinen jälkeläinen.
- Sävy (Hue)
- Itse puhdas väri — punainen, sininen, vihreä — riippumatta siitä kuinka vaalea, tumma tai kylläinen se on.
- Tasapaino (Balance)
- Visuaalisen painon jakautuminen sommitelmassa. Symmetrinen tasapaino luo muodollisuutta; epäsymmetrinen tasapaino luo dynaamisuutta.
- Tasaus (Alignment)
- Elementtien sijoittaminen yhteistä reunaa tai akselia pitkin. Vasen, keskitetty ja oikea tasaus viestivät kukin eri tavalla — vasen on toiminnallinen, keskitetty on seremoniallinen.
- Tracking (Kirjainväli)
- Tasainen väli kaikkien rivin merkkien välillä (letter-spacing CSS:ssä). Väljä tracking = avoin, muodollinen. Tiivis tracking = tiheä, tehokas.
- Triadiset värit (Triadic Colors)
- Kolme väriä tasaisin välein väriympyrässä (esim. punainen, keltainen, sininen). Luo eloisan tasapainon. Bauhaus käytti kuuluisasti päävärikolmikkoa.
- Tyhjä tila (Whitespace)
- Tila elementtien välissä ja ympärillä — marginaalit, täyte, aukot. Ei hukattua tilaa vaan aktiivista suunnittelumateriaalia joka luo selkeyttä ja hierarkiaa.
- Valööri (Value)
- Kuinka vaalea tai tumma väri on, riippumatta sävystä. Luettavuuden perusta — tekstin on erotuttava valööriltään taustastaan.
- Vinjetti (Vignette)
- Asteittainen tummeneminen näkymän reunoilla, kohdistaen huomion kohti keskustaa. Käytetään Art Decossa (dramaattinen), Victorianissa (lämmin) ja Dark Luxuryssa (eristävä).
- Visuaalinen paino (Visual Weight)
- Kuinka paljon huomiota elementti vaatii. Tummat, suuret, teksturoidut tai eristetyt elementit tuntuvat 'raskaammilta' kuin vaaleat, pienet, sileät tai ryhmitellyt.
- WCAG
- Web Content Accessibility Guidelines. Kansainvälinen verkkosaavutettavuuden standardi. Määrittää vähimmäiskontrastisuhteet (4.5:1 tekstille) ja muut vaatimukset.
- X-korkeus (X-height)
- Pienaakkosen 'x' korkeus kirjasimessa. Suuri x-korkeus = luettavampi pienissä koissa. Vaihtelee dramaattisesti kirjasinten välillä.
- Yläpidennys (Ascender)
- Pienaakkosen osa joka nousee x-korkeuden yläpuolelle (b, d, f, h, k, l). Korkeat yläpidennykset luovat ilmavan, elegantin tunnun.
A
C
D
E
F
G
H
J
K
L
M
N
P
R
S
T
V
W
X
Y