DOKUMENTATION AF EKSAMENS PROJEKT 2015

DOKUMENTATION AF EKSAMENS PROJEKT 2015 KATHRINE AMALIE RUSSELL HARDER CPH BUSINESS ACADEMY MUL-B 1

Indledning Til vores eksamens projekt fik vi til opgave at redesigne vores Wordpress portfolio som var vores første projekt vi lavede i september. Vi skulle kode hele hjemmesiden selv uden brug af content managment systemer og CSS frameworks. Udover kodningen skal vi også skrive en dokumentation hvor vi skal begrunde vores valg i forhold til det visuelle udtryk med henblik på farver, stemning, layout og typografi. Det første jeg vil komme ind på er mit forarbejde, hvor jeg har lavet PBS, WBS, gantt kort, brainstorm og moodboard. Herefter vil jeg beskrive mine designvalg. Første fase Programvalg Jeg har brugt Adobe programmer gennem hele processen, da det er de programmer som vi bruger på uddannelsen. Jeg har især brugt Illustrator til at lave diverse skitser, modeller og inspirationsteknikker. Det har også gjort at jeg har fået et større kendskab til Illustrator. Det første jeg gik i gang med var min PBS, WBS og mit Gantt kort da det kunne skabe et overblik over hvad der skulle laves og hvor lang tid hver ting cirka skulle tage. 2

PBS PBS eller product breakdown structure er en del af planlægningen hvor man analysere og formidler projektets slutresultat. En PBS er dannet hierarkisk og skematisk hvilket skaber et overskueligt ide over hvad projektet til sidst skal resultere i. Man skal altså bryde konceptet af projektet ned til små bider, så man kan se hvad der skal være indenfor hvert eneste element. I min PBS har jeg inddelt den i min menus titler, og derefter brudt hver eneste menu titel ned så jeg kan se hvert eneste objekt som er en del af de forskellige titler. Da det er noget af det første man laver kan der undervejs komme ændringer, da man revurdere de første valg man lavede og ser om man kan optimere den originale idé. Man kan se at jeg har ændret min forside til at være mere simpel, ved at der står velkommen til og så et billede jeg har lavet i Illustrator. At gøre forsiden mere simpel i stedet for at have en masse tekst gør det mere klart at det er forsiden og ikke underside. Jeg har også valgt ikke at skrive om mine forventninger under about, da jeg svare på spørgsmål indenunder learning hvor jeg kommer ind på hvad jeg havde forventet. 3

WBS Det næste som jeg lavede efter PBS var WBS som er en forkortelse for work breakdown structure. WBS fokusere på at nedbryde de arbejdsopgaver der skal laves til de færdige resultat, og derved kan man danne sig et overblik over hvor mange arbejdsopgaver der skal ordnes. Ligesom PBS er en WBS opbygget med en hierarkisk opsætning. I vores projekt med infographics fik vi også besked på at lave en WBS, fordi der var tre faser i projektet, valgte vi at opdele vores WBS i de tre faser. Det er her jeg havde ideen fra at opdele min WBS i tre faser; first, second og third phase. Faserne går fra det praktiske og designmæssige til det praktiske med kodning til den sidste fase som indeholder retning og opgaveskrivning. Det gode ved en PBS og WBS er at det skaber et overblik over hvad projektet skal ende med og hvor mange opgaver der skal laves før det er færdig. Det kan give en idé om hvor lang tid hver arbejdsopgave cirka skal tage. I gruppearbejde er det en god idé at bruge disse to metoder da man kan uddelegere arbejdsopgaver. 4

Gantt kort Efter at havde skabt mig et overblik over hvor mange arbejdsopgaver der var, kunne jeg lave mit Gantt kort. Et Gantt kort er en tidsplan man laver før man begynder på de forskellige opgaver, så man har en idé om hvor lang tid hver opgave burde tage. Kortet er opbygget som et søjlediagram hvor Y aksen er opgaverne der står i hierarkisk orden og hen af X aksen illustreres perioden, som kan være minutter, timer, dage og måneder alt afhængig af hvor stort projektet er og hvor mange personer man er om at løse opgaverne 1. 1 Jeg vil også oploade en zip fil så I kan se billederne bedre. 5

