Velkommen

Velkommen til mit site!

Hej, mit navn er Mikkel og jeg laver webdesign.

Sitet, du er kommet ind på, er min hyldest til de computere jeg voksede op med, og foran hvilke jeg tilbragte en stor del af min barndom. Siden indeholder de forskellige projekter jeg har arbejdet på i løbet af 1. semester på Multimedie Designer Udannelsen på KEA. Jeg håber at du vil klikke rundt, og være med på min rejse ind i webdesign-verdenen!

Har du lyst til at hyre mig til et projekt, eller vil du bare have en sludder, så smid mig en mail på mikkel@codemonkey.computer, så vender jeg tilbage til dig.

Om mig

Om mig

Så længe jeg kan huske, har jeg været dybt fascineret af computere. Siden jeg første gang fik lov til at spille Aladdin på fars gamle DOS PC, har jeg været opslugt af computere. Spil som Løvernes Konge, Jazz Jackrabbit og Earthworm Jim blev min adgangsbillet ind til computerverdenen som helt lille. Senere var det ikke længere DOS, men Windows 95 der var på programmet. Jeg kunne få hele dage til at gå med at rode rundt i filsystemet, lytte til midi-filer, se de inkluderede videofiler, og spille CIV II fra en diskette jeg havde fået af en ven. Var vi på besøg hos nogle af mine forældres venner, var det første jeg skulle se deres computer.

Da jeg blev lidt ældre og kom på fritidshjem, blev jeg forelsket i SFO'ens, allerede dengang, ældgamle Macintosh Plus computer. Jeg brugte timevis på at spille den inkluderede udgave af Risk med vennerne, og det var her af min kæelighed til Apples computere begyndte. Langt senere opdagede jeg Linux-systemet, og det er Linux samt macOS jeg benytter mig af den dag i dag.

Efter at have læst Klassisk Arkæologi på universitetet i nogle år, har jeg nu valgt at kaste mig fuldtid ind i at arbejde med computere, og det er derfor jeg i dag læser til Multimedie Designer. Derudover har jeg en stor forkærlighed for alt der har med netværk at gøre, og har det bedst når jeg befinder mig i terminalen på en Linux server.

Privat har jeg en stor kærlighed for musik, og sidder tit i stuen og hører plader fra samlingen, når jeg skal slappe af. Jeg elsker også stadig computerspil, især rollespil til PC af lidt ældre dato.

CV

Udannelse:

Multimedie Designer, KEA, 2024-26.

Arbejde:

DKTV, Teknisk Support, 2023-24

Færdigheder:

HTML + CSS
Javascript
Python
Flask
Bash
SQL
Git
Serveradmin (Linux)
Webserver (Apache2 + nginx)
Linux
macOS
Figma
Adobe Photoshop
Adobe Lightroom
Adobe Premiere Pro
Fotografi

Min Computer

T2: Grunlæggende Web

I tema 2, Grunlæggende Web, skulle vi for første gang arbejde med HTML og CSS. Opgaven var at lave et site om computere. Vi fik på forhånd udleveret langt det meste tekst og billedmateriale, samt wireframes og layoutdiagrammer som siden skulle laves ud fra. På undersiden "Min Computer", udførte jeg selv tekst om min computer, samt et foto af min laptop.

Layouet er som før nævnt lavet ud fra udleverede layoutdiagrammer, og gør i vid udstrækning brug af CSS grids i dets layout. Siden er kodet ud fra "mobile-first", og gør brug af media-queries til at gøre sitet responsivt. Burgermenuen er lavet ud fra Javascript vi fik udleveret.

Til designet lod jeg mig inspirere af elementer på CodeAcademys hjemmeside, samt elementer jeg selv fandt på. Sites bruger bløde former, samt animerede knapper der har en tryk ned effekt når man holder markøren hen over dem.

Siden var den første rigtige hjemmeside jeg har lavet, og har du lyst til at besøge den, kan du gøre det her.

Film Bucket Challenge

The Film Bucket Challenge

