websider

Portfolio homepage before — Homepage portfolio before

prosjekt portefølje

design

Designet på denne porteføljen har et personlig preg, og er samtidig stilrent og enkelt. Som vist på bildene fra Figma inneholdt designet større bruk av linjer som virkemiddel, men dette ble både vanskelig i koden, det og holdt også uten de. Det kunne fort blitt mer "støy" i mine øyne. Jeg ønsket å beholde designet til hovedoverskriften på hver side og valget falt derfor på et header design i Adobe Illustrator.

Jeg er glad i naturen og de rolige fargene som finnes der, spesielt grønn. For å skape kontrast og liv ble beige og en mørk gull inkludert sammen med gråtoner som bakgrunn til å begynne med. Ønsket var å hente igjen en form for dark-mode til denne porteføljen uten at den ble for mørk.

Jeg var likevel ikke helt fornøyd, og fikk noen medstudenter til å se på den fra et utvendig perspektiv. Jeg fikk noen gode tilbakemeldinger, og med endring av disse endte jeg også opp med å gjøre header og navigasjon gråsvart som footer. Da mistet jeg mye grønn, og kjente på at den ikke var helt 'meg'. Jeg prøvde å bytte til en grønn gradient bakgrunn, og syntes den traff skikkelig.

Porteføljen inneholder en stor mengde bilder, og dette er viktig å samle på en ryddig måte for alle skjermstørrelser. Valget falt derfor på å lage et slide-galleri. Mine grunnleggende kunnskaper i JavaScript holdt til dette designet, selv om funksjonene måtte kopieres. Dette skyldtes at parameterne ikke ville fungere. Jeg står for å "eie" sin egen kode, og når dette lå utenfor mitt kompetansefelt falt valget på å duplisere og heller endre listenavn.

fargepalett og kontrast

Jeg har lagt et fokus på at alle knapper skal ha samme design. Dette gjør det enkelt for enhver å navigere seg rundt til de ulike sidene. Knappene skiller seg ut ved at de er gråsvart med gull tekst og ramme. Som vist i Figma har de ulike fargesammensetninger når de klikkes på eller musepekeren går over. Dette er sammensetninger som bevisst har gode kontrastverdier over WCAGs suksesskriterium 1.4.3.

For at knappene skal foholde seg unik er tekstboksene til prosjektene satt i en annen farge. Bakgrunnen på sidene er en gradering som blir lineært lysere på midten, derfor kunne den mørkeste grønnfargen benyttes som bakgrunn for boksene. Navigasjonsmenyen fikk et mer typisk design, da knappene ble rotete.

typografi

Jeg valgte å bruke Alegreya Sans og Alegreya Sans SC som er en variant av Alegreya Sans i kapiteler. Dette beholdt et enkelt preg, men ga samtidig en kontrast mellom tittel, navigasjonsmeny og brødtekst.

Gamepage UN Goal 13 project — Gamepage UN Goal 13 phone

goal 13 - skoleprosjekt

bakgrunn

Dette skoleprosjektet var avsluttende oblig for å få ta eksamen i Webkoding, 1. semester i interaksjonsdesign, høst 2023. Her hadde vi fått en grunnleggende innføring i HTML og CSS, og skulle bruke dette til å bygge en hjemmeside for en bestemt målgruppe omhandlende bærekraftsmål 13. Faget ble undervist på engelsk, derfor er også prosjektet på engelsk. Min målgruppe var alder 14-16 år.

design

Jeg fokuserte mye på å levere på alle punkter, her skulle vi tenke på bærekraft under valg og eventuelt omgjøring av bildeformater, mengden farger og størrelse på bildene. En side for ungdommer er mest appelerende ved bruk av farger i mange tilfeller, men jeg valgte et gjennomgående istid tema. Her kunne jeg minimere mengden farger, og heller bruke en film som er veldig populær i den aldersgruppen, som virkemiddel til å lese.

Hele veien overholdt jeg kontrastverdier samt å designe så universielt som mulig. Nettsiden ble sjekket med Lighthouse som ga 100% score på SEO, accessability og "best practices".

Interessert i å lese mer? Under "about" på siden kan man lese mer om prosjektet.

gå til siden

Hundehold hundesport — Design dog sport page

hundehold - skoleprosjekt

bakgrunn

Dette skoleprosjektet er fra programfaget Informasjonsteknologi 1 på VG3 påbygg, og er min aller første hjemmeside etter å ha lært grunnleggende ferdigheter i HTML og CSS. Her hadde jeg hatt ca fire måneder med opplæring uten forkunnskaper, så mengden kunnskap var enda snevert, men jeg brukte det jeg hadde lært i faget. IT1 gikk over nett, og jeg benyttet meg ikke av hjelp fra lærer, men studerte læreboken flittig.

design

Fokuset i denne oppgaven lå kun på å klare å bruke alt som var lært de siste fire månedene, og å lage ulike design for å bruke mest mulig HTML tagger og CSS regler. Fargevalg og innhold var ikke en del av vurderingen. Jeg hadde likevel dette noe i bakhodet, men fokuserte mest på det som lå til grunn for vurdering. Jeg ønsket fremdeles å vise frem en helhet som jeg kunne være stolt av.

Slik bildene viser er ikke dette en side med noe spesiell kompleksitet, men det var en stor motivasjonsfaktor å se hvor mye det gikk an å få til med bare fire måneder læring. Jeg satte meg godt inn i fagstoffet fordi jeg syntes det var både nyttig og interessant.