T o b i a s W e x i ø S o n n e MultiMedieDesigner CPH-Business 1/26

Transkript

1 T o b i a s W e x i ø S o n n e MultiMedieDesigner CPH-Business 1/26

2 Indholdsfortegnelse - Intro - Mindmap - Designvalg - Farvevalg - Logo - Ensartethed - Farver - Det gyldne snit - Fleksibilitet & brugbarhed - Genkendelighed - Fra wordpress portfolio til egen hjemmeside portfolio - WBS - Gantt kort - Redesigns - Informationsarkitektur - Gangstertest - Kortsortering - Konklusion /26

3 Rapport om projekt 5 Portfolio INTRO Da jeg har lavet min hjemmeside i google chrome, gør det at den ikke er ordentligt indstillet til brug i andet end Chrome derfor vil det være bedst hvis hjemmesiden bliver åbnet i den browser for bedste resultat af min portfolio. Jeg har prøvet med forskellige koder at indstille min hjemmeside til firefox og safari, men det lykkedes ikke. Koden jeg prøvede med var moz- og webkit- 3/26

4 MINDMAP Det første jeg gjorde da jeg så opgavebeskrivelsen var at lave en klar mindmap over hvad siden skulle indeholde og hvordan den skulle se ud. Derudover brugte jeg også mindmappen til at få etoverblik over hele projektet, så jeg havde en idé om hvad der skulle laves udover selve hjemmesiden, bl.a. usability tests og WBS. Jeg har inddelt punkterne i mindmappen i farver så der dannes et bedre overblik over hvad der hører til hvilke grupper. WBS Redesigns Sort Hvid Få Farver Rød Grøn Blå Ganttkort The company Design Farver Skrifttype Letlæseligt Sans-serif Mindmap Layout Margner ude i siden Informationsarkitektur Usability Indhold inde på midten Menu i toppen Kortsortering Gangstertest Forsøgsperson Ekspertvurdering Brug af Ekspert Forsøgsperson 4/26

5 DESIGNVALG Designet jeg har valgt på min hjemmeside er bygget op således at man hurtigt kan få et overblik over hvad den indeholder. Jeg har lavet det, så det ser enkelt og overskueligt ud. Menuen er placeret i toppen af hjemmesiden og hjælper til at man ved hvor man er henne på sitet, da den underside man er inde på er highlightet med en lysegrøn farve. Jeg har valgt at placere indholdet af hjemmesiden i midten, så man kun behøver at forholde sig til midten og derfor bevares den overskuelige del af siden. Da hjemmesiden er mit ansigt udadtil og derfor skal indeholde alle mine projekter og kompetencer inden for multimediefaget, har jeg valgt at placere en sort div i toppen hvori man kan læse med hvid typografi, hvilket menupunkt man er inde under. Den skal samtidig visualisere en såkaldt clips som holder sammen på en bunke papirer, da hele siden er mit CV over hvad jeg har af kompetencer og erfaringer. 5/26

6 FARVEVALG Jeg har valgt kun at bruge tre farver på min side som er grøn, hvid og sort. Farven grøn er valgt på bagrund af at den skaber en friskhed, og samtidig en kontrast til de sorte og hvide områder. Den kraftige grønne farve hjælper til at man lægger mærke til den oppe i menuen og derfor kan man let finde ud af hvilke menupunkt man er inde under. Farven går igen i alle links, så man hurtigt forstår at alt der har farven grøn kan klikkes på, på nær i footeren som har den grønne farve for at binde toppen af siden sammen med bunden. Typografien på siden har jeg valgt at gøre enkelt uden for mange unødvendige folder. Typografien indeholder således skrifttypen Arial som er en sans-serif. Valget af denne typografi er fordi at den indeholder mange lige linjer som passer ind til designet af resten af hjemmesiden. Hjemmesiden består primær af horisontale og vertikale linjer og da sans-serif gør det samme, dannes der derfor en rød tråd på siden som skaber en helhed blandt typografi og design. 6/26