T3: Grunlæggende UX/UI

I vores tredje tema arbejdede vi med UX, og gik langt mere i dybden med design. Temaets opgave var at vi skulle designe og programmere et site om et selvvalgt emne fra bunden. Vi fik en langt mere dybdegående forståelse for designprocessen i Figma, og for hvordan man kan idéudvikle på en løsningsorienteret måde.

Som emne for mit site valgte jeg filmens verden. Jeg har længe haft en passion for film, og syntes derfor det kunne være interressant at arbejde med at formidle denne passion til andre igennem webdesign. Hele min process - fra idéudvikling til implementering, kan du læse mere om længere nede på siden.

Har du lyst til at besøge sitet, kan du gøre det her.

Idéudvikling

Til at kickstarte min idéudviklingsfase, begyndte jeg med en brainstorm. Jeg brugte 25 minutter på at skrive samtlige idéer ned, som jeg kunne komme på, uden at sortere nogen fra. Da de 25 minutter var gået, sorterede jeg idéerne i overordnede emner, og sorterede også de første fra. Herefter begyndte jeg at slå nogle af idéerne sammen, da jeg kunne se et vidst overlap imellem dem.

Da jeg havde den sidste liste med idéer på plads, begyndte jeg at uddybe de forskellige idéer, for at konkretisere dem. Jeg lavede også en liste med fordele og ulemper ved hver, og bedømte hvad jeg mente arbejdsbyrden ved de enkelte idéer ville blive. Dette gav mig et overblik over de forskellige idéers styrker og svagheder, og det stod derefter klart at den idé jeg syntes var bedst var lave en side om film man bare måtte se. Siden skulle udformes som en såkaldt "bucket list" - altså en eller flere ting man skal opnå inden man dør. Her ville jeg starte med ti film, og så kunne man senere bygge videre ved at lave flere niveauer, der kunne indeholde yderligere film.

Design

Det første jeg gjorde i min designprocess, var at kigge rundt på nettet for at se om der var nogle designelementer på andre sider jeg kunne lade mig inspirere af. Herefter fandt jeg tre "værdiord", der skulle beskrive designet på siden. Jeg valgte de tre ord: "tidsløst", "fængslednde" og "monokrom". Til hvert ord, lavede jeg et lille moodboard med fotos og designelementer der gav udtryk for hvad jeg mente med dem.

Udfra dette, lavede jeg ét samlet moodboard til hele sitet. Det blev fyldt af still-billeder fra forskellige film som jeg fandt inspirererende og som designet på mit site gerne skulle minde om.

Slutteligt udarbejde jeg et styletile med de elementer og det farveskema der skulle indgå på siden. Farverne blev holdt i en ren monokrom farveskala, for at minde om de mange klassiske film i sort/hvid. For at give siden et tidsløst look, valgte jeg at bruge den modernistiske font Helvetica til alle mine headers og hero-tekst. Til brødtekst og på knapper, valgte jeg skrifttypen Garamond EB, der har rødder helt tilbage til det 16. århundrede. Fotos skulle være flotte still-billeder fra forskellige film, hvilket skulle gøre designet fængslende.

Prototype

Efter de indledende trin i designprocessen, udarbejde jeg en fungerende prototype til både mobil og desktop i Figma. For at give sitet et fængslende udtryk, gjorde jeg brug af browservinduets fulde vidde, med store overskrifter, fotos der fyldte en hel side og stor citattekst.

Selve interfacet skulle helst ikke gå i vejen for brugeroplevelsen, og jeg valgte derfor at have en burgermenu der kom ind fra højre side ved klik på top ikonet. Ligeledes blev baggrunden på den øverste menubar gjort transparent, således at den ikke blokerede for indholdet på siden. De forskellige ikoner gav jeg en skygge, så de stadig var synlige selvom de lå oven på fotos eller tekst.

Implementering

I implementeringen af mit site, valgte jeg at arbejde med et kanban-board, hvorpå jeg kunne skrive alle de opgaver der skulle laves op, og følge hvor langt jeg var kommet med dem.

