Design

Gestalt
 Gestalt-principperne er en række psykologiske principper, der beskriver, hvordan
mennesker opfatter og skaber mening i visuel information. Ordet "Gestalt" er tysk og
betyder "form" eller "skikkelse."
 Nærhed: Tætte objekter opfattes som en gruppe, skaber enhed.
 Lighed: Lignende objekter opfattes som en gruppe, baseret på form, farve eller størrelse.
 Lukkethed: Sindet udfylder manglende information, ser hele objektet trods mangler.
 Kontinuitet: Linjer og kurver opfattes som kontinuerlige, selv ved afbrydelser.
 Forbundethed: Objekter i samme retning opfattes som en gruppe, bruges i animationer.
 Figur-baggrund: Adskillelse mellem figur og baggrund for klarhed.
 Symmetri: Symmetriske objekter opfattes som stabile og ordnede.
 Prägnanz: Mennesker foretrækker den enkleste fortolkning af visuelle elementer.

Wireframe
 En wireframe er en grundlæggende skitse af en hjemmesides layout, fokuserende på
elementernes placering, layout, og brugerinteraktion. Det giver en overordnet forståelse af,
hvordan indholdet organiseres på siden eller skærmen.
 Lavfidelitetswireframes (Low-Fidelity):
o Enkle skitser, lavet med blyant, papir, eller digitale værktøjer. Fokuserer på
grundlæggende struktur og layout uden detaljerede grafiske elementer.
 Højfidelitetswireframes (High-Fidelity):
o Detaljerede skitser med farver, skrifttyper og præcise elementplaceringer. Oprettet
med specialiserede designværktøjer og kan indeholde interaktive elementer for
realistisk produktfornemmelse.

Mockup:
 En visuel model af et digitalt produkt eller website, der illustrerer design, struktur og
funktionalitet. Mockups går ud over wireframes med grafiske detaljer og realisme,
herunder farver, billeder og designelementer. Bruges til at kommunikere designidéer til
interessenter. Ikke-kodet, repræsenterer, hvordan det endelige produkt vil se ud.

Farveterminologi:
 Hue (Nuance): Grundfarven (blå, grøn, rød osv.).
 Chroma: Renheden af en farve uden tilsætning af sort, hvid eller grå.
 Saturation (Mætning): Styrken af en farve (høj mætning er stærk).
 Value (Værdi): Lyshed eller mørkhed af en farve (lys med høj værdi).
 Tones (Toner): Farver med tilføjet grå, gør dem mere matte.
 Shades (Skygge): Farver med tilføjet sort, gør dem mørkere.
 Tints (Farver): Farver med tilføjet hvid, gør dem lysere.

Whitespace
 "Whitespace" refererer til det ubrugte område i design, omkring tekst, billeder, og knapper.
 Ikke nødvendigvis ”tomt”, det er en vigtig del af designet, påvirker brugeroplevelsen.
  Forbedrer klarhed, organiserer indhold, og øger læsbarheden.
 Reducerer visuel støj, gør det lettere for brugere at fokusere.
 God brug af whitespace forbedrer æstetik, skaber behagelig brugeroplevelse og intuitiv
navigation.

Visuelt Hierarki:
 Hierarki guider opmærksomhed og forståelse i design.
 Størrelse: Større elementer tiltrækker mere opmærksomhed.
 Farve: Bruges til at differentiere og fremhæve vigtige elementer.
 Typografi: Skrifttype og størrelse skaber hierarki, fed skrift for vigtig information.
 Placering: Øverst eller i midten opfattes som mere betydningsfuldt.
 Kontrast: Farver, former eller tekstur skaber kontrast og hierarki.
 Repetition: Gentagelse skaber konsistens og etablerer hierarki.
 Linjebrud og mellemrum: Påvirker læsbarhed, gruppeelementer, adskiller sektioner.

Det gyldne snit

 Det gyldne snit er en kompositionsmetode i kunst og design, hvor elementer placeres i
forhold til en specifik forholdsmæssig balance. Dette skaber æstetisk tiltalende harmoni i
billeder eller layouts, og det er en retningslinje, mange kunstnere og designere anvender.

Z-pattern
 Z-mønsteret bruges i webdesign og layout for at følge den naturlige bevægelse af øjnene på
en skærm. Designere organiserer indholdet i overensstemmelse med dette mønster for at
sikre, at vigtige oplysninger præsenteres letlæseligt under almindelig læsning eller scanning
på websider og skærmbaserede medier.

F-pattern
 "F-pattern" beskriver øjenbevægelsesmønstret, der ligner bogstavet "F" under
tekstlæsning. Dette er særligt relevant for teksttunge sider som nyhedssider eller blogs,
hvor brugere skanner overskrifter og første linjer af afsnit. Designere kan udnytte F-
mønsteret ved at placere vigtige oplysninger langs skærmens øverste og venstre kant for at
øge chancerne for opdagelse, da disse områder oftere tiltrækker opmærksomhed.

Typografi:
 Omfatter valg af skrifttyper, størrelser, linjeafstand og layout.
 Skrifttyper inkluderer Arial, Times New Roman, Helvetica, osv.
 Skriftstørrelse og linjeafstand påvirker læsbarheden.
 Passende linjelængde er 50-75 tegn pr. linje.
 Kontrast mellem tekst og baggrund er vigtig.
 Typografisk hierarki guider læserens opmærksomhed.
 Stilarter som fed, kursiv og kapitaler bruges til fremhævning.
 Essentiel i design, herunder trykte materialer, webdesign og reklamer.
 Handler om at skabe harmonisk og effektiv præsentation af indhold.

Stil og genre
  Stil i design handler om den genkendelige måde, hvorpå en designer udtrykker sig visuelt.
Genre refererer derimod til en kategori eller type design, der deler fælles karakteristika
eller formål.

Kompositionsmæssige tiltag:
 Reglen om tredjedele: Billedet eller layoutet opdeles i ni lige sektioner ved hjælp af
vandrette og lodrette linjer. Vigtige elementer placeres langs disse linjer eller deres kryds
for at skabe balance og interesse.
 Balance: Opnå visuel balance gennem symmetrisk, asymmetrisk eller radial fordeling af
elementer for at skabe harmoni.
 Fokuspunkt: Definér et primært fokuspunkt og brug kompositionen til at lede øjnene mod
dette punkt ved hjælp af farve, størrelse eller placering.
 Kontrast: Skab visuel interesse ved at bruge kontraster i farve, form, størrelse eller tekstur
for at adskille og tiltrække opmærksomhed.
 Repetition: Gentag visuelle elementer som farver, former eller mønstre for at skabe enhed
og sammenhæng.
 Retning og bevægelse: Skab følelse af retning eller bevægelse ved hjælp af linjer, former
eller elementarrangement for at guide øjnene gennem designet.
 Proportioner og skala: Sikre korrekte proportioner og skala mellem elementer for at
opretholde harmoni og undgå forvrængning.
 Negativt rum (whitespace): Anvend negativt rum omkring eller mellem elementer for at
skabe klarhed og undgå overbelastning.
 Hierarki: Skab et visuelt hierarki gennem størrelse, farve eller placering for at guide
opmærksomheden og organisere information.