Brainstorm En brainstorm er en arbejdsmetode man kan bruge når man har brug for inspiration og ideer. Nu er der mange muligheder for at skabe en brainstorm, man kan bruge papir og blyant, men der er også skabt en masse programmer som er ideelt til brainstorming. Jeg valgte at mit forarbejde skulle laves i Adobes program Illustrator, da der er en god mulighed for at udforske farver og typografier hvilket var ideelt for hvordan jeg havde tænkt min brainstorm skulle se ud. Jeg ville gerne have at jeg kunne eksperimentere med typefaces, fonts, farver og centrale begreber som skulle være essentielt for min portfolio. 6

Moodboard I forlængelse af min brainstorm ville jeg lave et moodboard som skulle med billeder illustrere og inspirere mig til min kommende hjemmeside. Et moodboard er en collage med billeder og/eller tekst som skal visualisere ens ideer og hensigt med hvordan slutresultatet ender med. Man kan sige det er en videreudvikling af brainstorming ved at man har en mere fast idé om hvad man ønsker og derefter viser det med billeder. Det man kan se på mit moodboard er neutrale farver som grå, hvid og sort, men så er der også nogle kontrast farver som jeg gerne ville bruge for at få lidt farve. Billederne har jeg fundet på google, boligblogs og fra den populære hjemmeside Pinterest. 7

Wireframes Wireframes og mockups er to former for skitser som man laver for at få en ide om hvordan en hjemmeside skal se ud. Forskellen på en wireframe og et mockup er detaljerne, en wireframe er den første skitse man laver hvor man laver nogle tomme kasser uden videre indhold, man bruger så man kan forestille sig hvor ting ville se godt ud henne. Størrelsen på kasserne er underordnet det er mere placering der er relevant. 8

Mockups Mockup er mere specifikt her skal man videreføre sine ideer fra wireframe ved at give kasserne indhold. Man skal tage stilling til hvor man havde tænkt sig brødteksten, billeder, reklamesøjler eller menuen skulle være. I kasserne hvor teksten skal være ville man sætte mumletekst i så man får den helt rigtige følelse af hvordan det reelt kunne se ud. Herefter skal det kodes ind så det ligner det man havde i tankerne da man forberedte sig. Mine wireframes og mockups blev næsten som jeg havde tænkt mig, der er dog kommet lidt ændringer; min menu har lige nu ikke andet semester da jeg ikke fandt det relevant endnu, og ville derfor vente lidt med at lave det til andet semester starter. Jeg havde egentlig tænkt mig at baggrundsfarven skulle være den mørke som jeg har brugt gennem første fases forberedelser da jeg så ville have at brødtekst kassen skulle være hvid og derved skabe kontrast. Men da jeg prøvede at kode det fik hjemmesiden en meget trist og kedelig stemning, hvilket bestemt ikke 9

var meningen, på daværende tidspunkt var mit logo også sort og hvid. Udover det ville jeg gerne have at der kom en billedslider ved hvert projekt i stedet for tre billeder under hinanden i højre siden, grunden til dette var at mange af projekterne krævede at have flere billeder, så man fik den rigtige visuelle oplevelse af projektet. Menuen har jeg skrevet titlerne med forskellige skrifttyper så jeg kunne bestemme mig for hvilken typeface jeg skulle bruge, det er henholdsvis; Arial, Verdana og Century Gothic. 10

