Teori og noter – Anja Kristensen

Research

adminkwebdesign — Wed, 27 Nov 2024 11:02:43 +0000

Brugerundersøgelser spiller en central rolle i udviklingen af digitale løsninger. Her er en oversigt over metoder, datakilder, og gode råd, der kan hjælpe med at få indsigt i brugerens behov og adfærd.

Interviews: En-til-en samtaler for at forstå brugerens oplevelser, behov og udfordringer.
Spørgeskemaer og surveys: Bruges til at indsamle data fra mange brugere på kort tid.
Observation: Direkte observation af brugere, når de interagerer med et produkt.
Brugertest: Brugere bliver bedt om at udføre specifikke opgaver på en prototype eller færdig løsning.
A/B-tests: To versioner af en digital løsning testes mod hinanden for at se, hvilken der performer bedst.

Primære og sekundære datakilder

Primære datakilder
Data, du selv indsamler direkte fra brugerne:
- Interviews
- Surveys
- Brugertests
- Observationer
Sekundære datakilder
Data, der allerede eksisterer, og som kan give kontekst:
- Rapporter og undersøgelser fra tredjepart f.eks. Danmarks statistik
- Statistik fra Google Analytics eller andre værktøjer
- Brugeranmeldelser og sociale medieindlæg

Kvalitative vs. kvantitative brugerundersøgelser

Kvalitative undersøgelser
Bruges til at forstå “hvorfor” bag brugeradfærd.
- Metoder: Interviews, observationer, fokusgrupper.
- Eksempel: Udforskning af, hvorfor brugere opgiver en bestemt funktion.
Kvantitative undersøgelser
Bruges til at måle og kvantificere data, ofte med henblik på at generalisere.
- Metoder: Surveys, A/B-tests, analyser af trafikdata.
- Eksempel: Hvor mange brugere klikker på en bestemt knap, eller hvilken version af en hjemmeside konverterer bedst.

Copywriting Essentials

adminkwebdesign — Tue, 15 Oct 2024 12:01:44 +0000

Copywriting er kunsten at overbevise kunder om at handle på bestemte måder på bestemte steder i kunderejsen.

Copywriting essentials handler om at skrive tekst, der ikke kun informerer, men også engagerer, sælger og skaber en stærk forbindelse til målgruppen.

Grundprincipper i Copywriting

Kendskab til målgruppen:
Teksten skal være relevant for den målgruppe, designet henvender sig til. Forstå deres behov, udfordringer og ønsker, så sproget og tonen kan tilpasses.
Klarhed og enkelhed:
Copywriting bør være letforståelig og skarp. Korte sætninger og præcist sprog hjælper brugeren med hurtigt at få essensen af budskabet.
Engagerende overskrifter:
Overskrifter og underoverskrifter skal fange opmærksomheden med det samme. De fungerer som indgange til resten af indholdet og skal skabe nysgerrighed eller værdi.
Call to Action (CTA):
En essentiel del af copywriting er at guide brugeren mod en handling, fx “Tilmeld dig nu” eller “Læs mere her”. CTAs skal være tydelige og motiverende.

Hvordan copywriting og design spiller sammen

Visuelt hierarki:
Designet skal understøtte tekstens flow og guide brugeren gennem indholdet. Vigtige tekstdele som overskrifter og CTAs fremhæves med typografi, farver eller placering.
Læsevenlighed:
Som designer skal du sikre, at teksten er let at læse ved at vælge passende skrifttyper, linjeafstand og kontraster. Undgå lange tekstblokke – brug punktopstillinger og mellemrum.
Stemning og tone:
Tekstens tone skal matche det visuelle design. Et legende design kræver en mere afslappet og humoristisk tone, mens et professionelt layout kræver formel og præcis tekst.
Responsivt design:
Teksten skal fungere godt på forskellige skærmstørrelser. Designet skal kunne tilpasses, så budskabet forbliver tydeligt og engagerende, uanset om det ses på en mobil, tablet eller desktop.

HTML & CSS

adminkwebdesign — Tue, 15 Oct 2024 12:01:19 +0000

HTML (HyperText Markup Language) og CSS (Cascading Style Sheets) er to grundlæggende teknologier, der bruges til at opbygge og designe websites. HTML definerer strukturen af en webside, mens CSS styrer udseendet og layoutet.

HTML bygger strukturen af webindholdet, mens CSS styrer, hvordan det ser ud.

HTML bruger tags som

,
,
til at definere indhold, mens CSS definerer udseendet med selektorer som `color`, `font-family`, `margin`, `padding`.

Du kan adskille HTML og CSS i separate filer for bedre organisering og vedligeholdelse af koden.

Forklaring af HTML-tags:

: Den overordnede container for HTML-indholdet.

