Design systemer

Alma Kholmatova:

“Et designsystem er et sæt af indbyrdes forbundne mønstre og fælles praksis, der er sammenhængende organiseret for at opnå formålet med digitale produkter.”

Designsystem.dk har en god oversigt over hvad et fulendt designsystem indebærer (baseret på Digitaliserings styrelsen såsom borger og virk).

Et design system er både:

⚫Design manual
⚫Brand manual
⚫Style guide
⚫Pattern LIbraries

⚫ Datavisualiseringer
⚫ Illustrationer
⚫ Sidestruktur og rammer
⚫ Stemme og tone
⚫ Retningslinjer for tilgængelighed
⚫ Designprincipper

Tre parameter af design systemer alle tager stilling til

Streng/Løs: Mængden af retningslinjer og frihed

Modulær/integreret: Mulighed for fleksibilitet

Centraliseret/Distribueret: Mulighed for bruger tilpasning

Atomic Design

af Brad Frost

Mentale modeller

samme som UI-Patterns – hvad vi husker om hvor ting er og hvordan de ser ud.

Regler for at opnå gode modeller.

• Terminologi— Kender brugeren de ord, der bruges? Er det brede termer, der indikerer, hvad du kan gøre i hver del af
  produktet? Hvor tæt matcher de den termonologi, brugerne anvender hver dag?
• Content strategy — Hvad er de vejledende begreber eller regler for de indholdstyper, der vises på hver side?
• Channel strategy — Skaber du konsekvente, kontinuerlige eller komplementære oplevelser?
• Interaktions modeller — Bruger du velkendte mønstre? Introducerer noget nyt? Hvordan interagerer mennesker med
  systemet?
• Informations arkitektur — Hvordan grupperes og struktureres de forskellige områder? Hvor forventer dine brugere at finde
  svarene på deres mentale model i dit produkt? Passer det til deres forventninger?

Funtionelle vs perspetuelle designsystemer

Funktionelle designsystemer 

• Fokus: Hvad brugerne gør (adfærd) og systemets handlingsmuligheder.
• Eksempler: Knapper til indsendelse, formularfelter, navigationslinks.
• Karakteristika: Konkrete, handlingsbaserede “byggesten” i et interface.
• Teknisk perspektiv: Baseret på HTML og andre strukturelle elementer.

Perceptuelle designsystemer 

• Fokus: Hvad brugerne føler, og hvordan de intuitivt opfatter ting.
• Eksempler: Knapper, der bruger en specifik typografi, farve, form, eller visuelle tilstande.
• Karakteristika: Beskrivende stilarter, der definerer udseendet og følelsen af et element.
• Teknisk perspektiv: Typisk udtrykt gennem CSS-egenskaber som farver, padding, og overgange.

Design persona

Af Aarron Walter

Retning for ens design udtryk

Modernisme

Modernismens karakteristika
⚫Fotografi + designelementer + tekst tjener formålet med at præsentere informationen på den mest ligetil måde
⚫Kontrast (i størrelser, farver, vinkel)
⚫Lodrette, horisontale og diagonale linjer
⚫Sans serif-skrifttyper (grotesker)
⚫Sort, hvid og primærfarver: rød, blå, gul, sort og hvid
⚫Få variationer – kun 2 størrelser af skrifttyper – kun 2 skriftsnit
⚫Grundlæggende formelementer: cirkel, kvadrat og trekant.
⚫Klare marginer, Tydelig adskillelse mellem tekst og illustrationer
⚫Negativt rum (hvide eller monochrome områder uden tekst)
⚫Vægt på elementerne, der flugter (alignment)
⚫Venstrestil/højstil – aldrig centrer

Klummen er der hvor tekst og indhold er – modsat margen. Brødtekst

Ikke venstre- og højre stillet, men fast forkant med løs bagkant.

Bauhaus

