Projekter

Mens jeg studerer multimediedesign på KEA, har jeg arbejdet på en masse fede projekter, der har hjulpet mig med at udvikle mig som multimediedesigner. Jeg har haft muligheder for at designe brugergrænseflader, bygge interaktive hjemmesider og lave multimedieindhold. Ikke alle projekter jeg har lavet, er perfekte – jeg lærer stadig og finder ud af tingene undervejs. Hvert projekt har været en sjov læringsoplevelse, hvor jeg kan fordybe mig i min kærlighed til design og teknologi. Plus, at arbejde sammen med fantastiske klassekammerater har gjort hele processen endnu bedre. Jeg har lært en masse nye færdigheder og glæder mig til at tage fat på flere kreative udfordringer i fremtiden.

Klik på billederne for at blive ført videre til projektet.

Tema 2

Mobile og website

Formål med temaet
Vi lærte hvordan man sætter en simpel webside op med HTML og CSS, og blev introduceret for begreber så som design af digitale brugergrænseflader, digital indholdsproduktion, digital kommunikation og responsiv webdesign. Det var også i dette tema, at vi for første gang satte fingrene i Figma, og tekst- og billedeopsætning hertil.

Mål
Vi skulle lave en hjemmeside, hvor vi startede med at kode mobile-first, ud fra et udleveret wireframe og layoutdiagram - indholdet til siden var også allerede udleveret. Vi skulle justere siden med margins og paddings, og dele indholdet op i grids. Bagefter skulle vi kode hjemmesiden desktop-venlig, også med HTML og CSS.

Proces
Jeg startede allerførst med at kigge på de wireframes og layoutdiagrammer, vi havde fået udleveret og begyndte så småt at kode hjemmesiden op ud fra dette. Da det praktiske mht. til header, main og footer var på plads, gik jeg igang med at style det med CSS.

Udfordringer
Jeg havde sværest med at få grids til at virke og lige at komme ind i, hvordan det helt praktisk fungerede. Hertil tog det også noget tid, at forstå hvordan FileZilla fungerede og hvordan, man uploadede sine mapper.

Konklusion
Jeg lærte, hvordan man opsætter en hjemmeside med "standard" HTML og styling med enkelt CSS, og hvad det indeholder at en hjemmeside er "responsive". Jeg blev også sat mere ind i Figma og FileZilla.

Tema 3

Emnesite

Formål med temaet
Vi blev introduceret til UX/UI og samspillet mellem brugere og brugergrænseflader, samt hvilke teorier, værktøjer og metoder vi kan bruge til research, design og test.

Mål
Vi fik til opgave at kode en hjemmeside ved brug af HTML, CSS og JavaScript, omkring et valgfrit emne. Hertil skulle vi researche vores emnevalg og idéudvikle. Vi skulle også lave en prototype og et wireframe over hjemmesiden i Figma, og lave forskellige brugertests.

Proces
Jeg havde allerede en idé til mit emne fra start af, så jeg kunne gå igang med idéudvikling og research relativt hurtigt. Jeg vidste, at jeg gerne ville have hjemmesiden var simpel, en smule nørdet og i rolige, dæmpede farver. Jeg lavede et mindmap over forskellige ting, jeg meget gerne ville have med på hjemmesiden, lavede moodboards, planlagde indholdet til hjemmesiden, udviklede et styletile og gjorde brug af sketching, The Crazy 8's og Solution Sketch. I slutningen af min kodning, gjorde jeg også brug af en heuristisk evaluering til at gøre hjemmesiden ekstra brugervenlig og udførte en Lighthouse-test på den endelige hjemmeside.

Udfordringer
Da jeg allerede havde en meget klar idé til, hvad min hjemmeside skulle handle om og indeholde, fandt jeg delen med Crazy 8's lidt svær, da jeg skulle ligge de idéer som jeg allerede havde i hovedet så meget fra mig som muligt, og tænke på noget helt nyt og anderledes. Media queries var også en udfordring for mig, og tog en del repetetioner og øvelser før jeg forstod det basale.