7 LOGO Logoet skiller sig ud fra resten af skriften på siden og det er med vilje så man lægger mærke til den. Logoet består kun af logotypes som er skriften i logoet. Logoet skiller sig ud på den måde at der er brugt typografien OptimusPrinceps som er en Serif skrifttype. Det gør det anderledes da resten af siden består af Sans-Serif skrift. T o b i a s W e x i ø S o n n e MultiMedieDesigner 7/26

8 Derudover forsøgte jeg mig med et logo der kun indeholdte figurer og ingen logotype. Resultatet blev flot men da jeg satte det ind på siden passede det ikke til resten af siden og blev derfor ændret til kun at have logotype. Selve logoet forestiller de tre primærfarver der indgår i RGB farveskalaen. De tre største firkanter har farven rød, grøn og blå som symbolisere primærfarverne. Når firkanterne så mødes opstår der en sammensmeltning af farverne og en ny farve dukker op. Når alle tre farver mødes, lægges alle farver sammen og der udspringer farven hvid sig. Hvid indeholder alle farver og derfor er den centreret i midten. Den overordnede symbolisme i logoet går ud på at da jeg er i gang med at uddanne mig som multimediedesigner og har meget med farverne på computeren at gøre, de såkaldte RGB-farver, så ville jeg godt bruge det i mit logo. RGB-farverne er lysfarver og kan derfor ikke bruges når man maler da man der bruger CMYK farver som betegner alt der har med tryk at gøre. En af de store forskelle på RGB og CMYK farver er at når man blander alle farver i RGB får man farven hvid. Hos CMYK får man til gengæld farven sort, hvis man kan dosere farverne ordentligt. 8/26

9 DESIGNPRINCIPPER BRUGT Ensartethed Mine hjemmeside er bygget således op at alle sider har den samme top og menu. Nogle af de vigtigste elementer når det kommer til ensartethed er farver og form. Min hjemmesiders undersider har også ud fra denne designprincip fået samme form der går igen i samtlige sider. De har alle en sort top hvor menuen er, de har en sort border som indrammer alt indholdet på siden og en footer som afslutter siden. Samtidig har de også en titel som I PROJEKT er inde i en sort div hvor typografien har farven hvid. Den fortæller hvor man er på hjemmesiden. Da de alle har samme form og farve er det let at finde ud af hvor man er på hjemmesiden takket være den. Skrifttypen går også igen på samtlige sider sammen med at alt tekst som omhandler projektet er placeret til venstre for midten. Menuen skaber en ensartethed da alle punkter i menuen har samme størrelse og skrifttype. Derudover har den samme farver, funktion og når man svæver over et af punkterne i menuen skifter den farve til grøn. For at man skal lægge mærke til undermenuen der dukker op under siderne 1.Semester og Læring, har jeg valgt at lade den skille sig lidt ud. Det gør den på den måde at det er det eneste på sitet som har en afrunding på kanterne. Det skal samtidig vise at den hører til som en undermenu til menuen derfor ikke står for sig selv. Når det så er sagt har den stor lighed med menuen da den har samme skrifttype, farve og samme funktion. 9/26

10 FARVER Jeg har valgt at bruge farverne grøn, hvid og sort til mit design af hjemmesiden. Den grønne farve skaber en opmærksomhed da resten af siden består af sort og hvid. Den grønne farve er således forbundet til en funktion på siden. Når den grønne farve optræder på siden, er det fordi at den vil fortælle en noget. Det kan være oppe i menuen hvor man kan se hvilken side man er inde på eller at man er ved at trykke på et af de andre menupunkter i menuen. Den fortæller også når der er et link man kan trykke på, da alle links er stylet med den grønne farve. Farven og dens brug på sitet leder også tilbage til designprincippet ensartethed. Det gør den på den måde at når man ser farven grøn på siden ved man at den har en funktion. Det eneste tidspunkt at den ikke har en funktion, er når den optræder i footeren. Grunden til at den grønne farve optræder i footeren er at den skal samle hele siden fra toppen til bunden. Valget af sort og hvid til resten af sitet tog jeg fordi at det er gode kontrastfarver. 10/26