: Indeholder metadata som sidens titel og karakterkode.

: Indeholder alt synligt indhold på websiden.

,
: Overskrifter, hvor
er den vigtigste og
er en underoverskrift.

: Definerer et afsnit med tekst.

,
,
: Semantiske tags, der hjælper med at strukturere indholdet på siden.

Forklaring af CSS-regler:

`body`, `h1`, `p`: Selektorer, der peger på HTML-elementer.

`{}`: Inden for krøllede parenteser defineres reglerne for udseendet.

`font-family`: Bestemmer skrifttypen for elementet.

`background-color`: Sætter baggrundsfarven på elementet.

`color`: Ændrer tekstfarven.

`line-height`: Justerer linjeafstanden for tekst.

Undervisningsmateriale / tutorials er på scirmba.com:

1. undervisningsgang indeholdte et link vi skulle følge, som jeg ikke har kunne tilgå, så har fundet andre sider på internettet i.f.t. at læse om HTML og CSS, mem i de slides der også var lagt ind på itslearning var der også link til introduktion til HTML.

2. undervisningsgang blev aflyst p.g.a. underviseren var syg. Vi skulle så selv lave opgaver, men igen kunne jeg ikke tilgå det link, der var lagt op:

Til gengæld kunne jeg bruge det link der var i de slides der var lagt ind på Itslearning.

Note om Javascript: JavaScript giver hjemmesider interaktivitet og dynamik. Det gør det muligt at opdatere indhold, håndtere brugerinput og kommunikere med servere uden at genindlæse siden. JavaScript er et programmeringssprog, der bruges til at gøre hjemmesider interaktive og dynamiske. JavaScript bruges til at tilføje funktionalitet.

Adobe Illustrator

adminkwebdesign — Tue, 15 Oct 2024 12:00:52 +0000

Adobe Illustrator er et professionelt vektorgrafikprogram, der anvendes til at skabe grafiske elementer, som kan skaleres uden at miste kvalitet. Det er en del af Adobe Creative Cloud-pakken og bruges bredt inden for grafisk design, illustration og multimediedesign.

Man anvender ofte Illustrator til f.eks.:

Logo-design: Illustrator er ideelt til at designe f.eks. logoer, således at logoet kan tilpasses forskellige størrelser, fra visitkort til store plakater, uden tab af kvalitet.
Illustrationer: Programmet bruges til at lave detaljerede illustrationer, ikoner og grafiske elementer.
Printmateriale: Design af tryksager som flyers, brochurer, visitkort og plakater, der kræver høj opløsning og skalerbarhed.
Webdesign-elementer: Design af UI-elementer f.eks. koner, bannere og wireframes.

Vektorgrafik betyder at grafikken bevarer sin skarphed uanset størrelse.

Præcision og kontrol: Illustrator tilbyder værktøjer som pen-værktøjet, som giver fuld kontrol over kurver og linjer.

Video Essentials

adminkwebdesign — Tue, 15 Oct 2024 12:00:15 +0000

Processen for videoproduktion er: Præ-produktion -> Produktion -> Postproduktion -> Levering

Der er flere ting man skal tage højde for i forbindelse med planlægning af en videoproduktion:

Planlægning og forberedelse: Storyboarding, manuskriptskrivning og valg af udstyr.

Optageteknikker: Hvordan man bruger kameraer, lys, og lydudstyr for at få den bedste kvalitet.

Redigering: Introduktion til videoredigeringssoftware og teknikker som klipning, farvekorrektion og tilføjelse af effekter.

Eksport og distribution: Hvordan man gør videoen klar til forskellige platforme som YouTube, sociale medier eller professionelle præsentationer.

Man kan arbejde med forskellige former for prototyper indenfor videoproduktion:

Storyboard: En visuel skitse af, hvordan videoen skal se ud scene for scene, som bruges til at planlægge kameravinkler, bevægelser og overgange.
Animatic Prototyping: Storyboards med simple animationer og tidsindstillinger.
Low-Fidelity Video Prototyping: En optagelse med f.eks. smartphone, som bruges til at teste idéer

Der er to ting man skal være opmærksom på i.f.t. implementering og brugeroplevelsen:

Experiential Prototyping fokuserer på slutbrugerens følelse og oplevelse. Dette handler om at simulere den oplevelse, som brugeren vil få, når de ser eller interagerer med en video f.eks. VR.
Tactical Prototyping er mere fokuseret på de praktiske og tekniske detaljer i produktionen f.eks. at teste funktionaliteten og de tekniske aspekter af produktionen. Det bruges til at vurdere, om værktøjer, teknikker og produktionsmetoder fungerer som forventet.

Andre noter:

Komposition handler om, hvordan elementer placeres i billedet for at skabe en visuel balance og fortælle en historie.

