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.

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.

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.

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.

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

Det havde været rigtig fint hvis vi kunne have haft fundet tid til det, så vi kunne have givet hinanden feedback.

Eksamensprojektet består af:

• Et hjemmeside kodet fra bunden (præsentationsportfolio), som skulle vise mit personlige brand og mine kompetencer
• En hjemmeside der dokumenterer bl.a. opgavebesvarelser og refleksion (procesportfolio)
• En plakat, der viser processen bag præsentationsportfolioet.
• Dertil skulle der også udarbejdes et afleveringsdokument indeholdende refleksion over opnåelse af læringsmål.

Opdagelse, idé, definition, prototyping

Jeg har arbejdet ud fra Design Thinking metoden for at kunne strukturere og organisere mit arbejde med opgave.

Det var svært lige at finde ud af hvilke retning og målgruppe jeg ville bruge. Valget faldt på små lokale kulturhuse og lokale spillesteder på Østfyn da jeg interesserer mig for musik, kulturelle begivenheder og teater.

Målet er at tilbyde skræddersyede multimedieløsninger, der kan styrke deres visuelle identitet således de bedre kan nå deres publikum.

Jeg startede med at lave research af hvad der er af kulturhuse og spillesteder på Østfyn, og på baggrund af deres hjemmesider lavede jeg en brainstorm i.f.t. farver, design, typografi m.m. Derefter udarbejdede jeg styletile, moodboard og lo-fi wireframes (på papir) og senere i Figma.

Silent feedback

Til feedback på holdet var der nogle ting jeg skulle genoverveje bl.a. CTA-farven, anden font og større tekst. Der skulle fokuseres mere på den visuelle identitet og tydeliggørelse af mine kompetencer.

Kodning: HTML/CSS

Jeg havde ikke helt forstået kodning endnu og måtte i gang med at læse en masse på nettet (på dansk) og se tutorials på Youtube og ikke mindst bruge https://www.w3schools.com/ inden jeg kunne komme i gang med denne del af opgaven, og jeg syntes det var rigtig svært. Undervejs når der var noget der ikke virkede, eller noget jeg ikke forstod, så kunne jeg spørge mine holdkammerater eller min studiegruppe om der var nogen der havde lidt tid til at forklare mig tingene, men jeg har også forsøgt mig meget frem – Learning-by-doing.

Jeg startede med at lave index.html og styles.css (forside), derefter lavede jeg “om mig”, “kontaktside” samt “portfolio”. I første omgang brugte jeg font og farver som angivet i moodboardet, men det blev for meget rødt og fonten passede ikke ind og var ikke særlig læsbar, og derfor måtte jeg re-tænke ny font og farver ind i processen.

For at kunne strukturere og overskue kodningen på de forskellige sider oprettede jeg et html-dok og et css for hver side.

Efter at have opnået et rimeligt vellykket resultat gik det op for mig at jeg manglede media queries i css-filerne, og det var et stort arbejde at finde ud af hvor og hvordan disse skulle ændres og jeg fik ikke løst det hele inden afleveringsfristen, men det kan danne grundlag for at have det med til eksamen, således at den er bedre respondsiv i.f.t. mindre skærmstørrelser/devices.

Jeg validerede både HTML og CSS koder ved slutningen af projektet.

Filerne skulle derefter uploades til Filezilla og derefter gemt på Github.

Plakat og afleveringsdokument

Jeg brugte de samme farver og visuelle elementer fra præsentationsportfoliet for at danne en rød tråd mellem de forskellige opgaver. Det gav mest mening at lave det til sidst når den sværeste del var lavet, kodningen.

Finpudsning af procesportfolio

En gennemgang af alle indlæg og tilføjelse af lidt mere tekst under refleksion.

Refleksion

Jeg syntes det var en svær opgave at gå i gang med, da jeg ikke helt havde forstået kodning endnu.