11 DET GYLDNE SNIT Det gyldne snit er blevet brugt meget når det kommer til malerier og indretning. Det gyldne snit kan dog også bruges når det kommer til at designe ens hjemmeside, da man har kan placere det vigtigste indhold på siden i det gyldne snit, så det kommer til udtryk som det man skal lægge mærke til. På min hjemmeside under 1.Semester kan man se at linksne jeg har oprettet så man kan komme til mine tidligere projekter ligger omkring det gyldne snit på siden. Det gør at man lægger mærke til linket og derfor vil der være flere der klikker på linket. 11/26

12 FLEKSIBILITET OG BRUGBARHED Hvis man skal analysere min hjemmeside om den er fleksibel eller brugbar, så ville den overordnet nok være i den brugbare side, i forhold til den fleksible side. Min hjemmeside er bygget op således at den indeholder en menu, undermenu og links som man kan trykke på. Man danner hurtigt et overblik over hvad hjemmesiden indeholder. Den er ikke så fleksibel når det kommer til funktioner på hjemmesiden, den har ikke billeder som forstørres når man klikker på dem, der er ikke downloadable indhold og siden holder sig kun til hvad jeg har lavet og hvad jeg har lært i mit første semester på CPH Business. Jeg vil ikke sige at det er negativt at siden er mere til den brugbare side i forhold til den fleksible side. Funktionerne på siden er dog overskuelige og brugbare for brugeren af siden og personen vil nemt kunne navigere rundt på siden uden at skulle nærstudere sidens funktioner og sprogbrug. 12/26

13 GENKENDELIGHED Der findes to typer genkendelighed, den ene er ekstern genkendelighed og den anden er intern genkendelighed. På en typisk hjemmeside vil der være en menu placeret et sted i toppen eller ude i højre side af siden. Det kalder man ekstern genkendelighed, da man har en ensartethed som er det mest essentielle at bruge. Man vil som bruger på siden gerne have et overblik over muligheder på en side og det hjælper menubaren med, derfor er det oplagt at lægge det som noget af det første op i toppen eller i siden. Derfor kræver det ikke at brugeren kender hjemmesiden for at vide at der enten er en menubar i siden eller i toppen. Jeg har derfor placeret min menubar opppe i toppen af hjemmesiden. Samtidig har jeg lavet en undermenu som er placeret under menubaren og med mindre skrift for at indikerer at den er en undermenu. Det at skriften er mindre og at den ligger under menubaren hjælper til at det kan kategoriseres som en ekstern genkendelighed. Når det kommer til intern genkendelighed, handler det om, hvad som går igen på en hjemmeside så man som bruger kan se at der er et sammenhæng mellem de interne genkendeligheder og derfra forstå ens hjemmeside. Jeg har brugt den grønne farve som en intern genkendelighed, da jeg både bruger den til menuen og til de links der er på hjemmesiden. Det er med til at få brugeren til at forstå at når den grønne farve optræder i skriften, er det noget man kan klikke på og derfra få noget information på. 13/26

14 FRA WORDPRESS PORTFOLIO TIL EGEN HJEMMESIDE PORTFOLIO Da jeg lavede min Wordpress portfolio i starten af semesteret, valgte jeg at lave den med en masse menupunkter da jeg syntes at det så smart ud. Jeg har så gjort det at jeg fjernede et par punkter i menuen, da jeg synes det giver et bedre overblik over ens hjemmeside. Et af punkterne jeg fjernede var bl.a. galleri, da jeg synes ikke jeg havde nok materiale til at lave et punkt som kunne omhandle mine designs. Jeg vil dog ikke kunne udelukke at det kommer på menuen senere hen da jeg forventer at få lavet en del designs fremover med hensyn på fremtidige projekter og der vil det være en fordel at samle designsne så man kan se hvad jeg er i stand til at lave. Ud over det har jeg byttet om på projekter og 1.semester i menuen. Jeg valgte at gøre det sådan da jeg så det som en bedre løsning for at finde rundt på siden. 14/26