Reglen om tredjedele: Deler billedet op i tre lige store dele, både horisontalt og vertikalt, og placerer vigtige elementer langs linjerne eller ved deres kryds.
Ledelinjer: Naturlige linjer i billedet (veje, bygninger, lysstråler) bruges til at lede seerens blik mod det vigtigste i scenen.
Symmetri og asymmetri: Skaber enten balance eller spænding afhængigt af filmens tone og budskab.

I forhold til kamera og billede skelner man mellem følgende:

Supertotal (hele scenen)
Total (hele personen/objektet)
Halvtotal (lidt tættere end total)
Halvnær (fra taljen og op)
Nær (meget tæt på f.eks. øjnene)

Hvis man vælger supertotal til nær – kan virke meget dramatisk – f.eks. gyserfilm

Perspektiv refererer til, hvordan dybde og rummelighed skabes i billedet, og hvordan kameraets placering påvirker seerens opfattelse.

Normal: Optagelse i øjenhøjde.
Frøperspektiv: Optagelse nedefra, får subjektet til at virke større, mere magtfuldt.
Over-the-shoulder: Bruges i samtalescener for at give en følelse af nærhed og deltagelse.
Fugleperspektiv: Optagelse oppefra, giver overblik og kan få en person til at virke lille eller sårbar.

Lys er afgørende for at skabe stemning, dybde og fokus i en video. Man skelner mellem naturligt lys (f.eks. solen) og det kunstige lys (f.eks. lamper, spotlights);

Low-key lighting: Bruges til mørke og dramatiske scener med høje kontraster.
Back light: Adskiller motivet fra baggrunden og skaber dybde.
Fill light: Reducerer skygger og blødgør kontraster.
Key light: Hovedlyskilden, der definerer motivet.
High-key lighting: Skaber en lys og positiv atmosfære med få skygger.

Lyd bidrager til både stemning og informationsformidling i en video.

Dialog/samtale: Lyd, der naturligt forekommer i filmens verden (dialog, skridt, døre der smækker).
Musik og lydeffekter (baggrundsmusik, voiceover regn, knirkende døre).

Bevægelse skaber dynamik og kan bruges til at lede seerens opmærksomhed.

Kamerabevægelse: Panorering, tilt, tracking eller håndholdt kamera for at skabe forskellige effekter.
Motivets bevægelse: Brug af aktører eller objekter, der bevæger sig, kan gøre scener mere livlige.

Hollywood-modellen

Hollywood-modellen, også kendt som den klassiske fortællemodel, er en struktureret tilgang til historiefortælling i film. Den følger ofte en lineær struktur med en tydelig begyndelse, midte og slutning, og den er med til at sikre, at publikum engageres og fastholdes.

Introduktion (Setup):
- Præsenterer hovedkarakterer, miljø og konflikt.
- Ender ofte med en inciting incident – en begivenhed, der sætter historien i gang.
Konflikt (Confrontation):
- Hoveddelen af historien, hvor konflikten udvikles og intensiveres.
- Karakterer møder forhindringer og udfordringer, hvilket skaber spænding.
Klimaks (Climax):
- Det afgørende øjeblik, hvor konflikten når sit højdepunkt.
- Ofte er det her, hovedpersonen træffer en skæbnesvanger beslutning.
Udtoning (Resolution):
- Konflikten løses, og historien afrundes.
- Karakterer vender tilbage til en ny normalitet.

Typografi

adminkwebdesign — Tue, 15 Oct 2024 11:59:40 +0000

Typografi spiller en central rolle i layout, fordi den påvirker, hvordan indholdet bliver opfattet og forstået. God typografi handler ikke kun om æstetik; den skaber også struktur, hierarki og læsbarhed.

Hvorfor er typografi vigtig

Kommunikation: Typografien hjælper med at formidle budskaber tydeligt og effektivt. En korrekt valgt skrifttype kan understøtte tone og stemning.
Læselighed og læsevenlighed: God typografi sikrer, at teksten er nem at læse.
Visuel hierarki: Ved at bruge forskellige størrelser og farver kan typografi guide brugeren gennem indholdet og fremhæve vigtig information.
Æstetik og branding: Typografien skal matche brandets identitet og give en visuel sammenhæng på tværs af materialer.

Hvordan anvendes typografi

Valg af skrifttype:
- Brug sans-serif til digitale medier (fx Arial, Roboto) for bedre skærmlæsning.
- Brug serif til trykte materialer (fx Times New Roman, Garamond) for et klassisk udtryk.
Typografisk hierarki:
- Overskrifter skal være mere iøjnefaldende end brødteksten.
- Underoverskrifter kan have en mindre skriftstørrelse, men stadig skille sig ud.
Spacing og justering:
- Brug passende linjeafstand (leading), bogstavmellemrum (kerning), og afsnitsafstand for at give teksten luft og balance.
- Undgå tætsiddende tekstblokke for at lette læsning.
Farve og kontrast:
- Sørg for høj kontrast mellem tekst og baggrund for læsbarhed.
- Overvej farvevalg i forhold til tilgængelighed (fx for farveblinde brugere).