For at versionsstyre min kode, brugte jeg git og Github. Sitet er hovedsageligt lavet ud fra grids, da der var en del elementer der fx skulle overlappe eller placeres meget nøjagtigt i forhold til hinanden. Sitet blev kodet ud fra "mobile-first", hvilket gjorde det væsentligt nemmere at kode både til mobil og desktop.

Efter vi havde afleveret vores opgave, præsenterede vi vores færdige site samt arbejdsprocess for de andre på holdet.

Cosmic Defender

T4: Grunlæggende Animation

I vores fjerde tema skulle vi designe og kode et spil ved brug af vectografik, og Javascript. Temaet var vores introduktion til brug af Adobe Illustrator til at skabe vectografik, samt programmering i Javascript til at skabe interaktivitet på hjemmesider. Temaet var også vores introduktion til brug af git, hvilket jeg havde erfaring med i forvejen.
Gameplayet i vores spil skulle indeholde gode og dårlige ting man kunne klikke på, og ting der enten kom ind fra siden eller toppen. Jeg valgte at lave et spil hvor man fra et rumskip skulle skyde meteorerne men ikke ramme de andre rumskibe.

Spillet hedder Cosmic Defender og du kan prøve det her.

Idé og Designprocess

For at få idéer til temaet for vores spil, gjorde vi brug af forskellige idé-generingsmetoder, så som cross-method og peer-to-peer. Efter vi havde valgt vores endelige idé, udarbejdede vi en papir-prototype på vores spil. Herefter gik jeg fra papir-prototypen til at begynde at tegne de enkelte spil-elementer i Illustrator. Jeg ville oprindeligt have lavet spillet i pixel-art, men gik bort fra dette da jeg ikke havde nok erfaring med det, og det derfor ville have taget for lang tid. Derfor endte jeg med at lave det i en ret simpel håndtegnet stil, for at holde mig inden for tidsrammen.

Programmering og test

Inden jeg begynde at programmere udarbejdede jeg et state-machine diagram, over de forskellige funktioner der skulle være i min Javascript-kode til spillet. Herefter satte jeg alle spil-elementer ind i HTML og CSS, efter et udleveret layoutdiagram. Da dette var gjort begyndte jeg at programmere de forskellige funktioner. Spillet blev lavet i forskellige versioner, som blev styret med git, og hvor der hele tiden blev lagt mere funktionalitet på. Den sidste tid brugte jeg på at finpudse og rette fejl i koden, samt at komponere baggrundsmusikken. Musikken blev lavet i bit-tune stil, for at give spillet er lidt retro feel. Slutteligt lavede jeg brugertest på spillet. Testen viste at de fleste godt kunne lide spillet, men mange syntes at det var lidt for svært, og derfor nedjusterede jeg sværhedsgraden, ved at justere lidt på de forskellige animations-timere.

Passionssite

T5: Passionssite

Grunlæggende Indhold

Vores femte tema, var delt op i to dele - et interview med en passioneret person med et tilhørende site, og en side vi skulle lave i samarbejde med en virksomhed. Til den første del - "Passionssite" - skulle vi arbejde sammen med én anden og at filme et interview med et passioneret menneske. Vi skulle dele det optagede billed- og videomateriale, men klippe interviewet og lave den tilhørende side hver for sig. Interviewet skulle vare 60 sekunder, og laves i stil med 1-minute wonders. Temaet var vores introduktion til videoproduktion, samt lottiefiles, som begge skulle bruges på vores site.

I min gruppe valgte vi at interviewe min gruppekammerat Victorias mor, der har en passion for mental træning. Vi forberedte interviewet ved at udarbejde et storyboard, og forbederede nogle spørgsmål.

Interviewet klippede jeg og color-correctede i Adobe Premiere Pro. Sidens design valgte jeg skulle være i en rolig og let håndtegnet stil, da jeg syntes at det passede godt med det interview vi havde lavet.