Oprindelse: Tyskland, Bauhaus-skolen (1919–1933), grundlagt af Walter Gropius.

Formål: Forene kunst, håndværk og industri → “form følger funktion”.

Designprincipper:

• Enkelhed og funktionalitet.
• Minimalisme → ingen unødvendig dekoration.
• Geometriske former (kvadrater, cirkler, trekanter).
• Rette linjer, asymmetri og flade farver.

Materialer: Glas, stål, beton, krom – moderne, industrielle materialer.

Farver: Primærfarver (rød, blå, gul) + sort, hvid og grå.

Arkitektur: Flade tage, store vinduespartier, åbne planer.

Indretning/møbler: Funktionelle, masseproducerbare, ofte i stål og træ (fx Marcel Breuers stålrørsmøbler).

Indflydelse: Har præget modernistisk arkitektur, møbeldesign, grafisk design og nutidens “skandinaviske minimalisme”.

Grunge

fremført af David Carson

“I never learned alle the riles all the thing your not supposed to do”

En rå og støjende rockstil fra slut-80’erne og 90’erne, kendetegnet ved tunge guitarriffs, ærlige tekster og et anti-kommercielt udtryk.

Typografi

Ellen Lupton -Thinking with type

Sanserif=grotesk

Serif=Antikva

Gotisk=Fractur

Skriftsnit

Små bogstaver kaldes minuskler god morgen
Store bogstaver kaldes majuskler GOD MORGEN

Ordinær
Fed
Kursiv
Fed kursiv

Micro copy

Små ord med meget kraft -Påvirker konvertering og brugeroplevelsen

Typer af microcopy:

– Onboarding teksten: Guider brugerne, når de tilmelder sig et nyt produkt eller en ny tjeneste
– Fejlmeddelelser: Eks. 404 sider og korte tekster, der informerer om et problem, eks. forkert adgangskode.
– Succesbeskeder: “Yay, du har opnået det her!” – type beskeder der vises, når brugeren har fuldført en opgave.
– Værktøjstip: Tekst der vises, når en bruger holder markøren over eller rører ved et element. Værktøjstip giver brugeren
mere information om funktionalitet og funktioner.
– Tekst i online formularer: super vigtigt for at sikre, at folk ikke giver op, før de udfylder en formular.
– Tomme tilstande: nogle gange er der intet at vise på skærmen, fordi et værktøj eller en tjeneste ikke bruges endnu. Tilføj
en forklarende tekst og/eller billede, eller forklar, hvorfor siden er tom.
– Loading tilstande: Mens en bruger venter på at en handling behandles, som “Vent venligst! Dine data hentes – det bør
ikke tage mere end et minut.”
– Billedtekster: Korte tekster under et billede, der beskriver dets indhold.
– Billed-alt-tekster: Korte tekster, der læses op af skærmlæsere og også vises, hvis billedet ikke indlæses korrekt.
– Notifikationer: Korte beskeder med vigtig information. For eksempel når en opgradering er tilgængelig.
– Offboarding-tekst: Den tekst, der vises, når en bruger siger adios til et produkt / en tjeneste

Fælles for næsten alle typer mikrokopier er, at de driver brugernes handling. Onboarding-tekst guider dig gennem ukendte opgaver på en let-at-følge måde. En fejlmeddelelse vil bede dig om at handle ved at løse problemet.

Farvelære og UX

CMYK=substrativ farvecirkel

RGB=additive farvecirkel

Affordance

Affordance betyder helt grundlæggende: de muligheder for handling, som et objekt eller en situation tilbyder et menneske (eller et dyr).

Det er et begreb fra psykologi og design (opfundet af James J. Gibson), og det handler altså om relationen mellem ting og brugere: hvad kan jeg gøre med det her?

• Real affordance = hvad du kan (det objektet faktisk tillader dig at gøre).
• Perceived affordance = hvad du tror du kan (det objektets udseende får dig til at forvente).