Rapportskrivning – Akademisk rapport

adminkwebdesign — Tue, 15 Oct 2024 11:59:01 +0000

En god guide til akademisk rapport:

AkademiskMetode-2023Updated Download

En god opgave er lig med godt udgangspunkt til eksamen.

Forstå hvordan man laver en akademisk opgave.
Samarbejde i gruppen – I er afhængige af hinanden.
Sæt god tid af til at skrive og sætte en opgave sammen.

Problemstillinger er de spørgsmål du er nødt til at svare på for at kunne besvare problemformuleringen.

Konklusionen svarer på de spørgsmål der stilles i problemformuleringen.

God idé at få en vejleder til at lære problemformuleringen igennem og især til det afsluttende projekt.

Informationssøgning

Biblioteket
Google Scholar
Infomedia

Referencer

På UCL anvendes Harvard – referencesystem, som sikrer at kilder er tydeligt dokumenteret.

Se formelle krav: https://bibliotek.ucl.dk/harvard/start

I teksten angives forfatterens efternavn og publikationens årstal i parentes, f.eks. (Jensen, 2020). Dette gør det nemt at finde den fulde reference i litteraturlisten.

Referencer skal opstilles i alfabetisk rækkefølge baseret på forfatterenes efternavne.

Eksempler på referencer:

Reference fra en Bog:
I teksten skriver man: (Jensen, 2020)
På litteraturlisten skriver man: Jensen, P., 2020. Introduktion til mediedesign. 3. udg. København: Forlaget Akademia.

Reference fra et Website:
I teksten skriver man: (Smith, 2023)
På litteraturlisten skriver man: Smith, J., 2023. Understanding Digital Trends. [online] Available at: https://www.digitaltrends.com [Lokaliseret d. 27 Nov. 2024].

Book en bibliotekar – især ved afsluttende projekt – kan være behjælpelig med mange ting. Vores hedder Simon Hansen.

Man kan med fordel downloade ”Zotero” – som kan sortere og sætte referencer rigtigt op i rapporten. Det er ikke sikkert at det virker i google docs. Biblioteket kan være behjælpelig med opsætning. Kan også sættes op så man kan dele i en gruppe.

Andre noter til guiden

Afgrænsning: Man behøver ikke at skrive hvad man har valgt fra i.f.m. afgrænsningen og hvorfor man har valgt noget fra.

Skriv et reflektionsafsnit i slut af opgaven ”det kunne være interessant at kigge på… ” og tage det med til den mundtlige eksamen.

Brug gerne delkonklusioner – men IKKE efter hvert afsnit/metode. Se side 15. Tænk på designthinking. Lav delkonklusion efter hver proces i designthinking. Delkonklusion, også kaldet opsummering, skal ikke stå i indholdsfortegnelsen. Hvert spørgsmål i problemformuleringen kan indeholde en del-konklusion, som samles i den endelige konklusion.

Analysen består typisk af flere afsnit, med dertilhørende delkonklusioner. Se side 16.

Bilag: Husk samtykkeerklæringen (GDPR) – kan være god at have med som bilag. Se side 21. Bilag kan også have deres egen referenceliste.

Plagiat: Man skal omformulere sin egne tekster/projekter.

Bruges AI: Husk at dokumentere prompterne…

Hvis vi selv tager billeder ”s. 24” – skal noteres med ”Egen tilvirkning” i referencelisten.

Sprog/tone: s. 25 – skriv i neutral tone (ikke: jeg, man, vi, gruppen osv.)

ØVELSE:

Vi vil analysere og undersøge hvordan skolens hjemmeside bliver mere brugervenlig ved hjælp af brugerundersøgelse og udarbejdelse af prototype af redesign af hjemmesiden.

Hvordan gør vi Næsby Skoles hjemmeside mere brugervenlig i.f.t. målgruppen? Hvordan kan vi anvende farver, billeder og anden grafik for at gøre siden mere brugervenlig? Hvordan kan vi optimere skolens hjemmeside i.f.t. struktur, opbygning? Hvem er nuværende brugere?

Andet eksempel på problemformulering:

Hvordan skabers der større sammenhæng mellem xxx sociale medier og hjemmesiden, så hjemmesiden i højere grad aspekter virksomhedens mission og identitet

Herunder spørgsmål til problemstillinger….

AI -kunstig intelligens

