Dokumentation. Efter dokumentationsdelen findes der en stilguide, hvor der argumenteres for de endelige valg i forhold til udseendet.

Transkript

1 Dokumentation På de følgende sider findes dokumentation for arbejdsforløbet under portefolioprojektet. Dette består primært af forskellige illustrationer af brainstorm, overvejelser vedrørende informationsarkitektur og ideudkast til hjemmesidens opsætning (wireframe) Efter dokumentationsdelen findes der en stilguide, hvor der argumenteres for de endelige valg i forhold til udseendet.

2 Brainstorm & mindmap Det er udfordrende at lave en reel brainstorm, da det for de fleste falder naturligt at begynde at planlægge uden at skulle sætte sig ind i små detaljer. Personligt er jeg mest bekvem ved at foretage en tænkt brainstorm, inden det visualiseres i form af tekst eller billeder. Almindeligvis ville jeg have lavet brainstorm eller mindmap i form af et moodboard, da det er sådan jeg arbejder bedst med fotografi. Dog føler jeg ikke det er helt ideelt i portefolio-tilfældet. I stedet gik jeg over til at fundere over, hvad mit formål med portefolioet skulle være, ud over at fungere som et skolerelateret projekt. Jeg havde allerede både et online og et fysisk portefolio inden jeg startede på multimediedesign, og jeg ville gerne forsøge at samle det hele et enkelt sted. Eftersom portefolioet skal repræsentere de forskellige områder det skal bruges inden for, valgte jeg at lige netop repræsentation skulle være et vigtigt element i styling og struktur. Det er et portefolio, så jeg vil ikke give mig i kast med at få det til at ligne noget andet. Jeg har taget udgangspunkt i min fysiske portefolio-mappe og de ting der inspirerer mig i mit arbejde. Herunder er linket til dokumentation i form af hhv. snapshots fra portefoliomappen samt mindmap-illustration. Fysisk portefolio Brainstorm/mindmap Struktur & Wireframe Ud fra samme strukturteori som jeg benytter i kodning, mappestruktur, opmagasinering og al mulig anden form for strukturkrævende praksis, lavede jeg en wireframe. Logisk træstruktur er ligetil for de fleste, så brugeren skal ikke til at tillære sig nye prioriteringsvaner. Det overordnede, vigtigste, mest generelle eller mest aktive fungerer som bærende grene, hvorfra der vokser kviste med mere specificerede områder. Blade er endestationer, områder der er så specifikke eller afgrænsede, at de ikke kan lede videre til andet. Genkendelse er et vigtigt element i psyken, derfor vil de fleste føle sig mere trygge og behageligt til mode ved at ting er placeret de forventede steder, eller at interaktive ting kan forbindes med fysiske objekter. Derfor er træstrukturen den ideelle løsning. Genkendelse gælder naturligvis også placeringen af standardelementer, såsom menu, forside og om-sider. Eftersom min målgruppe primært opholder sig i Vesten, vil det være mest naturligt at placere elementer i læseretningen venstre mod højre, med de vigtigste områder først. Jeg har holdt mig til helt klassisk vestlig informationsarkitektur, med genkendelse som topprioritet. Herunder findes et link til den wireframe/strukturskitse jeg har arbejdet ud fra. Wireframe

3 Mockup Jeg har valgt ikke at lave et mockup. Det er for specifikt, da jeg af aktuelle årsager somregel ombestemmer mig løbende. Jeg har i stedet lavet en stilguide med fleksible guidelines, så jeg let kan ændre småting undervejs, hvis jeg støder på problemer. Jeg havde dog en ide om, hvordan det færdige arbejde skulle se ud, med udgangspunkt i den fysiske portefoliomappe, som nævnt tidligere. Dette er der mere information om i den følgende stilguide.

4 Stilguide Jeg har lavet en stilguide til portefolio-projektet i semesteropgaven, med forklaring på de forskellige valg jeg har taget omkring udseendet på mit portefolio. Det vedrører primært farver, teksturer og fontvalg, men med et par yderligere forklaringer på nogle tilføjelser ifht. elementer der optræder i portefoliet. Det virker lettere overskueligt at læse, når forklaringen på de forskellige valg er sat op som på de følgende sider, fremfor som tekst direkte på hjemmesiden. Samtidig er det rart at have stilguiden ved siden af under senere udvidelse af portefoliet.

