Designordlista
Väsentliga termer för att förstå visuell design — från alignment till whitespace.
- Alignment
- Placeringen av element längs en gemensam kant eller axel. Vänster-, center- och högerjustering kommunicerar alla olika — vänster är funktionellt, center är ceremoniellt.
- Analogous Colors
- Färger som sitter bredvid varandra på färghjulet (t.ex. grön, teal och blå). De skapar naturlig harmoni, eftersom de delar underliggande nyanser.
- Ascender
- Den del av en gemen bokstav som stiger ovanför x-höjden (b, d, f, h, k, l). Höga överkanter skapar en luftig, elegant känsla.
- Balance
- Fördelningen av visuell tyngd i en komposition. Symmetrisk balans skapar formalitet; asymmetrisk balans skapar dynamik.
- Baseline
- Den osynliga linje på vilken bokstäver sitter. Konsekventa baslinjer mellan kolumner skapar justering och ordning.
- Blackletter
- En familj av täta, kantiga typsnitt härstammande från medeltida manuskriptskrivning. Kallas även fraktur eller gotisk skrift. Används i den gotiska stilen på denna sajt.
- Border-radius
- CSS-egenskapen som rundar hörn. 0px = skarpt (Art Deco, Brutalism). 8px = vänligt (Nordic). 20px = bubbligt (Y2K Aero). Siffran bär personlighet.
- Clamp
- En CSS-funktion — clamp(min, preferred, max) — som skapar flytande värden som skalas mellan ett minimum och maximum. Används för responsiv typografi och mellanrum.
- Complementary Colors
- Färger mitt emot varandra på hjulet (t.ex. röd/cyan, blå/orange). De skapar maximal kontrast och visuell energi när de placeras tillsammans.
- Contrast
- Varje skillnad mellan två element — storlek, färg, vikt och textur. Utan kontrast är allt likvärdigt och inget kommunicerar hierarki.
- CSS Custom Property
- En variabel definierad i CSS (--color-accent: #5B7B6A). StyleShift använder ~60 custom properties för att styra varje visuell aspekt av varje stil.
- Descender
- Den del av en gemen bokstav som sjunker under baslinjen (g, j, p, q, y). Långa underkanter behöver tillräckligt radavstånd för att undvika kollisioner.
- Display Type
- Typsnitt designade för stora storlekar — rubriker, affischer, titlar. Ofta dekorativa eller extrema i vikt. Inte avsedda för brödtext.
- Easing
- Hur en animation accelererar eller decelererar. Linear = mekanisk. Ease-out = naturlig ankomst. Overshoot = lekfullt studs. Kurvan är personlighet.
- Elevation
- I Material Design, höjden av en yta ovanför bakgrunden, mätt i dp. Högre ytor kastar större skuggor och är viktigare.
- Figure/Ground
- Relationen mellan ett objekt (figur) och dess omgivande utrymme (grund). God design gör denna relation tydlig och avsiktlig.
- Flat Design
- En stil som tar bort skuggor, gradienter och texturer till förmån för solida färger och enkla former. iOS 7 (2013) populariserade den. Förfadern till många nuvarande webbstilar.
- Fluid Typography
- Typografi som skalas mjukt med viewportbredd via clamp() eller viewport-enheter, snarare än att hoppa vid brytpunkter.
- Gestalt
- Principer för visuell perception — närhet, likhet, slutenhet och kontinuitet. Hjärnan grupperar element som delar egenskaper till upplevda helheter.
- Grid
- Ett osynligt ramverk av kolumner och rader som organiserar innehåll. Skapar konsekvens, justering och förutsägbar rytm över en sida.
- Gutter
- Utrymmet mellan kolumner i ett rutnät. Bredare spalter känns öppnare; smalare spalter känns tätare.
- Hierarchy
- Ordningen i vilken ögat möter element. Skapas genom storlek, vikt, färg, position och rymd. Varje design behöver den.
- Horror Vacui
- Latin: 'rädsla för tomt utrymme.' Den viktorianska tendensen att fylla varje yta med mönster och ornament. Motsatsen till minimalism.
- Hue
- Den rena färgen i sig — röd, blå, grön — oberoende av hur ljus, mörk eller mättad den är.
- Kerning
- Justeringen av utrymme mellan två specifika tecken. Skiljer sig från tracking (som påverkar alla tecken lika).
- Leading
- Det vertikala utrymmet mellan textrader (line-height i CSS). Uppkallat efter blyremsor placerade mellan rader i metallsättning.
- Measure
- Bredden av en textkolumn, idealt 45–75 tecken per rad. För bred = ögat tappar sin plats. För smal = texten känns trång.
- Monochromatic
- Ett färgschema som använder en nyans vid olika värden och mättnadsnivåer. Skapar sofistikerad enhet med minimal risk för dissonans.
- Negative Space
- Det tomma området runt och mellan element. Inte 'ingenting' — det är aktivt designmaterial som skapar fokus, andrum och hierarki.
- Opacity
- Hur transparent ett element är, från 0 (osynligt) till 1 (solitt). Används för skiktning, atmosfär och djup utan hårda kanter.
- Ornament
- Dekorativa element som inte tjänar ett funktionellt syfte — ramar, utsmyckningar, avdelare. Vissa stilar omfamnar det (Victorian); andra förkastar det (Bauhaus).
- Rhythm
- Upprepningen av element vid intervall — skapar tempo, förutsägbarhet och flöde. Snabb rytm = energisk. Långsam rytm = ceremoniell.
- Sans-serif
- Ett typsnitt utan serifer (de små strecken vid bokstavsändarna). Kommunicerar modernitet, klarhet och effektivitet. Helvetica, Inter, Roboto.
- Saturation
- Intensiteten hos en färg. Fullt mättad = livfull. Desaturerad = dämpad/grå. Styr energinivån i en palett.
- Serif
- De små strecken vid bokstävers ändar. Seriftypsnitt bär värme, tradition och auktoritet. Garamond, Playfair, Crimson.
- Skeuomorphism
- Design som efterliknar verkliga material — lädertexturer, pappersskuggor, metallknappar. Dominerade före flat design. Neomorphism är dess andliga ättling.
- Tracking
- Det enhetliga avståndet mellan alla tecken i en rad (letter-spacing i CSS). Vid spärring = öppet, formellt. Tät spärring = tätt, effektivt.
- Triadic Colors
- Tre färger jämnt fördelade på hjulet (t.ex. rött, gult, blått). Skapar livfull balans. Bauhaus använde berömt den primära triaden.
- Value
- Hur ljus eller mörk en färg är, oberoende av nyans. Grunden för läsbarhet — text måste skilja sig i värde från sin bakgrund.
- Viewport
- Det synliga området av en webbsida i webbläsarfönstret. Responsiv design anpassar layout till viewportens storlek.
- Vignette
- En gradvis mörkläggning vid viewportens kanter, som fokuserar uppmärksamhet mot mitten. Används i Art Deco (dramatisk), Victorian (varm) och Dark Luxury (isolerande).
- Visual Weight
- Hur mycket uppmärksamhet ett element kräver. Mörka, stora, texturerade eller isolerade element känns 'tyngre' än ljusa, små, släta eller grupperade.
- WCAG
- Web Content Accessibility Guidelines. Den internationella standarden för webbtillgänglighet. Definierar minimala kontrastförhållanden (4.5:1 för text) och andra krav.
- Whiplash Curve
- Art Nouveaus signaturlinje — en lång, slingrande, asymmetrisk kurva som rör sig som en ranka som växer mot ljuset. Kallas 'coup de fouet' på franska.
- Whitespace
- Utrymmet mellan och runt element — marginaler, utfyllnad, mellanrum. Inte slösat utrymme utan aktivt designmaterial som skapar klarhet och hierarki.
- X-height
- Höjden av ett gemene 'x' i ett typsnitt. Stor x-höjd = mer läsbart i små storlekar. Varierar dramatiskt mellan typsnitt.
A
B
C
D
E
F
G
H
K
L
M
N
O
R
S
T
V
W
X