adminkwebdesign — Thu, 10 Oct 2024 14:22:44 +0000

Som multimediedesigner kan AI være et utroligt værktøj til at forbedre kreativitet, automatisere opgaver og skabe mere effektive arbejdsgange. Her er nogle områder, hvor AI kan anvendes i arbejdet som multimediedesigner:

1. Grafisk design og billedmanipulation

Automatisk billedgenerering: AI-værktøjer som DALL·E og MidJourney kan generere unikke billeder og illustrationer baseret på tekstbeskrivelser, hvilket sparer tid ved at skabe visuelle elementer fra bunden.
Automatisk billedredigering: Værktøjer som Adobe Sensei og Luminar AI bruger AI til at hjælpe med avanceret fotoredigering som farvekorrigering, baggrundsfjernelse og endda at forvandle billeder til forskellige stilarter med et enkelt klik.
Generering af mockups: AI kan hjælpe med at lave hurtige designmockups, præsentationer og branding-prototyper. For eksempel kan AI-genererede skitser hjælpe dig med at komme i gang med et designprojekt.

2. Videoredigering og animation

Automatisk videoredigering: AI-værktøjer som Runway ML og Adobe Premiere Pro kan hjælpe med at automatisere video-slicing, lydsynkronisering, og endda forslag til overgange baseret på indholdsanalyse.
Animationer og motion graphics: AI kan generere automatiske animationer, som sparer tid, når du laver motion graphics eller 3D-animationer, ved at foreslå bevægelsesmønstre og overgangseffekter.
Video resuméer: AI kan analysere videoer og generere resuméer, trailere eller højdepunktssammendrag, hvilket er særligt nyttigt for produktion af digitalt indhold på sociale medier eller i markedsføring.

3. UX/UI design

AI-drevne UI-designværktøjer: Platforme som Uizard og Figma bruger AI til at generere UI-designs og wireframes baseret på simple skitser eller beskrivelser. Dette kan speede oprettelsesprocessen for apps, websider og digitale grænseflader op.
Brugeradfærd og heatmaps: AI-baserede værktøjer som Hotjar bruger data om brugerinteraktioner til at forudsige adfærd og lave heatmaps, der hjælper dig med at forbedre brugeroplevelsen (UX) og optimere UI-designs.
Prototyping og test: AI kan generere automatiserede brugerflows og hurtige prototyper baseret på tidligere design- og brugerdata, hvilket kan accelerere design- og testfaserne.

4. Webudvikling og designoptimering

Kodeautomatisering: AI-værktøjer som GitHub Copilot kan hjælpe med at skrive kode hurtigere, ved at foreslå kodestykker eller automatisere visse udviklingsprocesser, når du udvikler hjemmesider eller interaktive projekter.
SEO-optimering og indholdsforbedring: AI-værktøjer som Surfer SEO og Jasper AI kan hjælpe dig med at skrive og optimere indhold til søgemaskiner, analysere indholdets kvalitet og give anbefalinger til forbedringer baseret på data og trends.
Responsivt design: AI kan hjælpe med at generere responsivt design, der automatisk tilpasser sig forskellige skærmstørrelser og enheder, så du ikke behøver at kode det manuelt.

5. Lydredigering og generering

Stemmesyntese og AI-drevne voiceovers: Værktøjer som Descript og Resemble AI kan lave realistiske voiceovers baseret på tekstinput, hvilket kan være nyttigt til præsentationer, videoer og andre multimedieprojekter.
Automatisk musikgenerering: AI som AIVA og Amper Music kan generere baggrundsmusik og lyddesign til projekter, hvilket kan være en ressourcebesparende måde at tilføje lydspor på.

6. Content Creation og Markedsføring

Automatiseret indholdsproduktion: AI som ChatGPT kan hjælpe dig med at skrive blogindlæg, lave content marketing-kampagner eller endda hjælpe med tekstforfatning til reklamer, præsentationer og webindhold.
Personaliserede kampagner: AI-drevne platforme som HubSpot bruger dataanalyse til at personalisere markedsføringskampagner, baseret på kundedata og interaktioner, så du kan målrette dine kreative strategier mere præcist.

7. Augmented Reality (AR) og Virtual Reality (VR)

AI-assisteret 3D-modellering: AI kan hjælpe med at generere 3D-modeller hurtigere, hvilket er nyttigt for multimediedesignere, der arbejder med VR/AR-projekter eller spiludvikling.
Interaktivt design: AI kan hjælpe med at skabe mere dynamiske og interaktive brugeroplevelser ved at analysere brugeradfærd og tilpasse indhold i realtid.

8. Dataanalyse og designforbedringer