Du kan se selve interviewet her på siden, og mit Passionssite kan du besøge her.

HeyBOOB

T5: HeyBOOB

I anden del af tema fem, skulle vi i samarbejde med en virksomhed, give et bud på et redesign af deres hjemmeside. Vi skulle arbejde i grupper af fire til fem, og bruge Scrum til projektstyring, samt Github til at samarbejde om kode. Vi valgte at samarbejde med et start-up kaldet HeyBOOB, der arbejder på at udvikle en app der kan hjælpe kvinder med at diagnosticere brystkræft. Vi aflsluttede projektet med en "Pecha Kucha" præsentation af vores arbejde. Du kan besøge vores side her.

Scrum & Github

Til projektstyring brugte vi den agile metode Scrum. Vi oprettede et scrumboard i Trello, og brugte det til at holde styr på vores arbejdsopgaver. Vores scrumboard var opdelt i seks forskellige status-felter: Backlog, Design, To-do, Doing, Code-review og Done. Alle arbejdsopgaver startede i backlog, og bevægede sig herefter igennem de forskellige status-felter. Vi gjorde brug af code-review til alt kode, for at alle i teamet skulle have en forståelse for den kode der var lavet, samt for at den person der havde lavet koden skulle få en bedre forståelse for den, ved at forklare den for de andre på holdet. Hver morgen startede vi med et fem-minutters stand-up møde, hvor vi gennemgik hvad vi hver især arbejde på, og om der eventuelt var nogen blokeringer vi havde brug for hjælp til at overkomme.

Til versionneringskontrol og samarbejde om kode, brugte vi git og Github. Når en opgave blev rykket til doing, blev der oprettet en ny branch til den kode. Når koden kom til code-review blev der oprettet et pull-request. Efter koden havde passeret code-review, blev branchen merget med main. Herefter kunne resten af gruppen pulle ændringerne fra main.

Design

Til at kickstarte vores designprocess, lavede vi hver især et moodboard. Herefter lavede vi ét fælles moodboard. Ud fra dette moodboard lavede vi igen hver især et styletile. Herefter udvalgte vi de bedste idéer, og satte dem sammen til ét fælles styletile. Herefter udarbejde vi wireframes og layoutdiagrammer til siden.

Til vores design valgte vi at gå med et moderne, men blødt udtryk. Designet gør brug af bløde former og håndtegnede illustrationer, for at gøre oplevelsen indbydende på trods af det alvorlige emne. Vi gør også brug af stor hero tekst, samt tydelige CTAs for at få folk til at skrive sig op til appen, samt tydeliggøre sidens budskab.

Færdige Produkt

Den færdige side er kodet i HTML, CSS og Javascript. Den gør brug af SVG filer til at skabe de bølgende grænser mellem de forskellige sektioner på siden. På mobil har den en burger-menu, der kommer op som en bølge fra bunden. Dette er lavet igennem et javascript, der laver en SVG som er overlay på siden. På både mobil og dekstop er navbaren gjort så den forsvinder når man scroller ned på siden, og kommer frem igen når man scroller op. Dette er også gjort igennem Javascript. Forsiden indeholder også en lottiefile, der viser forskellige screenshots fra appen på en iPhone.

screenshot af det gamle website samt vores redesign

Portfolio

T6: Portfolio

Mit Portfolio

Denne side indeholder alle de projekter jeg har arbejdet på i mit første semester på Multimedie Designer uddannelsen på KEA. Siden er en del af mit eksamensprojekt, og er udarbejdet ud fra de teknikker jeg har tillært mig i løbet af semesteret. Hvis du scroller ned, kan du læse mere om hvordan jeg har fået idéen til sidens design, og hvordan jeg er gået fra idé til det færdige site.

Indledende research