Konklusion
Jeg lærte, hvordan man udfører forskellige former for research inde for både idéudvikling og brugeroplevelser. Hertil lærte jeg nemlig også, hvor vigtigt det kan være, at få et andet par øjne til at kigge på din hjemmeside og lytte til deres feedback, så hjemmesiden ikke blot bliver nem for dig selv at navigere i, men også brugerne. Jeg lærte, hvordan man gør brug af media queries og gik endnu mere i dybden med HTML og CSS og hertil lærte noget mere JavaScript. Figma blev der også dykket dybere i, i dette tema, og jeg lærte bl.a. forskellen på et lofi- og hifi prototype.

Tema 4

Temaopgave

Formål med temaet
Vi skulle lave et spil, som skulle være udelukkende "klikbart", på en hjemmeside opbygget med simpel HTML og CSS. Selve spillet skulle kodes ved brug af CSS og JavaScript.

Mål
Vi blev introduceret til Adobe Illustrator, gik mere i dybden med UI-elementer, CSS- positionering og animation, og blev introduceret ordentligt til JavaScript. Alt proces-dokumentation skulle uploades på hjemmesiden sammen med selve spillet.

Proces
Som det allerførste, begyndte jeg at researche, hvad mit spil skulle handle om. Det gjorde jeg ved hjælp af de tidligere research-metoder, vi lærte på tema 3, så som skitsering af baggrund, figurene og spil-elementerne. Jeg researchede også, hvilken form for stil mit spil skulle være i, og endte med "Kawaii"-stilen. Da dette var på plads, begyndte jeg at lave en papirsprototype af spillet og herefter et UML-aktivitetsdiagram over hvordan spillet skulle foregå, og så begyndte arbejdet med Adobe Illustrator, hvor jeg designede baggrunds-, start- og slutskærm, figurene og de resterende elementer, så som liv, point og tid. Tilsidst begyndte kodningen af hjemmesiden, og positionere de forskellige elementer. Jeg sad med de JavaScript-øvelser, vi havde fået udleveret og jeg ville begynde at implementere dem til min hjemmeside. Desværre blev mit projekt med animation afbrudt her.

Udfordringer
Jeg har helt klart haft de største udfordringer med JavaScript'en. Dette kodesprog giver stadig ikke så meget mening i mit hovede, da den er så anderledes i forhold til HTML- og CSS sprogene. En anden udfordring med spillet var, at jeg netop blev afbrudt i midten af temaet og havde svært ved at fuldføre opgaven i tide.

Konklusion
Jeg lærte, hvordan man udfører forskellige research-metoder inden for spiludvikling. Hertil lærte jeg også, hvor meget der egentlig ligger bag at udvikle et spil, så som game-mechanics, atmosfærisk perspektivering, kontraster, focal points, mm. Jeg lærte det basale inde for JavaScript, så som funktioner, classes og variabler. Det var også første gang, jeg blev introduceret til Adobe Illustrator og lærte, hvordan man designer og gemmer sine kreationer som SVG'er. Da der også blev brugt video-undervisning, lærte jeg også hvordan man følger en video-øvelse ordentligt og effektivt.

Tema 5

Passionssite

Formål med teamet
Dette tema gav grundlæggende indførsel i indholdsproduktion, præproduktion, generel produktion samt postproduktion. Vi blev sat ind i Adobe Premiere Pro og Audition til redigering af vidoerne og lyd. Hertil blev vi også introduceret til Lottiefiles og hvordan man arbejder med animeret vektorgrafik.

Mål
Vi skulle, i en gruppe af 3, interviewe en person med en hobby eller passion, som vi skulle filme og tage billeder af. Sammen skulle vi også planlægge og optage videomaterialet og herefter skulle vi individuelt redigere videoerne til én video, på 60 sekunder. Vi skulle lave animeret vektorgrafik ved brug af Lottiefiles og tilsidst kode passionssitet som skulle indeholde videoen, billederne og det animerede vektorgrafik, ved brug af HTML, CSS og CSS-grids.

