Portfolio. Afsluttende projekt 1. semester. dec jan Simone Strecker Carstensen. MulA

Transkript

1 Portfolio Afsluttende projekt 1. semester dec jan Simone Strecker Carstensen MulA

2 Contents Moodboard... 3 Projektplanlægning... 4 PBS og WBS... 4 Dokumentation af udviklingsproces... 5 Wireframe og informationsarkitektur... 5 Brugertest... 6 Designproces... 8 Tema og stemning... 8 Layout... 8 Designprincipper... 9 Billedbehandling Gestaltregler Remake af tidligere projekter Game Design Infographics Website Design Egen evaluering Bilag Bilag 1 PBS (Product Breakdown Structure) Bilag 2 WBS (Work Breakdown Structure) Bilag 3 - Brugertest

3 Moodboard Nederst på denne side ses en collage af billeder, også kaldet moodboard, som er det værktøj, jeg gjorde brug af i den indledende fase, til visuelt at skabe et overblik over mine idéer for dette projekt. Man plejer at sige, at et billede siger mere end 1000 ord, og billederne som jeg har udvalgt her, er en visuel fortælling om, i hvilken retning jeg har tænkt at tage projektet i forhold til stil, stemning, farver, former, symbolik osv. Efterfølgende har jeg kunne konstatere, at dette værktøj har været meget behjælpeligt af flere grunde: 1. Det har bl.a. fungeret som inspirationskilde, når jeg på tidspunkter gik i stå. 2. Det har været tidsbesparende, idet jeg forinden havde truffet vigtige beslutninger omkring farvevalg, stemning osv. 3. Selvom moodboards ikke er en samling af fastlåste idéer, lagde det i dette tilfælde en klart retningslinje for arbejdet. Dog havde jeg allerede forinden gjort min en del tanker omkring projektet og vidste derfor nogenlunde, hvad jeg skulle vælge at have med i mit moodboard, og hvad jeg skulle undlade. 3

4 Projektplanlægning PBS og WBS Som en del af min projektplanlægning, har jeg arbejdet med følgende metoder inden for projektledelse; PBS (Product Breakdown Structure) og WBS (Work Breakdown Structure). Formålet med anvendelse af disse metoder er, at kunne strukturere, dokumentere, formidle og annalysere målet og resultaterne af et projekt. Hvor PBS sen illustrerer projektets målsætning, viser WBS sen i stedet en arbejdsnedbrydningsstruktur, der udover at organisere arbejdet, samtidig viser en plan for, hvordan jeg har tænkt mig, at nå frem til denne målsætning. Grundet pladsmangel, har jeg været nødt til at opdele modellerne og vedlægge dem som bilag, da de er umulige at læse på anden vis. For at se resultaterne af disse, må jeg derfor henvise til bilag 1 og bilag 2. Den af modellerne, som er mest interessant at se nærmere på, er WBS sen, da den er udarbejdet af flere omgange, dels ved projektets begyndelse og dels under projektets tilblivelse. Hvis vi kigger ned gennem dens hierarkisk træstruktur, kan man nogle steder læse to tal. De sorte tal stammer fra selve planlægning, mens de røde tal indikerer de steder, hvor planen ikke stemte overens med første vurdering af de tidsmæssige forhold. Man kan ud fra de første tidsberegningerne vurdere, at jeg samlet ville komme til at bruge 90 timer på, at udarbejde et færdigt projekt. Dividerer man antallet af timer med, hvad der svarer til arbejdsdage af 8 timer, skulle projektet ifølge denne WBS kunne færdiggøres på kun 11,25 dage. Anderledes ser det ud, når vi regner på de røde tal, der viser at projektet tog lidt længere tid end beregnet, nemlig 115,5 timer. Igen hvis man dividerer det nye tal med 8, får vi et resultat på 14,5 oprundet. Det vil altså sige 14,5 arbejdsdage, forudsat at jeg altså arbejdede 8 timer dagligt uden pauser, hvilket svarer til tre ugers fuldtidsarbejde inkl. weekender. 4