Jeg synes selv, at jeg kom langt med opgaven, men jeg har også brugt rigtig meget tid på det, for jeg havde meget svært ved forstå teorien/processen og derfor løb jeg ofte ind i fejl og måtte lege med de forskellige ting for at finde ud af hvad der fungerer og hvad der ikke fungerer.

En anden gang vil jeg samle css i ét dokument for at gøre det nemmere at rette f.eks. media queries.

Validering af koderne skulle jeg have lavet løbende, så havde jeg undgået en del fejl.

Github skulle jeg ligeledes have anvendt fra starten af, da det kunne have givet mig et godt overblik over de rettelser jeg havde foretaget mig undervejs, men også så jeg kunne have fundet tilbage til en gammel kode, hvis jeg havde haft brug for det.

Jeg har fået en bedre forståelse af kodning og hvordan man opbygger hjemmesider fra bunden, og jeg gjorde nogle fodfejl som måske kunne have været undgået, hvis jeg havde forstået teorien inden opgavebesvarelsen. Men man lærer af sine fejl og for mig er det den bedste måde at lære nyt på.

Her er afleveringsdokument indholdene links :

Vi var 4 i min studiegruppe i.f.m. Projekt 3 – vores individuelle eksamensprojekt. Nogle dage har vi alle kunne mødtes andre gange har vi kun være 2-3 stykker, der kunne p.g.a. private aftaler og på grund af udfordringer med transport til Odense. Nogle gange har vi siddet sammen med andre, også fra hold 1.

VI har mødtes nogle gange fysisk på skolen men også haft gjort brug af Discord og Messenger i.f.t. at sparre med hinanden.

Den ene dag hvor vi mødtes på skolen, brugte vi tiden i Medialab for at vi kunne hjælpe hinanden med at få taget portrætbilleder og produktbilleder og så fik vi lige vendt hvor langt vi hver især var nået, og hvordan vi hver især havde grebet opgaven an.

Det har været en god idé fra skolens side af, at det er et krav at man har en studiegruppe til det individuelle eksamensprojekt. På den måde undgår man at nogen sidder alene med projektet og de udfordringer man måtte have, som man måske ikke tør spørge andre om hjælp til.

I min studiegruppe har vi været gode til at hjælpe hinanden med de forskellige ting, hvis der har været en kode der f.eks. ikke har virket, korrekturlæsning, problemer med Filezilla, GitHub o.s.v.

Vi har grint og forsøgt at holde humøret oppe på hinanden også de dage der har virket håbløse fordi især kodning i HTML/CSS har voldt os alle store udfordringer.

Jeg deltog desværre ikke i workshoppen p.g.a. sygdom. Jeg har efterfølgende tilegnet mig viden om processen, dels ved tutorials og ved hjælp fra medstuderende.

Jeg startede med at lave en tegneseriefigur ud af fri fantasi i Adobe Illustrator:

Idéen er at figuren skal hoppe og skifte farve når den ændrer sig fra front til bag og modsat.

Spritesheet:

Filen med figur (alle lag) blev eksporteres til en WebP-fil, så den er kompatibel med Visual Studio Code. Derefter åbnes Visual Studio og derefter hentes filen ind.

Og så var det tid til at kode animationen, hvilket voldte mig lidt problemer, men ved hjælp fra en medstuderede, så lykkedes det at få kodet animationen rigtigt::

Først skulle der oprettes en HTML-fil og dernæst en CSS-fil, herunder er koderne:

HTML:

CSS:

Refleksion

Jeg synes, det var en lidt svær opgave, da jeg ikke har prøvet det før, men det gav god mening da min medstuderende gav mig en god forklaring på opgaveløsningen. Det er i hvert fald en sjov opgave, og jeg vil sige, at det er noget jeg skal lege videre med. Jeg forstår ikke helt hvorfor den ikke tog de sidste frames med, men tænker at det har noget at gøre med webP-filen, da jeg har prøvet at ændre antal frames i “Animation” til et større tal og det samme med antal px, uden at det hjalp. Ligeledes blev den ikke helt som jeg ønskede i.f.t. strech – men den bevæger sig trods alt:

