{"id":552,"date":"2025-10-23T08:45:19","date_gmt":"2025-10-23T07:45:19","guid":{"rendered":"https:\/\/proces.mogensen-design.dk\/?page_id=552"},"modified":"2026-01-17T10:26:01","modified_gmt":"2026-01-17T10:26:01","slug":"projekt-3","status":"publish","type":"page","link":"https:\/\/proces.mogensen-design.dk\/?page_id=552","title":{"rendered":"Projekt 3"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">Opgavebeskrivelse<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00f8rste semester eksamen p\u00e5 Multimediedesigneruddannelsen er en mundtlig individuel eksamen, der tager udgangspunkt i den studerendes egen udarbejdede procesportfolio, pr\u00e6sentationsportfolio og plakat.<br>Procesportfolio &#8211; en blog\/hjemmeside udarbejdet i starten af semesteret, der samler alt hvad den studerende har lavet af multimedieproduktioner, projekter, prototyper og procesdokumenter i l\u00f8bet af semesteret, og er delt op i f\u00f8lgende:<br><br>\u25cf Opgavebesvarelser \/ dokumentation af eget arbejde.<br>\u25cf Som fast bestanddel vedl\u00e6gges individuel kritisk refleksion over opgavebesvarelser.<br><br>Pr\u00e6sentationsportfolio &#8211; et website kodet fra bunden, der har til form\u00e5l at brande den studerende m\u00e5lrettet arbejdsmarkedet. Denne portfolio udarbejdes i forbindelse med eksamensprojektet.<br><br>Plakat \u2013 en plakat der viser proces bag udviklingen af pr\u00e6sentationsportfolio.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Proces<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Jeg startede med et koncept, hvor jeg ville pr\u00e6sentere mig selv som multimediedesigner, der arbejder bredt med grafik og design for kreative virksomheder.<br>Jeg lavede en farvepalette og begyndte p\u00e5 mine f\u00f8rste wireframes i Figma.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"771\" height=\"297\" src=\"https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/Skaermbillede-2026-01-04-155217.png\" alt=\"\" class=\"wp-image-758\" style=\"aspect-ratio:2.5960429200520996;width:654px;height:auto\" srcset=\"https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/Skaermbillede-2026-01-04-155217.png 771w, https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/Skaermbillede-2026-01-04-155217-300x116.png 300w, https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/Skaermbillede-2026-01-04-155217-768x296.png 768w\" sizes=\"auto, (max-width: 771px) 100vw, 771px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Efter jeg fik feedback fra min studiegruppe og underviser, blev det tydeligt, at mit koncept var for bredt.<br>Derfor valgte jeg at researche m\u00e5lgrupper og justere mit koncept til <strong>kreative, kvindelige iv\u00e6rks\u00e6ttere<\/strong>.<br>Jeg \u00e6ndrede farvepaletten og begyndte forfra med en ny visuel retning og opdaterede wireframes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Jeg byggede en ny prototype i Figma baseret p\u00e5 det opdaterede koncept og layout.<br>Her arbejdede jeg med designprincipper som kontrast og n\u00e6rhed, og jeg begyndte at t\u00e6nke i komponenter (knapper, sektioner).<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"491\" height=\"623\" src=\"https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/Skaermbillede-2026-01-04-160541-1.png\" alt=\"\" class=\"wp-image-759\" style=\"aspect-ratio:0.7881434810625044;width:312px;height:auto\" srcset=\"https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/Skaermbillede-2026-01-04-160541-1.png 491w, https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/Skaermbillede-2026-01-04-160541-1-236x300.png 236w\" sizes=\"auto, (max-width: 491px) 100vw, 491px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"544\" height=\"218\" src=\"https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/Skaermbillede-2026-01-04-160508.png\" alt=\"\" class=\"wp-image-760\" srcset=\"https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/Skaermbillede-2026-01-04-160508.png 544w, https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/Skaermbillede-2026-01-04-160508-300x120.png 300w\" sizes=\"auto, (max-width: 544px) 100vw, 544px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:48px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Jeg kodede siden op i HTML og CSS, og fik f\u00f8rst senere styr p\u00e5 BEM-metoden.<br>Jeg \u00e6ndrede derfor mange af mine klassenavne undervejs, s\u00e5 strukturen blev mere overskuelig og genanvendelig.<br>Jeg arbejdede ogs\u00e5 med media queries for at sikre responsivt design.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"712\" height=\"680\" src=\"https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/Skaermbillede-2025-12-16-234152.png\" alt=\"\" class=\"wp-image-762\" style=\"aspect-ratio:1.0471038395566696;width:417px;height:auto\" srcset=\"https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/Skaermbillede-2025-12-16-234152.png 712w, https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/Skaermbillede-2025-12-16-234152-300x287.png 300w\" sizes=\"auto, (max-width: 712px) 100vw, 712px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Jeg lavede en brugertest, hvor jeg fik konkret feedback om, at der var for meget whitespace, og at mit digitale kunstprojekt fangede mest.<br>Brugeren n\u00e6vnte ogs\u00e5, at &#8220;om mig&#8221; kunne v\u00e6re mere overskuelig, og at ikoner p\u00e5 forsiden lignede knapper.<br>Jeg justerede derefter layout, flyttede sektioner og forbedrede l\u00e6sbarhed og galleri-funktion.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"699\" height=\"772\" src=\"https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/Skaermbillede-2026-01-07-123321.png\" alt=\"\" class=\"wp-image-763\" srcset=\"https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/Skaermbillede-2026-01-07-123321.png 699w, https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/Skaermbillede-2026-01-07-123321-272x300.png 272w\" sizes=\"auto, (max-width: 699px) 100vw, 699px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"589\" height=\"641\" src=\"https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/Skaermbillede-2026-01-07-123956.png\" alt=\"\" class=\"wp-image-764\" srcset=\"https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/Skaermbillede-2026-01-07-123956.png 589w, https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/Skaermbillede-2026-01-07-123956-276x300.png 276w\" sizes=\"auto, (max-width: 589px) 100vw, 589px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:59px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Jeg har gennem processen l\u00e6rt, at det ikke handler om at lave det rigtige fra starten, men om at lytte, analysere og forbedre.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Metoder og teori<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Jeg har arbejdet ud fra Design Thinking som overordnet metode, hvor jeg har gennemg\u00e5et en iterativ proces med id\u00e9udvikling, prototype, test og forbedringer. I den tidlige fase brugte jeg moodboard og farvepalette til at definere den visuelle retning og finde inspiration, som afspejlede mit koncept og m\u00e5lgruppe.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Herefter lavede jeg wireframes, som hjalp mig med at strukturere layout og hierarki p\u00e5 siden, inden jeg gik videre til at bygge en interaktiv prototype i Figma. Prototypen brugte jeg til at afpr\u00f8ve designvalg og modtage feedback, b\u00e5de via Silent Feedback fra undervisningen og en brugertest med en ekstern person.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Feedbacken f\u00f8rte til flere \u00e6ndringer, bl.a. justering af whitespace, placering af sektioner og optimering af tekstindhold og billeder. Denne del af processen viser tydeligt Design Thinking i praksis, hvor l\u00f8sningen forbedres i takt med ny viden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I det visuelle arbejde har jeg aktivt brugt C.R.A.P.-teorien \u2013 is\u00e6r kontrast og n\u00e6rhed \u2013 til at skabe en klar struktur, bedre l\u00e6sbarhed og konsistens p\u00e5 tv\u00e6rs af sektioner. Jeg har ogs\u00e5 arbejdet med alignment i mit layout og gentagelser i knapdesign og farvevalg.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Under kodningen har jeg fokuseret p\u00e5 struktur og overskuelighed. Jeg begyndte uden BEM, men valgte undervejs at \u00e6ndre min tilgang og implementere BEM-metoden for at navngive mine CSS-klasser mere logisk og skalerbart. Det har gjort min kode nemmere at arbejde med, og det er en tilgang, jeg vil forts\u00e6tte med fremadrettet.<\/p>\n\n\n\n<div style=\"height:57px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Refleksion<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Projektet har ikke v\u00e6ret helt line\u00e6rt, da jeg blev sygemeldt og har arbejdet lidt til og fra. Det har gjort processen mere udfordrende, men ogs\u00e5 mere l\u00e6rerig. Jeg har skullet samle tr\u00e5dene op selvst\u00e6ndigt og tage ansvar for b\u00e5de design og struktur i mit arbejde.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Brugertest var en vigtig \u00f8jen\u00e5bner, og det har l\u00e6rt mig at lytte til brugeroplevelse og tage imod kritik konstruktivt. Jeg blev fx opm\u00e6rksom p\u00e5 at mit oprindelige layout ikke formidlede mit indhold godt nok \u2013 og det motiverede mig til at justere og forbedre mit design.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Jeg har ogs\u00e5 indset vigtigheden af at have et klart koncept og en tydelig m\u00e5lgruppe. Derfor valgte jeg at indsn\u00e6vre mit fokus undervejs, s\u00e5 min portfolio nu henvender sig specifikt til kreative, kvindelige iv\u00e6rks\u00e6ttere.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Endelig har jeg l\u00e6rt, at struktur i koden \u2013 is\u00e6r gennem BEM \u2013 er lige s\u00e5 vigtig som det visuelle. Det hj\u00e6lper b\u00e5de nu og i fremtidige projekter. Det har v\u00e6ret vigtigt for mig at opdage, at jeg l\u00e6rer bedst ved at sidde med det og pr\u00f8ve det selv. Jeg har ikke altid kunne forst\u00e5 kodning gennem teori alene \u2013 men ved at eksperimentere og l\u00f8se konkrete opgaver, er min forst\u00e5else vokset.<br>Jeg f\u00f8ler stadig, at der er dele af kodning, som er sv\u00e6re for mig, og det kr\u00e6ver tid og ro at s\u00e6tte sig ind i. Men jeg har f\u00e5et mere mod p\u00e5 det, og f\u00f8ler, at jeg nu har et bedre fundament at bygge videre p\u00e5 i kommende projekter.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Alt i alt har jeg l\u00e6rt meget om designproces, kodning, brugerfokus og mig selv som skabende person. Jeg er stolt af at have gennemf\u00f8rt projektet trods udfordringer og f\u00f8ler mig bedre rustet til n\u00e6ste semester.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Opgavebeskrivelse F\u00f8rste semester eksamen p\u00e5 Multimediedesigneruddannelsen er en mundtlig individuel eksamen, der tager udgangspunkt i den studerendes egen udarbejdede procesportfolio, pr\u00e6sentationsportfolio og plakat.Procesportfolio &#8211; en blog\/hjemmeside udarbejdet i starten af semesteret, der samler alt hvad den studerende har lavet af multimedieproduktioner, projekter, prototyper og procesdokumenter i l\u00f8bet af semesteret, og er delt op i f\u00f8lgende:&hellip;&nbsp;<a href=\"https:\/\/proces.mogensen-design.dk\/?page_id=552\" rel=\"bookmark\"><span class=\"screen-reader-text\">Projekt 3<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"class_list":["post-552","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=\/wp\/v2\/pages\/552","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=552"}],"version-history":[{"count":3,"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=\/wp\/v2\/pages\/552\/revisions"}],"predecessor-version":[{"id":767,"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=\/wp\/v2\/pages\/552\/revisions\/767"}],"wp:attachment":[{"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}