Project 5: Portfolio Remake

Transkript

1 Project 5: Portfolio Remake Art is a tree of life. William Blake December 2014 Januar semester, MulA, Multimediedesigner uddannelse Copenhagen Business Academy, Lyngby annastacy.k@gmail.com

2 Indholdsfortegnelse 1. Foreberedelse Opgavens analyse og formulering Brugertest af den gamle hjemmeside Inspiration Moodboard Projektplanlægning Design Brief Website Content Map (PBS) WBS Gantt Chart Risk Mangement Informationsarkitektur Content struktur Content skrivning Website hierarki Grid og wireframes Skitser af siderne Mock-ups Visuel identitet Koncept udvikling... Fejl! Bogmærke er ikke defineret Koncept beskrivelse... Fejl! Bogmærke er ikke defineret Symbollism Farvevalg Skrifttype Logo og forside billede Ikoner og andre visuelle elementer Kodning HTML/CSS Jquery Responsive design Content uploading Testing og redigering Validation og debugging Brugertest Tekst redigering Tilføjning af sidste elementer Rapport skrivning Konklusion Referencer Vedheftede filer... 4

3 1. Forberedelse Jeg begyndte at arbejde på dette projekt ved at undersøge alle mulige emner: andre studerendes hjemmesider fra tidligere år, web-agencies hjemmesider og andre spændende designerwebsites. Jeg har også gennemgået nogle undervisningsmaterialer på Fronter og kigget igennem studiebøgerne for at danne et overblik over hvad jeg skulle skrive på min ny hjemmeside og hvordan den burde se ud. Men først og fremmest skulle jeg definere opgaven selv, ikke kun følge lærernes krav, men også mine personlige mål med den Opgavens analyse og formulering I opgave beskrivelsen, som vi fik fra lærerne, står der at formålet med porteføljen er at præsentere og dokumentere vores faglige niveau og vise vores faglige udvikling samt gøre os bevidst om, hvad vi har arbejdet med, og hvad vi har lært. Således består opgaven i at redesigne den nuværende portefølje (projekt 1) at opdatere porteføljens indhold Som jeg forstod det, skulle man gennem redesign af websitet demonstrere sin tilegnede viden inden for de 4 læringsområder som vi fik undervisning i gennem 1. semester. De områder er: 1. Kommunikation 2. Design og visualisering 3. Interaktion 4. Virksomhed Krav til porteføljens indhold var at: dokumentere udviklingsprocessen under design af porteføljen: projektplanlægning, informationsarkitektur, designskitser, wireframes, mockups etc.; inkludere dokumentation af tidligere projekter, som linker til de oprindelige løsninger, projektbeskrivelser og rapporter; inkludere remakes af tidligere projekter (i betragtning af lærernes kommentarer og egne forbedringsideer); reflektere over sin læring på en gennemskuelig måde for at vise sin udvikling. Spørgsmål til svar: Hvad har jeg lært under forløbet? Hvordan hænger det sammen med mit forhåndskendskab til emnet og denne opgavetype? Hvad forventede jeg at lære? Hvad har jeg mere brug for at lære? Hvad vil jeg foretage mig for at komme til at lære dette? ANASTASIA KELLER 0

4 Udover ovenstående krav har jeg også sat mine egne mål med opgaven: 1) at vise hvad jeg kan lave ved hjælp af mine tidligere kompetencer (projektledelse, kommunikationsplanlægning, konceptudvikling, tegning), 2) at anvende mine nye tilegnede evner og viden (kodning, designteori) og 3) at øve mig i de kundskaber (fx visse programmer), som jeg ikke nåede at udvikle tilstrækkeligt i løbet af semestret Brugertest af den gamle hjemmeside En af opgavens krav var også at lave en brugertest af den gamle hjemmeside før man begynder at redesigne. Tilsyneladende var formålet at finde fejl som skal rettes og at evaluere websitets udseende i forhold til brugbarhed og designprincipperne som vi lærte senere i semestret. Jeg har lavet gangstertest og bruger evaluering på Forsiden og Projekter-siden. På Projekter-siden nedunder er der et problem med navigation til undersider, hvor Header ikke svarer til undersidens navn. Der er også forbedringsanbefalinger til Forsiden nedunder.

5

