Teori og noter

LAYOUT & KOMPOSITION

Når man taler om layout design er der fokus på organiseringen af de visuelle elementer, så der er balance og så det giver mening.

Her bruger man C.R.A.P.-modellen.

• Contrast – farver, skrifttyper, størrelse og former
• Repetition – gentagelse af farver, mønstre, former
• Alignment – placering af elementerne
• Proximity – relaterede elementer bør placeres tæt på hinanden.

Det visuelle hieraki – de 8 principper

• Size – store elementer anvendes hvor der skal skabes opmærksomhed, man bruger størrelsen til at prioritere informationens “vigtighed”
• .Color – Lyse og kraftige farver fænger opmærksomheden og bruges til at skabe opmærksomhed i designet.
• Whitespace – er ikke spildplads, men er med til at skabe ro i designet og fremhæver elementerne.
• Texture / Style – er med til at skabe stemning, brug kun teksturer til at understøtte det reelle indhold.
• Z-pattern – bruges på tekstlette designs (ofte websites). Det er den måde/ det mønster brugeren scanner/læser siden på.
• F-pattern – bruges på teksttunge/indholdstunge sider (f.eks. aviser).

GRID-design – Her anvender man CSS til at skabe struktur i et design.

• Format – det område selve designet placeres i
• Margin – de tomme områder mellem kanterne i designet.
• Rows og Columns – Rækkerne er med til at opdele pladsen visuelt, så indholdet kan placeres jævn/harmonisk. Kolonnerne er ligeledes med til at skabe struktur
• Gutters – er mellemrum mellem kolonnerne/rækkerne og bøhave samme størrelser i hele griddet.
• Modules – er byggestenene i griddet og er de rum der skabes mellem baselines.
• Spazial zones – gruper af tilstødende moduler både vertikalt og horisontalt.
• Baselines – er linjer der opdeler griddet i sektioner i parallelle bånd.

DATAVISUALISERING

• Samling af informationer som laves om til grafisk visualisering.

Et mål om at gøre rapporter mere visuelle – så data der er indsamlet kan visualiseres.

Udvikle visuelle illustrationer af data.

Strukturere data på hjemmesider – visualisering af indhold på f.eks. webshops.

Prøv linket til musikvideoen om ens barndomshjem:

https://experiments.withgoogle.com/the-wilderness-downtown

Datavisualisering til infografikker

F.eks. fra spørgeskemaer

Datavisualisering til hjemmesider

f.eks. hvordan vi strukturerer data på webshops.

OPGAVE: FalskdataomAI.xlsx (ITslearning – Planer) Data viser: At I hovedstadsområdet er det primært der hvor underviserne anvender AI i undervisningen.

Dark pattern – fitnesscentre, flyselskaber osv. anvender det. Samtykke, cookies.

Edward Tuftes principper – beautiful evidence, 2006

• Sammenligne og finde forskelle.
• Vise sammenhæng, mekanismer eller forklaringer.
• Bruge multivariate data (sammenligner flere data)
• Integrere relevante ord, numre og diagrammer
• Dokumentere kvalitet og integritet.
• Fokus på indhold
• Husk kildeangivelse

Informationsgrafik formater

Forskellige måder information kan præsenteres visuelt for at formidle komplekse data eller koncepter på en letforståelig måde.

Stedet og metoden af visualiseringerne skal se ud afhænger af målgruppen.

OPGAVE: Skitser historien i dataen – se håndlavet liste, skal laves i Illustrator og sættes ind i … Se discord.

Præattentiv-atributter for at fremhæve en bestemt data for at skabe fokus på netop den data (ligesom CTA).

Visuelle egenskaber

Form – Motion – Colour – Position

System 1 i dual process theory – Her forsøger man at få brugeren til at sige JA uden at tænke over det.

System 2 – Her forsøger man at få brugeren til at tænke over at de skal gøre et eller andet.

OPGAVE Hent filen på Illustrator – prøv at lave et af tallene så de er lettere at læse.

The Five Hat Racks ”L.A.T.C.H” – anvendes til at finde ud af hvordan man vil bruge data til infografikker:

Location – Alphabetical – Time – Category – Hierarchy

L f.eks. metrokort

A f.eks. ordbøger

T f.eks. Tidslinje

C f.eks. webshops, produktoversigt

H f.eks. ”sortering” f.eks. i højeste, laveste, dyreste til mindst og yngst til ældste. På webshops.

OPGAVE I skal designe en struktur af produkterne i en cykel webshop. I skal tænke over hvordan man strukturerer indholdet efter LATCH-principperne. Analyser og efterfølgende designe i FIGMA