5 Dokumentation af udviklingsproces Wireframe og informationsarkitektur Som websitet allerede har afsløret, har jeg valgt at designe mit website på en og samme side. Tegningen herunder er en grov skitse af en wireframe, udarbejdet i Illustrator, der viser mine overordnede tanker omkring struktur og informationsarkitektur. Det vigtigste i forhold til udarbejdelsen af denne wireframe, var at skabe en velovervejede arkitektur, som var forholdsvis enkel i sin opbygning, således at man hurtigt skulle kunne skabe sig et overblik og nemt kunne navigere sig rundt på sitet. Baggrunden for strukturen bygger på en tanke om effektiv kommunikering, logik, og på hvordan størstedelen af brugerne ville forvente informationer blive præsenteret i forhold til rækkefølgen osv. Forsiden kommer logisk nok først og indbefatter en menulinje øverst, der giver brugeren overblik over websitets indhold og muligheder. Endvidere præsenteres her vigtige informationer som navn og uddannelse, så brugeren med det samme er klar over, hvor han/hun befinder sig. Dernæst vil det være naturligt med en profil, der kort, men lidt mere uddybende forklarer, hvem jeg er som person samt min uddannelsesbaggrund. Herefter vil brugeren højst sandsynligt være interesseret i, at se eksempler på mit arbejde, altså min portfolio. Ønsker man da et samlet overblik over mine nuværende færdigheder, følger et afsnit om kompetencer, hvor man billedeligt kan skabe sig et hurtigt overblik over disse. Er brugeren yderligere interesseret og sulten efter en dybere beskrivelse af udviklingsprocessen, kan dette læses under næste del om læring. Sidst men ikke mindst følger mine kontaktinformationer, der er placeret i bunden af websitet, da det er almindeligt kendt, at disse informationer findes her, hvilket er en teori, som flere undersøgelser understøtter. Udarbejdelsen af en wireframe i det begyndende stadie, skabte et godt grundlag for et senere udviklingsarbejde. 5

6 Brugertest Efter at have bygget en klikbar prototype af websitet, valgte jeg at foretage en brugertest, der skulle give indsigt i om designet fungerede optimalt om det var intuitivt og nemt at anvende, eller om der var steder, der krævede optimering. Min ambitionen var fra start, at skabe et succesfuldt websitet, hvor målgruppen nemt og uden problemer kan finde de informationer, de ønsker. Til forberedelsen af testen, havde jeg forinden klarlagt hvilke 3 features, som jeg mente var vigtigst at teste. Disse er valgt på baggrund af hensigten om, at bruge portfoliet som redskab til at søge praktikplads, når dette engang bliver aktuelt. Set ud fra dette, mener jeg, at følgende 3 elementer udgør websitets kerneområder: 1. Portfolio-delen 2. Kompetencer 3. Kontakt FORMULERING AF TESTOPGAVER: Senarie 1: Du skal forestille dig, at du er CEO i et web bureau, og I står nu og mangler en grafisk designer. Du har derfor udvalgt nogle portfolier, som du ønsker, at se nærmere på. En af de udvalgte tilhører Simone Carstensen. Din opgave er nu, at finde frem til hendes seneste projekt. Senarie 2: Efter at have gennemgået forskellige opgaver i Simones portfolio, vil du nu gerne have et overblik over hendes kompetencer herunder særligt hendes HTML-kompetencer. Find ud af, hvor på websitet, dette kan aflæses. Senarie 3: Du har vurderet, at Simone er den grafiske designer, som du ønsker at ansætte i dit web bureau, og du vil derfor gerne i kontakt med hende hurtigst muligt. Find Simones kontakt oplysninger. 6

7 UDVÆLGELSESKRITERIER FOR TESTDELTAGERE: Udvælgelseskriterierne er defineret ud fra en forestilling om, hvem der kunne have interesse i, at gennemse mit portfolio ude i den virkelige verden. Kriterier: - Mand - Leder / chef - Vant it-bruger - Behov for direkte eller nemt tilgængelig information og resultater - Kan komme med konstruktivt kritik UDVALGTE DELTAGERE: 1. Johan Nilaus Nielsen, uddannet programmør og har en BA i webudvikling, partner i Danish Aviation Systems. 2. Steven Friberg, CEO hos Danish Aviation Systems. TESTEN: Ud fra reglen om, at man tester indtil der ikke længere kommer ny viden, var det min vurdering, at to testdeltager var nok set ud fra projektets omfang. Tid afsat til selve testen var 20 min pr. deltager foruden introduktion og 10 min til opsamling og afslutning. Jeg selv fungerede som både testleder og observatør. Testen foregik i et tomt kontor, uden forstyrrende elementer og blev udført på testlederens egen computer. Testdeltagerne sad placeret ved skrivebordet, en ad gangen, med computeren foran sig og testleder/observatør sad tilbagetrukket til højre for testdeltageren, og kunne følge med uden at forstyrre. (For at se opgaveskabelonerne brugt til udførelse af testen, henvises her til bilag 3). TESTRESULTAT: Begge lavede ingen fejl, stødte på problemer undervejs og gennemførte testen inde for tidsrammen. De fandt den information, de skulle finde frem til uden omveje og uden tænkepauser. Eneste kommentar, der blev påpeget, var til portfolio-delen, hvor ens navngivning af to mapper kunne skabe en smule forvirring. Påpegelsen er senere rettet. 7