Proces
Mig og mine to medstuderende fandt en person, som vi gerne ville interviewe og aftalte tid og sted med personen: Bárður Petersen, som er guitarist og har hermed en passion for musik. Vi begyndte at planlægge videomaterialet, som vi brugte til selve optagelsesdagen. Herefter begyndte det individuelle arbejde, så jeg startede med at redigere videoen i Premiere Pro og efterbehandlede fotomaterialet, hvorefter jeg satte websiden op. Derefter brugte jeg Adobe Illustrator til at designe en illustreret tegning af en guitar, jeg herefter satte ind i Adobe Audition for at lave min animerede vektorgrafik med Lottiefile.

Udfordringer
Jeg havde en del udfordringer med CSS-grids i denne omgang og baggrunden, jeg havde uploadet til hjemmesiden, ville gerne vises på Live Server fra Visual Studio Code men ikke efter den blev uploadet til FileZilla - dette havde jeg problemer med at finde ud af hvorfor og måtte tilsidst opgive at finde en løsning. Jeg havde også nogle udfordringer med Lottiefiles, da det var første gang jeg prøvede det og der var ikke tid nok, til at sætte sig ned og nærstudere programmet.

Konklusion
Jeg fandt ud af, hvor vigtigt det er at planlægge hvilke vinkler man gerne vil filme fra, inden man begynder at filme. Jeg lærte også, hvordan man sætter et interview op og hvordan, man redigerer videoer og lyde og hvordan, man sammensætter disse to i et videoredigeringsprogram. Jeg lærte også, hvad det vil sige at designe og udvikle en animeret vektorgrafik.

Tema 5

Virksomhedssite

Formål med temaet
De færdigheder, vi har fået i de foregående temaer skulle vi bruge til at redesigne en virksomheds hjemmeside. Herudover lærte vi omkring brugerprofiler, genbesøgte forskellige former for brugertests og hvordan en bruger opfatter en hjemmesides design. Hertil blev vi også introduceret til SCRUM-konceptet, som vi brugte dagligt i studiegruppen og lærte hertil også, hvordan man planlægger og projektstyrer i en gruppe.

Mål
I vores studiegruppe af 5, skulle vi finde en virksomhed med en hjemmeside, som vi gerne vil redesigne. Det skulle vi gøre ved brug af HTML, CSS og JavaScript. Vi skulle oprette en Github-bruger og en tilhørende repository, hvor én skulle inviterer de andre til at være collaborators og hertil forbinde Github til Visual Studio Code, så gruppen kunne kode sammen hver for sig. Vi skulle også gøre brug af de research-, idéudviklings og testmetoder som vi har lært igennem de andre temaer.

Proces
Det allerførste vi startede med, var at lave en teamkontrakt og så begyndte vi at researche hjemmesider. Da vi fandt én, planlagde vi vores arbejde via Trello og en daglig SCRUM. Vi lavede research på virksomhedens nuværende målgruppe og design, og hertil implementerede vi de ting, som vi syntes fungerede og tilføjede vores egne idéer i form af moodboards, styletile, målgruppeanalyse, brugertyper, mm. Vi udviklede wireframes og digitale prototyper i Figma, og begyndte herefter at kode hjemmesiden.

Udfordringer
Kommunikationen i gruppen var ikke den bedste og det var til tider lidt svært, at komme i kontakt med forskellige gruppemedlemmer. Dette gjorde også, at noget af kodningsarbejdet blev forvirrende og rodet. Vi havde også lavet prototypen alt for indviklet i forhold til, hvad vi var i stand til at kode, så den endelige version af hjemmesiden blev ikke som vi ønskede.

Konklusion
Jeg lærte hvordan, man arbejder professionelt i en gruppe og hvordan, man gør plads til alles idéer og meninger - og hertil, hvor vigtigt det er med god og klar kommunikation. Det var også første gang, jeg lærte at bruge Trello og at tilknytte Github til Visual Studio Code. Selvom jeg syntes, det var fedt at kunne kode samtidigt med at man er hver for sig (og hertil lærte at push, committe og pull), medbragte det også en del problemer, når det begyndte at drille på skift hos os alle gruppemedlemmerne.