{"id":456,"date":"2019-10-11T16:32:23","date_gmt":"2019-10-11T14:32:23","guid":{"rendered":"http:\/\/maxfest.dk\/port\/?p=456"},"modified":"2019-11-24T16:59:03","modified_gmt":"2019-11-24T15:59:03","slug":"design-forslag-til-baagoe-info","status":"publish","type":"post","link":"https:\/\/maxfest.dk\/port\/vearker\/hjemmesider\/adobe-xd\/design-forslag-til-baagoe-info\/","title":{"rendered":"Design forslag til baagoe.info"},"content":{"rendered":"\n<p>Forslag til redesign for baagoe.info. Opgaven var projekt 1 i modul 1 p\u00e5 multimediedesigner uddannelsen, MMD. Projektet blev udf\u00f8rt efter\u00e5r 2019. Opgaven bestod af at give et forslag til redesign, evaluering af den eksisterende hjemmeside og rapportere resultater i en rapport og pr\u00e6sentation. I mit tilf\u00e6lde var hjemmesiden <a href=\"http:\/\/www.baagoe.info\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00e5bner i en ny fane)\">baagoe.info<\/a> <\/p>\n\n\n\n<p>Den fulde titel p\u00e5 opgaven var &#8220;Projekt 1: Evaluering og re-design af en hjemmeside&#8221;.<\/p>\n\n\n\n<p>I dette redesign og denne evaluering deltog:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li> Rasmus Gyde Andersen<\/li><li> Nick Varming<\/li><li> Max Festersen Hansen<\/li><li> Fiona Elvine Anine Sibeko<\/li><\/ul>\n\n\n\n<p>I vores opgavebesvarelse har vi udarbejdet en prototype i Adobe XD, og en klient-rapport i Adobe Indesign.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Design processen<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Forberedelse<\/h3>\n\n\n\n<p>Dagen grupperne blev sammensat, skrev vi en gruppekontrakt, hvor vi som gruppe beskrev regler og konsekvenser for ikke at overholde disse. Kontrakten blev underskrevet af alle gruppemedlemmer. Her bestemte vi ogs\u00e5 at gruppelederen skulle v\u00e6re Max Festersen Hansen.<\/p>\n\n\n\n<p>Inden vi startede p\u00e5 projektet, udarbejdede vi et Gantt skema, hvor vi planlagde arbejdsdage og tidsfrister. Vi opdaterede l\u00f8bende skemaet med vores status.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"916\" height=\"706\" src=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/gantt_projekt1_mmd_ucl_2019.png\" alt=\"Gantt skema for projekt 1 for multimediedesignerudannelsen p\u00e5 UCL i efter\u00e5ret 2019\" class=\"wp-image-457\" srcset=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/gantt_projekt1_mmd_ucl_2019.png 916w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/gantt_projekt1_mmd_ucl_2019-300x231.png 300w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/gantt_projekt1_mmd_ucl_2019-768x592.png 768w\" sizes=\"auto, (max-width: 916px) 100vw, 916px\" \/><figcaption>Gantt skema taget kort f\u00f8r punkt 4 i skemaet.<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Analyse<\/h3>\n\n\n\n<p>Som indgangsvinkel til projektet startede vi med at bes\u00f8ge hjemmesiden individuelt for at danne vores eget indtryk af hjemmesiden.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Usability analyse<\/h4>\n\n\n\n<p>Vi udf\u00f8rte 2 usability analyser for at unders\u00f8ge hjemmesidens brugervenlighed.<\/p>\n\n\n\n<p>Vi vurderede hjemmesiden p\u00e5 baggrund af NUG, Nobanet Usability Guidelines. Denne standard er udviklet p\u00e5 UCL for at vurdere brugervenligheden p\u00e5 hjemmesiden p\u00e5 en overskuelig m\u00e5de. Vi udf\u00f8rte testen individuelt, og sammensatte derefter vores indsigter, efter \u00e5ben diskussion.  <a href=\"https:\/\/docs.google.com\/document\/d\/1l3cbL7PBUzd8btyypGgfEnin8rqnyLoEbqt02d8Gl0o\/edit?usp=sharing\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00e5bner i en ny fane)\">NUG besvarelsen kan ses p\u00e5 google docs, via. dette link<\/a>.<\/p>\n\n\n\n<p>Yderligere definerede vi 113 regler p\u00e5 baggrund af Nielsens &amp; Tahirs bog <em>Homepage Usability<\/em>. Disse regler anvendte vi ogs\u00e5 for at definere brugervenligheden p\u00e5 baagoe.info.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Materiale fra undervisningen<\/h4>\n\n\n\n<p>Vi anvendte vores viden om <a href=\"http:\/\/maxfest.dk\/port\/typography-noter-fra-undervisning\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00e5bner i en ny fane)\">typografi<\/a> og <a href=\"http:\/\/maxfest.dk\/port\/html5-css3-noter-til-undervisning\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00e5bner i en ny fane)\">HTML5<\/a> fra undervisningen.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">M\u00e5lgruppeanalyse<\/h4>\n\n\n\n<p>For at definere m\u00e5lgrupper for baagoe.info, anvendte vi Minerva-modellen for at finde et passende segment baseret p\u00e5 overensstemmelser mellem interesser og v\u00e6rdier fra segmenterne og baagoe.info.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Fortolkning<\/h3>\n\n\n\n<p>Fra analysen fandt vi en lang r\u00e6kke af potentielle problemer p\u00e5 hjemmesiden og definerede m\u00e5lgrupper.<\/p>\n\n\n\n<p>Vi begr\u00e6nsede os til at fokusere p\u00e5 5 problemer.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Koden p\u00e5 hjemmesiden var for\u00e6ldet i forhold til HTML5 standarden.<\/li><li>Navigationen p\u00e5 hjemmesiden var diskursiv.<\/li><li>Indhold p\u00e5 hjemmesiden var i mange tilf\u00e6ld manglende eller mangelfuld i forhold til m\u00e5lgruppens interesser.<\/li><li>Typografien p\u00e5 hjemmesiden var i mange tilf\u00e6lde inkonsistent og overholder ikke de regler vi p\u00e5 MMD havde l\u00e6rt.<\/li><li>Hjemmesiden var ikke udviklet efter <a href=\"https:\/\/saylordotorg.github.io\/text_business-information-systems-design-an-app-for-that\/s07-01-c-r-a-p-principles-of-graphic-.html\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00e5bner i en ny fane)\">principperne for C.R.A.P.<\/a>.<\/li><\/ol>\n\n\n\n<p>M\u00e5lgruppen definerede vi som v\u00e6rende prim\u00e6rt i det rosa segment og sekund\u00e6rt i det violette.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Eksperimentering<\/h3>\n\n\n\n<p>Vi eksperimenterede med personaer, usability test og skitser.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Personaer<\/h4>\n\n\n\n<p>P\u00e5 baggrund af den definerede m\u00e5lgruppe, og m\u00e5lgruppeanalysen, udarbejdede vi 2 persona.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Grethe. 51 \u00e5r. Dansker. Gift. Mobilfris\u00f8r. Interesseret i historiske romaner og familie. Repr\u00e6senterer det rosa segment.<\/li><li>Hansi. 47 \u00e5r. Tysker. Gift. Automekaniker. Interesseret i fodbold, savv\u00e6rk og vandreture.  Repr\u00e6senterer det violette segment. <\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Usability test<\/h4>\n\n\n\n<p>Vi definerede scenarier p\u00e5 baggrund af personaerne. Hvert scenarie fik ogs\u00e5 defineret succeskriterier.<\/p>\n\n\n\n<p>Vi startede med at gennemf\u00f8re en pilottest, hvor vi skuespillede som en persona, for at bekr\u00e6fte at testen potentielt kunne virke i praksis. Vi rettede testen til p\u00e5 baggrund af resultaterne herfra.<\/p>\n\n\n\n<p>Vi \u00f8nskede at gennemf\u00f8re en test for den eksisterende side, og efterf\u00f8lgende prototypen i alle vigtige stadier. Vi n\u00e5ede dog kun at gennemf\u00f8re testen p\u00e5 den eksisterende side for en person der matchede Grethe personaen.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Skitsering (Sketching)<\/h4>\n\n\n\n<p>Vi tegnede skitser for alle sider vi \u00f8nskede at redesigne. Det endte med at d\u00e6kke alle eksisterende sider.<\/p>\n\n\n\n<p>Skitserne blev tegnet p\u00e5 et whiteboard.<\/p>\n\n\n\n<p>P\u00e5 baggrund af resultaterne fra usability test rettede vi skitserne til.<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-3 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"381\" src=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/forside.jpg\" alt=\"Skitse for forsiden p\u00e5 baagoe.info\" data-id=\"463\" data-full-url=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/forside.jpg\" data-link=\"https:\/\/maxfest.dk\/port\/vearker\/hjemmesider\/adobe-xd\/design-forslag-til-baagoe-info\/attachment\/forside\/\" class=\"wp-image-463\" srcset=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/forside.jpg 280w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/forside-220x300.jpg 220w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/havn-1024x768.jpg\" alt=\"Skitse for baagoe havne-siden p\u00e5 baagoe.info\" data-id=\"465\" data-full-url=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/havn.jpg\" data-link=\"https:\/\/maxfest.dk\/port\/vearker\/hjemmesider\/adobe-xd\/design-forslag-til-baagoe-info\/attachment\/havn\/\" class=\"wp-image-465\" srcset=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/havn-1024x768.jpg 1024w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/havn-300x225.jpg 300w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/havn-768x576.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/sommerhus-single-1024x768.jpg\" alt=\"Skitse for sommerhus sider p\u00e5 baagoe.info\" data-id=\"469\" data-full-url=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/sommerhus-single.jpg\" data-link=\"https:\/\/maxfest.dk\/port\/vearker\/hjemmesider\/adobe-xd\/design-forslag-til-baagoe-info\/attachment\/sommerhus-single\/\" class=\"wp-image-469\" srcset=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/sommerhus-single-1024x768.jpg 1024w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/sommerhus-single-300x225.jpg 300w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/sommerhus-single-768x576.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><\/ul><figcaption class=\"blocks-gallery-caption\">Eksempler p\u00e5 skitser der blev anvendt.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Udvikling<\/h3>\n\n\n\n<p>Eksperimenteringen gav os indsigterne vi endte med at bruge som baggrund for redesignet. Herefter blev designet udviklet.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Redesign<\/h4>\n\n\n\n<p>Link til redesign: <a href=\"https:\/\/tinyurl.com\/y4ze5l7x\"><\/a><a href=\"https:\/\/tinyurl.com\/y4ze5l7x\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00e5bner i en ny fane)\">https:\/\/tinyurl.com\/y4ze5l7x<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/tinyurl.com\/y4ze5l7x\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"573\" src=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/forside_new-1024x573.png\" alt=\"Design forslag til en ny forside p\u00e5 baagoe.info.\" class=\"wp-image-459\" srcset=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/forside_new-1024x573.png 1024w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/forside_new-300x168.png 300w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/forside_new-768x430.png 768w, https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/forside_new.png 1685w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Design forslag til en ny forside p\u00e5 baagoe.info.<\/figcaption><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Rapport<\/h4>\n\n\n\n<p><a href=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/Klient-rapportV5.pdf\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u00e5bner i en ny fane)\" download=\"\">Download rapport<\/a>.<\/p>\n\n\n\n<p>Rapporten er udviklet i Adobe Indesign. Se den herunder:<\/p>\n\n\n<div class=\"wp-block-pdfemb-pdf-embedder-viewer\"><a href=\"https:\/\/maxfest.dk\/port\/wp-content\/uploads\/2019\/10\/Klient-rapportV5.pdf\" class=\"pdfemb-viewer\" style=\"\" data-width=\"max\" data-height=\"max\" data-toolbar=\"top\" data-toolbar-fixed=\"on\">Klient-rapportV5<\/a><\/div>\n<p class=\"wp-block-pdfemb-pdf-embedder-viewer\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Forslag til redesign for baagoe.info. Opgaven var projekt 1 i modul 1 p\u00e5 multimediedesigner uddannelsen, MMD. Projektet blev udf\u00f8rt efter\u00e5r 2019. Opgaven bestod af at give et forslag til redesign, evaluering af den eksisterende hjemmeside og rapportere resultater i en rapport og pr\u00e6sentation. I mit tilf\u00e6lde var hjemmesiden baagoe.info Den fulde titel p\u00e5 opgaven var&#8230;<\/p>\n","protected":false},"author":3,"featured_media":459,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[18,24],"class_list":["post-456","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adobe-xd","tag-mmd","tag-mmd-projekt"],"_links":{"self":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts\/456","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/comments?post=456"}],"version-history":[{"count":10,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts\/456\/revisions"}],"predecessor-version":[{"id":962,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts\/456\/revisions\/962"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/media\/459"}],"wp:attachment":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/media?parent=456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/categories?post=456"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/tags?post=456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}