8 Designproces Et godt design er et design, der ikke flytter fokus fra websitets indhold og funktioner altså må designet ikke ligge foran det, som websitet skal kommunikere. På de efterfølgende sider vil jeg komme nærmere ind på designprocessen fra visualiseringen af en idé til udformningen af det færdige produkt. Tema og stemning For at finde en stil, et udgangspunkt for den designmæssige bearbejdning, var det nødvendigt først, at fastlægge temaet. Den overordnet idé med dette projekt var, at udarbejde en personlig udstilling af egen udvikling og kompetencer. Med temaet på plads var næste skridt, at bestemme hvilken stemning, jeg ønskede at skabe på websitet. Min mål var, at give sitet en personlig karakter, som afspejler min smag. Skabe en stemning af ro og behag ved at bruge afdæmpet farver samt tilføre en fornemmelse af kvalitet både visuelt såvel som i brugen. Layout Hvor arbejdet med wireframe og informationsarkitektur fastlage de grove linjer af websitet, har jeg i denne del, der omhandler layout, beskæftiget mig med, at arrangere de visuelle elementer. Til dette har jeg truffet en række beslutninger bl.a. omkring valg af typografi og farvetema. Typografi: Formålet med typografien er, at formidle indholdet på en tydelig og letforståelig måde. Til dette har jeg valgt en sans-serif, Gadugi, som den gennemgående typeface/skrifttype til al tekst, links og overskrifter, der alt efter hvilken funktion ordet har, er markeret ved enten størrelse, farve, stil som f.eks. regulær eller bold. Farvetema/symbolik: De mest iøjefaldende farver på websitet er blå og støvgrøn. Disse farver er valgt på baggrund at den bagvedliggende symbolik. Den blå farve symboliserer; fred, ro, ære, pålidelighed, spiritualitet, harmoni, himmel, accept, forståelighed og tålmodighed. Den er bl.a. brugt til fuglen, der opdeler hvert afsnit. Fuglen skal forestille en bluebird, en fugl med særlig betydning for mig personligt, da omridset stammer fra en af mine tatoveringer. En bluebird er et symbol på transformation/overgang ud af mørket og ind i en lysere fremtid. Den forudsiger når gode tider kommer din vej. 8

9 Den grønne farve, ud over at passe godt til den blå, er kendt for at virke beroligende på os mennesker, hvilket er med til at skabe den stemning, jeg gerne ville opnå. Derudover symboliserer grøn også held og lykke, fornyelse, ungdom, håb, vækst, energi og natur, der på flere områder passer med symbolikken bag den blå farve og ikonet med fuglen. Udover blå og grøn, så har jeg valgt at arbejde med to forskellige nuancer af grå. Grå er en praktisk farve, der forbindes med neutralitet, tidsløshed og beskedenhed. Grunden til, at valget er faldet på denne farve fremfor sort, er fordi jeg ikke ønskede, at elementerne i denne farve skulle virke alt for fremtrædende. Overskrifterne skal selvfølgelig kunne ses, og derfor har de fået en mørk, dog afdæmpet grå, hvorimod rammerne omkring tekstboksene har fået en lysegrå, næsten usynlig farve, der kun lige markerer omridset. Med det besluttet, kunne jeg begynde at designe et simpelt layout med underafsnit, der alle skulle have en overskrift og fortælle en historie. Hele vejen gennem processen har jeg så vidt muligt arbejdet ud fra nøgleordene; harmoni og overskuelighed. Meningen var at gøre det behageligt for øjnene og igen, som tidligere nævnt, overskueligt, således at brugerens fokus er på det væsentlige indholdet. Dernæst har jeg set på den grafiske opstilling af billeder, tekst, margen osv., der i større grad bygger på designprincippet om æstetik, hvilket uddybes på senere i opgaven. Endelig kunne jeg til sidst gå i dybden med detaljerne, foretage forbedringer osv., hvilke jeg undervejs har præsenteret for folk med erfaring og taget deres råd til mig, for at nå frem til det bedst mulige resultat. Designprincipper Genkendelighed Intern genkendelighed er især at finde i brugen af farver, forme af tekstbokse og det blå ikon med fuglen. Yderligere er overskrifter og type-face med til at skabe en form for intern genkendelighed. Det er min overbevisning, at hvis man klippede en del af websitet ud og viste til en anden, som efter at have set flere forskellige websitets, sagtens ville kunne kæde dette udklip sammen med mit website, og dermed er missionen lykkedes med at skabe en intern genkendelighed. Ekstern genkendelighed er bl.a. menuen øverst på websitet (de fleste ville lede efter menuen her). Derudover er ikonerne i kontaktboksene ekstern genkendelighed, da alle kender betydningen for disse symboler. Linksne er stylet, som så oftest med en blå farve, men igen ved vi, hvordan et link fungerer, så derfor behøves der ikke gøres mere ud af designet. 9