6 1.3. Inspiration Jeg har kigget gennem hundredevis af hjemmesider under hele projektforløbet - først for at få overblik over det jeg skal lave og så senere for at lede efter designideer og en rigtig stemning. I begyndelsen var det interessant at se hjemmesider af andre studerende fra forrige år. Jeg blev især imponeret af en hjemmeside af Olena Mikhanosha i forhold til dens struktur og grundighed. Jeg fik også inspiration fra som udstiller de bedste designer- og web-agencies hjemmesider. Der fandt jeg en hjemmeside, som udstrålede den helt rigtige stemning, jeg ville have på min egen hjemmeside. I stedet for menu på dens forside er der en tegning af et kort, hvor side-titler virker som stednavne. Jeg synes den er meget kreativ og stadig funktionel. En fragment af forsiden på

7 Moodboard Når vi lærte om designprocessen, blev vi introduceret til moodboards - en metode, hvor man indsamler og sammensætter inspirerende billeder eller andre objekter omkring et projektet-relaterede Moodboard emner. Mange designere bruger denne metode. Det gjorde jeg også

8 Oprindeligt var min porteføljes designkoncept bygget op omkring et billede af et æbletræ (3-identitets træ). Dette billede ville jeg beholde på den nye hjemmeside, men den skal selvfølgelig udarbejdes videre. Dette moodboard viser forskellige slags billeder af æbletræer. Nogle af dem valgte jeg fordi de kunne hjælpe mig med at tegne træelementer, såsom æbler og blomster, rigtigt. Nogle andre billeder viser bare en stemning, som jeg gerne ville formidle gennem visuelle elementer på min hjemmeside. Oprindeligt tænkte jeg på at inkludere et animeret dyr, som et egern eller en kanin på forsiden. Men jeg droppede ideen, fordi den var for kompliceret i forhold til konceptet og dens implementering. 2. Projektplanlægning I andet trin af projektforløbet nedbryder jeg opgaven i mindre dele og udarbejder en plan over hvordan og hvornår jeg skal implementere dem. For at forstå opgaven endnu bedre skriver jeg først et designbrief, som er en kort beskrivelse af projektets omfang, målgruppe, formål og nogle andre formalia. Jeg har allerede defineret projektets krav og mål, både eksterne og interne, i sektionen 1.1 Opgavens analyse og formulering. I designbriefet skriver jeg også om projektets formål, men mere specifikt Design Brief I design briefet ville jeg give svar på nogle af spørgsmålene fra studiebogen 29 spørgsmål. En moderne retorik til planlægning af kommunikation 1. De spørgsmål er almindelige når man vil lave et design, hvis formål er at kommunikere noget til en gruppe af modtager, fx en reklame eller pr kampagne. Ved dette her projekt promoverer jeg mig selv, som en dygtig studerende (forhåbentlig) og som en god designer i fremtiden, samt som et interessant og kreativt menneske. Jeg valgte kun at svare på få basale spørgsmål: Hvem? Laver Hvad? Til Hvem? Vil sige hvad? Til hvilken effekt? 1 29 spørgsmål. En modern ritorik til planlægning af kommunikation af Jan Krag Jacobsen, 1. semester, multimediedesigner uddannelse ANASTASIA KELLER 0

9 Hvem er afsenderen? Jeg, som er en studerende på multimediedesigner uddannelse på CPH Business, samt en projektleder og kunstner. Hvad er produktet? Primær definition: Produktet er et website som læringsprojekt på multimediedesigneruddannelsen. Sekundær definition: En prototype af en designerportefølje, som jeg løbende vil udarbejde og bruge i fremtiden som min personlig profil til arbejdsgivere eller evt. kunder (hvis jeg bliver en selvstændig designer). Hvem er målgruppen? Primær målgruppe er lærerne, som vurderer mine kundskaber og den viden jeg har tilegnet mig under 1. semester. I fremtiden, når jeg begynder at søge arbejde, ville arbejdsgivere bliver den primære målgruppe. På det tidspunkt ville jeg justere hjemmesiden til det formål. Sekundær målgruppe er andre interesserede og studerende på CPH Business. Hvad vil jeg sige? Ud over lærernes krav til indhold på min hjemmeside, der var nævnt tidligere i sektionen 1.1 Opgavens analyse og formulering (projektrapporter, links til tidligere udarbejdede løsninger og deres remakes, og beskrivelse af læringsprocessen), ville jeg også demonstrere andre kundskaber, som jeg havde udviklet tidligere. Jeg ville også vise min personlighed gennem designet af hjemmesiden. Jeg tror det er lige så vigtigt at kommunikere klart om mine personlige evner og tilbøjeligheder, som om mine professionelle kundskaber. Hvad vil jeg nå med det? Som jeg har defineret før, er det primære formål med opgaven at demonstrere sine kundskaber til lærerne og beskrive læringsprocessen. Derfor er den primære målgruppe er lærerne. Desuden fungerer porteføljen som et præsentationsmedium til 1. semesters eksamen. Mit formål er således at præsentere mine medlærte kundskaber bedst muligt og at få dermed en god karakter Website Content Map (PBS) I forberedelsesfasen har jeg indsamlet nogle filer og billeder relaterede til tidligere projekter, som jeg ville bruge i porteføljen. Men da omfanget over alle hjemmesidens elementer var så stort, besluttede jeg at sortere dem i ANASTASIA KELLER 0