De 7 hurtige:

1. Visualiseringer er lettere at huske end tekst.
2. Brug den chart der har daten i fokus (simplificer f.eks. søjlediagram)
3. Vælg den rette mængde grafik (prioritering)
4. Vælg den sammenligning der bedst fortæller historien
5. Vælg de rigtige værdier (indexeringer skal være identiske)

Historie

Florence Nightingale – sundhedsmodellen/indsamling af data for at kunne gøre ting bedre under Krim-krigen.

Napoleons indtog i Rusland – viser rigtig meget data som man kan danne en historie ud fra.

GIT

Gennemgang af hvordan GITHUB virker, hvordan man styrer versioner, samt intro til Javascript.

DIGITAL ÆSTETIK & ADFÆRDSDESIGN

Preattentive attributter refererer til de visuelle egenskaber ved et design, der bliver opfattet hurtigt og automatisk af vores hjerner, før vi aktivt fokuserer på noget. Disse attributter er grundlæggende for at forstå, hvordan mennesker hurtigt opfatter og reagerer på information i et visuelt miljø.

De mest almindelige preattentive attributter inkluderer:

• Farve (f.eks. rød står ud og kan skabe opmærksomhed).
• Størrelse (et stort objekt tiltrækker ofte opmærksomhed før et lille).
• Form (forskellige former som cirkler og firkanter bliver opfattet hurtigt).
• Placering (objekter placeret centralt eller isoleret vil tiltrække opmærksomhed).
• Bevægelse (bevægelige elementer tiltrækker øjeblikkelig opmærksomhed).
• Lysstyrke og kontrast (stor kontrast gør noget lettere at bemærke).

Disse attributter udnytter menneskets evne til hurtigt at sortere og analysere visuelle informationer uden at anvende bevidst opmærksomhed. I digitalt design kan de bruges til at guide brugeren og til at fremhæve vigtig information hurtigt.

System 1 og System 2 (Kahneman’s teori)

Dette begreb stammer fra psykologen Daniel Kahneman og hans arbejde med to typer kognitiv bearbejdning:

• System 1: Dette er den hurtige, instinktive og ubevidste del af vores tænkning. Det er intuitivt, automatisk og kræver næsten ingen mental indsats. Vi bruger System 1 til at træffe hurtige beslutninger, som f.eks. at genkende et ansigt eller reagere på en rød trafiklyssignal.
• System 2: Dette er den langsommere, mere analytiske og bevidste del af vores tænkning. System 2 aktiveres, når vi står overfor komplekse problemer eller situationer, hvor vi skal tænke, analysere og overveje flere muligheder før vi træffer en beslutning.

I design af digitale systemer og interfaces er det vigtigt at forstå, at System 1 er hurtigere og mere tilbøjeligt til at reagere på visuelle stimuli (f.eks. farver, størrelser), mens System 2 kræver mere tid og overvejelse for at bearbejde informationer. Effektivt design udnytter begge systemer til at skabe både intuitive og rationelle brugeroplevelser.

Aron Marcus’ Principles

Aaron Marcus er en af de ledende eksperter inden for brugergrænsefladedesign og har formuleret en række designprincipper, der er meget anvendelige i digital æstetik og adfærdsdesign. Hans principper handler om at skabe brugervenlige og effektive interaktive systemer. Her er nogle af de vigtigste principper:

• Enkelhed og klarhed: Design skal være intuitivt og let at forstå. Det handler om at reducere kompleksiteten og sikre, at brugeren hurtigt kan navigere og forstå systemet uden forvirring.
• Konsistens: Ensartede visuelle og interaktive elementer giver brugeren en følelse af sammenhæng og hjælper med at mindske læringstiden. F.eks. skal knapper, farver og layout være konsistente på tværs af en applikation.
• Feedback: Brugerinteraktioner skal give øjeblikkelig og forståelig feedback, så brugeren ved, om deres handling var korrekt eller ej. Det kan være visuelle signaler, som ændringer i farve eller animationer, der viser en handling blev gennemført.
• Effektivitet: Systemer bør være effektive og minimere den tid og de ressourcer, der kræves for at udføre en opgave. Brugeren skal kunne navigere hurtigt og nemt.
• Tilgængelighed: Designet skal tage højde for alle typer brugere, herunder dem med forskellige fysiske og kognitive evner. Det kan f.eks. være skriftstørrelse, kontrast og muligheden for at bruge alternative inputmetoder.