10 Fleksibilitet og brugbarhed Allerede fra starten, havde jeg gjort mig klart, at jeg ville satse på brugbarhed fremfor fleksibilitet. Til at øge brugbarheden har jeg derfor begrænset valgmulighederne i designet bl.a. ved at reducere antallet af links til et minimum. Endvidere har jeg sørget for at skabe korte eller direkte genveje. Æstetik Æstetik spiller en stor roller i designet af websitet. Der er taget højde for at æstetikken skal være noget som behager, tilfredsstiller måden, hvorpå jeg har anvendt former og farver. Her kan det ikke undgås at blande næste punkt om enkelthed ind i argumentationen, for rigtigt nok bør design være så enkelt så muligt, hvor alle unødvendige elementer skal barberes væk, men ser man under læringsdelen, har jeg alligevel valgt at indsætte et billede bag de fem links, som i virkeligheden er unødvendig, men i dette tilfælde mener jeg, at billedet er med til at ophøje designets værdi. Uden baggrundsbilledet ville det se ud som om, at der mangler noget, og dermed ville æstetikken ikke behage øjet, som jo er et af målene med selve designet. Enkelthed Jeg har allerede været lidt inde på det. Design bør være så enkelt så muligt, og det har jeg selvfølgelig haft i baghovedet, da jeg byggede websitet. Dog har jeg ikke arbejdet ud fra en minimalistisk vinkel, ej at forveksle, da minimalisme ofte fremstår eksklusiv og upersonligt. Her lød opgaven på at skabe et website, der afspejlede min person og smag. Billedbehandling På forsiden har jeg valgt at indsætte et stort billede af mig selv, som jeg har behandlet i Photoshop efter en Photoshop tutorial, der viser, hvordan man kan omdanne et almindeligt billede til et typografisk portræt. Dog har jeg valgt, at undlade typografien i forgrunden og lade billedet have nuværende effekt af, at være halv billede, halv tegning. Til sidst har jeg givet det en grålig tone, så det passer ind farvetemaet. Under profil ses to billeder, et af en kvinde og et andet af en stak bøger. Billedet af kvinden er inspireret af et andet billede fra nettet. Bøgerne derimod er taget direkte, hvorefter jeg har foretaget justering i forhold til farve og beskæring. 10

