{"id":284,"date":"2026-05-28T08:16:39","date_gmt":"2026-05-28T08:16:39","guid":{"rendered":"https:\/\/proces.carlemilfaester.dk\/?page_id=284"},"modified":"2026-05-28T10:20:19","modified_gmt":"2026-05-28T10:20:19","slug":"design-challenge-workshop","status":"publish","type":"page","link":"https:\/\/proces.carlemilfaester.dk\/?page_id=284","title":{"rendered":"Design Challenge Workshop"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\"><strong>Valg af case<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">I denne workshop fik vi til opgave at designe en hjemmeside i figma ud fra en r\u00e6kke specifikke brancher, servicevirksomheder, hobby butik, h\u00e5ndv\u00e6rker eller offentlig institution. Der var ogs\u00e5 nogle specifikke krav til hvordan vi skulle designe det, vi skulle bruge grid, lave det til b\u00e5de mobil og desktop format. Og s\u00e5 skulle vi s\u00f8rge for at den levede op til punkterne &#8220;Appearance&#8221;, \u201cColor contrast\u201d, \u201cMobile and touch\u201d og \u201cAnimation\u201d.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Jeg valgte at fokusere p\u00e5 en h\u00e5ndv\u00e6rker-hjemmeside og lave et re-design af en d\u00e5rlig hjemmeside jeg kunne finde p\u00e5 internettet, da vi fik at vide at vi godt m\u00e5tte g\u00f8re det. For at finde en klient, som ville v\u00e6re nem at hj\u00e6lpe, bladrede jeg flere sider frem i Googles s\u00f8geresultater. Jeg endte med at finde en hjemmeside, der bedst kan beskrives som et klikbart PNG-billede. Det hele var meget sv\u00e6rt at l\u00e6se p\u00e5 grund af d\u00e5rlig kvalitet, og p\u00e5 mobilen s\u00e5 den hjemmeside ud p\u00e5 pr\u00e6cis samme m\u00e5de, s\u00e5 der var alt endnu mindre klart. Alt i alt var det en virkelig ringe hjemmeside, s\u00e5 jeg t\u00e6nkte at den ville v\u00e6re nem at pifte lidt op.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Herunder er mit re-design af forsiden p\u00e5 desktop og s\u00e5 til h\u00f8jre kan man se den originale side, som den b\u00e5de s\u00e5 ud p\u00e5 desktop og p\u00e5 mobil<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"666\" data-id=\"291\" src=\"https:\/\/proces.carlemilfaester.dk\/wp-content\/uploads\/2026\/05\/MacBook-Air-1-1024x666.png\" alt=\"\" class=\"wp-image-291\" srcset=\"https:\/\/proces.carlemilfaester.dk\/wp-content\/uploads\/2026\/05\/MacBook-Air-1-1024x666.png 1024w, https:\/\/proces.carlemilfaester.dk\/wp-content\/uploads\/2026\/05\/MacBook-Air-1-300x195.png 300w, https:\/\/proces.carlemilfaester.dk\/wp-content\/uploads\/2026\/05\/MacBook-Air-1-768x499.png 768w, https:\/\/proces.carlemilfaester.dk\/wp-content\/uploads\/2026\/05\/MacBook-Air-1.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"757\" height=\"633\" data-id=\"290\" src=\"https:\/\/proces.carlemilfaester.dk\/wp-content\/uploads\/2026\/05\/Skaermbillede-2026-02-23-kl.-09.09.19-1.png\" alt=\"\" class=\"wp-image-290\" srcset=\"https:\/\/proces.carlemilfaester.dk\/wp-content\/uploads\/2026\/05\/Skaermbillede-2026-02-23-kl.-09.09.19-1.png 757w, https:\/\/proces.carlemilfaester.dk\/wp-content\/uploads\/2026\/05\/Skaermbillede-2026-02-23-kl.-09.09.19-1-300x251.png 300w\" sizes=\"auto, (max-width: 757px) 100vw, 757px\" \/><\/figure>\n<\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Designet<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Fordi mobiludgaven var den v\u00e6rste, valgte jeg at arbejde med den f\u00f8rst ud fra en mobile-first tilgang, som vi ogs\u00e5 har l\u00e6rt at man skal i undervisningen. Jeg brugte tiden p\u00e5 at rydde op i layoutet, ved at lave mere plads mellem de forskellige sektioner,&nbsp; forbedre l\u00e6sbarheden ved at \u00e6ndre skrifttypen samt dens st\u00f8rrelse og skabe en mere moderne og overskuelig struktur, s\u00e5 brugerne rent faktisk kunne navigere rundt og finde informationerne uden at skulle zoome ind og ud konstant. Jeg n\u00e5ede ogs\u00e5 at lave det hele klikbart og lave en forside til desktopversionen.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"412\" height=\"917\" data-id=\"293\" src=\"https:\/\/proces.carlemilfaester.dk\/wp-content\/uploads\/2026\/05\/Android-Compact-1.png\" alt=\"\" class=\"wp-image-293\" srcset=\"https:\/\/proces.carlemilfaester.dk\/wp-content\/uploads\/2026\/05\/Android-Compact-1.png 412w, https:\/\/proces.carlemilfaester.dk\/wp-content\/uploads\/2026\/05\/Android-Compact-1-135x300.png 135w\" sizes=\"auto, (max-width: 412px) 100vw, 412px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"412\" height=\"917\" data-id=\"294\" src=\"https:\/\/proces.carlemilfaester.dk\/wp-content\/uploads\/2026\/05\/Android-Compact-3.png\" alt=\"\" class=\"wp-image-294\" srcset=\"https:\/\/proces.carlemilfaester.dk\/wp-content\/uploads\/2026\/05\/Android-Compact-3.png 412w, https:\/\/proces.carlemilfaester.dk\/wp-content\/uploads\/2026\/05\/Android-Compact-3-135x300.png 135w\" sizes=\"auto, (max-width: 412px) 100vw, 412px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"412\" height=\"917\" data-id=\"295\" src=\"https:\/\/proces.carlemilfaester.dk\/wp-content\/uploads\/2026\/05\/Android-Compact-4.png\" alt=\"\" class=\"wp-image-295\" srcset=\"https:\/\/proces.carlemilfaester.dk\/wp-content\/uploads\/2026\/05\/Android-Compact-4.png 412w, https:\/\/proces.carlemilfaester.dk\/wp-content\/uploads\/2026\/05\/Android-Compact-4-135x300.png 135w\" sizes=\"auto, (max-width: 412px) 100vw, 412px\" \/><\/figure>\n<\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Freml\u00e6ggelse<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Da tiden til at lave vores hjemmesider var g\u00e5et, blev vi inddelt i mindre grupper, hvor vi skulle pr\u00e6sentere vores designs for hinanden. Efter vi havde gennemg\u00e5et vores design internt, var opgaven at v\u00e6lge \u00e9n person fra gruppen, som skulle freml\u00e6gge sit redesign for resten af klassen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Min gruppe valgte mig, s\u00e5 jeg endte med at stille mig op og pitche mit resultat for hele holdet. Pr\u00e6sentationen gik rigtig godt, og jeg fik en masse positiv og meget brugbar feedback p\u00e5 mit redesign og de designvalg, jeg havde truffet undervejs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Min klikbare prototype kan ses <a href=\"https:\/\/www.figma.com\/proto\/NnlPX6qyGVID1u9YO9SRQT\/Re-design-odense-h%C3%A5ndv%C3%A6rker?node-id=21-262&amp;p=f&amp;viewport=907%2C304%2C0.28&amp;t=jTdoGr2anIh7J09a-1&amp;scaling=scale-down&amp;content-scaling=fixed&amp;starting-point-node-id=10%3A192&amp;page-id=10%3A191\">her.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Refleksion<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Jeg synes at det var et meget sjovt projekt, og det har virkelige \u00e5bnet mine \u00f8jne for figma som et program. Jeg synes det er meget sjovt at lave forskellige designs i Figma, \u00e6ndre p\u00e5 farver og finde ud af hvad der ser godt ud og fungere med hinanden. Jeg synes dog godt at vi m\u00e5ske kunne have f\u00e5et lidt mere introduktion til nogle af tingene man kan i Figma, jeg ved godt at det er meningen at vi skal finde ud af det selv, men det ville v\u00e6re rart hvis vi havde f\u00e5et et hurtigt kursus i nogle af de ting man kan i programmet, eller m\u00e5ske endda bare havde f\u00e5et et link til nogle videoer som l\u00e6rte en lidt om hvad man kan.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00e5 synes jeg ogs\u00e5 at det var ret fedt at f\u00e5 feedback efter jeg havde pr\u00e6senteret, hvis det ikke var for den feedback havde jeg nok ikke t\u00e6nkt over at man skal have de der sm\u00e5 prikker under en karrussel s\u00e5 brugeren ved hvor mange billeder der er og kan bruge det til at navigere. Selvom jeg ikke var helt begejstret til at starte med at skulle freml\u00e6gge synes jeg det i sidste ende var virkelig brugbart.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Valg af case I denne workshop fik vi til opgave at designe en hjemmeside i figma ud fra en r\u00e6kke specifikke brancher, servicevirksomheder, hobby butik, h\u00e5ndv\u00e6rker eller offentlig institution. Der var ogs\u00e5 nogle specifikke krav til hvordan vi skulle designe det, vi skulle bruge grid, lave det til b\u00e5de mobil og desktop format. Og s\u00e5 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-284","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/proces.carlemilfaester.dk\/index.php?rest_route=\/wp\/v2\/pages\/284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/proces.carlemilfaester.dk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/proces.carlemilfaester.dk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/proces.carlemilfaester.dk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/proces.carlemilfaester.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=284"}],"version-history":[{"count":7,"href":"https:\/\/proces.carlemilfaester.dk\/index.php?rest_route=\/wp\/v2\/pages\/284\/revisions"}],"predecessor-version":[{"id":301,"href":"https:\/\/proces.carlemilfaester.dk\/index.php?rest_route=\/wp\/v2\/pages\/284\/revisions\/301"}],"wp:attachment":[{"href":"https:\/\/proces.carlemilfaester.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}