Alle disse begreber er stærkt forbundet i relation til digitalt design og adfærdsdesign. Preattentive attributter hjælper med at fange brugerens opmærksomhed hurtigt (System 1), mens designprincipperne fra Aaron Marcus giver retningslinjer for at gøre systemer både effektive og brugervenlige. Det er vigtigt at forstå, hvordan de visuelle egenskaber fungerer i forbindelse med den menneskelige kognition, så man kan skabe designs, der både appellerer til de hurtige, intuitive reaktioner (System 1) og til de mere bevidste, analytiske overvejelser (System 2).

I praksis kan man bruge disse principper til at skabe interfaces og interaktive systemer, der både er visuelle tiltalende og funktionelt effektive.

Februar

JAVASCRIPT

under udarbejdelse

PROMPT ENGINEERING

• Tokenization
• Parameters
• Hallucination

Vi kan bruge følgende platforme:

OpenAI – som overholder GDPR

Midjourney – er tilgængeligt via Discord, men er åbent

Adobe Firefly – har styr på rettigheder

ChatGPT – bruger tokens

Når man anvender AI skal man tænke over, hvordan man spørger f.eks.

Lukkede er specifikke og præcise f.eks. Hvordan er vejret i morgen?  Oversæt den følgende sætning…

Åbne er mere kreative f.eks. Beskriv en verden hvor tyngdekraften virker modsat. Eller skriv et digt der handler om…

Leading: Beskriv fordelene ved at bruge solenergi Neutral:Beskriv fordelene og ulemperne ved solenerg

Brug kommandoer til at instruere hvad du ønsker at opnå. Eksempler: Skriv…Klassificer…Opsummer…Oversæt…Ret for stavefejl…

Vær specifik og beskriv hvad du vil have at outputtet skal vise.

Lav videoer med AI

En god huskeregel:

1. Præcis beskrivelse af, hvad du vil have hjælp med
   “Kan du hjælpe mig med at skrive en e-mail til min chef om et møde næste uge?”
2. Specifik kontekst eller baggrundsinformation
   “Jeg arbejder som softwareudvikler, og jeg har problemer med at forstå Python’s list comprehension. Kan du forklare det med et simpelt eksempel?”
3. Begrænsning af svarlængde eller detaljeringsgrad
   “Kan du give mig en kort opsummering af de vigtigste punkter fra bogen ‘Sapiens’?”
4. Stil og tone
   “Kan du skrive en humoristisk blogpost om, hvordan man overlever en mandag morgen?”
5. Trin-for-trin vejledning
   “Kan du give mig en trin-for-trin guide til at opsætte en hjemmeside med WordPress?”
6. Særlige krav til output
   “Jeg har brug for et diagram, der viser sammenhængen mellem temperatur og energiforbrug. Kan du hjælpe med at generere det?”

VISUEL IDENTITET

De fleste små virksomheder har ikke en design manual. Mange mellemstore og store virksomheder har.

Design manual, Brand guide, Brand guidelines, Branding style guides,

Style guide (NEJ – det er med fokus på de digitale produktioner)

Designmanualens regler skaber sammenhæng.

Beskriver og standardiserer et brands visuelle identitet

Anvendes af den grafiske afdeling, medarbejdere (bør anvendes af alle medarbejdere men det sker ikke altid) og eksterne partner.

Sikre brandets udtryk forbliver genkendeligt og professionelt på tværs af platforme og medier.

Opgave:

Udvikl en visuel identitet for en af følgende:

Her er mit forslag til 01-Luxury punk – mobilapp

VIDEO DEVELOPMENT

Her blev fortællermodeller gennemgået:

AFVENTER AT BLIVE LAVET og LAGT IND

BRUGERFORSTÅELSE 1

For at sikre en optimal brugeroplevelse skal man kunne forstå brugernes adfærd. Herunder taler man også om userflow og userstories.

-Deltagerobservation, f.eks. hvordan betjener kunderne en kaffemaskine. Observatøren tager notater af hvad der observeres.

-Userstory, f.eks. en beskrivelse af hvem brugeren er, hvad brugeren ønsker at opnår og hvorfor. F.eks. en studerende der ønsker at købe en kop kaffe i en automat, fordi den studerende har lyst til en kop kaffe.

Ved userstories kan man dele dem op i high-level eller low-level stories. f.eks.

Userflow refererer til den vej, en bruger tager gennem et system, en applikation eller en hjemmeside for at opnå et bestemt mål eller fuldføre en opgave. Det er en visuel repræsentation eller et kort over brugerens rejse, der viser de skridt og beslutninger, som brugeren tager fra start til slut. User flows er vigtige for at forstå, hvordan brugeren interagerer med et produkt eller system, og hjælper designere og udviklere med at optimere brugeroplevelsen ved at fjerne unødvendige barrierer eller frustrationer.