Jeg havde længe gået med idéen om, at lave et site der lignede et operativsystem. Jeg syntes generelt at der er en tendens i meget moderne webdesign, til at mange sider ligner hinanden, og rent ud sagt er lidt kedelige. Der er også en tendens til centraliserign på internettet. Hvor der før var en bred vifte af forskellige internetfora, med meget forskellig kultur og brugerbase, er de fleste samtaler på internettet samlet på sider som Reddit og i Facebook grupper. For en der er vokset op omkring dot-com boomet omkring årtusindskiftet, er det en lidt trist udvikling at observere. Jeg syntes at programmering i al almindelighed, og webdesign i særdeleshed, er en kreativ aktivitet. Internettet bør ikke være kedeligt, men være et sted hvor man har lyst til at gå på opdagelse, og hvor en sides design inviterer en til at blive overrasket og nysgerrig på sidens indhold. Derfor syntes jeg det kunne være sjovt at lave et site, der ikke ligner de fleste hjemmesider, som de ser ud i dag.

Mit første skridt var at lave en meget hurtig kodet prototype (den kan du se i aktion til venstre), for at undersøge hvordan man kunne emulere oplevelsen af et styresystem igennem en hjemmeside. Jeg brugte cirka 20 minutter på at strikke prototypen sammen, og lave en funktionalitet hvor man kunne trække vinduerne rundt, som man kender det fra et skrivebord på en computer. Dette gav mig en god grundlæggende forståelse for hvordan sitet i praksis kunne opbygges, og gjorde design og implementeringsfasen væsentligt nemmere.

Projektstyring

For at kunne komme i mål med projektet, valgte jeg at bruge en form for scrum til styring af projektet. Dette gjorde jeg, da det var meget vigtigt for mig at kunne arbejde så agilt som muligt, så jeg ikke sad fast i fx designfasen, og til sidst ville have for kort tid til fx kodning af sitet.

Måden jeg gjorde det på, var at gøre hver dag til et form for mini sprint. Ved enden af hver dag, skulle der derfor være en form for MVP som resultat af dagens arbejde. Det vil sige at hver arbejdsopgave, både skulle igennem design, kodning og test på én dag. Dette stod imodsætning til at arbejde på en mere traditionel, "vandfalds"-inspireret arbejdsprocess, hvor jeg først ville have designet hele sitet, og derefter kodet det etc.

Denne arbejdsmetode medførte derfor at jeg valgte ikke at designe i hele wireframes, men derimod designe hvert komponent enkeltvist, når det var inkluderet i et sprint.

For at holde overblik over mit projekt, lavede jeg et scrumboard i Notion med fem kategorier: "Backlog", "Design", "To-do" og "Done". Til hver enkel arbejdsopgave lavede jeg også en estimering af arbejdsbyrden, hvortil jeg brugte t-shirt størrelser som måleenhed. Størrelserne gik fra S til XL, og hvis jeg vurderede en opgave til at være XL, kunne jeg se at det var værd at genoverveje om opgaven skulle splittes op til mindre enheder.

Design

Det var vigtigt for mig, at mit design ikke kun var funktionelt, med også afspejlede min egen personlighed. Derfor valgte jeg at designe i en retro stil, der skulle emulere følelsen af at bruge et Windows 95 desktop. Jeg valgte dette design, da windows 95 er indeholder meget nostalgi for mig, da det var det styresystem jeg brugte som barn.

Windows 95 indeholdt flere forskellige farvetemaer man kunne vælge imellem, men brugte som standard et lysegråt farvetema, med en klar, blå farve til toppen af vinduer. Designet gør stor brug af skygger og rammer, for give det hele en 3-dimensionel effekt. Klikbare elementer er tydeligt markede ved at "poppe op" fra baggrunden, mens indlejrede elementer så som billeder eller tekstbokse, ligner de er nedsunket i baggrunden. Aktive elementer, så som elementer i menulinjen der havde et aktivt vindue tilknyttet, fik et gråt, ternet overlay på dem, for at vise at det pågældende element var aktivt. Som systemfont brugte det Microsoft Sans Serif. Windows 95 brugte dog ikke font-anti-aliasing, hvilket gav den et pixeleret look.