15 Min WBS er bygget op således at man hurtigt får et overblik over hvad der skal laves og hvornår det skal laves. Det har jeg gjort på den måde at jeg har opstillet det kategorisk og samtidig brugt farver til at vise hvilke underkategorier der hørte til hvilke emner. farverne jeg har brugt, er blå, rød og grøn som fortæller hvor de forskellige emner skal placeres. THE COMPANY WBS Portfolio Mindmap 1 Samtidig har jeg sat tal på alle emner i WBS en så jeg kan se hvad der skal laves i hvilken rækkefølge samtidig med at jeg kan se hvad der skal laves bagefter en opgave er lavet. Det giver også en hjælp til dannelsen af Gantt-kortet, da jeg allerede har sat det i rækkefølge. The Company 2.0 Hjemmeside 3.00 Redesigns 4.0 Usability 5.0 WBS 2.1 Om mig 1.Semester Læring 3.08 Kontakt Tekst Til Hjemmeside Redesign 1.Projekt 4.1 Informationsarkitektur 5.1 Gantt Kort Projekt 3.03 Communication Presentation 3.09 Logo 3.15 Redesign 2.Projekt 4.2 Kortsortering Projekt 3.04 Design Visualisation 3.10 Redesign 3.Projekt 4.3 Gangstertest Projekt 3.05 Interaction Development 3.11 Redesign 4.Projekt Projekt 5.Projekt 3.06 The Company /26

16 GANTT KORT Da jeg begyndte at lave mit Gantt kort var jeg rimelig sikker på at jeg ville holde tiden, jeg følte at jeg havde lavet det overskueligt for mig selv og derfor let at følge. Min tidsplan skrider allerede i starten af projektet da jeg ikke er tilfreds med mit design på hjemmesiden og derfor vælger at lave det om. Mit andet design var jeg heller ikke tilfreds med og jeg vælger at starte helt forfra med udvikling af designet. Jeg får endelig lavet et design jeg er tilfreds med og kan gå videre. På det tidspunkt har jeg arbejdet ni dage mere med designet af hjemmesiden end hvad der var planlagt og det sender mig bagud med en række opgaver der skulle løses. Da jeg skal skrive teksten til min hjemmeside er jeg gået fem dage over tid før jeg kommer i gang med det. Ud over det tager det tre dage mere at skrive tekst til hjemmesiden end hvad jeg havde regnet med at det ville gøre. Allerede her havde jeg arbejdet tolv dage mere end jeg havde regnet med jeg ville havde gjort på dette tidspunkt. Jeg vælger derfor at lave en række af opgaverne i tiden mellem jule og nytår for at indhente det jeg havde mistet. I mellemtiden får jeg planlagt med to fra klassen at vi vil hjælpe hinanden efter nytår med nogle brugertests. Jeg vælger derfor at udskyde brugertestene og starte på rapporten i stedet for. Når jeg kommer til onsdag i uge tre mangler jeg kun at skrive brugertestene ind i min rapport og derfra linke til den fra min hjemmeside. Det ender med at min projektplanlægning skred én dag fra selve deadlinen jeg havde sat /26

17 GANTT KORT Planlagt tid på opgaver Faktiske tid på opgaver Pause fra opgave Uge 49 Uge 50 Uge 51 Uge 52 Uge 01 Uge 02 Uge 03 M T O T F L S M T O T F L S M T O T F L S M T O T F L S M T O T F L S M T O T F L S M T O T F L S Mindmap WBS Gantt-kort Hjemmeside Design Logo Tekst Til Hjemmeside Redesigns Links Informationsarkitektur Kortsortering Gangstertest Rapport 17/26