Hvad er formålet med user flow?

1. Forståelse af brugerens rejse: Det hjælper teams med at forstå, hvordan brugeren bevæger sig gennem systemet og hvilke interaktioner der er nødvendige for at opnå et mål.
2. Identificere potentielle problemer: Det giver mulighed for at identificere områder, hvor brugeren kan blive forvirret eller støde på barrierer.
3. Optimering af brugeroplevelsen: Ved at visualisere flowet kan man finde steder, hvor man kan forbedre brugervenligheden, gøre navigationen nemmere eller reducere antal skridt, brugeren skal tage.
4. Design og udvikling: User flow hjælper designere og udviklere med at planlægge og designe de nødvendige skærme og funktionaliteter for at understøtte brugernes mål.

Hvordan ser et user flow ud?

User flows kan variere afhængig af kompleksiteten af det produkt, der arbejdes med. Det kan være så simpelt som en serie af bokse og pile, der viser trin-for-trin-processen, eller mere komplekse diagrammer med flere beslutningstrin.

Et typisk user flow kan omfatte:

Slutpunkt: Det ønskede mål, fx “Fuldfør køb” eller “Opret konto.”

Startpunkt: Hvad er det første skridt? Fx “Åbn appen” eller “Besøg hjemmesiden.”

Trin: De handlinger, som brugeren tager for at komme videre i flowet. Fx “Vælg produkt” eller “Klik på ‘log ind’.”

Beslutninger: Brugerens valg, som kan føre til forskellige veje i flowet. Fx “Er du allerede bruger?” Ja/Nej.

Opgave – lav et flowchart baseret på en af de ovenfor anførte userstories. Jeg har valgt en high-level story “Som bruger vil jeg kunne oprette en konto, så jeg kan få adgang til systemet.”

FORRETNINGSFORSTÅELSE

BMC

Arbejd online med BMC kan følgende værktøj anvendes: https://canvanizer.com/

PESTEL

En PESTEL-analyse er et strategisk værktøj, der anvendes til at identificere og forstå de eksterne faktorer, der kan påvirke en virksomhed. “PESTEL” er en forkortelse for de seks hovedkategorier af faktorer, som analysen dækker:

1. P – Politiske faktorer: Disse omfatter lovgivning, politik og regler, der kan påvirke virksomhedens drift. Eksempler kan være skatteregler, handelsaftaler, politisk stabilitet og regeringspolitik i forhold til industrien.
2. E – Økonomiske faktorer: Økonomiske forhold som inflation, arbejdsløshed, valutakurser, økonomisk vækst og forbrugeradfærd, der kan påvirke virksomhedens salg og omkostninger.
3. S – Sociale faktorer: Disse omfatter kulturelle og demografiske faktorer, som ændringer i befolkningssammensætning, forbrugsvaner, livsstil, uddannelsesniveau og sociale holdninger.
4. T – Teknologiske faktorer: Henviser til teknologiske fremskridt og innovationer, som kan påvirke virksomhedens produkter, processer og konkurrenceevne. Det kan være udvikling af nye teknologier, automatisering, digitalisering og forskning og udvikling.
5. E – Miljømæssige faktorer: Faktorer relateret til miljøet og bæredygtighed, herunder lovgivning om affaldshåndtering, klimaforandringer, ressourcer og virksomhedens ansvar for at reducere sin miljøpåvirkning.
6. L – Lovgivningsmæssige faktorer: Denne kategori dækker de love og reguleringer, der er relevante for virksomheden, herunder arbejdsret, sundheds- og sikkerhedslovgivning, forbrugerbeskyttelse og patentretter.

PESTEL-analysen hjælper virksomheden med at få indsigt i de eksterne faktorer, der kan påvirke deres strategi, beslutningstagning og risikostyring. Den bruges ofte som et grundlag for at tilpasse sig eksterne ændringer eller udnytte muligheder i markedet.

Eksempel:

Porter’s Five Forces

Porter’s Five Forces er en model udviklet af Michael Porter, der bruges til at analysere konkurrenceniveauet i en branche og forstå de faktorer, der påvirker en virksomheds evne til at opnå og opretholde en konkurrencemæssig fordel. Modellen identificerer fem kræfter, som bestemmer konkurrencen i en branche:

1. Trussel fra nye konkurrenter (Threat of New Entrants): Denne kraft beskriver, hvordan let eller svært det er for nye virksomheder at komme ind på markedet og konkurrere med etablerede virksomheder. Hvis barriererne for at komme ind i en branche er lave (f.eks. lave opstartsomkostninger eller få regulatoriske krav), vil truslen fra nye konkurrenter være høj, hvilket kan presse profitmarginerne for eksisterende virksomheder.
2. Trussel fra substituerende produkter (Threat of Substitutes): Hvis der er produkter eller tjenester, der kan erstatte det, en virksomhed tilbyder, kan det reducere den nuværende virksomheds markedsandel og profit. Substitutter kan komme fra helt forskellige industrier eller alternative løsninger, som forbrugerne måske vælger i stedet.
3. Forhandlingsstyrke fra leverandører (Bargaining Power of Suppliers): Hvis en virksomhed er afhængig af få leverandører, eller hvis leverandørerne tilbyder unikke eller kritiske materialer/tjenester, har de høj forhandlingsstyrke. Dette kan føre til højere omkostninger eller mindre fleksibilitet for virksomhederne, hvilket kan påvirke profitabiliteten.
4. Forhandlingsstyrke fra købere (Bargaining Power of Buyers): Købernes forhandlingsstyrke beskriver, hvor meget magt kunderne har over prissætning og kvalitet. Hvis kunderne har mange alternativer, eller hvis de kan købe i store mængder (og dermed få rabatter), vil deres forhandlingsstyrke være høj, og det kan tvinge virksomhederne til at sænke priserne eller forbedre kvaliteten.
5. Konkurrenceintensitet mellem eksisterende aktører (Industry Rivalry): Denne kraft refererer til graden af konkurrencen mellem de eksisterende virksomheder i en branche. Hvis konkurrencen er intens, kan det føre til priskrig, markedsføringskampagner og andre strategier for at tiltrække kunder, hvilket kan reducere profitmarginerne for alle aktører i branchen.

Anvendelse af Porter’s Five Forces: Porter’s Five Forces hjælper virksomheder med at analysere og forstå deres branche og konkurrenceforhold. Ved at forstå de kræfter, der påvirker konkurrencen i en given branche, kan en virksomhed formulere strategier for at styrke sin position på markedet og minimere de trusler, den står overfor.

NEURO SCIENCE

Neurovidenskab er studiet af nervesystemet, som inkluderer hjernen, rygmarven og perifere nerver. Det fokuserer på, hvordan disse systemer fungerer, og hvordan de påvirker adfærd og kognitive funktioner. Nogle centrale områder inden for neurovidenskab inkluderer:

• Neuroner: De grundlæggende enheder i nervesystemet, som sender elektriske og kemiske signaler.
• Synapser: Forbindelser mellem neuroner, hvor signaler overføres.
• Hjerneområder: Funktionelle regioner i hjernen, som er ansvarlige for forskellige opgaver som bevægelse, sansning og tænkning

Eyetracking teknologi måler øjenbevægelser og fokuspunkter for at forstå, hvad en person ser på og hvordan de interagerer med visuelle stimuli. Det bruges i mange områder, herunder:

• Markedsføring: For at analysere, hvordan forbrugere ser på reklamer og produkter.
• Forskning: For at studere opmærksomhed og kognitive processer.
• Interaktion: For at forbedre menneske-computer interaktion ved at tilpasse systemer baseret på brugerens blik

3M Visual Attention Software (VAS) er en AI-baseret teknologi, der forudsiger, hvad folk vil se på først i et visuelt design. Det hjælper designere med at optimere deres arbejde ved at give data om visuel opmærksomhed. Nogle funktioner inkluderer:

• Heatmaps: Visuelle repræsentationer af de områder, der tiltrækker mest opmærksomhed.
• Hotspots: Områder med høj sandsynlighed for at blive set.
• Gaze Sequence: Rækkefølgen af de første områder, som en person vil bemærke

DESIGNSYSTEMER

• UI-patterns og designsystemer
• Dark patterns
• Interface Inventory
• UI-libraries 
• UI research 

Skal bruges til projekt 4

Mønstre / UI patterns – alle elementer der kan bruges igen og igen i et design.

F.eks. er en dropdown-menu UI design, da det er noget ”vi” genkender, da vi har set dette design mange gange før, og derved bliver det et mønster.

F.eks. ved købsproces på en webshop kan man lave en ”proceslinje” for hvor langt man er i købsprocessen.

Cordian-dropdown når man samler tekst under 1 punkt og når man trykker på + så åbner tekstboksen (her skifter + til minus):

Andre eksempler: Navigation, kort, tabeller, advarsler, meddelelser, filtrering på hjemmesider (f.eks. Zalando). Forskellen på dansk/engelsk- designmønster/Designpatterns – man kan godt have et designmønster som IKKE er UI.

Komponenter