Jeg kunne ikke finde ud af hvordan man eksporterer selve animationen til WordPress og derfor optog jeg animationen med min mobiltelefon og lagde den op:

• 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.

Opgaven: Digital festivalguide

Processen

Til kickoff- lavede gruppen en brainstorm i.f.t. hvilke idéer der kunne være potentielle som en digital festivalguide for HCA Festivals. Dagen efter kickoff blev vi vidst rundt på HCA Festival-området, og fik bl.a. fortalt hvilke udfordringer de ser i forhold til at få de besøgende til at cirkulere rundt på hele festivalpladsen. I Gruppen blev vi egentligt hurtige enige om, at en app til mobiletelefoner ville være den bedste løsning men vi skulle komme op med 3 idéer til midtvejspitchen.

Til midtvejspitchen fik vi besked på at tænke helt ud af boksen UDEN begrænsninger, for en app var for oplagt. Anni sagde, at selvom det ikke var noget vi ville kunne lave p.g.a. eksempelvis manglende kompetencer, så kunne vi beskrive idéerne og finde løsning herpå, da det “kun” var en prototype vi skulle lave.

Desværre opstod der efter kort efter midtvejspitchen uenighed om hvilken vej vi skulle gå og hvad vi skulle arbejde videre med, da 2 af gruppemedlemmerne holdt fast i App’en, nok mest fordi det ene gruppemedlem følte sig mest sikker i den opgave, og allerede var påbegyndt at lave lo-fi/hi-fi wireframes i Figma. Det betød af gruppen blev splittet i forhold til at finde nye løsninger; 2 ville kun arbejde med app’en og 2 ville gerne tænke ud af boksen og finde nogle nye skøre idéer.

Som projektleder formåede jeg ikke at nå ind til de to gruppemedlemmer som arbejdede med app’en og fik ej heller mulighed for at byde ind med noget til den, da det kun var “dem” der arbejdede med den.

Selvom jeg kom med idéer til den såkaldte skattejagt var det ikke noget der blev lavet i App’en f.eks. er der ikke nogle steder i appen, der indikerer at der er en skattejagt, som fører én rundt på festivalområdet, og taget målgruppens alder i betragtning (18-35år), så syntes jeg at det var et lidt tamt ord at kalde det en skattejagt, da jeg synes det mest henvender sig til børn/børnefamilier og nogle af de forslag der var til aktiviteter/missioner på skattejagten er ikke henvendt til voksne, men snarere børn. Måske skulle den bare have heddet noget med “Gå i H.C. Andersens fodspor og opdag eventyret”.

Justine og jeg kom med et par andre idéer ved brainstorm efter midtvejspitchen:

Men p.g.a. splittelsen i gruppen og manglende tid til at udarbejde yderligere prototyper, fokuserede jeg på den akademiske rapport, hvor jeg til at starte med udelegerede de forskellige afsnit og bad hvert gruppemedlem om at skrive noget og var tovholder på dette.

• Rosa skrev indledning, problemformulering og konklusion.
• Justine skrev afgrænsning, abstract og refleksion.
• Denis skrev lidt på analysedelen.
• Jeg skrev metodeafsnit og det meste af analysen.

Det hele samlede jeg i Indesign.

Justine arbejdede på flyers og plakat:

Denis og Rosa havde fra start besluttet at de ville stå for de to videoer, som de lavede lige op til afleveringsdatoen, så vi andre ikke kunne nå at komme med input til videoerne. Personligt synes jeg ikke at UCL-procesvideoen viser den fulde proces i.f..t projektet, men der var kun fokuseret på app’en, uden at tænke over at der også var andre elementer der skulle inddrages bl.a. flyers, plakat og akademisk rapport. I forhold til videoen til HCA Festivals skulle der ligeledes også have været gjort mere ud af at vise de ting man ville kunne opleve, hvis man gik på app’ens “skattejagt”.