For at indfange den visuelle æstetik af Windows 95, udarbejdede jeg et styletile. Farveskemaet valgte jeg ud fra farverne der bruges som standard i Windows 95. For at efterligne den pixelerede font-effekt, valgte jeg en font kaldet "Levi Windows". Jeg har dog kun brugt denne font til tekst som vindue- og menu-tekst, da det var ubehageligt at læse længere stykker brødtekst i den. I mit styletile valgte jeg oprindeligt at bruge at bruge IBM Plex Mono til overskrifter og Lucida Grande til brødtekst, men gik senere over til at bruge Times New Roman til begge, da det er en font der længe har været brugt på Windowssytemer. Ikonerne har jeg valgt at lave som pixelart, for at opnå et retro-look der minder om de pixelerede ikoner brugt i det oprindelige styresystem.

Det var dog ikke kun det visuelle udtryk jeg syntes var vigtigt at indfange. Det var også vigtigt for mig, at de forskellige elementer opførte sig som man ville forvente det hvis man brugte Windows 95. Derfor var det også en del af mit design, at sitet skulle indeholde funktionalitet så som et ur der viste tiden, flytbare vinduer, vinduer der kunne minimeres og en funktionel startmenu.

Implementering

Inden jeg påbegyndte Implementeringen af mit design, besluttede jeg, at jeg ville fokusere på at implementere den grundlæggende funktionalitet tidligt i forløbet. D.v.s. at de første sprints havde som mål at få implementeret globale elementer som menulinje, start-menu, vinduer, knapper til vinduer, ur etc. Dette gjorde jeg, da jeg vidste at det så ville gå væsentligt hurtigere senere i forløbet, da jeg blot kunne indsætte indhold - tekst, billeder m.m. i de allerede implementerede elementer.

For at versioneringsstyre mit projekt, har jeg brugt git og Github. Hvert sprint, der altså max varede én dag, har fået sin egen branch. Når jeg var færdig med mit sprint, oprettede jeg et pull-request og mergede min branch med main.

Når jeg har startet et sprint, har jeg startet i designfasen, med at designe den komponent der skulle implementeres. Efter at have designet komponenten, påbegyndte jeg programmering og kodning, til hvilket jeg har brugt min foretrukne text-editor NeoVim. Under hele processen, har jeg sørget for konstant at opdatere mit scrumboard i Notion, samt at lave timeblocking på de forskellige sprint i Notion Calendar.

Til at teste og debugge min kode har jeg brugt Chrome developer tools i Arc browser, samt brugt iOS Simulatoren fra Xcode til at teste det mobile layout.

Da de forskellige undersider skal vises i "vinduer"" på siden, er der kun én html side - index.html, der indeholder alt indhold.

Ikonerne er lavet i Asesprite, der er et program lavet til at lave pixelart i. Nogle fotos er blevet billedbehandlet i Photoshop, for at give dem dithering, der efterligner farvespektret på ældre computere.

screenshot af noget af mit javascript i Neovim

Det færdige site

Det færdige site gør brug af HTML, CSS og javascript til blandt andet at give følgende funktionalitet:

Flytbare vinduer
Vinder der kan minimeres til menulinjen
Vinduer der kan være i eller ude af fokus
Vinduer der kan lukkes
Åbning af vinduer ved dobbeltklik på ikon
Funktionel start-menu
Ur der viser den besøgendes tid
Funktionel menulinje, der viser åbne vinduer og hvilket der er i fokus
CRT filter der kan slås til/fra
Klik-lyd der ved start er slukket, men kan tændes
Custom cursor og scrollbar der efterligner Windows 95

Der er nogle få områder hvor det færdige design adskiller sig fra Windows 95. Der er blandt andet tilføjet en hover-effekt til knapper, så man kan se at de er trykbare hvis man holder markøren over dem.

Sitet er kodet mobile-først og gør brug af media-queries for at gøre det responsivt.

Sitet er udgivet under GPL-3.0 licens, hvilket gør det open-source og så alle må genbruge koden til deres egne projekter.