Projekt 5 - Porfolio Redesign

Projekt 5 - Porfolio Redesign 1 semester - Copenhagen Business School Business School. 1/20

Indholdsfortegnelse Projektbeskrivelse...side 3 Mindmap...side 4 Project Breakdown Structure...side 5 Work Breakdown Structure...side 6 GANTT-kort...side 7 Brugertest...side 8 Brugertest Resultater...side 9 Informationsarkitektur...side 10 Side Sketches...side 11 Sitemap...side 12 Wireframes...side 14 Visuel Design...side 17 HTML og CSS...side 19 Konklusion...side 20 2/20

Projektbeskrivelse Hvad er en Portfolio? Dette projekt er det afsluttende projekt for 1.semester. Projektet er et redesign af min nuværende portfolio, som blev udarbejdet i projekt 1. Med udgangspunkt i alt det jeg har lært i 1.semester, har jeg udarbejdet en hjemmeside, som skal fungere som en præsentationsportfolio, der indeholder alle mine projekter i de forskellige semestre samt mine læringsprocesser og kompetencer. Mit projekt indeholder mine beslutningsprocesser i forhold til informationsarkitektur, det visuelle udtryk, designvalg, designprincipper samt modeller og metoder jeg har lært i undervisningen. En Portfolio er en samling af projekter, som viser den studerendes anstrengelser, fremskridt og præsentationer inden for flere områder. En Portfolio indeholder også den studerendes valg af indhold, kriterier for valg samt den studerendes selvrefleksion af projekterne. En portfolio er samlet med henblik på at dokumentere den studerendes kompetencer. Hjemmesiden tager udgangspunkt i en brugertest af min hidtidige WordPress portfolio. Derudover er hjemmesiden håndkodet fra bunden med brug af HTML og CSS. Projektet indeholder også redesign af de øvrige projekter. 3/20

Mindmap Hvad er en mindmap? Mindmapping er et visuelt mønster af beslægtede idéer og tanker. Emnet som skal behandles skrives i midten af papiret. Hvorfor bruge en mindmap? Styken ved mindmapping udnyttes først, når idéer og tanker flyder frit, og vi undgår at vudere eller bedømme undervejs i tankeprocessen. Et mindmap kan ses som en illustration af en brainstormprocess, hvor assoxiationer og inpput udvikles løbende og gerne med mange deltagere. 4/20

Project Breakdown Structure Portfolio Hjemmeside Rapport Remakes billeder/ikoner WBS/PBS Game Design projekter GANTT-kort Infographic html/css Informationsarkitektur Website Design læring kontakt om mig kompentencer Brugertest Design valg Hvad er en Project breakdown structure? Project breakdown structure, også forkortet PBS, er en del af en produkt planlægning teknik. PBS giver en hierakisk struktur af alle de dele, der udgør projektet. Det er et skridt før WBS, men den har et identisk format. PBS er vigtig at have med i projektplanlægningen, da det giver en klar redegørelse for, hvad projektet præcis indeholder og skal levere. 5/20

Work Breakdown Structure Portfolio Planlægning Analyse og Design Website Rapport Aflever Projekt Mindmap Brugertest Sidestruktur Skrive Rapport 16 Januar kl 12 GANTT-kort Informationsarkitektur Projekter WBS Sketches Kodning Visuel design Remakes Grafisk Design Hvad er en Work Down Structure? Work Down Structure, også forkortet WBS, er en metode inden for projektledelse, som hjælper med at strukturer et projekt. I en WBS opdeler man et projekt i mindre dele og opgaver, og dette gentager man indtil man har organiserede alt arbejdet i projektet. 6/20

GANTT-KORT Hvad er et GANTT-kort? GANTT-kort er en metode til at strukturer et projekts tidsplan. Det er et kort over projektets datoer fra start til sluttipspunkt for alle opgaverne i projektet. Kortet viser også afhængigheden og rækkefølgen mellem opgaverne. Ved hjælp af denne metode får man et nemmere overblik over et projekt. Er Tidsplanen holdt? Det har været meget nyttigt, at have et GANTT-kort ved siden. Det har gjort arbejdsperioden mere overskuelig. Tidsplanen har i store træk udfoldet sig som planlagt. Men nogle af perioderne har overskygget hianden. F.eks. selve produktionen af websitet med html og css, har været i gang under hele projektet, da der tiltider er kommet er nye idéer undervejs eller ting, der skulle rettes. 7/20