18 REDESIGNS 2. PROJEKT GAME DESIGN Da vi ikke fik den store kritik af spillet, valgte jeg selv noget jeg kunne redesigne. Jeg valgte at rykke spillet ind på midten af siden så det gav en balance på hjemmesiden. Før lå den ude i højre side uden vi havde kunnet finde ud af at flytte den ind på midten. Denne gang fandt jeg så ud af at den ikke kunne rykkes ind på midten da den lå inde i diven som vi havde kaldt wrapper. Jeg valgte derfor at flytte spillet ud af wrapperen for at få den fri af diven. Det gjorde en stor forskel og at jeg så kunne rykke frit rundt med spillet. Jeg valgte derefter at give spillets div en margin-left: 20%; og en margin-right: 20%; så spillet ville rykke sig ind på midten. Det gjorde jeg da det ikke rykkede sig ind på midten da jeg skrev margin-left: auto; margin-right: auto;. Derfor brugte jeg procenter i stedet for auto. 18/26

19 3. PROJEKT - INFOGRAPHICS En del af kritikken af projektet var om hvorfor vi ikke havde kombineret de to logoer vi ikke kunne blive enige om. Derfor tog jeg logotypen i Jakobs logo hvor der står JB og sat det ind i Simones udkast til et logo og erstattet hendes JB med Jakobs i Illustrator. En anden del af kritikken vi fik fra Mark var at vi brugte ordet skrift når vi hentydede til vores skrift i logoet i stedet for at kalde det logotype, som det hedder. Derfor har jeg rettet stavefejl i rapporten og ændret nogle af ordene til deres rigtige betegnelse som vi fik kritik for ikke at have gjort. 19/26

20 4. PROJEKT - WEBSITE DESIGN Det som jeg har valgt at ændre i 4. projekt er inde på download siden og kontakt siden. Da vi har lært at lave en kontaktformular har jeg valgt at sætte sådan en ind på siden i stedet for et billede der skal ligne en kontaktformular. Det gør at siden bliver mere professionel at se på. Derudover giver det også siden lidt mere seriøsitet da man nu rent faktisk kan skrive sit navn inde i den. Jeg gik ind og slettede billedet fra koden og skrev koden for kontaktformularen i stedet for 20/26

21 USABILITY INFORMATIONSARKITEKTUR Informationsarkitekturen hjælper til at brugeren kan få et overblik over hvor personen kan finde sin information henne og hvor man kan finde de forskellige emner som man leder efter. Den måde jeg har opsat min informationsarkitektur, er ved at jeg har tobias-sonne.dk brugt farver og lavet en opstilling der fortæller hvad der hører under forskellige Om mig 1.Semester Læring punkter. Communication 1.Projekt Presentation Jeg har opsat det sådan at man kan se Design 2.Projekt hvordan min hjemmeside fungere og Visualisation hvad der hører til under de forskellige Interaction 3.Projekt Development menupunkter. 4.Projekt The Company Kontakt Farverne er med til at give et overblik og samtidig hjælpe til med at fortælle hvad der er underpunkter og hvad der er overpunkter. 5.Projekt 21/26

22 GANGSTERTEST Forsøgsperson: Simone Snedker, 21 år, fra Jylland Jeg placere Simone på siden Læring i undermenuen the Company. Jeg spørger til hvor hun er på sitet og hun svarer let på spørgsmålet, at det er læring og inde under the Company. Jeg spørger om hun kan finde nogle links på siden uden af bruge musen til at identificere linket. Hun markere hurtigt det grønne tekst som værende links. Jeg beder hende derefter at finde opgavebeskrivelsen til vores andet projektforløb. Hun klikker som det første ind på 1.Semester, derefter 2.Projekt og i toppen finder hun opgavebeskrivelsen. Hun gjorde det nemt og hurtigt, uden at tage fejl af hverken sider, undersider eller links. 22/26