10 en slags Content Map (Indholdskort), for at få bedre overblik over hvilke sektioner ville der være brug for på hjemmesiden. Under lektionerne om projektplanlægning hos Frederik lærte vi om Product Break System (PBS), som er en sorterings- grupperingsmetode omkring alle produktelementer med henblik på at identificere de opgaver, man Tekst Billeder skal udføre i produktionsfasen. I begyndelsen var det klart for mig at indholdet på fleste hjemmesider falder i 3 hoved kategorier: tekstuelle, visuelle og funktionelle. Website Content Map nedunder viser alle elementer inden for hver kategori. Funktionelle elementer Projekter (1,2,3,4,5): - opgave beskrivelse - rapport (link) - remake (link) - website (link) Læring: - omkring hver projekt (1-5) - inden for4 læringsområder - beskrivelse af kompetencer Om mig: - tekst om mig - CV Vejledende beskrivelser på sider - Kontakt oplysninger Forsidens billede: træ Logo Portrait billede til siden Om mig Identitets ikoner: - æbler, - blade, - blomster - evaluerings grene Kompetence-ikoner: - Il, Ph, Id, Ea, Html, Css, Jq - kom-on, projekt led., design, teamwork, koncept udv., osv. Andre visuelle elementer: - design knapper - fil tags (PDF) - socialle media tags (Fb, lign.) Knapper - menu knapper - link knapper (PDF) - links Kontakt formular Gallery slides

11 2.3. Work Breakdown System (WBS) Efter jeg fik styr på indholdet, lavede jeg WBS. Opgaverne, som evt. kan nedprioriteres, er markeret i lyseblå. Portfolio Remake: Projektplanlægning Foreberedelse Projektplanlægning Informationsarkitektur Visuel identitet Kodning Testing og redigering Rapport Opgave analyse og formulering Design Brief Content skrivning og struktur Koncept udvikling HTML sider Validation Rapport skrivning Content indsamling PBS-WBS Website hierarki Logo og forside billede design CSS styling Brugertest Tilføj rapporten til websitet Brugertest af den gamle portfolio Gantt Chart Grid, Wireframes Farve- og fontvalg JQuery og animationer Debugging Aflevering Inspiration fra andre sider Risk Management Skitser af siderne Ikoner og andre visuelle elementer Content uploading Tekst redigering Moodboard Evt. mock-ups Responsive design Tilføjning af sidste elementer - - Projekt-trin - Hoved opgaver - Ekstra opgaver (kan undgås, hvis ikke der nok tid

12 2.4. Gantt-diagram Så udarbejdede jeg et Gannt-diagram, som viser opgavernes rækkefølge og varighed. Men jeg har ikke fulgt det præcist, da der stadig er en masse opgave, som jeg har ikke nok erfaring i, især i design og kodning.

13 2.5. Risk Management Jeg var usikker på hvor meget tid nogle af opgaverne ville tage, primært fordi jeg gjorde nogle ting for første gang. Derfor lavede jeg Plan A og Plan B. I WBS skemaet ovenfor er alle opgaverne markeret enten i lysegrøn, som betyder høj-prioriteret eller i lyseblå, som betyder nedprioriteret. Plan A er den oprindelige plan, som kan ses i WBS. Plan B består af at jeg skal droppe alle eller nogle af opgaverne markeret i blå hvis jeg kommer til at mangle tid. Risk Management er selv markeret som en 2. prioritet i WBS, men jeg syntes det var vigtigt at nævne hvad jeg mener med sådan en farve-kode. Senere i forløbet har jeg besluttet at droppe Mockups og Brugertest pga. sygdom. Den slags uventede tilfælde skal man også forudse i sin plan. Til gengæld har jeg reserveret noget buffertid i den sidste uge af projektforløbet, hvor der kun er Testing og Content uploading tilbage. 3. Informations-Arkitektur 3.1. Content struktur Content skrivning 3.2. Website hierarki

14 Website hierarki Anastasia Keller Creative Portfolio Forside Projekter Læring Kunst Om mig Kontakt Overblik Overblik Kunst projekter Om mig Semester 1 Semester 1 Udstillinger CV Semester 2 Semester 2 Galleri Semester 3 Semester 3 Semester 4 Semester 4

15 3.3. Grid og wireframes 3.4. Skitser af siderne 3.5. Mock-ups 4. Visuel identitet 4.1. Brug af gammel koncept / videre udvikling Derefter udarbejdede jeg et 3-identitets træ, som viser 3 retninger i min personlig udvikling og baggrund: erfaring som projekt leder og kommunikator (baseret på min første uddannelse og arbejdserfaring), som kunstner (baseret på min hobby) og som designer (som jeg drømmer om at blive). Jeg tegnede træet med 3 grupper grene: 1. med blomster der symboliserer min kunst, 2. med blade der symboliserer min uddannelse og professionel baggrund og 3. med æbler der hentyder på resultater fra samlede tidligere erfaringer, nemlig designprojekter og udvikling i skolen. Ny koncept: træ som navigationsobjekt: 3 områder (grene): 1) med blade kompetencer, 2) med æbler projekter (frugt baseret på tidligere arbejde), 3) blomster min kunst og personlige projekter. Jeg besluttede at bruge de elementer mere i visuel design af min website. Nemlig vil jeg lave ikoner i form af blomster/blade/æbler på tilsvarende kunst/kompetencer/projelter sider. Min portrait med skilt under ville stå for underside Om mig. 5. Logo Jeg har besluttet at ændre logoet, da den gamle præsentere en lidt anderledes koncept træ med regnbue. Det tænkte jeg ifl. Simlicitets design pårincip ville være for meget. Jeg vil lave min website enkelt, men ellegant, så vil jeg beholde 3-identitets træ konceptet også til logoet. Men til gengæld skal det være enklere end hoved billede, da den skal fungere i forskellige størrelse, med og uden farver. Så skal det være en sort silhuet af et træ med 3 gren-områder med meget enkelt markering af blade, blomster og æbler. Jeg vil beholde rødder dog med mine intials. Mit navn skal skrives med en fllot kaligrafisk skrift i rødt med ord Kreativ portfolio i sort og en simplere skrift. ANASTASIA KELLER 2