Brugertest Hvad er en brugertest? En brugertest tester brugerens oplevelse af en hjemmeside. Den kan bruges til at finde ud af og forstå, hvor brugerne oplever problemer, når websitet bruges, men den kan også bruges til at fremvise over for andre, hvor disse probelmer er. Hvordan foregår testen? Testen forgår således, at en testperson sidder foran en computer sammen med en projektleder, en obsevatør og en referent. Testlederen stiller således tespersonen en række opgaver. Referentens opgave er at observere, hvordan testpersonen udfører opgaven, er testpersonen besværet eller udfører han nemt opgaven. Hvad er usability? Usability viser noget om, hvor brugbart en hjemmeside er. Herunder hvor effektivt og funktionelt den er. Er hjemmesiden nem og overskuelig? Kan man finde relevant information præcist og hurtigt? Når man tænker Usability, er det også vigtigt at kigge på, hvem hjemmesiden henvender sig til. Der findes forskelle testmetoder, som ganstertest, kortsortering samt brugertest. Spørgesmål til testpersonenerne: 1. Find kontaktindformationerne 2. Find projekt 2 s website link. 3. Find projekt 3 på 3 semester. 4. Hvem står bag portfolioen? 5. Kan man læse om læring for projekt 3 i 1 semster. Testperson 1: 23 årig, multimediestudernede. Testperson 2: 20årig, pædagogstuderende. 8/20

Brugertest Resultater Siden Læring, som testpersonerne fandt alt for lang og komliceret. Resultater: Begge testpersoner fandt ubesværet kontaktinformationer på siden. Det samme med spørgesmål nr. 4 omkring, hvem der stod bag portfolion. De syntes begge at det var godt illustreret på forsiden med billede og navn, og at det gav et godt indtryk, at man viderefrem havde et visuelt indblik i, hvordan personen så ud. Opgaven nr. 2 var delvis besværlig. Begge testpersoner fandt linket efter noget tid, men især testperson 2 havde lidt svært ved det. Testperson 2 nævnte, at det godt kunne være vist lidt mere tydeligt. Opgave nr. 3 var et trick spørgesmål, da der ikke findes noget projekt 3 på 3 semester, da jeg kun går på 1 semester. De blev begge lidt forvirret, og den multimediestuderende mente, at det havde være godt, at indikere på en eller anden måde, at man ikke var nået til 2, 3 og 4 semester endnu. Til opgave 5: Begge testpersoner fandt læringssiden meget lang, kompliceret og syntes, at det var en forvirrende side. Testperson 2 sagde, at hun syntes det var bedre, hvis man direkte kunne læse om læringen inden under projekterne, da det ville give en bedre sammenhæng. 9/20

Informationsarkitektur Hvad er informationsarkitektur? Informationsarkitektur handler om, hvordan indholdet på en hjemmeside organiseres. Informationsarkitektur handler primært om struktur, flow og de grundlæggende spørgsmål med hensyn til placering af diverse ting på hjemmesiden. Når man taler om informationsarkitektur har man meget fokus på brugernes behov. Man arbejder hen imod at bygge informationsstruktur, der er nemme for brugeren at bruge og forstå. Sketches: Sketches er det første step i, at finde ud af, hvorda hjemmesiden skal struktures. Sitemap: En sitemap er en model over hjemmesidens struktur. Her finder man ud af, hvordan alle hjemmesidens sider bliver koblet til hianden. Det er i dette step, at man bliver klog på, hvordan siden struktures bedst muligt i forhold til brugerene, så brugerne nemt kan finde rundt på hjemmesiden. Wireframes: Wireframes er en senere udvikling af ens tidligere sketches. Her bliver vi klogere på, hvordan hjemmesiden helt præcis skal struktures. Wireframes er ligesom sketches, uden nogen visuelle indtryk, det handler altså kun om, hvordan hjemmesiden skal struktures. 10/20

Side sketches 11/20

Sitemap Goldilocks problem: Nedestående figur, viser goldilocks problem. Til højre ses en hjemmsidestruktur, hvor hovedmenuen bliver alt for lang. Til venstre ses en hjemmesidestruktur, som bliver alt for kompliceret, hvilket gør brugerne forvirrede. Den ene struktur er for enkel og dermed alt for lang og ikke overskuelig. Den anden er for kompliceret og indviklet. Mit valg af hjemmesidestruktur: Jeg har brugt min viden om informationsarkitektur, hvor jeg har fokuseret på goldilocks problem, da jeg skulle opbygge min hjemmeside struktur. Jeg har derfor valgt en løsning, som jeg syntes er en mellemting, af de to hjemmesidestrukture som ikke fungere. Jeg har derfor taget de ting fra de to modeller, som fungure, og brugt i min struktur. Jeg har valgt at lave en menu med 4 undersider, hvoraf en af undersiderne har 4 undersider. Ved ikke at sætte alle mine sider i hovedmenuen, undgår jeg den enkle menu til venstre, som bliver alt for lang. Men ved kun at have undersider på en af mine hovedsider, undgår jeg en lang og kompliceret struktur, hvor det bliver svært for brugeren at finde de søgte sider. 12/20

Sitemap Dette er min portfolios hjemmeside struktur: Forside Forside Projekter Designeren bag Kontakt Projekt 1 Projekt 2 Projekt 3 Projekt 4 Projekt 5 13/20

Wireframes Forside: Projekter: 14/20

Wireframes Designeren bag: Kontakt: 15/20

Wireframes Alle projekter: 16/20