Diverse typer af affordance i UI

• Eksplicit affordance: Tekst ex. “submit”
• Mønster affordance: ikoner ex. burger menu knap = også understreget tekset er et link – så noget der ikke ligner noget fra den virkelige verden.
• Skjulte affordance: noget der viser at der ligger mere bag ex burger menu og cc for flere sprog
• Falsk affordance: dark patterns, ex grøn cancel knap
• Metaforisk affordance: ikoner, emoji, indkøbskurv. noget fra den virkelige verden.
• Negative affordance: Viser hvad der ikke er inteagerbart. ex gøre tekst grå

GRID baseret design

Josef Muller Brockmann grid – kendt ved dens margen

Golden canon grid

• Egenskab 1) Tekstområdet har altid samme proportion som
  siden.

• Egenskab 2) Tekstområdet er altid fordelt inden for siden, så
  den ydre margen er det dobbelte af bredden af indermargenen,
  og så bundmargenen er to gange bredden af topmargen.
• Egenskab 3) Forholdene mellem indre margin og topmargin og
  ydre margin til bundmargen er altid det samme som forholdet
  mellem sidens bredde og højden.

Golden canon grid for desktop

Semiotik

Læreren om tegn

Defineret af Charles Sanders Peirce – siger der er tre typer af tegn

• Ikon – repræsentamen deler lighed med objektet (deler fysiske egenskaber)
• Index – repræsentamen associerer indirekte til objektet
• Symbol – repræsentamen relaterer sig til objektet ved en konvention

Multi modal analyse en metode til at analysere betydning, der skabes gennem flere forskellige former for udtryksmåder (modaliteter), såsom tale, skrift, billeder, gestikulation, lyd og bevægelse

jo færre detaljer desto lavere modalitet

Triadiske tegn begreb

Ferdinand Saussure

Roland Barthes 1915-1980 fører Saussure videre

Denotation: neutrale betydning uafhængigt af dets betydningsnuancer, der beror på associationer, værdiladning og stillag fx har ordene hest, ganger og krikke alle denotationen ‘hest’

Konnotation: betydningsnuance som et ord, udtryk el.lign. indeholder ud over selve grundbetydningen, og som beror på bl.a. associationer, værdiladning og stillag

Design tokens

Baseret på Choudhary, Deepak (2022) Design Tokens — a Design System Superpower!, UX planet : https://uxplanet.org/design-tokens-a-design-system-superpower-dab07a5f0035 og interview med Michael Christiansen fra UR

Design tokens er en metode til at oprette og bruge de samme
ressourcer i design- og udviklingsmiljøer via navngivning

Design værdi

Design Currency af Visocky O’Grady

ISBN	0321844920, 9780321844927

Der er to aspekter der skal tages stilling til Hård- og Blød værdi. Besluttes i samarbejde med klienten.

Hård værdi

• Hvis design løsninger
  – Sparer penge på materialer
  – Reducerer produktionsomkostningerne
  – Genererer trafik til et websted
  – Øger antal følgere på sociale
  medier
• Hård værdi er let at måle

Blød værdi

• Immateriel, subjektivt og
  vanskeligere at måle
• Følelsesladet forbindelse til
  brandet
  – Brand loyalitet
  – Delight
  – Inspiration
• Svært at
  dokumentere

Hierarchy of design needs for client

Liddwell, Holden and Butler

Jo højere man kommer desto svære bliver det at argumentere for

Designtrappen

“Virksomheder, der klarer sig i fase 3 og 4, klarer sig bedre end virksomheder, der opererer på lavere niveauer. Investering i
design førte til 20% vækst i omsætningen”

Why Design-Led Companies Outperform Everyone Else

Rapport der kommer med statestikker for effekten af design drevne virksomheder: https://medium.com/ux-management/the-2-3-trillion-question-why-design-led-companies-outperform-everyone-else-9e3875a6a3d5