//emergency site - stjernehimmel
På tema 4 lavede jeg et "emergency-site" - en hjemmeside der drejer sig om et fiktionelt nødstilfælde.
Min case var en dødelig global pandemi hvor små isolerende rumkapsler, produceret af firmaet STJERNEHIMMEL, blev den sidste tænkelige mulighed for overlevende.
Sitet inkluderer bl.a. nyhedsartikler, how to guides og interaktiv infografik - og så har det en dark-mode funktion.
PROCES
//stil-reference
På temaet lærte vi om forskellige stilarter, herunder retro-design, modernisme, postmodernisme og futurisme.
Jeg var primært inspireret af retro-design, som ved den øverste plakat, med rene linjer og et analogt look, og så
blandede jeg det med comic-stil, for at inkoorperere noget mere udtryksfuldt og farverigt.
Resultatet blev farvepaletten til højre, som jeg brugte som udgangspunkt til meget af min hjemmeside for at sikre den røde trød.
//infografik
Jeg var igennem mange forskellige udgaver af min vektorgrafik i Illustrator, før jeg kom frem til det endelige resultat.
Jeg endte med at fjerne teksten for at sætte mere fokus på illustrationen og have mindre kontrast mellem skyggerne, så månen stod mere ud.
//figma og github
Tryk for at se min proces i Figma og GitHub.
NY VIDEN
//css animationer
Ved at bruge @keyframes kan man animere i css - fx et billede der bevæger sig frem og tilbage som her.
//vektorgrafik
I Adobe Illustrator har jeg tegnet vektor-grafik til min hjemmeside ved brug af pen-tool.
Vektor-grafik (svg) kan inkoorpereres i ens html, da det består af kode. Derfor har jeg lavet min svg interaktiv, så der dukker en infoboks op, når man fx trykker på månen.
//forms
HTML forms bliver ofte brugt til kontakt-formularer og er interaktive felter som brugeren skal udfylde.
På temaet lærte jeg hvordan man korrekt sætter dem op i html og om de forskellige elementer (fx radio, text, email)
Derudover lavede jeg en "summary" sektion ved hjælp af JavaScript, så man kan se hvad man har udfyldt i formularen.
//javascript
Jeg brugte JavaScript til at implementere dark mode på mit site - derudover til panorama-funktionen, infografik, dialog-bokse og summary på min forms-side.
Her lærte jeg om konstanter (const), funktioner (function ()) og if / else-sætninger.