Analyser og optimering af brugerinteraktioner: AI kan analysere, hvordan brugere interagerer med dine designs, og foreslå forbedringer for at forbedre konverteringsrater, brugeroplevelse eller engagement.
A/B test automatisering: AI-værktøjer kan hjælpe dig med at køre A/B-tests og analysere, hvilke design- eller indholdselementer der fungerer bedst i dine digitale produkter.

9. Chatbots og interaktive løsninger

AI-assisterede chatbots: Du kan designe brugeroplevelser med AI-drevne chatbots, der leverer kundeservice eller vejledning på websteder og apps, uden at du behøver kode komplekse scripts.

Ved at integrere AI i arbejdsprocesser som multimediedesigner kan man skabe mere personaliserede, effektive og kreative løsninger på en skalerbar måde. Dette giver mere tid til at fokusere på konceptudvikling, innovation og det overordnede designarbejde.

Hvad hedder de 5 vigtigste prompte når man skal spørge AI om noget

ChatGPT sagde:

ChatGPT

Når du arbejder med AI, er det vigtigt at formulere dine prompts på en måde, der gør det lettere for AI’en at forstå din hensigt og levere det bedste svar. Her er fem vigtige principper eller “prompter”, du kan følge, når du spørger AI om noget:

1. Vær specifik og præcis

AI’er fungerer bedst, når de får klare og præcise instruktioner. Undgå vaghed, og vær detaljeret i din forespørgsel.

Eksempel: I stedet for at sige “Hvordan laver man en hjemmeside?”, spørg: “Hvilke trin skal man følge for at lave en WordPress-hjemmeside med et kontaktformular-plugin?”

2. Definér konteksten

Hvis dit spørgsmål er relateret til en specifik kontekst (for eksempel et projekt, en platform eller en målgruppe), så sørg for at inkludere denne information. Det hjælper AI’en med at tilpasse svaret til dit behov.

Eksempel: “Hvordan optimerer man SEO på en e-handelsplatform, der sælger modeprodukter?” giver AI’en en klar kontekst.

3. Spørg om trin-for-trin vejledning

Hvis du har brug for en vejledning til en proces, kan du bede AI om at forklare det trin for trin. Dette sikrer, at du får en mere struktureret og detaljeret forklaring.

Eksempel: “Kan du give en trin-for-trin vejledning i, hvordan man opsætter en Google Ads-kampagne?”

4. Angiv formålet eller resultatet

Hvis du vil have et specifikt resultat, så vær klar over, hvad det er, du vil opnå med dit spørgsmål. Det gør svaret mere relevant og målrettet.

Eksempel: I stedet for at sige “Hvordan bruger man Canva?”, spørg “Hvordan kan jeg designe en professionel præsentation i Canva til et forretningsmøde?”

5. Bed om eksempler eller skabeloner

Når du ønsker en praktisk løsning eller inspiration, kan du bede om eksempler, skabeloner eller forslag, som kan være direkte anvendelige.

Eksempel: “Kan du give et eksempel på en effektiv e-mail-kampagne til en ny produktlancering?”

Ekstra tip: Kombinér spørgsmål med hypotetiske scenarier

Hvis du vil teste en ide eller forstå, hvordan noget fungerer i praksis, kan du præsentere et hypotetisk scenarie for AI’en.

Eksempel: “Hvordan ville du designe en marketingstrategi for et lille startup, der sælger økologisk kaffe?”

Ved at følge disse principper, kan du opnå mere brugbare, målrettede og detaljerede svar fra AI, der direkte hjælper med dine behov.

UI (Interface Essentials) – Wireframes

adminkwebdesign — Wed, 09 Oct 2024 14:05:33 +0000

En wireframe er en grundlæggende skitse eller model af en webside eller applikation, der bruges i design- og udviklingsprocesser.

Wireframes fungerer som et vigtigt værktøj i design- og udviklingsprocessen, der hjælper med at kommunikere ideer, planlægge strukturen og sikre, at alle involverede parter er på samme side, inden der investeres i mere detaljerede og tidskrævende aspekter af projektet.

Formålet med en wireframe er at skitsere og planlægge den overordnede struktur og funktionalitet, så man kan få en klar idé om, hvordan indholdet vil blive præsenteret, og hvordan brugerne vil interagere med det.

Man skelner mellem to typer af wireframes:

Low-fi: Enkle, fokuseret på struktur og layout, hurtigere at lave og ændre.
Hi-fi: Detaljerede, viser præcise visuelle elementer og interaktive funktioner, bruges til mere konkret feedback og test.

Valget mellem low-fi og hi-fi wireframes afhænger af, hvilken fase af designprocessen du er i, og hvad du ønsker at opnå med wireframen.

Husk at bruge reelle tekster i hi-fi wireframes, bla. for at vise tone of voice.