Fremlæggelse for HCA Festivals, underviser og medstuderende/andre besøgende

Til selve fremlæggelsen manglede vi Rosa, hun var syg, så Denis måtte stå for fremlæggelse af selve app’en. Justine forklarede, at det var for oplagt med en app, og hvorfor skattejagten var blevet integreret. Et af forslagene til skattejagten var hologram med H. C. Andersen og jeg havde aften forinden lavet en prototype af en hologram-boks og forklarede bl.a. hvad hensigten var hermed. Det kunne have været fedt hvis jeg kunne have vist dem H. C. Andersen som hologram, men formåede ikke at lave det, så vi fandt en video med den lille havfrue, som vi afspillede i stedet. En anden af aktiviteterne som vi foreslog var “Gæt en magisk smag” – og der havde jeg naturligvis mine egne frugtvingummier med, for vi alle ved at syns- og smagssansen hænger meget sammen, og vi associerer frugter med bestemte farver f.eks. at kirsebær er mørkelilla, jordbær er røde, appelsiner er orange, men så snart vi ændrer farverne på smagene, så driller smagssansen vores hjerne.

Refleksion

En super spændende opgave, men det var en svær opgave at løse, da vi ikke var enige om, hvad og hvordan efter midtvejspitchen.

Som projektleder synes jeg at det var rigtig ærgerligt at vi ikke kunne finde et samarbejde omkring opgaveløsningen, så vi alle kunne være tilfredse med outputtet. Vi var to mod to der skulle gå på kompromis med opgaveløsningen og det betød at jeg og Justine endte med at gå på kompromis i.f.t. app’en velvidende at det ikke var en app der skulle udvikles, men de andre gruppemedlemmer var fastlåst i.f.t. idéer og havde kun fokus på app’en.

Kommunikationen har heller ikke været den bedste. Manglende feedback fra gruppemedlemmer og der blev heller ikke lagt op til at vi skulle mødes fysisk på f.eks. skolen. Justine og jeg valgte dog at mødes den ene dag for at samle trådene i.f.t. den akademiske rapport, flyers og plakat, hvilket var dejligt, så vi kunne sidde og kigge på det sammen og tale om det der var skrevet.

Min erfaring og alder fortæller mig at ude på arbejdsmarkedet var det ikke gået – hvis chefen havde bedt om én ting, og medarbejderne var kommet med noget helt andet og ikke ville ændre retning, og havde forsat med at arbejde på noget de ikke skulle lave, så ville der være en fyreseddel på vej.

Ved næste gruppearbejde/projekt vil jeg foretrække at komme i en anden gruppe, da jeg føler, at jeg ikke har haft mulighed for at lære nyt og få feedback på det jeg har lavet. Jeg vil f.eks. gerne lære mere omkring Figma og hvordan man laver videoer.

Feedback på den akademiske rapport var rigtig fin og velformuleret. Det var kun småting underviseren gav udtryk for kunne gøres bedre bl.a. at hun kunne se at der var et skifte i sproget, hvilket jeg godt var klar over at der ville være, da jeg ikke havde rettet alt Dennis havde skrevet. Der var også lidt med billederne, men det var der en forklaring på, da HCA Festivals ikke havde fremsendt ordentligt billedmateriale til os, og vi så valgte at anvende billeder fra deres hjemmeside. I forhold til referencer, så behøver vi ikke at skrive “ref” foran en reference i teksten.

I første omgang havde jeg fundet et maleri fra Nyborg Slot, men opløsningen på billedet var ikke særlig god, men det kunne have været sjovt at vække en rustning til live, som kunne spille klaver.

Så jeg måtte finde et andet maleri der kunne fortælle en historie. Det var rigtig svært at at vælge et maleri, men valget stod mellem:

“Fiskeren” af den tyske kunstmaler Harry Haerendel (1920’erne).

Maleriet betyder meget for mig, da det minder mig om min barndom, da min mormor og morfar havde en kopi af dette maleri hængende i deres stue.

