PORTFOLIO 5. projekt - 1. semester - Multimediedesigner - CPH Business - Jeanette M. Christensen - 09.01.17
FORORD Denne rapport beskriver processen under udarbejdelse af projekt 5, 1. semester, på Multimediedesigneruddannelsen, CphBusiness, Lyngby. Formålet med projektet har været at demonstrere vores udvikling og kunnen, primært indenfor fagene Interaction og Design & Visualisation ved at kode et website/ Portfolio fra bunden, samt lave nogle forbedringer på websites lavet under projekt 2, 3 og 4. Målgruppen er undervisere på studiet, virksomheder som kunne være en kommende praktikplads og/eller arbejdsplads samt vores medstuderende. 2
INDHOLDSFORTEGNELSE Forord Indledning Mindmap Kommunikationsstrategi Usertest - originalt website Research Wireframes Web-struktur Design Udtryk Skrifttype Farver HTML/CSS Usertest - nyt website Tidligere projekter Forbedringer Konklusion Bilag 2 4 4 5 7 9 11 14 15 15 16 17 19 20 22 23 23 24 3
INDLEDNING MINDMAP Da jeg skulle kode et website/portfolio, som bygger på det eksisterende lavet i WordPress, valgte jeg som det første at lave en usertest af dette. Resultatet kombinerede jeg med den teori vi har fået i Design og visualisering og skabte et nyt design under hensyntagen til min egen stil, da Portfolien skal repræsentere mig. Det er kodet i HTML5 og stil og indhold er skrevet i hver sin fil (.css og.html) og er valideret. Mindmappet var grundlag for mit Gantt-kort, som jeg både brugte som PBS (Project Breakdown Structure) og WBS (Work Breakdown Structure). Da jeg havde lavet det første mindmap opdagede jeg overlap mellem grupperingerne, så jeg lavede en ny udgave. Her er første udgave: Jeg har primært benyttet universelle designprincipper til at forbedre websites til projekt 2, 3 og 4 samt min erfaring fra kodning af det nye website/portfolio. og anden: 4
KOMMUNIKATIONSSTRATEGI Når man kommunikerer et budskab, er det naturligvis vigtigt at tage højde for hvem modtagerne er. I dette projekt, hvor jeg skulle lave et website, som præsenterer mig selv og mine kompetencer indenfor multimedie og hvor modtagerne, udover underviserne og medstuderende på vores uddannelse, er nogle potentielle praktik- og/eller arbejdsgivere, skulle jeg primært gøre mit yderste for at signalere hvem jeg er og hvad jeg har lært indenfor faget indtil nu. Vi har på uddannelsen stiftet bekendtskab med flere kommunikationsmodeller som tager højde for inter-/kulturelle forskelle, men i dette projekt, hvor jeg formodede at modtagerne kommer fra nogenlunde samme kultur som jeg selv og er danske, og ikke mindst at vi har en fælles interesse i multimedie, har jeg valgt at tage udgangspunkt i AIDA og appelformer. AIDA-modellen er den mest brugte kommunikationsmodel i verden; den er relativ simpel, men denne oprindelige model anviser 4 trin en potentiel kunde går igennem, før han/hun beslutter sig for at købe et produkt eller i dette projekts sammenhæng: fatter interesse for websitet. Gennem layout vil jeg fange opmærksomheden Interessen, multimediet, har modtagerne og jeg tilfælles, så layoutet skal gerne forstærke denne Jeg satser på med min stil at appellere til nogle modtagere, så de ønsker at involvere sig Og nu handler modtagerne på mit budskab og griber yderligere til tasterne Aida-modellen 5
Den primære appelform jeg har benyttet på websitet er patos; jeg ønsker at vække positive følelser som interesse, nysgerrighed, accept og anerkendelse hos modtagerne gennem mit design/layout. Sekundært ønsker jeg at appellere til modtagerne gennem etos, ved at opleves troværdig; jeg ønsker at overbevise modtagerne om, at jeg selv har skabt websitet, at mit budskab er sandt og at jeg vil kunne levere lige så kreative idéer fremadrettet. Sidst har jeg brugt en smule logos; at ramme smagen hos modtageren har ikke meget med fornuft at gøre, men selve det at strukturen og argumentationen på websitet handler lidt om logos beviser jeg kan det, jeg skriver jeg kan! De tre appelformer 6
USERTEST - ORIGINALT WEBSITE Jeg har haft en bruger på 56 år, tidligere projektleder i et reklamebureau, til at medvirke i en usertest af websitet lavet i WordPress; jeg stillede følgende spørgsmål og fik følgende svar: 1. Hvad handler websitet om? Om dig og dine projekter og det du har lært 2. Hvad synes du om farver, opsætning og brugervenlighed? Det er lavet lidt sjovt, projekt 4 øverst, jeg ville have byttet rundt så 1 kom øverst Jeg synes det er fint, jeg ville bare have byttet rundt på rækkefølgen 3. Hvilket indtryk giver websitet dig, spøg og skæmt, kedeligt, frisk, neutralt eller? Jeg synes det er fint, jeg synes det er meget let læseligt, fordi du har stillet det op i punktform... og så kan man klikke på de her links (de blåfarvede ord), hvis man vil vide noget mere... det er indbydende... og der skal heller ikke være for meget tekst... jeg synes det er fint 4. Modtagerne/målgruppen er udviklervirksomheder; hvis du var ansat der og havde ansvar for at ansætte mig i praktik ud fra websitet alene, er der så noget information du savner? Altså på denne her side, hvor der står Kontakt, ville jeg godt have et billede af dig nej under Om mig... Forsiden er rigtig fin, men man kunne jo godt brushe den lidt op med at smide nogle andre ting og sager ind, ikke noget som blinker sådan men Her 7
under Projekter kunne man have en eller anden feature for lige som at vække interesse jeg tænker ikke på noget som blinker det, der er enormt let ved at huske ting, vi er jo enormt visuelle, det er hvis du fx på det her projekt med Donald Trump havde sat det amerikanske flag på, så husker man det lyn hurtigt Måske skulle man tage en side til hvert projekt og så bruge noget visuelt det er super godt, det er også sådan vi husker reklamer 5. Har du andre kommentarer? Nej, jeg synes jeg har gjort det meget godt (latter) 8
RESEARCH Jeg har kigget på portfolio-websites fra studerende af ældre årgang og fundet lidt idéer her og der, som underbygger både min egen stil samt resultatet af usertesten. Her er et par af de websites, som jeg fik nogle idéer fra: http://mathildewester.dk let, enkelt, ikoner til projekter, lyst, venligt og lækkert http://cbruhn.dk enkelt, link til hvert projekt http://dittetved.dk lyst, enkelt, ikoner 9
Ud fra ovenstående og egne ønsker/stil, har jeg taget følgende ændringer med i det nye website: Under projekter linker jeg til en ny side for hvert projekt, dels fordi det er mere overskueligt, dels for at undgå at scrolle så meget Jeg har indsat et portræt-foto, hvilket er hyppigt brugt i dag Der er flere visuelle udtryk i form af fotos og ikoner; dels for at gøre layoutet mere let og spændende, dels for lettere at fange opmærksomheden fra brugerne og få dem til at huske mit website I headeren har jeg brugt et foto, som skal danne grundlag for farverne på resten af websitet og som udtrykker noget om mig Linket til de forskellige projekter har jeg lavet som ikoner, der viser hvad emnet handler om 10
WIREFRAMES Nedenstående er et par skitser af mine første idéer til wireframes, resten findes under bilag. Forside Projekter og Læring har den samme wireframe 11
Her er en alternativ wireframe til Projekter og Læring, som jeg havde set andre lave og syntes godt om, særligt de store ikoner med teksten der ruller ned, når musen er over; det ville være lidt sværere at kode og samtidig faldt wireframen lidt udenfor designet, da højre sidelinje, som indrammer midterfeltet/læsefeltet, ikke bliver brudt af et klikbart ikon som på de andre sider (jeg kasserede dog også forslaget under kodningen): Der tegnes Alternativ til Projekter og Læring 12
Jeg har lavet nogle ændringer i layout og design undervejs, fordi mit første udkast enten var for svært at kode (fx den tynde streg, som gik fra top til bund uden om de klikbare ikoner), fordi der manglede nogle elementer (fx Firmanavn og CVR-nummer på Kontatkt-siden,), fordi det ikke gav mening eller bare så bedre ud på en anden måde - og så har jeg indsat footer på alle sider. Her er et eksempel på ændring af wireframe, Forside: Billedet i headeren fortæller kun noget om hvem jeg er og ikke om mit mål med uddannelsen; jeg ville oprindeligt have lavet et billede sat sammen af flere fotos af forskellig størrelse, men det blev for svært De tynde streger fra top til bund er fjernet Logoet har jeg ikke nået at lave Menuen er rykket til venstre for at have lige venstre-margen med teksten i article Jeg synes ikke umiddelbart at jeg havde en god tekst til Forsiden og tænkte på, at et billede siger mere end tusinde ord og satte derfor et foto ind af min hund og mig, som siger noget om hvem jeg er 13
WEB-STRUKTUR Dette website er bygget op hierakisk, da det er relativt simpelt med få sider. Det har en bred struktur med 5 emner i toppen/navigations-baren og få undersider, 3 niveauer. Det er bygget op poly-hierakisk, da man kan tilgå et emne flere steder fra, fx kan man tilgå et enkelt projekt både fra siden PROJEKTER 1. SEMESTER og LÆRING 1. SEME- STER. Websitets struktur 14
DESIGN UDTRYK Brugervenlighed er alfa og omega på et website og selvom vi alle har forskellig smag, når vi går i detaljen, er der også visse generelle retningslinjer, som de 20 designprincipper, der appellerer til den brede skare. Af disse principper har jeg valgt at lægge vægt på billeder, enkelthed, ensartethed, brugbarhed fremfor fleksibilitet, grids, luft og æstetik. Jeg har særligt taget højde for udtryk, skrift og farver i mit design. Jeg har gerne villet give et udtryk som følger: Enkelt men alligevel med stil og dybde sætter fokus på det vigtigste uden for meget fylde, men alligevel med tilstrækkelig information til at være fyldestgørende Lyst og venligt virker imødekommende Overskueligt og struktureret går hånd i hanke med brugervenligheden og gør det let at finde rundt på websitet Naturligt det er min stil; jeg er meget fascineret af naturen, som på den ene side virker enkel og harmonisk, men på den anden side er utrolig kompleks og dyb 15
SKRIFTTYPE Da jeg skulle vælge skrifttype slog jeg som det første slået op på http://www.cssfontstack. com/ for at finde ud af hvor mange brugere på hhv. Windows og Mac, der kan se hvilke skrifttyper på deres computer. De 4 øverste på listen har flest brugere rangeret nedefter og den 5 har jeg taget med, fordi jeg synes den er enkel og stilren. Jeg har dog alligevel valgt, at angive de 2 øverste som primære skrifttyper, for at undgå, at opsætningen af siden rykker sig unødigt, hvis en anden skrifttype bliver brugt. Jeg har valgt Arial, som nummer 1, da jeg synes den er en anelse slankere og pænere end Verdana. Herefter har jeg angivet sans-serif som skrifttype, da skrifttyper uden seriffer læses bedre på nettet 1. Her laver jeg en test af forskellige skrifttyper Verdana Win 99.84% Mac 99.1% 2. Her laver jeg en test af forskellige skrifttyper Arial Win 99.84% Mac 98.74% 3. Her laver jeg en test af forskellige skrifttyper Trebuchet Ms Win 99.67% Mac 97.12% 4. Her laver jeg en test af forskellige skrifttyper Tahoma Win 99.95% Mac 91.71% 5. Her laver jeg en test af forskellige skrifttyper Century Gothic Win 87.62% Mac 53.15% 16
FARVER I dette projekt har jeg ikke taget hensyn til interkulturel farvesymbolik (fx associerer hvid ofte til begravelse i Kina), da jeg lige nu henvender mig til danske modtagere. Til gengæld har jeg lænet mig op ad Mark Bulton s farveteori: Designing for the web, part 4, Colour og ellers valgt farver efter min egen smag. Hammeren Lobbæk Da jeg er meget fascineret af og glad for naturen, ville jeg gerne udtrykke det på websitet og derfor indsatte jeg nogle af mine egne natur-fotos i Adobe Color CC, farvehjulet; det kom der nogle skønne og spændende farvepaletter ud af. Her er nogle eksempler: Marselisborg Sne Almindingen Solopgang 17
Nedenstående er den farvekombination jeg bedst kan lide og når jeg ser på Mark Bultons farveteori, passer den fint med det som jeg gerne vil udtrykke med websitet: Blå: primær farve, stærk, rolig og behagelig Orange: sekundær farve, varm, på en måde legefuld, vækst og varme Brun: tertiær farve, naturlig farve, går godt sammen med andre naturlige farver Hvid antages ikke for at være en farve, men jeg bruger den en del omkring tekst, ikoner og fotos til at skabe luft og lethed et af designprincipperne. Sort, som heller ikke er en farve, bruger jeg som kontrast til den orange i stedet for blå eller brun, da det giver et stærkere udtryk. Farvepaletten jeg har brugt, består næsten af komplementær-farver (blå/sort overfor orange), som, når de harmonerer, kan bruges til at skabe opmærksomhed og brugen af meget hvid/luft på websitet dæmper indtrykket, så det ikke bliver for hidsigt. Jeg har valgt at lave orange ramme om alle klikbare tekster, ikoner og fotos, da det er den mest opmærksomhedsvækkende farve fra paletten og jeg naturligvis gerne vil have så mange klik på websitet som muligt! 18
HTML/CSS Jeg har primært brugt http://www.w3schools. com/ til hjælp til koden og var det ikke nok, så har jeg googlet mig frem til en løsning. Et par gange, blandt andet i forbindelse med at jeg lavede Kontakt-siden, fandt jeg løsningen på mit problem ved at sætte en tynd streg (outline) om de enkelte items (header, navigation, article ) på siden, for at se hvor kasserne flød hen. I koden har jeg lavet forklarende tekst på følgende måde: Hvis jeg havde været dygtigere og/eller haft mere tid, ville jeg gerne have lavet følgende forbedringer: Brødkrummesti på alle sider Validering af webforms (ud over det som er indeholdt i type) Tilpasset websitet til medium skærm Tilpasset websitet til lille skærm På menu-siderne/niveau 1 skriver jeg kommentarer på siden index.html; på resten af siderne, kommenterer jeg hvor der er afvigelser i forhold til index.html. Det samme gælder for menu-undersider/niveau 2 og projekt-siderne: jeg forklarer det jeg finder vigtigt på den første side i rækken og på de efterfølgende kun der hvor der er afvigelser. Lavet et logo Klikbar kontakt/footer Der er forklarende tekst til al CSS. 19
USERTEST - NYT WEBSITE Jeg havde den samme bruger til at teste det nye website som det originale, fordi jeg i mit design/layout har taget hensyn til hendes feedback og fordi jeg mener, at hun med sin baggrund som projektleder i et reklamebureau måtte have en vis indsigt i kommunikation, også online. Jeg gentog de samme spørgsmål, på nær det første Hvad handler websitet om? for at se om ændringerne svarede til brugerens feedback. 2. Hvad synes du om farver, opsætning og brugervenlighed? Nu synes jeg det er rigtig godt og det jeg godt kan lide er, at du faktisk har holdt det i de der meget natur brune nuancer, det er ret fedt. Det hænger rigtig godt sammen farvemæssigt jeg synes det er rigtig lækkert nu, det er sådan noget der indbyder til at man har lyst til at læse det nu. 3. Hvilket indtryk giver websitet dig, spøg og skæmt, kedeligt, frisk, neutralt eller? Jeg synes forsiden siger det hele, det er et fantastisk billede af dig og din hund, det er virkelig sådan at man tænker: Hold da op, jeg må læse videre, det er en fed forside. 4. Modtagerne/målgruppen er udviklervirksomheder; hvis du var ansat der og havde ansvar for at ansætte mig i praktik ud fra websitet alene, er der så noget information du savner? Nej, der er noget om Projekter, nu er det her ét semester, og hvad du har lært og så fortæller du noget om dig selv det er ret fedt med CV, for ellers, hvem er du?... jeg 20
kan jo ikke ansætte dig ud fra det her, hvis ikke der er et CV jeg kan godt se hvad du har lavet og hvad du har lært af det, men hvem er du?... jeg ville ikke ansætte dig bare på at du har lavet et godt projekt og hvad du har lært. 5. Har du andre kommentarer? Nej, for jeg synes det er fedt, det er rigtig fedt nu er det jo også fordi jeg selv godt kan lide noget med natur på... 21
TIDLIGERE PROJEKTER Andre forbedringer kunne være: Menu: aktiv side/menupunkt farvet Brødkrummesti På websitet til andet projekt, International Collaboration: Promote your country, har jeg forbedret forsiden ved at centrere overskrift og menu: Meget kortere tekst på siderne 22
Andre forbedringer kunne være: Banner: kortere fremvisning/færre elementer På websitet til tredje projekt, Designing an online political campaign, har jeg lavet løs bagkant på Landingpage, for at teksten læses lettere: Landingpage: Omformulere teksten til 3 slogans 23
På websitet til fjerde projekt, An intercultural website for a public speaker, har jeg valgt at gøre pilene i galleriet tydeligere; jeg har fyldt trekanterne ud med den røde farve, som er brugt på websitet i forvejen, og flyttet dem længere ned på siden: Andre forbedringer kunne være: Tekst under billeder Drop-down menu: tekst lige under Talks og én linie Lige lange input-bokse på Kontakt-siden Knappen er gjort firkantet for at passe til de andre former på websitet: 24
FORBEDRINGER KONKLUSION Andre forbedringer til hele projekt kunne være at: Uddybe procesbeskrivelsen til projekt 2, 3 og 4 med fotos, skitser og mere tekst Jeg har skabt mit nye website efter at have fået input andre studerendes Portfolier, feedback fra en bruger, lavet flere udkast til wireframes, teori fra undervisningen og sidst men ikke mindst, ud fra min egen stil. Jeg har brugt naturen som udgangspunkt for farverne på websitet og holdt en enkel, overskuelig og rolig stil. Brugeren som testede mit WordPress-website testede også det nye og var overrasket over hvor godt det var blevet og helt i stil med hendes feedback af det første. Hyperlinks i PDF-filen åbner i nyt vindue Forbedringerne af de tidligere websites er relativt små, men der er givet forslag til yderligere forbedringer, som vil være med til at de kan leve lidt mere op til generelle designprincipper. Lave link til videoklip af usertests Lave web-struktur i Adobe Illustrator 25
BILAG BRAINSTORMING 26
BILAG GANTT-KORT 27
BILAG WIREFRAMES 28
BILAG 29
BILAG KILDER ADOBE COLOR CC In-text: ( Adobe Color CC ) Your Bibliography: Adobe Color CC. Color.adobe.com. N.p., 2017. Web. 5 Jan. 2017. https://color.adobe.com/da/create/color-wheel AIDA (MARKETING) In-text: ( AIDA (Marketing) ) Your Bibliography: AIDA (Marketing). En.wikipedia.org. N.p., 2017. Web. 5 Jan. 2017. https://en.wikipedia.org/wiki/aida_(marketing)#origins_of_aida AIDA MODELLEN OG GENNEMGANG AF DENS 4 FASER. In-text: ( AIDA Modellen Og Gennemgang Af Dens 4 Faser. ) Your Bibliography: AIDA Modellen Og Gennemgang Af Dens 4 Faser.. Marketingteorier. N.p., 2017. Web. 5 Jan. 2017. http://marketingteorier.dk/aida-modellen ANDERSEN, M. Hvorfor korrekt informationsarkitektur skaber succesfulde websites In-text: (Andersen) Your Bibliography: Andersen, Michael. Hvorfor Korrekt Informationsarkitektur Skaber Succesfulde Websites. Novosight. N.p., 2017. Web. 5 Jan. 2017. https://novosight. dk/informationsarkitektur-til-hjemmesider 30
BILAG ANDERSEN, R. Redesign af første portfolio. Nu med responsive design, lavet på 1. semester 2013 In-text: (Andersen) Your Bibliography: Andersen, René. Redesign Af Første Portfolio. Nu Med Responsive Design, Lavet På 1. Semester 2013. Creativefolder.dk. N.p., 2017. Web. 5 Jan. 2017. http://www.creativefolder.dk/exam_portfolio_1sem.html BOERIIS, T. Thomas Boeriis - Personlige Portfolio In-text: (Boeriis) Your Bibliography: Boeriis, Thomas. Thomas Boeriis - Personlige Portfolio. Thomas Boeriis. N.p., 2017. Web. 5 Jan. 2017. http://thomasboeriis.dk BRUHN, C. Charlotte Bruhn Online Portfolio In-text: (Bruhn) Your Bibliography: Bruhn, Charlotte. Charlotte Bruhn Online Portfolio. Cbruhn.dk. N.p., 2017. Web. 5 Jan. 2017. http://cbruhn.dk/ 31
BILAG BULTON, M. In-text: (Bulton) Your Bibliography: Bulton, Mark. Chapter 15, Printing The Web. Designingfortheweb.co.uk. N.p., 2017. Web. 5 Jan. 2017. http://designingfortheweb.co.uk/part4/part4_intro. php CSS FONT STACK: WEB SAFE AND WEB FONT FAMILY WITH HTML AND CSS CODE. In-text: ( CSS Font Stack: Web Safe And Web Font Family With HTML And CSS Code. ) Your Bibliography: CSS Font Stack: Web Safe And Web Font Family With HTML And CSS Code.. Cssfontstack.com. N.p., 2017. Web. 5 Jan. 2017. http://www.cssfontstack.com/ GANTTER FOR GOOGLE DRIVE In-text: ( Gantter For Google Drive ) Your Bibliography: Gantter For Google Drive. Smartapp.com. N.p., 2017. Web. 5 Jan. 2017. https://www.smartapp.com/gantterforgoogledrive/# HOLCK NIELSEN, R. Rasmus portfolio In-text: (Holck Nielsen) 32
BILAG Your Bibliography: Holck Nielsen, Rasmus. Rasmus Portfolio. Rasm9419.multimediedesignerskive.dk. N.p., 2017. Web. 5 Jan. 2017. http://rasm9419.multimediedesignerskive.dk/lp/index.html RETORIK - DAMBORG84 In-text: ( Retorik - Damborg84 ) Your Bibliography: Retorik - Damborg84. Sites.google.com. N.p., 2017. Web. 5 Jan. 2017. https://sites.google.com/site/lisakristinesoerensen/dansk/det-sproglige-omraade/retorik TVED, D. Multimediedesigner med speciale i webdesign og -udvikling In-text: (Tved) Your Bibliography: Tved, Ditte. Multimediedesigner Med Speciale I Webdesign Og -Udvikling. Multimediedesigner portfolio, Århus. N.p., 2017. Web. 5 Jan. 2017. http:// dittetved.dk WESTER, M. Multimediedesigner portfolio - Mathilde Wester In-text: (Wester) Your Bibliography: Wester, Mathilde. Multimediedesigner Portfolio - Mathilde Wester. Mathilde Wester. N.p., 2017. Web. 5 Jan. 2017. http://mathildewester.dk 33
BILAG W3SCHOOLS ONLINE WEB TUTORIALS In-text: ( W3schools Online Web Tutorials ) Your Bibliography: W3schools Online Web Tutorials. W3schools.com. N.p., 2017. Web. 6 Jan. 2017. http://www.w3schools.com/ 34