23 KORTSORTERING Forsøgsperson 1: Line Mehr, 20 år, fra Nordjylland Jeg har lavet tretten kort Som jeg giver til Line. Hun starter med at sprede dem ud på bordet for at danne sig et overblik over emner. Hun tager så og placere kortene 1. projekt - 5. projekt under 1. Semester og vælger at placere 1. Semester som en hovedmenupunkt. Derefter placere hun Communication & Presentation, The Company, Design & Visualisation og Interaction Development inde under Læring, som hun vælger som hovedmenupunkt. Nu er der to kort tilbage, det er Om mig og Kontakt. Hun er i tvivl om hvordan de to ligger men vælger at lægge Kontakt som en undermenu til Om mig. Det eneste der er anderledes på min Hjemmeside er kun at Kontakt ikke lægger som en undermenu men som en hovedmenupunkt. 23/26

24 Forsøgsperson 2: Simone Snedker, 21 år, fra Jylland Simone får ligeledes de samme kort som Line. Hun gør mange af de samme ting som Line, som er at hun starter med at sprede kortene ud for at få et overblik. Hun placere også kortene Communication & Presentation, The Company, Design & Visualisation og Interaction Development inde under Læring som undermenupunkter. Hun tager derefter hurtigt fat i kortene Om mig og Kontakt og lægger dem så Kontakt er en undermenu til Om mig. Hun fortsætter med resten af kortene og placere så 1. projekt 5. projekt som undermenu til 1. Semester. Hun vælger så at kigge på hvordan kortene lægger og diskutere lidt med sig selv om kortene Om mig og kontakt burde lægge anderledes. Hun fortæller at det er meget forskelligt hvordan de to kort kan lægge og gør opmærksom på at kortet Kontakt kunne have sin egen plads som hovedmenupunkt. Hun vælger dog at beholde kortopsætningen som hun havde lagt den fra start af. Forsøgsperson 1 og forsøgsperson 2 kom altså frem til det samme resultat hvor de begge ville have lægget kontakt under kortet Om mig. Det giver lidt idéer til den videreudvikling jeg havde tænkt mig at gøre på min hjemmeside, når vi kom længere frem i uddannelsen. 24/26

25 KORTSORTERING ORIGINAL KORTSORTERING FORSØGSPERSONERS KORTSORTERING Om Mig 1.Semester Læring Kontakt Om Mig 1.Semester Læring 1. Projekt Communication & Presentation Kontakt 1. Projekt Communication & Presentation 2. Projekt Design & Visualisation 2. Projekt Design & Visualisation 3. Projekt Interaction Development 3. Projekt Interaction Development 4. Projekt The Company 4. Projekt The Company 5. Projekt 5. Projekt 25/26

26 KONKLUSION OVER 5. PROJEKT - REDESIGN AF PORTFOLIO Når jeg ser på mit resultat af min hjemmeside er det et tilfredsstillende færdigt design jeg er kommet frem til. Jeg har haft nogle komplikationer med at finde ud af mit design, hvor jeg har været nødt til at pille nogle ting ud af mit design for at få det til at virke. Min projektplanlægning skred næsten fra start af, men det lykkedes mig at hente meget af den tabte tid, da jeg arbejdede med projektet på tidspunkter jeg havde sat som fridage. Efter at have arbejdet så intenst med mit design har jeg kommet frem til noget jeg er tilfreds med, dog har jeg også lavet en liste over ting jeg vil have rettet senere hen. Det jeg godt vil have lavet efterfølgende på min hjemmeside skal være at den er kompatibel på en mobil, altså responsiv. Derudover vil jeg godt prøve lidt kræfter med noget animation fra Edge Animate som kunne give min hjemmeside et lille pift af friskhed. Alt i alt et projekt jeg er tilfreds med og som jeg har designet på baggrund af hvad jeg har lært i timerne på uddannelsen. 26/26