I wireframes definerer man f.eks. typen af billeder, diagrammer og lign – så er det op til webudvikleren og designeren at finde farverne og kodningen, brug gerne ikoner fremfor ”billeder” i wireframes, så skal webudvikler og designer ikke bruge tid på det.

Wireframes og brugergrænseflader (UI) er ikke det samme, men de er tæt forbundne i designprocessen

Brugergrænseflader (UI)

Efter designprocessen
Viser struktur og layout med æstetiske detaljer
Det er det brugerne ser når de inteagere med en applikation/websted.

Wireframes

Tidligt i designprocessen
Viser struktur og layout uden æstetiske detaljer
Definerer hvor elementer (knapper, billeder og tekster) skal placeres.
Bruges til at få feedback for at sikre at layoutet opfylder brugernes behov.

PROCES

Definer Wireframe: Fokus på layout og funktionalitet, typisk enkle, bruges tidligt i designprocessen til at planlægge struktur og brugerflow. Her bruges grå-nuancer.

Definer styletile: Fokus på de overordnede visuelle elementer og stilen. Styletiles giver ikke en konkret præsentation af, hvordan elementerne vil se ud på en færdig side, men giver snarere et overblik over den æstetiske retning og stemning i projektet.

Mock-up/hi-fi Wireframes: Fokus på det færdige layout og den visuelle struktur af et konkret design. En mock-up er meget mere detaljeret end en styletile og præsenterer en helhedsoplevelse af, hvordan slutproduktet vil fungere og se ud, ofte uden at være interaktiv (i modsætning til prototyper).

DESIGNMODELLEN C.R.A.P.

C.R.A.P.-modellen står for Contrast, Repetition, Alignment, Proximity. Det er fire grundlæggende principper, der bruges til at skabe æstetisk tiltalende og brugervenlige designs, specielt inden for grafisk design og webdesign.

Contrast (Kontrast)

Skab forskelle mellem elementer for at tiltrække opmærksomhed og sikre, at visse dele skiller sig ud f.eks. på vejskilte.

Repetition (Gentagelse)

Gentagelse af visuelle elementer for at skabe sammenhæng og en følelse af enhed i designet. Dette kan være farver, skrifttyper eller grafiske elementer. Det er essentielt for et brand.

Alignment (Justering)

Placer elementer på en måde, så de er justeret med hinanden og skaber en organiseret og balanceret visuel struktur – kompositionen!

Proximity (Nærhed)

Arranger elementer, så relaterede komponenter er tættere på hinanden. Dette hjælper med at gruppere information og gøre designet mere intuitivt.

VÆRKTØJER TIL WIREFRAMES

Lav en skitse af lo-fi i hånden eller brug FIGMA til at lave både lo-fi og hi-fi wireframes. I lo-fi wireframes definerer man farver og billeder, og så er det op til designeren/udvikleren at finde de rigtige billeder og farver.

Det er en god idé at lave en master-rapport med komponenterne der anvendes i wireframes.

Husk at bruge rigtige/reelle tekster i hi-fi Wireframes bl.a. for at vise tone of voice.

Gode spørgsmål man kan stille sig selv i.f.m. C.R.A.P. og udarbejdelse af wireframes:

Contrast

Hvilke kontraster har man overvejet?
Er teksten læsbar?
Er anvendte billeder i en god kvalitet?
Are contrasts so numerous that unity is harmed?
Fremhæver farverne det de skal fremhæve?
Har kontrasterne en funktion?

Repetition

Hvilke elementer har man valgt at gentage og hvordan?
Er der sammenhæng mellem gentagelse af elementerne?

Alignment

Er der en klar struktur?
Er designet afbalanceret?

Proximity.

Har man overvejet at bruge proximity?
Hvordan har man brugt proximity til at skabe en ensartet komposition?

PROCES FOR UDARBEJDELSE AF WIREFRAME

HVEM BRUGER WIRFRAMES?

Dem der typisk anvender wireframes er:

UX/UI Designere (planlægning og strukturering af brugergrænsefladen)
Frontend-/backend-udviklere (forståelse af den overordnede struktur, funktionelle krav, placering af elementer)
Produktledere (sikrer at designet opfylder brugerkrav og forretningsmål)
Projektledere (planlægning af tidslinjer og ressourcer baseret på designets kompleksitet og krav)
Kunder og interessenter (får en tidlig forståelse af den overordnede struktur og kan give feedback)
Brugertestere og researchere (evaluering af brugeroplevelsen gennem brugerundersøgelser)

UX Foundations – Brugeroplevelse

adminkwebdesign — Wed, 09 Oct 2024 13:17:27 +0000

UX betyder User Experience, som er alle brugerens oplevelser, når han/hun interagerer med dit produkt eller din service. En oplevelse sammensættes derfor af rigtig mange indtryk: Førstegangsmødet på hjemmesiden, telefonsamtalen med kundeservice, besøget i butikken, brugen af produktet eller servicen osv.