16 Symbollism Farvevalg Skrifttype 5.2. Logo og forside billede 5.3. Ikoner og andre visuelle elementer 6. Kodning 6.1. HTML/CSS 6.2. Jquery 6.3. Responsive design 6.4. Content uploading 7. Testing og redigering 7.1. Validation og debugging 7.2. Brugertest 7.3. Tekst redigering ANASTASIA KELLER 3

17 7.4. Tilføjning af sidste elementer 8. Rapport skrivning 9. Konklusion 10. Referencer 11. Vedhæftede filer Læring Jeg mener at omfanget af undervisningsmaterialet under 1. semester var for stort til at man kunne øve sig nok i hvert program/metode vi blev introduceret til, især i betragtning af at vi var i gang med gruppeprojekter hele tiden. Jeg tror problemet var at i gruppearbejde udfylder hver medlem den rolle man er mest fortrolig med og derfor udvikler man ikke de kompetencer man har brug for at blive bedre i. For mig skete det sådan at jeg var nødt til at stå for projektplanlægning og -koordinering som hovedopgave i næsten alle projekter. Det var heldigt at jeg også nåede at udvikle mine kompetencer inden for Illustrator og Photoshop, som jeg kun havde lidt viden om i forvejen. Og det var ærgerligt at jeg fik ganske lille mulighed for at udvikle mine kodningsevner, som var meget nul før 1. semester. Der var nemlig altid nogen i gruppe som var god til det og naturligt ville tage kodeopgaverne. Når man kun har 1 eller 2 uge til at lave et projekt, blive man nødt til at fordele opgaverne rationelt, sådan at hver gør hvad man er bedst til. Jeg kunne godt tænke mig en bedre opgavefordeling i fremtiden, og at man kunne få mere tid til gennem gruppeprojekter at reflektere over resultaterne og gennemgå de dele, som man er gået glip af under projektforløbene. Jeg manglede også feedback fra nogle af lærerne omkring de projekter vi har lavet. Fx ville det være fedt, hvis vi fik mulighed for at se og diskutere hindandens 1. projekts websites. Det er også nyttigt at høre personligt fra lærerne om vores projekter og at få mulighed for at stille spørgsmål, som vi fik i det 3. projekt hos Frederik. ANASTASIA KELLER 4