Knapper, input, selectorer, avatarer ”profil-ikon”. Komponenter indeholder elementer som tekst, billeder, ikoner m.m. f.eks.også når der anvendes produktbilleder i et slideshow. Det er slideshowet der er et UI pattern, men selve slidebar/next-knappen er komponent.

Flere elementer bliver samlet i én kasse = En komponent, som indeholder de samme elementer, men hvor indholdet ændrer sig, men ”opbygningen” er ens / konceptet er ens.

En komponent kan godt bestå af mønstre.

Et UI-element der indeholder f.eks. knap, ikon og tekst. Komponenten kan genbruges igen og igen.  F.eks.:

F.eks. kan hele navigationsbaren genbruges, da hele navigationsbaren/Topbaren er én komponent.

Se også nyhedsbrev på link fra slideshow.

Husk at der altid skal være mulighed for at lukke en ”pop-up”, men det er op til os hvordan, om det er på et kryds eller en test ”not now”.

Deceptive Patterns / Dark patterns

Se “Hall of shame”

Virksomheder kan anvende disse mønstre for at få brugeren til at f.eks. købe noget ”uønsket”, dele data uønsket eller subscribe til nyhedsbrev,  umuligt at finde ud af hvordan man fjerne sin konto,,, Man kan også ændre knappers position for ar tricke brugeren til at gøre noget brugeren ikke ønsker at gøre.

Etisk – tænk over det. Ved små virksomheder kan man gøre virksomheden opmærksom på at det er en rigtig dårlig id+e at anvende Deceptive patterns, da det skader virksomhedens ry/omdømme.

Design Tokens

Er mere relateret til kode og ikke til design.

Er variabler der definerer de visuelle egenskaber i designsystemet, f.eks.. farve, typografi, afstande og skygger.

Det er for at skabe struktur og ensartethed i ens design.

Interface Inventory

En samling af dele, som kan grupperes i kategorier: navigation , formularer, faner, knapper, lister osv.

Brug dette til at identificere elementer m.m. på en hjemmeside, ved både redesign men også hvis man skal udvikle noget nyt.

Lav en liste med screenshots fra den eksisterende side. Lav altid et ”inventory”/inventarliste over hvad der er, på den måde finder man ud af om der evt. er noget der mangler.

Mentalemodeller

Man skal forstå sin målgruppes mentale model. Feks fik Tesla hug for at placere dyt-knappen et andet sted end på midten af rattet.

ØVELSE

Hent template fra discord.

Lav et inventory for en hjemmeside – se powerpoint.

Husk at planlægge det ind i projektet INDEN man går i gang med design – og det tager lang tid at gøre det ordentligt.

DESIGNSYSTEMER

Alle de elementer der skal bruges til at f.eks. lave en hjemmeside, hvor elementerne kan anvendes til f.eks brug på en app.

Formålet er det der er forskellen på nedenstående.

• Styletile – kommunikation mellem klient og os – moodboard – idéen er…
• Design manual – en standard til brug for udvikling m.m. – off-line media, f.eks. plakater, brochurer, visuelle identitet, kan også være til SOME. Det er en designer der laver en designmanual, der leverer til kunden til brug for f.eks. markedsføringsafdelingen i en virksomhedsafdeling.
• Style guide – – en standard til brug for online-brug
• Design system er en kombination af designmanual og styleguide. Principper for hvordan designet skal bruges.

-consistency /konsekvens

-Efficiency/effektivitet –

-Scalability – man designer noget der kan udvikles på.

-Collaboration – her kan mange forskellige bruge designsystemet f.eks. designere, udviklere, produktchefen, copywriter, accessibility specialist.

Vi skal udgangspunkt i accessibility – WCAG som indføres medio 2025.

I Designsystemer skal vi definere farver, knapper, fonts, ikoner.

Atomic Design approach  – læs bogen eller andet materiale om det.

Designsystem har 3 niveauer

• Det skal være brugbart og man skal kunne tage elementerne med det samme og bruge dem.
•  
• Man skal kunne læse hvordan elementet skal kunne bruges.

Design system udvikling

1 Interface inventory

2. Undersøge andre designsystemer

3. Definere designprincipper (google how to designsystems/designprincipper)

4. Definere farver, typografi, layout, UI patterns og komponenter

5. Tænk på alle designsystemets brugere (dem der skal anvende designsystemet)

6. Tænk tilgængelighed i alle aspekter