5 Farvevalg Brun Brun er en varm farve, som signalerer ro og jordnærhed. Det er en hjemlig og naturlig farve, som let forbindes med tryghed, stabilitet og modenhed. Jeg har valgt mere dæmpede nuancer af kaffefarven, da den ikke skal fremstå prangende, men give ro og virke behagelig på betragteren. Blå Jeg har valgt at holde mig til kongeblå, marineblå og indigo, i den dybere ende af de blå farver. Blå bliver af mange anset for værende en sikker farve, i og med den er betragtet som en positiv farve i stort set alle kulturer verden over. I vesten bruges den ofte i sammenhænge hvor man vil udstråle pålidelighed, autoritet og professionalisme, hvorfor den også tit optræder på statslige instanser og pengeinstitutter. Grunden til jeg har valgt den meget klare dybblå farve fremfor en grålig, afdæmpet tone, er at den skal bringe kulør til siden. Blå er som bekendt havets farve. Jeg er vokset op på en ø og har derfor haft havet i min nærhed det meste af mit liv. For mig symboliserer farven blå alle mulige forskellige hændelser, men i særligt høj grad vejr og vand og den foranderlighed de repræsenterer. Blå kan passes ind i alle sammenhænge, derfor ser jeg den gerne i gruppe med sort, grå og hvid, med den eneste forskel at den giver mere udtryk end de farveløse farver. Turkis/mint Turkis og mint har jeg valgt at skære over en kam, da de begge er en mellemting mellem blå og grøn. Dermed tager man lidt af både blå og grøn symbolik ind. Turkis og mint er behagelige farver, som giver associationer til sommer, skyfri himmel, roligt hav og middelhavsområdet. Man kan se mint, og i nogen grad turkis, som som en søster til grøn og blå. De har et meere feminint, afdæmpet og varmt udtryk end blå og grøn. De fleste mennesker reagerer positivt på turkis og mint. Mange forbindersærligt mint med pasteller og midten af det 20 ende århundrede, hvilket jeg personligt anser for en inspirerende periode rent stilmæssigt. Kombination Kombinationen af farver er valgt, da det skaber en større stabilitet i helheden - brun vejer op for de kølige blå og turkise toner og vice versa. Samtidig er de farver nogle jeg forbinder stærkt med mig selv, da det er de samme toner mit hjem er holdt i. Det giver fin mening at vælge den samme farvekombination og stil, da hjemmet i mit vedkommende i lige så høj grad er noget jeg benytter til at præsentere mig selv for gæster, samtidig med jeg selv skal føle mig hjemme i det - det afspejler så at sige personen bag. Header Headeren er lavet med udgangspunkt i min fysiske portefoliomappe. Jeg har arbejdet på at tage nogle af de forskellige ting ind i headeren, som jeg bruger et portefolio til. Derfor er der repræsenteret elementer fra bl.a. tegning, maling, fotografi og skrivning. Papirteksturen i baggrunden er den samme som er brugt som baggrund på de forskellige sider, for at holde en råd tråd gennem siden. Jeg har valgt at bruge baggrund med tekstur, mere præcist rispapir, da det gør tingene mere håndgriblelige, at man kan forbinde dem med andet end bare et look. Jo flere sanser der er i spil, des bedre husker man, hvilket naturligvis er i min interesse ved en præsentation af mit arbejde.

6 Font Tekst Overskrifterne og brødtekst er skrevet med Junge for både at være letlæselige og passe sammen. Jeg har valgt en font med serif, da det er noget de fleste er vant til at læse i aviser, bøger, mm. Junge har dog ikke store snørklede serifer, og er til den spinkle side, hvilket gør den nem at læse. En anden god grund til at jeg har valgt Junge er, at den også fungerer i menuen. Header I headeren, hvor overskriften er fast, har jeg valgt en anden font, da den i langt højere grad skal fremstå som en form for logo eller personlig præsentation, fremfor en tekst der skal læses. Derfor har jeg valgt en anderledes font, Castellar, med et udtryk der passer ind i resten af stilen - især for headeren. Headeren er lavet med tanke på mit fysiske portefolio, og teksten på headeren er præsenteret i form af en label. Tekst Junge abcdefghijklmnopqrstuvwxyzæøå ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ , : ; -!? Header Castellar abcdefghijklmno pqrstuvwxyzæøå , : ; -!? Bluebox Ligesom headeren er bluebox et element jeg har inddraget fra mit fysiske portefolio, for at give mit web-portefolio noget genkendeligt fra den virkelige verden. Bluebox er en blå akvareltegning som er fotograferet og fritlagt til brug som tekstboks. Derfor optræder den ujæv i kanter og farvefordeling, da det passer bedst ind i den stil, der er lagt for hjemmesiden. Da jeg beskæftiger mig med flere forskellige kreative områder end multimediedesign, vil jeg gerne have at portefoliet skal kunne bruges til det meste af mit arbejde, så det er samlet et sted. Derfor er der også lavet gallerisider til fotos, tegninger og andre kreative projekter.