“En strandpromenade” af den danske kunstmaler Michael Ancher (1896).

Maleriets betydning for mig tager afsæt i at jeg holder ferie i Nordjylland hver sommer, og nyder at gå en tur på stranden i Skagen.

“The Arnolfini Wedding” af den hollandske kunstmaler Jan van Eyck (1434).

Maleriet betyder ikke så meget for mig, men jeg synes at det har nogle gode elementer som der er potentiale for animering af.

Jeg valgte at animere “The Arnolfini Wedding”, da jeg havde svært ved at finde på en historie til de andre to, men hvis jeg får tid til det inden jul, vil jeg alligevel forsøge mig med de andre to billeder og lægge dem herind i procesportfoliet.

Jeg har ikke tidligere arbejdet med Adobe Photoshop og kun meget lidt med Adobe After Effects, så jeg var spændt på hvor meget jeg kunne nå at lave på workshoppen.

Historien bag animationen

Billedet er et dobbelt portræt af købmanden Giovanni de Nicolao Anolfini og hans brud. Parret er i et værelse møbleret meget luksuriøst med himmelseng, messinglysekrone, appelsiner og et orientalske tæppe. Ved første øjekast ligner det at kvinden på billedet er gravid, men faktisk er det et stykke stof/på kjolen hun trækker op mod sig – hvilket udviser rigdom på den tid. Hunden kan meget vel være en gave fra mand til kone eller et tegn på troskab eller længslen efter at få et barn.

Den animerede historie

Købmanden Giovanni de Nicolao Anolfini og hans brud står i deres værelse, hvor de skal tilbringe bryllupsnatten. Det er et meget smukt rum med en masse fine detaljer. Han har givet hende en hund i bryllupsgave.. Brudeparret holder i hånd og han rækker hånden ud mod hende, men så falder lysekronen ned, og heldigvis rammer den ikke hunden.

Efter at have lavet storyboard i Indesign skulle jeg finde ud at hvad jeg skulle gøre med billedet i.f.t. Photoshop og After Effects.

Jeg havde besluttet at der skulle laves bevægelse på hænderne, armene, hunden og lysekronen.

Første step var at åbne originalbilledet i Photoshop og derefter kopiere laget med originalbillede og låse originalbilledet, således at hvis jeg fik lavet fejl, så kunne jeg altid starte forfra med originalbilledet.

Dernæst brugte jeg “Lasso-tool” til at klippe de forskellige elementer ud og de fik hvert deres lag og til sidst gemt som PNG-filer for at kunne importere dem til After Effects.

Derefter skulle originalbilledet renses for de elementer som jeg havde tænkt mig skulle sættes i bevægelse. Dette gjorde jeg først ved at markere det område elementet var i med “lasso-tool” og dernæst højreklikke og vælge “Slet og udfyld det markerede”:

Da jeg var færdig med at rense originalbilledet skulle alle elementer og original og renset billed gemmes ned som PNG-filer, for at kunne arbejde videre med dem i After Effects.

I After Effects skulle billederne først importeres, og dernæst skulle de placeres i det “rensede” billede for derefter at kunne blive arbejdet med i.f.t. effekter.

Jeg har ikke kigget meget på designprincipperne, for det var svært nok at finde ud af programmet i sig selv, så det var en sejr at jeg fik noget til at bevæge sig, dog ikke helt som jeg ønskede mig, men der er bevægelse.

Bevægelserne blev lavet ved f.eks. at sætte et ankerpunkt og derefter bruge funktionen “Rotation” og sætte værdierne for bevægelsen og bruge stopuret for hvornår på tidslinjen effekten skulle være.

Jeg prøvede også puppet-funktionen, som gør bevægelser mere flydende/livlige:

Inden animationen var færdig og skulle præsenteres, skulle der sættes lyd på. Musik og lyd blev fundet på siden: pixabay.com – her valgte jeg musik med fløjte, der minder om den slags klassisk musik der fandtes dengang i 1500’tallet samt en soundeffect der skulle bruges i forbindelse med at lysekronen ramte gulvet. Her skulle der også arbejdes med hvordan lyden på tidslinjen ville passe ind med animationen.

Til sidst skulle animationen eksporteres så den kunne afspilles og uploades. Her skal man huske at vælge hvor filen skal gemmes og dernæst trykke på “Render”.

Her er så den endelige animation:

REFLEKSION

Som ved alle nye programmer, så lærer man først når man sidder og arbejder med dem. Jeg synes, at jeg fik lært nogle grundlæggende ting i.f.t. Photoshop og det samme med After Effects,

Skulle jeg lave noget om på animationen, så var det helt klart justeringer på elementerne. Lyd og timing er helt fin, men der var nogle ting jeg gerne ville have lavet, som jeg simpelthen ikke formåede med min kunnen på workshoppen f.eks. at få hunden til at bakke bagud og sætte sig ned, manden og kvindens hænder skulle mødes, lysekronen skulle ryge ned bag ved manden og kvinden, de skulle have blinket eller munden bevæget sig, men det kan være noget jeg arbejder videre med og så vil den nye animation også blive uploadet hertil (nedenfor).

Jeg glæder mig til at kunne dykke mere ned i Adobe After Effects og formå at få helt styr på det med ankerpunkter og ikke mindst puppet-funktionen.

For at låse et portrætbillede i Adobe Illustrator, så du kan tegne ovenpå det med Pen-værktøjet, skal du gøre følgende:

1. Placer dit billede: Træk portrætbilledet ind i dit Illustrator-dokument, eller gå til File > Place og vælg billedet. Klik derefter for at placere det i dokumentet.
2. Lås laget med billedet:
   • Gå til Layers-panelet (typisk i højre side, ellers kan du åbne det via Window > Layers).
   • Når du har placeret billedet, vil det være i sit eget lag. Klik på laget for at sikre, at det er markeret.
   • Klik derefter på låse-ikonet (det lille tomme felt) til venstre for laget i Layers-panelet. Når låsen vises, er laget låst, og du kan ikke ændre eller flytte det ved et uheld.
3. Opret et nyt lag til tegning:
   • Klik på +-ikonet i Layers-panelet for at oprette et nyt lag ovenpå dit billede.
   • Vælg dette nye lag, og begynd at tegne ovenpå dit billede med Pen-værktøjet uden at forstyrre billedlaget.

Når du tegner med Pen Tool (Pen-værktøjet) i Adobe Illustrator, skaber du former ved at sætte ankerpunkter, som definerer kurverne og linjerne. Her er en trin-for-trin guide til at bruge ankerpunkter effektivt:

1. Vælg Pen Tool:
   • Tryk på P på tastaturet, eller vælg Pen Tool i værktøjsmenuen til venstre.
2. Sæt det første ankerpunkt:
   • Klik én gang, hvor du vil starte din streg eller kurve. Dette skaber dit første ankerpunkt.
3. Tilføj lige linjer mellem ankerpunkter:
   • Klik et andet sted for at tilføje et nyt ankerpunkt og skabe en lige linje mellem de to punkter.
   • Fortsæt med at klikke for at skabe en sekvens af lige linjer.
4. Skab kurver:
   • For at lave en kurve, klik og træk, når du tilføjer et nyt ankerpunkt. Dette træk skaber to håndtag, som kontrollerer kurvens retning og runding.
   • Ved at justere håndtagene kan du kontrollere, hvor blød eller skarp kurven bliver.

Afleveringsopgave: – find et selvportræt og brug pentool til at lave portrættet:

PortrætDownload

Det tog lige lidt tid at finde fidusen med de der kurver, men da det lykkedes at finde ud af hvordan det fungerede, var det en sjov opgave. Er meget tilfreds med resultatet. Måske kunne der gøres lidt mere i.f.t. nuancer i huen og håret.