7. Test dit designsystem (version 1-> send til brugerne ->feedback ->ændre

8. Vedligehold det konstant

Godt link: Mailchimp

Et godt designsystem, som viser både elementer og koden.

I designsystemer angives HTML-Class, men der vil også være en side med CSS som er linket til HTML, den nye side man udvikler skal så kun linkes til CSS-filen, for skal man så ændre f.eks. skriftstørrelsen, så er det kun i CSS man behøver at gøre det.

Slide fra Andrea…. Få inspiration

Til projekt 4 skal designsystemet laves i FIGMA.

Godt link til Bristol ….

TILGÆNGELIGHED

Det handler om at vi er opmærksomme på WCAG – altså at vi overholder reglerne omkring tilgængelighed i.f.t. den digitale oplevelse. Tilgængelighed betyder at alle digitale produkter skal være brugbare for alle uanset funktionsnedsættelse (evner/begrænsninger).

Eksempler på forskellige typer af funktionsnedsættelse:

• Visuelt: Blind, svagtseende, farveblind.
• Motorisk: Gigt, handicappet
• Kognitivt: Autisme, ordblindhed, søvnbesvær
• Audiotivt: Døv, hørenedsættelse, tinnitus

Gode links:

Accessibility requirements for ICT products andservices (EN 301 549): https://www.etsi.org/deliver/etsi_en/301500_301599/301549/03.02.01_60/en_301549v030201p.pdf

European Accessibility Act (EAA) checklist: https://reciteme.com/news/european-accessibility-act-checklist/

WCAG checklist: https://www.a11yproject.com/checklist/

Accessibility Checker: https://www.accessibilitychecker.org/

Vær opmærksom på hvilke ord du anvender f.eks. i stedet for “View” kan ordet “Open” bruges, “Tap to close” kan blot hedde “Close”.

Når man designer skal man tage højde for bl.a. Tap targets, Typografi, Farver, Interactive states, Ergonomic layouts, Fluid design og preæferancer.

PROJEKTLEDELSE/PROJEKTARBEJDE

Scrum & Kanban – undervisningen blev aflyst, men materialet ligger der til gennemlæsning.

Både Scrum og Kanban falder under den agile metodeparaply, hvilket gør dem gode frameworks til at bryde større, komplekse projekter ned til mindre håndterbare stykker. 

Svaret til hvornår du skal bruge Kanban vs Scrum afhænger af typen af projektet du planlægger. Scrum og Kanban er bedst egnet til forskellige projekter. Men her er en kort analyse:

• Til engangsprojekter der har mange variabler og usikkerheder, er mere deadline-orienteret, og involvere en større projektgruppe, Scrum er et bedre framework
• Til projekter som du har lavet før eller er gentagende, involvere mange leveringer, og kræver at du holder nøje øje med individuel kapacitet, Kanban er et bedre framework

SCRUM

SCRUM er en populær metode inden for agil projektledelse, der bruges til at styre komplekse projekter, især inden for softwareudvikling. Her er en overordnet forklaring:

SCRUM-metoden

SCRUM er en ramme, der hjælper teams med at arbejde sammen om at udvikle produkter iterativt og inkrementelt. Den fokuserer på fleksibilitet, samarbejde og kontinuerlig forbedring. Nogle nøgleelementer i SCRUM inkluderer:

1. Roller:

Product Owner er ansvarlig for at definere og prioritere produktets funktioner og krav. Nogle af deres nøgleopgaver inkluderer:

• Produktbacklog: Oprettelse og vedligeholdelse af produktbackloggen, som er en liste over alle funktioner, forbedringer og fejlrettelser, der skal implementeres.
• Prioritering: Prioritering af elementerne i produktbackloggen baseret på værdi, risiko og afhængigheder.
• Vision og mål: Kommunikation af produktvisionen og målene til teamet og interessenterne.
• Feedback: Indsamling og integration af feedback fra interessenter og brugere for at sikre, at produktet opfylder deres behov.

SCRUM Master er ansvarlig for at facilitere SCRUM-processen og sikre, at teamet følger SCRUM-principperne. Nogle af deres nøgleopgaver inkluderer:

• Facilitering: Ledelse af SCRUM-begivenheder som sprint planning, daily SCRUM, sprint review og sprint retrospective.
• Fjernelse af hindringer: Identifikation og fjernelse af forhindringer, der kan påvirke teamets produktivitet.
• Coaching: Coaching af teamet og organisationen i SCRUM-principper og -praksis.
• Beskyttelse: Beskyttelse af teamet mod eksterne forstyrrelser og sikring af, at de kan fokusere på deres arbejde.

Udviklingsteamet er en tværfaglig gruppe af fagfolk, der arbejder sammen om at levere inkrementer af produktet. Nogle af deres nøgleopgaver inkluderer:

• Planlægning: Deltagelse i sprint planning for at identificere og forpligte sig til opgaver, der skal udføres i sprinten.
• Udvikling: Design, udvikling, test og integration af funktioner og forbedringer.
• Daily SCRUM: Deltagelse i daily SCRUM for at koordinere arbejdet og identificere eventuelle hindringer.
• Kontinuerlig forbedring: Deltagelse i sprint retrospective for at reflektere over sprinten og identificere forbedringsmuligheder.

2. Artefakter (leverancer/dokumenter):

Produktbackloggen er en dynamisk liste over alle funktioner, forbedringer, fejlrettelser og andre krav, som produktet skal indeholde. Den vedligeholdes og prioriteres løbende af Product Owner. Nogle vigtige aspekter af produktbackloggen inkluderer:

• User Stories: Beskrivelser af funktioner set fra brugerens perspektiv.
• Prioritering: Elementerne i produktbackloggen er prioriteret efter værdi, risiko og afhængigheder.
• Opdatering: Produktbackloggen opdateres løbende baseret på feedback og nye indsigter.

Sprint Backloggen er en liste over de opgaver, som udviklingsteamet forpligter sig til at færdiggøre i den aktuelle sprint. Den skabes under sprint planning og indeholder:

• Valgte User Stories: De højst prioriterede user stories fra produktbackloggen, som teamet har valgt at arbejde på.
• Opgaver: Specifikke opgaver, der skal udføres for at færdiggøre de valgte user stories.
• Daglig Opdatering: Sprint backloggen opdateres dagligt under daily SCRUM for at afspejle fremskridt og ændringer.

Inkrementet er det færdige arbejde, der er klar til at blive leveret til kunden ved slutningen af en sprint. Det repræsenterer en del af produktet, som er fuldt funktionelt og opfylder de definerede krav. Nogle vigtige aspekter af inkrementet inkluderer:

• Definition of Done: En klar definition af, hvad der kræves for at en user story eller opgave kan betragtes som færdig.
• Integration: Inkrementet skal være integreret med tidligere inkrementer og testet for at sikre, at det fungerer korrekt.
• Levering: Inkrementet præsenteres for interessenterne under sprint review for at få feedback og godkendelse.

3. Begivenheder:
4. Sprint: En tidsboks på typisk 2-4 uger, hvor et inkrement af produktet udvikles.
5. Sprint Planning: Et møde, hvor teamet planlægger arbejdet for den kommende sprint.
6. Daily SCRUM: Et kort dagligt møde, hvor teamet koordinerer deres arbejde og identificerer eventuelle hindringer.
7. Sprint Review: Et møde ved slutningen af en sprint, hvor teamet præsenterer det færdige arbejde for interessenterne.
8. Sprint Retrospective: Et møde, hvor teamet reflekterer over sprinten og identificerer forbedringsmuligheder.

SCRUM fremmer en iterativ tilgang, hvor teamet kontinuerligt leverer små dele af produktet og tilpasser sig baseret på feedback. Dette gør det muligt at reagere hurtigt på ændringer og sikre, at produktet opfylder kundens behov.

KANBAN

Kanban er en agil metode til styring af arbejdsprocesser, der hjælper teams med at visualisere arbejde, maksimere effektivitet og forbedre kontinuerlig

Grundprincipper

1. Visualisering af arbejde: Brug af Kanban-tavler til at repræsentere arbejdsopgaver som kort, der bevæger sig gennem forskellige stadier af arbejdet (kolonner).
2. Begrænsning af igangværende arbejde (WIP): Indførelse af grænser for, hvor mange opgaver der kan være i gang på samme tid, for at undgå overbelastning og sikre fokus.
3. Styring af arbejdsflow: Overvågning og styring af arbejdsflowet for at identificere og fjerne flaskehalse og forbedre effektiviteten.
4. Kontinuerlig forbedring: Regelmæssig evaluering og tilpasning af arbejdsprocesserne for at opnå løbende forbedringer.

Kanban-tavle

En Kanban-tavle er et visuelt værktøj, der bruges til at styre arbejdsopgaver. Den består typisk af følgende elementer:

• Kolonner: Repræsenterer forskellige stadier i arbejdsprocessen, f.eks. “To Do”, “In Progress” og “Done”.
• Kort: Repræsenterer individuelle opgaver eller arbejdsenheder, der bevæger sig gennem kolonnerne.
• WIP-grænser: Angiver det maksimale antal opgaver, der kan være i gang i en bestemt kolonne på et givet tidspunkt.

• Photography – aflyst?
• Motion Graphics – undervisning aflyst pga sygdom, men opgaver på Discord