Figjam
Figma
Projektplanlægning
Jeg lavede tidligt i forløbet OBS, PBS, WBS og et Gantt chart.
Min OBS har jeg holdt ret simpelt, da mine formål er ret simple. (alle tre øverst i figjam, Gantt chart findes som billede længere nede)
PBS var god til at få et overblik over hvad der skulle laves. Jeg brød delene ned til et punkt, der var overskueligt, uden at gå alt for dybt i de mindste små dele. Det var nok den del, der fungerede bedst i min planlægning. Jeg endte dog med at droppe en af punkterne, logoet, det kommer jeg ind på senere.
Min WBS er rent gæt, jeg er ekstremt dårlig med tid, især på timeniveau. Derfor prøvede jeg at følge mit Gantt chart på en dag-basis i stedet.
Derudover brugte jeg farvekodede sticky notes til at holde styr på processen, både for at holde styr på processen indtil min planlægning var færdig, men også lidt efter. Det virkede meget fint.
Desværre havde jeg det ikke godt de første par dage og fik først lavet det hele færdigt lidt sent. Jeg er, som nævnt, ikke god med tid, så jeg har prøvet at følge det på en dag-basis, og selvfølgelig skred det hele lidt frem, “No plan survives first contact with the enemy”. Derfor endte jeg med at udskyde nogle ting, og selvfølgelig blev det stresset. En anden gang vil jeg forsøge at nå længere i opgaven tidligt og planlægge lidt bedre, gerne med et andet værktøj end Excel, hvis det kan lade sig gøre. Udover det: tilføj upload og aflevering, da det tog længere end forventet og egentlig var uden for planen.
Design
Jeg havde allerede lidt ideer til min side, og derfor fik jeg hurtigt samlet nogle inspirationer (se figjam). Det var dog ikke alt, der endte med at give mening, så det er mest plasticity.xyz der endte med at være min inspiration. Jeg startede med nogle skitser:
Som jeg hurtigt lavede til wireframes i figma (se figma)
Jeg har i min designproces brugt gestaltlovene, både bevidst og ubevidst. Cards er i sig selv en form for nærhed og lighed.I min figma design fil fra venstre til højre i hver del, udviklingen af mit design. Der er også flere overvejelser fra mit research i figjam. Der endte også med at ske en del i kodningen, især i forhold til størrelser og kolonnerne, som jeg brugte i design-forløbet.
Brugertest
I starten af min designproces var jeg meget i tvivl om min såkaldte Hero-sektion øverst på forsiden. Derfor lavede jeg en relativt minimal brugertest, mest med mine med-multimediedesignere. Mine 4 “brugere” var mellem 19 og 45 (2 af dem omkring 21/22). Jeg bad dem vælge mellem nogle low fidelity layouts (se de grå frames i figma) Det endte med, at den der også nu er på siden. Det endte med at blive dem i retning af hvad der er på sitet nu, de to øverste i højre side, frame 2 og frame 5. Der var dog en enkelt, der var for frame 1. Frame 1 var interessant da den minder lidt om et Z-layout, egnet til at scanne hen over, men generelt var feedback at det blev, eller kunne blive, for ubalanceret. Der var generelt ikke interesse for de venstrestille F-layouts.
Aida-modellen
Jeg har tænkt over Aida-modellen da jeg designede, her var mine tanker: A - Opmærksomheden: Min Hero-sektion med navnet og videoen. Det er et animeret, kontrastrigt udtryk, der hurtigt skulle fange opmærksomheden. I - interessen her skabes af det næste i rækkefølgen, projekterne. Mine projekter ligger med vilje efter det gribende. Det er det jeg har at “sælge”, og derfor vises det her og, mens det er relevant. D - Der udvides på den, både med mere projekt og fotos, men også min om-sektion, hvor man kan få lidt mere at vide om mig, og forhåbentligt arbejde med mig. A - Selvfølgelig er den ønskede handling at en bruger kontakter mig, så kontakt kan både nås hurtigt fra headeren og ligger lige efter projekterne, fotos og om-sektionen, så der ledes ned mod det, gennem de motiverende dele. Samlet er det en “tragt” til kontakt.
Style guide
(Se i figjam) Min styleguide er baseret på min første forside på mit domæne, og mine inspirationer. Den mørkeblå er lidt en yndlingsfarve. For mig personligt er der noget roligt over den, jeg tænkte: Jeans og nattehimmel. Det kan dog godt blive lidt Danske Bank i det, så det blev lidt et mål at lave noget der brød med det. Jeg prøvede lidt med et online-værktøj og endte med lidt flere farver (figjam, color tests), men det blev altid lidt mørkt og lav kontrast. Jeg endte med at lave en ny udgave, der havde 6 farver, men jeg kunne ikke lige se for mig hvad jeg skulle bruge dem til. Derefter lavede jeg en ny med 4 farver, inklusiv den orange igen, som kunne bryde lidt med det der bank-udtryk, men det var lidt som om den ikke spillede med den lyseblå. Min hovedinspiration brugte den anderledes end jeg tænkte på, så jeg kiggede en gang til og endte med kun at bruge den lyseblå, hvilket resulterede i en monokromatisk/analog farvepalette. Udover det fik jeg lavet nogle rundede hjørner specifikt, nogle knapper, og vigtigst, nogle undtagelser, der kom senere, da jeg startede med at lave den gennemsigtige boks som header. Det clashede meget med tekst under. Den endte med at blive hvid efter at have prøvet den med lyseblå i solid form, men det så ikke godt ud. Senere, da jeg lavede footeren, blev den også hvid. Det gav lidt en ramme i top og bund. Der var også en lysgrå fra teksten på plasticity.xyz, men det gav en lidt lav kontrast på min blå udgave, som jeg gik med efter at have prøvet den i sort. JEg havde også overvejert mit hierarki i forhold til tekst.
Videoproduktion
Som altid, og anbefalet, startede jeg med pre-production. Jeg fik en ide tidligt sammen med design-forløbet. Jeg ville have en video øverst i baggrunden, bag navn og titel. Det skulle være korte klip af ting jeg går op i/gør og andet relateret til multimediedesign. En tidlig udgave med tankerne kan ses i figjam, den senere kan ses her:
Ideen her var det samme, men lidt udvidet, og illustreret. Fra højre til venstre, og så række 2. Jeg tegnede ikke slutningen da den bare skulle have været starten igen, men så at slukke pc’en. Den med skærmen og noget arbejde skulle også have gået igen efter den sidste (sketch i notesbogen). Da jeg nåede til optagelserne, startede jeg med den udenfor med kameraet, da de andre alle var indendørs. Den blev så rigtig fin, og så fortsatte jeg derfra til den øverst højre (spille elbas), og tænd/sluk pc’en. Det var så der, at jeg følte at den udendørs var en del bedre end de andre. Jeg havde også sat den som midlertidig video i toppen af sitet, og blev ret glad for den. Jeg besluttede ikke med det samme at droppe resten. Herfra gik jeg videre til post-production. I post-production prøvede jeg lidt med nogle dele af det og nogle klip, men den længere udgave blev aldrig helt som jeg havde tænkt, og jeg besluttede så at gå med den simple udgave. Det gjorde postproduktion ret kort. Jeg tog videoen ind i premiere og trimmede den, der var lidt rod og ekstra tid i starten fra at trykke optag, og derfra gå om og stå klar til at gå ind i frame. Derudover har jeg komprimeret den med Handbrake, så den loader med resten af siden. Farverne i videoen er “in camera”, men min plan var at holde videoen i det kolde/blå for at passe ind i resten af mit site.