11 Til portfolio-mapperne har jeg forsøgt at skabe en enkel, men kreativ form for kommunikering, der oplyser indholdet af hvert projekt. Det har jeg gjort således, at jeg billedeligt, i form af ikoner markeret i en lysere farvenuance, gengiver projektets navn på en visuel måde. Hvor lærings-delen beskriver en nærmere detaljering af min udvikling i tekstform, synes jeg, at der manglede en grafisk afbildning af mine nuværende kompetencer. Dels fordi, at nogen måske ikke ville have tid til, at læse sig frem til denne information, og dels fordi, at jeg her havde mulighed for at illustrere endnu en af mine kompetencer Illustrator. Graferne er udarbejdet således, at jeg først har tegnet to streger ovenpå hinanden. En der angiver helheden, altså hundrede procent, og en, der angiver en given procentdel, der udgør mit kompetence niveau. Dernæst kan man omdanne strengen til en pensel, og efterfølgende tegne en cirkel, som hermed viser denne præcise procentdel. Det er sikkert blevet bemærket, at et af billederne går igen flere steder i det samlede projekt. Her taler jeg om billedet, der illustrerer en masse flyvende papirs fugle. Udover at optræde i mit moodboard, og som forside på denne rapport om portfolio udvikling, så optræder samme billede også på selve websitet, nemlig som baggrundsbillede under læring. Billedet er selvfølgelig valgt på baggrund af dets symbolske betydning en illustration på udvikling. I starten er de ikke andet end et stykke fladt, hvidt papir, som så foldes og forvandles til fugle, der kan flyve afsted i mange forskellige farver. Billedet fortæller således en lille historie om læring og udviklingen af kompetencer. I modsætning til det originale billede på rapportens forside, måtte jeg her foretage nogle justeringer, der gjorde det anvendeligt som baggrund for lærings-delen. Billedet er blevet beskåret, der er foretaget en farvejustering, igen for at passe ind i farvetemaet, og derudover har det fået en nedsat opacitet. Under kontakt har jeg ganske enkelt gjort brug af tre symboler, en globus, en mobil og et snabel a, der i realiteten sagtens kunne stå alene, fordi de alle er almindelig kendte symboler. Men i dette tilfælde er deres funktion udelukkede at fungere som billedeligt supplement til teksten. Gestaltregler Gestaltregler er en vigtig del i udviklingen af et website, da det skaber overblik for brugeren og er med til at organisere informationer og gøre indholdet let overskueligt. Ligeledes gør det, at design og funktionalitet kan arbejde sammen. Der findes flere gestaltregler, end jeg vil komme ind på her, men nedenfor vil jeg beskrive, hvilke jeg har brugt i udviklingen af dette projekt. 11

12 Nærhed Brugen af gestaltreglen om nærhed ses eksempelvis i typografien, hvor bogstaver placeret tættere på hinanden opfattes som sammenhørende og danner ord, som tilfører mening til en tekst. Desuden fortæller afstanden mellem overskrift og tekst samt afstand mellem billede og tekst ligeledes, hvad der hører sammen med hvad. Hvis man tager kompetencer som eksempel, vil alle være klar over, at første diagram hører sammen med nedenstående tekst etc. Lighed Reglen om lighed, at genstande der har noget til fælles opfattes som sammenhørende, er særlig tydelig i portfolio-delen, hvor alle projekter er udformet ens i både størrelse, farve og form. Dette fortæller brugerne, at her er en samling af mine hidtidige projekter. Lukkethed Jeg har flere steder i udformningen af mit website anvendt denne regel. Både under profil, portfolio og kontakt har jeg valgt, at sætte en ramme omkring tekst og informationer for klart og tydeligt, at markere samhørigheden af indholdet. Som noget ekstra ophøjer rammerne også designets værdi, da det på en meget enkel måde udfylder tomrummet omkring det sparsomme tekstindhold. 12

13 Remake af tidligere projekter Siden uddannelsesstart har vi løbende arbejdet på projekter som alle, undtagen det første, har været udarbejdet i grupper. Resultaterne af disse projekter er derfor ikke en direkte udstilling af mine personlige designmæssige valg og kompetencer. Eksamensprojektet, derimod, er en individuel præsentation af mig og mit arbejde, hvor det er et krav, at vi hver især skal forholde os til de hidtidige projektresultater og lave en personlig vurdering samt foretage ændringer/forbedringer, der ligeledes afspejler vores løbende tilegnet færdigheder. De følgende tre afsnit beskriver mine personlige vurderinger af 3 tidligere projekter, samt hvilke forbedringer, jeg har valg at foretage på baggrund af overstående. Game Design I projekt, Game Design, valgte vi i gruppen af lave et Just Eat spil Just Eat The game, som grundlægende går ud på, at konkurrere om at blive byens hurtigste pizzabud. Idéen bag grafikken til den oprindelige version af spillet, var at designet skulle føre ens tanker hen på et menukort, og ved brugen af det italienske flags farver, skabe en stemning af Italien. Pga. daværende manglende kompetencer, er dette ikke helt lykkes. Designet er kommet til at se meget fladt og kedeligt ud. Mit redesign bygger dog fortsat på samme idé og samme struktur. Der hvor jeg har vurderet, at der kunne foretages forbedringer, var i forhold til det visuelle udtryk, der med få, mindre ændringer, kunne puste liv i billedet og give det et mere professionelt look. Som altid er google et fantastisk værktøj til at søge efter inspiration, så jeg fik hurtigt fundet et billede af et online menukort, hvilket jeg har ladet mig inspirere af. Det udvalgte billede blev gemt, og genåbnet i Photoshop, hvor jeg her kunne aflæse farvekoderne, som jeg har kopiret over i det nye design. Endvidere valgte jeg at gøre rammen mere markant, da det gav en bedre visuel effekt. Til sidst har jeg været inde i koden og angive wrapperen til at være auto, så den nu følger indholdet i modsætning til i det oprindelige design. Et udsnit af det oprindelige og nye design ses herunder. 13