Brugercentreret design: Fokuser på at forstå brugerens behov, ønsker og adfærd. Involver brugerne i designprocessen gennem interviews, spørgeskemaer og brugertests.
Informationsarkitektur: Organiser indholdet og navigationsstrukturen, så det er let for brugerne at finde den information, de søger.
Interaktionsdesign: Design de interaktive elementer i produktet (f.eks. knapper, links og formularer) for at sikre, at de er intuitive og brugervenlige.
Visuelt design: Skab et æstetisk tiltalende layout, der er i overensstemmelse med virksomhedens brand og samtidig understøtter brugerens oplevelse.
Tilgængelighed: Sørg for, at produktet er brugbart for alle, herunder personer med forskellige evner. Dette inkluderer at overholde standarder som WCAG (Web Content Accessibility Guidelines).
Responsivitet: Design, så produktet fungerer godt på forskellige enheder og skærmstørrelser, fra desktops til mobiltelefoner.
Feedback og iteration: Indsaml feedback fra brugerne efter lancering og vær villig til at iterere og forbedre designet baseret på denne feedback.
Brugervenlighed: Test og vurder, hvor let det er for brugerne at interagere med produktet. Dette omfatter opgaver som at finde information, gennemføre en handling eller løse problemer.
Emotionel design: Overvej den følelsesmæssige respons, brugerne har til produktet, og stræb efter at skabe positive følelser gennem designet.
Konsistens: Sørg for, at designet er konsistent på tværs af alle sider og funktioner, så brugerne let kan forstå og navigere i produktet.

Maslows behovspyramide

Principperne for WCAG

WCAG står for Web Content Accessibility Guidelines. Det er et sæt retningslinjer, der er udviklet for at sikre, at webindhold er tilgængeligt for alle brugere, herunder dem med handicap. Formålet med WCAG er at gøre internettet mere brugervenligt og tilgængeligt for personer med forskellige evner, herunder syns-, hørsels- og motoriske handicap samt kognitive udfordringer.

WCAG indeholder tre niveauer af overholdelse:

A (minimum): Det mest grundlæggende niveau af tilgængelighed.
AA (mellemniveau): Det anbefalede niveau for de fleste organisationer, som dækker de fleste almindelige tilgængelighedsproblemer.
AAA (maksimum): Det højeste niveau af tilgængelighed, der dækker mere avancerede krav.

Retningslinjerne kan deles ind i følgende:

Perceptible (Opfattelig): Information og brugergrænseflader skal præsenteres på en måde, der kan opfattes af brugerne. Det betyder, at indholdet skal være tilgængeligt for alle sanser, fx gennem tekstalternativer for billeder og video.

Operable (Betjenelig): Brugergrænseflader og navigation skal være betjenelige for alle brugere. Det indebærer, at alle funktioner skal kunne bruges med både mus og tastatur, og der skal tages hensyn til brugere, der har brug for mere tid til at interagere med indholdet.

Understandable (Forståelig): Information og betjeninger skal være forståelige. Det betyder, at indholdet skal være klart og konsistent, så brugerne nemt kan forstå det og vide, hvordan de interagerer med det.

Robust (Robust): Indhold skal være robust nok til at kunne fortolkes af forskellige assistive teknologier, som skærmlæsere. Det indebærer, at koden skal være korrekt og følge standarder for at sikre, at indholdet er tilgængeligt på tværs af platforme og enheder.

Schneidermans 8 gyldne regler

Herunder er der nogle retningslinjer der er med til at skabe brugervenlige og intuitive brugergrænseflader:

Konsistens: Designet skal være ensartet, så brugerne ikke skal lære nye interaktioner på tværs af systemet.
Giv genveje til hyppige brugere: Erfarne brugere bør have adgang til genveje (som tastaturgenveje) for at effektivisere arbejdet.
Tilbyd informativ feedback: Systemet skal give klare og præcise oplysninger om brugerens handlinger og status.
Design dialoger til at lukke med afslutning: Brugere skal kunne afslutte opgaver med klare afslutninger, så de ved, hvornår de er færdige.
Forebyg fejl: Systemet bør designes til at minimere mulighederne for brugerfejl, fx gennem begrænsninger eller valideringer.
Tillad nem fejlretning: Brugere skal let kunne fortryde handlinger og rette fejl.
Støt indre kontrol: Brugerne skal føle, at de styrer systemet, ikke omvendt.
Reducer hukommelsesbelastningen: Designet skal minimere behovet for, at brugeren husker information fra en del af systemet til en anden.

LInk til checkliste om man overholder ovenstående: https://www.a11yproject.com/checklist/