VISUELLE UDTRYK Farver Min hjemmeside er meget inspireret af den minimalistiske stil fra 1960 erne og19 70 erne, da jeg godt kan lide at alt er lige til og alt der er unødvendigt er skåret fra. Minimalisme var en kontrast til den abstrakte ekspressionisme i 1950 erne hvor kunsten var meget spontan og en overdrivelse af virkeligheden. Hvor minimalisme handler om at skære ind til benet af hvad der er nødvendigt. De typiske farver som kendetegner minimalismen er; sort, grå, hvid og blå, og de farver, var mit udgangspunkt da jeg skulle til at designe og fastsætte mig på en stemning og stil. Det første jeg lavede var mit logo, det første jeg lavede var helt simpelt med mine initialer; KH i en hvid farve på en sort baggrund. Jeg har ikke brugt en typeface da jeg ikke kunne finde en Sans Serif skrifttype der passede godt til, derfor lavede jeg mine egne initialer ved at bruge rectangle tool i Illustrator for at skabe de tynde streger. Da jeg fik sat det ind på min første hjemmeside som var sort, grå og hvid blev det hele meget kedeligt og der var ikke nogen ordentlig kontrast farve. Da min menus hover var en flot og støvet blå (#617F8A, 64%, 36%, 35%, 16%) valgte jeg at skabe en rød tråd gennem hjemmesiden med en blå farve. Da jeg skrev farvekoden fra min menus CSS ind i Illustrator blev farven ikke helt den samme. Efter at havde eksperimenteret lidt, fandt jeg en farve som mindede om hoveren, men bare med mere cyan i, og mindre magenta, yellow og key/sort (#2989a3, CMYK: 78%, 28%, 27%, 7%), hvilket jeg egentlig foretrak da det stadig ville holde 11

den blå tråd igennem hjemmesiden, men også skabe variation med de to forskellige nuancer af den blå farve. Jeg har valgt at lave et barometer som skulle illustrere mine skills henholdsvis under projekter hvor man kan se hvordan jeg har udviklet mig fra projekt til projekt, og derefter lavet et overordnet barometer der viser hvordan jeg bedømmer mig selv i en helhed. Jeg har valgt at tage logoerne fra hvert program, som jeg har brugt i projekterne og som jeg normalt bruger i undervisningen. Efter at havde fundet logoerne skulle barometret være i den samme farve så man kunne associere logo og barometer med hinanden. Jeg fandt farvekoderne inde på Adobes hjemmeside under hvert program og Edges kode inde på en Adobe s blogspot (Photoshop:#3dc3fb, #121059 http://www.adobe.com/dk/products/photoshop.html Illustrator:#ff731b # 84411c http://www.adobe.com/dk/products/illustrator.html Edge code: #57d8c0 # 1dce9b http://blogs.adobe.com/edgecode/) Til Wordpress valgte jeg at lave et logo selv så det passede til de andre logoer, det er i en blå farver som minder om Photoshops logofarver bare lidt lysere baggrundsfarve, og lidt mørkere farve på den forreste farve (#14a7db #0000ff). 12

Som sagt er alle mine forberedende modeller og teknikker lavet i illustrator, for at holde den minimalistiske stil som jeg havde bestemt mig for, valgte jeg at farverne skulle gå igen ved de forskellige dokumenter. Jeg har fx brugt to forskellige grå farver på min WBS (#9e9d9d, #c6c4c4), baggrundsfarven er mørkere grå så der bliver skabt lidt farvedybde og i det hele taget dybde på dokumentet. Ellers har jeg brugt sort til teksten og hvid til titlen (WBS work breakdown structure) for at det stod en smule frem. På min PBS har jeg kun brugt den mørke grå farve, sort og hvid, da der ikke var behov for den samme opstilling som ved WBSen. Til forsiden på kathrineharder.com valgte jeg at lave et grafisk billede som skulle være lidt eyecatching. Farverne jeg har brugt er atypiske for min minimalistiske stil jeg ellers har været inspireret af. Jeg ville gerne have noget der var lidt anderledes end hvad man ellers kommer til at se på siden. Jeg har brugt farverne som man kan se oppe på mit moodboard, det er nogle lyse pastelfarver som jeg synes passer godt sammen og komplimentere hinanden(#999999,#ebcfc4, #e9ccb1, #c4bdac #f4eee1). 13

Typografi Der er nogle centrale begreber man bruger når man snakker om typografi. Typeface er også kendt som font family eller skrifttype, det er alle de variationer der er for hvordan din tekst skal designes. Indenunder typeface er der fem forskellige slags; Serif, Sans Serif, Monospace, Display og Dinbats. De to man typisk bruger er Serif og Sans Serif, de betyder helt enkelt at der enten er fødder /grafiske tilføjelser på bogstaverne eller om der ikke er. På fransk betyder sans uden det vil sige når en skrifttype er Sans Serif vil der ikke være fødder på. Efter man har valgt en typeface kan man vælge en font. En font er de variationer af typefacen, dvs. man kan vælge om teksten skal være; Bold/fed, Italic/kursiv eller regular. Jeg har valgt at bruge to forskellige skrifttyper på min hjemmeside, det er henholdsvis; Arial og en downloadet font fra Googlefont der hedder Oswald. Jeg valgte at bruge Arial af to grunde, for det første ville jeg gerne have en skrifttype som var Sans Serif og som var god at læse på længere brødtekster. Da Arial er en PC typeface kan Mac brugere ikke læse den, men da Mac har en skrifttype som minder meget om Arial var det optimalt at bruge den, så når en med Mac går ind på min hjemmesiden vil skrifttypen ikke være anderledes. Mine overskrifter på min portfolio er alle sammen den downloadede skrifttype Oswald. Jeg valgte at downloade en skrifttype, fordi efter jeg havde ledt efter en Sans Serif skrifttype på programmet AMP Font Viewer var der ikke nogen som videre imponerede, så jeg begyndte at søge på 14

nettet og lede efter alternativer, hvorefter jeg faldt over Oswald som jeg synes ville passe godt til min stil på hjemmesiden. Jeg har brugt begge skrifttyper i denne aflevering for at bibeholde en rød tråd. Informationsstruktur Informationsstruktur er vigtig at tage hensyn til når man skaber en hjemmeside, da det er vigtigt at tage højde for hvilken slags hjemmesiden man kunne tænke sig. Man skal tænke over strukturen når man er i det forberedende stadie, når man er i gang med wireframes og mockups. Det er både vigtigt at man ikke får lavet en navigationsmenu som er for overordnet, da det gør at brugeren bruger for lang tid efter at søge efter noget enkelt. På den anden side skal man også passe på at man ikke gør navigationen for bred og stor så det fremstår uoverskueligt. Der findes forskellige former for mønstre eller strukturer som man skal tage højde for, man skal vurdere hvad der ville passe bedst til ens hjemmeside og den målgruppe man vil have til at besøge siden. Der er tre strukturer som jeg har gået udfra; Sequence site, Hierarchical site, Web linked. Jeg har gået ud fra de tre fra denne model 2, da den viser tre forskellige valgmuligheder og viser fordele og ulemper, og fordi jeg synes den fanger grænsen til det forudsigelige og til det komplicerede og rodede. Jeg analyserede min målgruppe, og fandt frem til at det smarteste for min hjemmeside ville være den Hierachical site, da jeg gerne ville have en dropdown menu så min navigations menu ikke blev for lang og uoverskuelig. Da jeg har links til min 2 http://webstyleguide.com/wsg3/3-information-architecture/3-site-structure.html 15

remake beskrivelse indenunder de forskellige projekter, tager jeg også brug af Web-linked site, da man kun kan finde den under projekterne. Det er også vigtigt at man tænker over at en bruger på en hjemmeside skal kunne danne sig et hurtigt overblik over hvor de befinder sig på siden. Man kan bruge metoden; Brødkrumme navigation som viser hvordan du er kommet frem til den aktuelle side, og som er et link så du kan navigere dig tilbage til fortrukne side. Jeg har valgt ikke at lave en navigation som den da jeg gerne ville bibeholde et simpelt design, og da min menu i forvejen er meget simpel så jeg ikke et behov på nuværende tidspunkt. Når min portfolio bliver større efter andet semester vil jeg genoverveje min navigation. Herudover har jeg skrevet en stor titel til hver side hvor man kan se hvilken side man er på, eller hvilket projekt man læser om. Navigations menuen har jeg valgt at sætte kronologisk op, jeg vil gerne have at en bruger læser lidt om hvem jeg er, inden de læser om mine projekter. Derved får jeg skabt et mønster for hvordan brugeren skal kigge på min hjemmeside. Jeg har valgt at mit logo skal være et link tilbage til forsiden, derved for jeg også brugeren til at se mit logo og derved er der chancer for brugeren vil kunne huske mig og mit logo. Stemning Jeg ville gerne have at min portfolio skulle være et minimalistisk site hvor min personlighed ville skinne igennem. På mit moodboard er der et billede hvor der står; Less house more home hvilket jeg havde in mente, da det minimalistiske udtryk kan være en smule køligt og det er bestemt ikke det indtryk jeg vil have brugeren får af mig. Så den stemning jeg gerne vil have min målgruppe skulle få var et professionelt site hvor man kunne få en idé om hvordan jeg er og hvordan jeg arbejder. Derfor har jeg også lavet forsidens billede for at bryde det minimalistiske og vise en variation og kontrast til forsiden. 16