14 Infographics Infographics var et projekt, der gik ud på, at udvikle en visuel identitet for et opdigtet firma, JB Plastics. Overordnet fik vi i gruppen sammen udarbejdet en troværdig, sammenhængende identitet. Den eneste finger, at sætte på designet var i logoet, hvor vi havde valgt at sammensmelte B og P, for at tilføre logoet en unikhed. Selvom tanken bag var god nok, blev vi gjort opmærksom på, at dette kunne skabe forvirring og i stedet læses som J Blastics. Med udgangspunkt i denne feedback, bygger mit redesign på at skabe en visuel identitet uden fare for forvirring. Da problemet lå i logoet, valgte jeg derfor, at designe et nyt logo, hvor jeg adskilte B og P, samt at fortage justeringer af de tilhørende blålige kasser, med hvilke vi ikke havde været omhyggelige nok. Efter at være nået et tilfredsstillende resultat med justeringer af kasserne og placeret dem i forhold til firmanavnet, gik jeg ind og låste / grupperede hele logoet, for at sikre intet ville forflytte sig ved eventuelle størrelsesændringer. Dernæst var der kun tilbage at udskifte alle oprindelige logoer med det nye, altså både på brevpapir, visitkort (for- og bagside) samt powerpoint template, således at firmaets visuelle identitet igen fremstår gennemført og uden chance for forvirring af firmanavn. Her ses eksempler på det oprindelige og nye logo design. Website Design I projekt, Website Design, var det vores opgave at træde ind vi rollerne som grafiske designere, der var hyret til at udarbejde en hjemmeside for en kunde, som i dette tilfælde var en gruppe studerende fra marketing management. Gennem hele dette projekt blev der arbejdet seriøst og med høje ambitioner, derfor er jeg overordnet set meget tilfreds med det resultat vi leverede. Men da dette, som sagt, var et gruppeprojekt, og vi derfor var 14

15 flere om at udarbejde én og samme hjemmeside, var der naturligvis flere mindre overseelser, som jeg i denne omgang har haft mulighed for at forbedre. Hvis vi starter med de generelle ændringer, som gør sig gældende for alle siderne, så har jeg først og fremmest været inde i HTML-koderne og tilføje en main_wrapper omkring al indholdet og ændret baggrundsfarven. Dette gør, at indholdet opfattes mere samlet, selv hvis websitet ses på større skærme. Dernæst generede det mine øjne, at overskrifterne på flere af undersiderne så ud til at være placeret tilfældigt, så derfor har jeg justeret afstanden mellem overskrift og sammenhørende tekst, så det nu er mere tydeligt, hvad der hører sammen. På forsiden har jeg valgt, at ændre en del i header billedet. Bl.a. har jeg ændret skrifttypen, så den er blevet identisk med den gennemgående skrifttype på websitet, dels fordi den er mere enkel, og fordi der i forvejen sker så meget i billedet, at det rent visuelt fungerer bedre. Dernæst har jeg givet billedet en opacitet på 90% for at gøre teksten mere øjnefaldene. Yderligere har jeg udviklet et nyt logo for Spot On, da det oprindelige logo ikke var et, som jeg selv ville have valgt, hvis det havde været en selvstændig opgave. Længere nede på siden er de sorte tekstbokse i billederne blevet justeret, så de ikke længere flyver, men nu er tilpasset bunden af billederammerne. Jeg har derudover ændret skrifttypen til Verdana, som fortsat er den gennemgående skrifttype på websitet. Til sidst har jeg udskiftet billedet i kontakt-boksen, så det nu indeholder det nye logo. Under menupunktet, Om festivallen, har jeg først og fremmest udskiftet header billedet, da jeg synes alle undersider skulle have sit eget unikke billede. I billede-boksene har jeg været inde i koden og gøre billederne til baggrunde, hvor de før var tilpasset rammerne. Herefter kunne jeg uden problemer gøre billede-vidden mindre og give dem en margin, så der blev skabt luft omkring billederne. Desuden har jeg slettet en del af den overflødige kode. 15

