P ORTFOLIO 2017 MLTIMEDIA DESIGN M ARIE EGEBERG MUL B 09.01.17
INDHOLD 1 2 Indledning Farver 10 11 Font Brainstorm 9 Design Principper Info. arkitektur 12 3 Negativ brainstorm Mockup 8 4 7 13 15 14 Redesign PBS Wireframe Konklusion 5 WBS Brugertest 6 Kilder
1 INDLEDNING Dette er min rapport som jeg har udarbejdet på baggrund af min nye portfolio, som er femte projekt og dermed sidste projekt på 1. semester af multimedie design uddannelsen. Dette projekt omhandler en udarbejdelse af en ny og forbedret portfolio som jeg har har håndkodet fra bunden af, ved brug af HTML5 og CSS4. I denne rapport vil jeg gennegå forskellige elementer af projektet som har haft betydning for mine resultater af den endelige portfolio. 1
2 Brainstorm Før jeg begyndte på selve kodningen, syntes jeg at det var vigtigt at lave en Brainstorm over hvilke elementer jeg ønskede skulle indgå. Her var det især tanker, ideer, planlægning og strukturering som var de første ting der dukkede op i min Brainstorming. Jeg har brugt min brainstorm til at forkusere på de punkter, som allerførst faldte mig ind, herefter bearbejdet dem og anvendt dem i min portfolio. ERFARING? PLANLÆGNING KODNING DESIGNDEADLINESDESIGPRINCIPPER COLOR CSS4RESPONSIVT FONT PROJEKTDOKUMENTATION HTML5 USABILITY Grænser Eksperimenter ILLUSTRATOR PHOTOSHOP INDESIGN Her ses tankerne bag min Brainstorm, med henblik på fremstiling visuelt og kreativt. 2
3 Negativ brainstorm Da jeg havde lavet min Brainstorm som ses på forrige side, begyndte jeg at lave min Negative brainstorm. Den negative brainstorm gik for mig ud på at være kritisk omkring den Brainstorm jeg først havde lavet, altså hvad kunne forsinke mit arbejde eller hvad kunne være en udfordring. Her så jeg på hvilke ting der kunne påvirke/ begrænse mit arbejde iforhold til de nuværende kompetancer jeg har på studiet. minuserfaring? visioner uklare ideer MULIGHEDER? MÅL RESPONSIVT?USIKKERHED svært at BEGRÆNSE INDESIGN færdigheder minus PHOTOSHOP Javascript Grænser KODNING USIKKERT strukturering Her ses tankerne bag min Brainstorm, med henblik på fremstiling visuelt og kreativt. Nedenunder har jeg lavet den negative branstorming over mit projek, med samme ide som forrige, at gøre det visuelt. 3
4 PBS Jeg har valgt at bruge PBS for at organiserer mit projekt fra start til slut i processen. PBS er efektivt blevet brugt til at dele mit projekt op i hvad den består af, og hvad jeg skal bruge for at få det optimale ud af min hjemmeside. Det har givet mig et godt overblik over de forskellige punkter som skulle indgå i min portfolio, hvilket har gjort det lettere at organiserer indholdet af hjemmesiden. 1.4 Kontakt 1.1 Forside 1 PORTFOLIO PBS 1.3 Projekter 1.2 Om mig 1.2.1 CV ved siden ses min PBS. 1.3.1 1.semester 4
5 WBS Ved at have benyttet WBS i min arbejdsprocess med projektet. Dette har gjort at jeg helt præcist har kunne dele mit projekt op i flere dele, for at gøre det håndterbart og struktureret. Ved at dele hver enkel arbejdsopgave op, har resulteret i at jeg har kunne fokuserer på hver enkel opgave en af gangen. Dette har gjort at jeg har haft en godt overblik over projektet fra start til slut, samt gjort det muligt for mig at planlægge de enkelte opgaver. 1.4.1 Validering 1.1.1.1 CV 1.4 Deadline 1.4.2 Aflevering 1.1.1 Brainstorm 1.3.3.1 Home 1.3.3.2 About 1.1 Planlægning 1 PORTFOLIO WBS 1.3 Hjemmesiden 1.3.1 HTML/CSS 1.3.3.3 Skills 1.3.3.5 Contact 1.3.3.4 Portfolio 1.1.2 WBS 1.2.3.1 Info. arkitektur 1.2.1 Usability 1.2 Design 1.2.3 Layout 1.2.3.2 Designprincipper 1.2.3.2 Responsivt design 1.2.2.1 Wireframe 1.2.2 Skitser 1.2.2.2 Mockup 5
6 Brugertest For at lave den bedst mulige nye portfolio, er det vigtigt at have lavet en brugertest 2 af min allerede eksisterende portfolio, Wordpress. Wordpress, består af nogle designskabeloner som umiddelbart ikke kan ændres. Dette betyder at hjemmesiden allerede i forvejen er brugervenlig på den vis at disse skabeloner allerede har taget forbehold i, at den der opretter en wordpress, ikke nødvendigvis bør have erfaring med hjemmesidekodning eller brugervenlighed. 1 Et resultat af dette ses i min brugertest, da den sådan set gik som den skulle, da brugervenligheden allerede eksisterede. Ud fra dette har jeg taget forbehold i nogle andre elementer i websitet som måske i denne portfolio, ikke var nødvendig at have med eller som faktisk helt burde undværes. Jeg vil nu gennemgå brugertesten samt de forskellige opgaver, og ud fra dette konkluderer hvad der bør tages stilling til i den nye portfolio. 1 Igang med wordpress: http://www.wordpressserver.dk/i-gang-med-wordpress/ 2 Usability, Wisler-Poulsen, Ian: (Alle disse opgaver til udgangspunkt i disse sider) Side 6
6 Brugertest OPGAVE 1 - Find 1.projekt beskrivelse med pdf Klik på semesters OPGAVE 2- Find tilbage til forsiden Klik på logoet Klik på 1. semesters Find pdf for 1.projekt Dette var den første opgave brugeren fik på websitet. Kommentarene til dette var: Jeg går ind under semester, så kan jeg se at beskrivelsen er her. Jeg syntes at der er lidt meget tekst ifht. project decription. Opgave 2 var en simpel opgave, som brugen skulle løse. kommentarene til dette var: Klikker på logoet. Det virker, men der mangler en home også. 7
6 Brugertest OPGAVE 3 - Find 4. projekt - Intercultural webssite. Klik på semesters Vælg 4. projekt - Intercultural website OPGAVE 4- Brug søgefeltet og find mobilnummeret Søgefunktionen i højre hjørne Søg phone Gå tilbage til forsiden Vælg contact Kommentarene til opgave 3 var: hmm.. måske under semesters? hmm måske under learning.. der er den.. den er begge steder? Dette var den 4 opgave til brugeren. Kommentarene til dette var: Hvad skal jeg skriv?. Mobile?... Telephone?... Så måske Contact?.. Der er det!. 8
6 Brugertest Nu har alle fire opgaver testet hos brugeren. Selvom jeg allerede fra starten af, havde forestillet mig at den wordpress site jeg havde lavet var brugervenlig, opstod der nogle problemer undervejs, som gjorde at brugervenligheden ikke var så optimal som jeg ønskede at den var. En af de problemer som brugeren faldt over var at der manglede en Home knap på sitet. Det er ikke alle brugerer som ved at logoet fungerer som en Home knap, så den skal selvfølgelig tages i betragtning. Det næste problem som brugeren faldt over, var forvirringen omkring learning og semesters. Hvis man som udefra ikke er sat ind i materialet på skolen, kan det være svært/ næsten umuligt at finde ud af hvad der er under hvilke punkter., og hvad der skal læses først. Samtidig var der alt for meget tekst for brugeren at tage stilling til, og vedkommende mistede hurtigt overblikket over indholdet. Det bliver også gjort klart at søgefunktionen på websitet var unødvendigt at have med. Det skabte mere forvirring end det gavnede siden. Da portfolioen ikke rummer en masse underpunkter og funktioner, ser jeg det udnødvendig at have med i denne sammenhæng. 9
6 Brugertest Ud fra disse konklusioner har jeg taget stilling til hvordan min portfolio skal indrettes. Jeg har her valgt at lave en Home knap på min portfolio således at alle ved hvordan de kommer tilbage til forsiden/udgangspunktet. Logoet har jeg også valgt at lave til et link, så der er flere muligheder for at komme tilbage til forsiden. Her har jeg valgt at dele projekterne op én for én og tilføjet dem mere visuelle elementer iform af billeder og væsentlig mindre tekst. Under hvert projekt er der nu links til learning hvor at alt tekst materialet er samlet på et sted. Samtidig linkes der til websites og andet materiale i forhold til de individuelle opgaver. Jeg har valgt at samle learning og semesters under en samlet titel portfolio. Dette har jeg gjort da det giver mere mening for den uvisse bruger at betjene websitet, og forstå indholdet og herunder sammenhængen. 10
7 Wireframe Før jeg begynde at kode min portfolio, lavede jeg nogle wireframe for både forsiden og indholdssiderne. Forsiden Dette har hjulpet til at visualiserer ideerne og anvende nogle grove skitser før man går igang med kodningen. Logo Navigation 11
7 Wireframe Indholdet Som det ses på begge frameworks er der taget hensyn til det enkelte look, uden for mange forstyrrende elementer. Logo Navigation På næste side vil en visuel mockup bliver præsenteret, hvilket vil vise det (næsten) endegyldige version af websitets forside og dets design. Emne 12
8 Mockup Dette er mit mockup af forsiden på min portfolio, dette mockup, vil være en præcis skitse til hvordan min portfolio forventes at se ud som slutprodukt. CODEING CSS Ai Ps Id COLOUR Dette mockup er en god hjælp til at visualisere en præcis skitse af din hjemmeside med fokus på de mindste detaljer. ab out sk ills Dog har jeg med tiden ændret mit design drastisk, men har taget inspiration i Mockuppe, og herved skabt flere og bedre ideer. Jeg har valgt at lave mockuppet i Illustrator, da det er en præcis og god måde at tilføje detaljer på. po rtfolio Her ses det før ændringerne. co ntact 13
8 Mockup Her ses det efter ændringerne (screenshot af hjemmesiden): 14
9 Designprincipper Jeg har anvendt nogle forskellige designprincipper, for at gøre min portfolio så anvendelig for brugeren som overhovedet muligt. Jeg har anvendt designprincipperne: Enkelhed, Ensartethed, Genkendelighed, Kontrast og Luft. 3 På de næste sider vil jeg gennemgå de forskellige designprincipper og beskrive hvordan jeg har anvendt dem på min hjemmeside. #3 - Enkelthed Jeg har valgt at gøre brug af designprincippet om Enkelhed for at gøre mit design så enkelt som muligt og herved mindske unødvendig støj på hjemmesiden. Dette har jeg bl.a. gjort i henhold usability testen, hvor flere af mine undersider i menuen er blevet fjernet, hvilket gør websitet mere overskueligt. Især det simple udtryk i designet af hjemmesiden gør kommunikationen helt klar for brugeren. 3 20 Designprincipper - Wisler-Poulsen, Ian: (Alle designprincipper tager udgangspunk i dette) Side 28, 34, 60, 90, 100 15
9 Designprincipper #4 - Ensartethed Jeg har på min hjemmeside valgt at gøre brug af designprincippet om Enkelthed. Dette har jeg valgt for at give elementerne et fælles karaktertræk. Dette fælles karaktertræk gør at elementerne vil opleves som have relationer til hinanden. På min hjemmeside ses dette især i min menu og ved indholdet under menuen, de former (Heksagon) som jeg har valgt skal være gennemgående i billed elementerne på min side. Størrelsen af disse elementer har jeg valgt at gøre i samme størrelse i forhold til de grupperinger de indgår i. #8 - Genkendelighed Jeg har valgt at gøre brug af designprincippet om Genkendelighed i det jeg har valgt at gøre mine sider i menuen ens. Dette vil sige at når man går ind på de forskellige sider på menuen, vil alle siderne have de samme ensartet elementer, som skaber genkendelighed for brugeren. Dette er især gjor ved at Heksagon figurene er gennemgående samt skrifttype og størrelse er vedvarende. 16
9 Designprincipper #14 - Kontrast Jeg har gjort brug af designprincippet om Kontrast. Jeg har anvendt størrelseskontrast og formkontrast. Størrelseskontrast er anvendt i forbindelse med tekst størrelsen på de forskellige sider. Det vigtige er blevet markeret med bold (overskrifterne) mens det mindre vigtige (brødteksten) har beholdt sin regulære font style. Jeg har anvendt en større font størrelse til mine overskrifter, så man tydeligt kan se hvor man er, og hvad det pågældende emne handler om. Dette gør at kontrasten melle disse elementer er blevet styrket hvilket skaber steming og gør designet spændende at se på. Jeg har anvendt formkonstrast i det at alle elementerne i indholdet som har fælles relationer til hinanden har den samme form (Heksagon). Billeder jeg har anvendt f.eks. under mine projekter og som kun skal fremvises som billeder, har den sekskantede form. På denne måde sikres det at disse elementer skiller sig ud fra de andre, hvilket skaber struktur og sikre genkendelighed hele vejen gennem websitet. 17
9 Designprincipper #16 - Luft Jeg har valgt at anvende designprincippet om luft, for at skabe mere opmærksomhed omkring overskrifter og elementer. Samtidig gør luft at designet ikke virker klemt. Det kan ud fra disse principper konkluderes at det er vigtigt at have forskellige guidelines for et design, hvis brugeren skal kunne navigerer ordentligt rundt i designet uden at det mister sin sammenhæng og mening. Luften i designet skaber et overblik og bidrager til en overskuelig komposition. Uden denne luft ville designet komme til at se småt og klemt ud. 18
10 Farver Jeg vil forklare og vise de farver som jeg har valgt at benytte på mit website. 4 De farver jeg har valgt er de kolde farver. Farvene som ses nedenfor vil blive beskrevet i forhold til deres betydning og kodning. #6666D9 #8D89F0 #7F7F7F #FFFFFF #000000 #6666D9, #8D89F0 Disse to farver stammer oprindelig fra den helt blå farve (#f2f2f2), med tilføjelse af forskellige former for opacity. Denne opacitet skaber ro og neutralitet til sitet og gør det harmonisk og sammenhængende. Den blå farve symboliserer ro og tillid. 5 Farven skaber stabilitet omkring elementerne og passer godt til de hvide, grå og rolige farver. 4 Farvers betydning: (Dette afsnit er inspireret af) http://www.farvesymbolik.dk 5 Farvers betydning: (Dette afsnit er inspireret af) http://www.farvesym- 19
10 Farver #7F7F7F #FFFFFF Den grå farve symbolisere bl.a. pålidelighed, balance og stabilitet. 6 Farven er neutral og er en god kontrast til den helt hvide baggrund. Denne farve er samtidig tidsløs hvilket vil sige, at den altid vil være en populær og stabil farvetone. Denne hvide farve symbolisere bl.a. enkelthed og præcision. 7 Jeg har valgt den hvide farve fordi at den skaber en masse plads på websitet og samtidig er den elegant og enkel. Med denne hvide som baggrundsfarve, er det derfor muligt at tilføje flere farver uden at skabe forvirring. 6 Farvers betydning: (Dette afsnit er inspireret af) http://www.farvesymbolik.dk/graa 7 Farvers betydning: (Dette afsnit er inspireret af) http://www.farvernesbetydning.dk/hvid 20
10 Farver #000000 Den sorte farve symboliserer elegance, autoritet og kan virke dramatisk. 8 Denne farve skiller sig ud på den grå-hvide baggrund og skaber opmærksomhed omkring dets elementer. Farven er med til at skabe et elegant look til websitet og giver det sofistikert udtryk. Det kan konkluderes ud fra ovenstående farvesymbolikker, at de farver jeg har valgt til min portfolio, er kolde farve nuancer. Disse farver skaber ro og balance, samt et stabilt og elegant udtryk. Alle farvenuancerne der er blevet anvendt hænger sammen, hvilket skaber et godt flow på websitet. 8 Farvers betydning: (Dette afsnit er inspireret af) http://www.farvesymbolik.dk/sort/ 21
11 Font Den font jeg har valgt at benytte i min portfolio er Helvetica. 9 Fonten Helvetica er en af de mest brugte sans-sherif typografier rundt omkring i verden. Meningen med denne font er at den skal være enkel og læsbar samt skal kunne benyttes til forkellige formål. Den font som minder mest om Helvetica er fonten Arial, som kun adskiller sig fra Helvetica, i dets få store og små bogstaver. 10 Derfor, er den anden font som jeg har valgt (hvis Helvetica ikke kan ses på andre computere) Arial. Denne font skiller sig næsten ikke ud fra Helvetica og er derfor en oplagt font, da jeg allerede ved hvordan denne font fungerer ifht. mit design. Den sidste font type jeg har valgt er en eller anden form for sans-sherif, som er i samme kategori som Helvetica og Arial. Her ses forskellen mellem de to fonte: 11 9 Fontens betydning: (Dette afsnit er inspireret af) https://www.fonts. com/font/linotype/helvetica 10 Fontens betydning: (Dette afsnit er inspireret af) https://da.wikipedia. org/wiki/helvetica 11 Arial vs. Helvetica: https://www.fonts.com/content/learning/fyti/typefaces/arial-vs-helvetica 22
12 Informations arkitektur Jeg har gjort brug af informationsarkitektur i min portfolio. Den informations arkitektur jeg har gjort brug af er Hierakisk struktur 11 Jeg har valgt denne informationsarkitektur, da jeg i min Portfolio har overemner, som viser underemner når man har trykket på dem. Dette ses i min portfolio, hvor man (hierakisk) kan vælge projekterne. Samtidig har jeg også gjort brug af Linar structure. Dette ses især under min portfolio, hvor hvert projekt kan læses, enten ved at gå frem eller tilbage - hver emne følger et andet i en kronologisk linje. 11 Hypertext: (Dette afsnit er inspireret af) Skanderby, Ditlev. A Practical Guide to Information Architecture - PDF. 18th June 2010. 23
13 Redesign Jeg har valgt at lave redesign af projekterne: #2 International collaboration #3 Political campaign #4 Intercultural website På næste side ses projekterne en efter en. 24
13 Redesign #2 - International collaboration Jeg har valgt at lave redesign af projekt 2, da jeg mente at wordpress sitet kunne blive mere detaljeret end den nuværende. Før: Efter: 25
13 Redesign #3 - Political campaign Ændringen var her at lave en formular under show support så det lignede at man kunne donerer penge. (Jeg har samarbejdet med Amalie Schiøtt Weber i denne opgave). Før: Efter: 27
13 Redesign #4 - Intercultural website Med dette projekt valgte jeg at gøre det mere tydeligt hvilke emne Pernille præsenterer, og hvad hun står for. Dette var ikke tydeliggjort på nuværende site, så det skulle ændres. (Jeg har samarbejdet med Amalie Schiøtt Weber i denne opgave). Før: Efter: 28
14 Konklusion Det kan ud fra min rapport konkluderes at portfolioen er blevet skabt på baggrund af analyse af brugertest, samt forskellige designmæssige guidelines. Ved at bruge WBS og PBS har det været muligt for mig at strukturer min arbejdsgang, så jeg har vidst præcis hvilke punkter jeg har skulle have med i min portfolio. Wireframe og mockuppet jeg har lavet har givet mig en visuel gennemgang af hvordan (næsten) mit website skulle se ud til slut. Dette har været en god visuel gennemgang, da man har kunne læne sig op af sine ideer. 29
15 Kilder Wordpress http://www.wordpressserver.dk/i-gang-med-wordpress/ Brugertest Usability - Wisler-Poulsen, Ian - 1. udgave, 4. oplag 2015 Designprincipper 20 designprincipper - Wisler-Poulsen, Ian - 2. udgave, 1. oplag 2016 Farver http://billedguiden.dk/?page_id=45 Farvesymbolik http://www.farvesymbolik.dk/ Font https://www.fonts.com/font/ Font https://da.wikipedia.org/wiki/helvetica 30
15 Kilder Hypertext Arial vs. Helvetica Ditlev Skanderby. A Practical Guide to Information Architecture PDF. 18th June 2010. https://www.fonts.com/content/learning/fyti/typefaces/arial-vs-helvetica 31