Visuel Design Hvad er visuel design: Visuel design er det visuelle udtryk på en hjemmeside. Herunder tænkes på farvevalg, typografi, layout samt stemningen på hjemmesiden. HELVETICA Typografi: Typhografi er en vigtig detalje i det visuelle design. Under typografi høre skrifttype, skriftstrørrelse, linjeafstand samt linjelængde. Jeg har brugt forskellige skriftstørrelse på min hjemmeside. Hovedsaligt har jeg benyttet 12pkt i sammenhængene skrift, hvor der er blevet brugt større skrifstørrelser til overskrifterne. I min rapport har jeg benyttet 13pkt, og 26pkt til overskrifterne. Jeg har også benyttet mig af linjeafstand på både hjemmesiden og i rapporten, for at gøre det lettere for brugerne at læse teksten. Helvetica: Jeg har valgt at bruge fonten helvetica, som er en sans-serif font, igennem hele mit projekt, både her i rapporten og på hjemmesiden. Jeg har valgt denne skrift fordi den er kendt for at være en enkel og læsbar font, hvilket jeg fant passende til mit portfolio projekt. Da det er vigtigt at brugerne let og ubesværet kan læse det, som der står på hjemmsiden. Derudover er helvetica en meget kendt font, hvilket gør, at de fleste browers og computer burde kunne vise denne font-type. 17/20

Visuel Design Farver: Farver er en stor del af det visuelle udtryk på en hjemmeside. Det er vigtigt at finde nogle farver, der spiller godt sammen og kompensere hinanden. Derudover er det godt, at have evt. en eller flere farver, der skiller sig lidt ud i ens design, til at fremhæve de vigtige detajler. I mit projekt har jeg holdt mig til de lyse farver, hvid og grå, og som den farve der skulle give resten af designet et skub, har jeg valg turkis. Farve kombination for min side: 1 3 2 #FFFFFF #707070 #000000 #34b4a3 # 2A9083 Hvid: Jeg har valg farven hvid, som min base farve, fordi farven i sig selv er meget enkel. Derudover symbolisere den ro og præcistion. Farven giver god og behagelig baggrund at kigge på. Grå: Jeg har valgt farven grå, som min overvejende farve i gennem hjemmesiden. Det har jeg, fordi den symblisere intelligens, værdighed, modenhed, solidaritet og funktionalitet. Alle egenskaber jeg syntes passer godt i sammenhængen med et portfolio projekt. Turkis: Jeg har valgt farven turkis til, at være den farve, som highlighter de vigtige ting i mit projekt. Som en kombination af farven blå og en lille smule gul, passer turkis på farveskalaen mellem grøn og blå. Farven turkis udstråler fred, ro og stilhed gennem den blå farve, balance og vækst fra den grønne farve, med en opløftende energi fra farven gul. 18/20

HTML & CSS HTML5: HyperText Markup Language er et opmærkningssprog, der primært har til formål at strukturere indholdet på en hjemmeside og få tekst og billeder til at virke som links til andre html-sider. Min hjemmeside indeholder 9 html-dokumenter. CSS: Cascading Style Sheets er et sprog der bruges til at style HTML-dokumenter. CSS bruges til at styre en hjemmesidens udseende og opbygning. Hver html side er koblet sammen med reset.css. Derudover har alle html hovedsiderne, altså index.html, projekter.html, ommig.html og kontakt. html, sit eget css dokument tilknyttet med samme navn. De 5 projekter, har så samme css dokument tilknyttet med navnet alleprojekter.css. HTML-dokumenter: index.html projekter.html projekt1.html projekt2.html projekt3.html projekt4.html projekt5.html ommig.html kontakt.html CSS-dokumenter reset.css index.css projekter.css alleprojekter.css ommig.css kontakt.css Mapper: images animate 19/20

Konklusion Opgaven lød på at lave et redesign af min portfolio i projekt 1. Jeg har opbygget min nye portfolio med metoder, begreber og programmer, som jeg har lært at benytte igennem 1. semester på Copenhagen Business Academy. Jeg har benyttet mig af alle de kompentencer jeg i løbet af semestret har tilegnet mig i de forskellige fag, hvilket både kommer til udtryk på min portfolios hjemmeside samt i denne rapport. Jeg har fra faget virksomheden, lært om diverse projektforberede metoder, som mindmap, PBS, WBS og GANTT-kort, som jeg alle har benyttet mig af i starten af mit projekt. De har hjulpet mig igennem hele min arbejdsprocess, og været et godt redskab at have ved siden. Jeg har fra faget kommunikation, lært om informationsarkitektur og usability, som jeg også har brugt i mit projekt. Begge ting har jeg brugt til, at designe og strukturer min hjemmeside brugervenlig. Jeg har fra faget Design og Visulasering lært om visul design, som jeg har brugt i min desigprocess til at finde blandt andet ud af, hvilke farve og typografi jeg skulle vælge til min portfolio. Derudover har jeg opbygget kompentencer inden for en masse programmer i faget, som jeg også har brugt i mit projekt: InDesign, Illustrator, Animate samt Photoshop. Til sidst har jeg i faget Interaktions Development lært at bruge koderne HTML5, CSS samt en smule Javascript i programmet Edge Code. Jeg har brugt HTML5 og CSS til at opbygge min hjemmeside. 20/20