16 Siden der omhandler museet så egentlig rigtig fin ud. Det eneste jeg har rettet her, er overskriften som ikke var lavet om til h1. Under kontaktsiden har jeg ligeledes skiftet det tidligere logo ud med det nye, samt givet det en orange baggrundsfarven (en farvenuance taget fra header-billedet). Dernæst har jeg foretaget størrelsesændringer på rammerne omkring kort, logo, kontakt og infoboks, således at rammerne også her frigøres fra hinanden og den lysegrå wrapper. Under priser er overskriften ændret til små bogstaver, som i de øvrige overskrifter, og skrifttypen ændret til Verdana. Egen evaluering Hvis jeg skal evaluere projektet som helhed ud fra selve målsætningen om, at skabe et brugervenligt website, der ikke alene afspejler min person, men også dokumenterer min udvikling og kompetencer, vil jeg mene, at jeg er nået frem til et succesfuldt resultat. En foretaget brugertest viser, at portfoliet opfylder kriterierne for brugervenlighed, at man nemt kan navigere sig rundt på sitet, og at alle informationer er let tilgængelige. Det vil derfor også kunne fungere som et godt redskab til senere praktiksøgning. I forhold til projektplanlægning kan jeg konkludere, på baggrund af WBS sen, at det altid er en god idé, at medregne ekstra tid i sin tidsplan, til hvis man eksempelvis får nye idéer, kan se nye muligheder for forbedringer, eller hvis der skulle opstå uforudset forhindringer undervejs. 16

17 Bilag Bilag 1 PBS (Product Breakdown Structure) 17

18 Bilag 2 WBS (Work Breakdown Structure) 18

19 19

20 Bilag 3 - Brugertest Opgaveskabeloner til brugertesten. Opgave 1: Find seneste projekt i Simones portfolio Mål problemstilling: Bruge menulinjen og klikke på menupunktet, projekt, under senest tilføjet mappe, portfolio. Opgavens trin, optimalt. - Se i menulinjen. - Klik på portfolio - Klik på projekt i nyeste mappe, portfolio. - Gennemse projektet og tjek, at det er det rigtige. Tidsramme (eksperttid): Minimum 2 klik Opgavetekst: Du skal forestille dig, at du er CEO i et web bureau, og I står nu og mangler en grafisk designer. Du har derfor udvalgt nogle portfolier, som du ønsker, at se nærmere på. En af de udvalgte tilhører Simone Carstensen. Din opgave er nu, at finde frem til hendes seneste projekt. Noter: Bemærk at der er to projekter, der hedder sammen navn. 20

21 Opgave 2: Find og aflæs Simones HTML kompetencer Mål problemstilling: Bruge menulinjen og klikke på menupunktet, kompetencer. Herefter aflæse Simones HTML-kompetencer. Opgavens trin, optimalt. - Se i menulinjen. - Klik på kompetencer - Aflæs HTML-kompetencer Tidsramme (eksperttid): Minimum 1 klik Opgavetekst: Efter at have gennemgået forskellige opgaver i Simones portfolio, vil du nu gerne have et overblik over hendes kompetencer herunder særligt hendes HTML-kompetencer. Find ud af, hvor på websitet, dette kan aflæses. Opgave 3: Find kontaktinformationer Mål problemstilling: Bruge menulinjen og klikke på menupunktet, kontakt. Herefter aflæse Simones kontaktinformationer. Opgavens trin, optimalt. - Se i menulinjen. - Klik på kontakt - Aflæs kontaktinformationer Tidsramme (eksperttid): Minimum 1 klik Opgavetekst: Du har vurderet, at Simone er den grafiske designer, som du ønsker at ansætte i dit web bureau, og du vil derfor gerne i kontakt med hende hurtigst muligt. Find Simones kontakt oplysninger. 21