Estetikk - Fagprøve mediedesign - Preben Albrektsen

Min Fremdriftsplan

Dato Tidspunkt

Man 29 april kl 09 00

kl 10 00

kl 11:30

kl 13:30

kl 15.00

Tirs 30 april kl 09 00

kl 09 30

kl 10.00

kl 13 00 - 17 00

Ons 1. mai

Tors 2 mai kl 09 00 - 17 00

Fre 3 mai kl 09 00 - 17 00

Man 6. mai kl 09.00

kl 12 00

Tirs 7 mai kl 09 00

kl 12 00 - 14 00

Oppgave

Gjennomgang av oppgave

Inspirasjon og research (gjennomgående)

Planlegging (fremdriftsplan)

Skisser / wireframes nettside (Struktur nettside)

Logo (skisser), font og fargevalg

Avgjøre og bestemme seg for foregående

Valg av teknisk løsning

Installasjon og forbereding av valgt løsning

Utvikling av nettside

Arbeidernes dag (fri)

Utvikling av nettside

Optimalisering og testing av nettside

Produksjon av bannerannonser

Fornuftig inkludering på nettside av bannerannonse(r)

Forberedelser og klargjøring

Levering og presentasjon av fagprøve

Hvem er Estetikk.no?

Oppdragsbeskrivelse

Estetikk.no er en landsdekkende fagorganisasjon for estetiske fag (design, kunst, arkitektur og medieproduksjon). Formålet med organisasjonen er å knytte sammen ulike spesialiseringer innenfor det estetiske fag med fokus på kompetanseutvikling og samarbeid for studenter og profesjonelle.

Fagorganisasjonen tar ansvar for et fag som har over tid blitt et veldig bredt og stort fag. De planlegger og iverksetter aktuelle arrangementer, utgir publikasjonen Modul (to ganger i året), og er frontfigur for rekruttering av nye medlemmer. Og inspirerer, formidler og tydeliggjør rammene som utgjør de estetiske fagene. Nåtid og inn i fremtiden.

I denne forbindelse trenger Estetikk.no (1) hjemmeside, (2) logo og (3) bannerannonser.

En nærmere titt på

Målgruppen

Målgruppen til Estetikk.no står definert i oppgavebeskrivelsen, og består av de fleste individer som er interessert og engasjert i kreative fag.

Det står oppramset følgende: Designere, kunsthåndverkere, tegneserieskapere, glassblåsere, hagedesignere, treskjærere, malere/ illustratører, skiltmakere og web-designere, fotografer, koreografer, scenografer, matkunstnere, bloggere, kulturarbeidere med fler.

Det inkluderer også lærere, studenter, elever, foreldre, opplæringskontorer, fylkeskommunens skoleavdeling, og skolerådgivere i like fagområder som nevnt.

Det kan virke som en stor målgruppe, men det er svært enkelt å forstå dersom man ser på det slik: Personer i alle typer roller, som interesserer seg, og eller har engasjement i kreative fagområder.

Profil Forord

På bakgrunn av målgruppe og tidligere publikasjoner vil det velges passende font, farge og samsvarende logo. Det ser ut til at Estetikk.no allerede har en ganske gjennomført og rød tråd i tidligere og nåværende publikasjoner av Modul.

Det vil derfor være svært gunstig for organisasjonen å bygge videre på denne identiteten og merkevaren de allerede har.

Dette er viktig da tidligere og nåværende konsumenter/ medlemmer har et forhold til den profilen som er benyttet.

Typografi

Publikasjonen Modul har brukt fonten “Bennet Banner” i overskrifter og brødtekst. Oppkalt etter designeren, er fonten “Bennet Banner” en svært allsidig serif-font som er godt egnet til både digitalt og print. Den har god lesbarhet og fungerer ypperlig for nettsiden

Ettersom det er en serif-font har den ekstra god leselighet av lengre tekster og er elegant nok til å brukes i overskrifter.

Det er også viktig å nevne at fonten er tilgjengelig i Adobe Fonts som en del av Creative Cloud-abonnementet og står spesifisert at kan brukes til publisering på web, designprosjekter, video & kringkasting (m.m) både for kommersielt og personlig bruk. Du kan lese mer om lisensiering av fonten ved søke på fonten i Adobe fonts.

I undertitler er det benyttet fonten “Decimal”, og det kan se ut til at selve logoen til magasinet også har samme font. Men ettersom logoen er mest sannsynlig outlined i Illustrator, så er det ikke mulig å vite med sikkerhet.

For å konkludere vil det i denne leveransen benyttes “Bennet Banner” til overskrifter og brødtekst. Mens logoen vil få et nytt og unikt preg, som målgruppen vil like. Det er også greit å nevne at noen seksjoner av nettsiden vil bestå av “Inter”, en sans-serif font. Det er fordi det estetisk sett blir bedre, roligere og ryddigere der det passer. Inter er en Google font, som er tilgjengelig for alle overalt.

Profil Farger

Fargene som er benyttet i magasinet er spennende og kreative farger. Det var derfor naturlig for meg å bruke dem som inspirasjon til fargevalgene på denne leveransen.

Men det som virker å være problematisk er at de har for lav kontrast på hvit bakgrunn. Derfor har jeg økt dybden i fargene, og dermed fått en større kontrast. For å tilfredsstille krav fra WCAG (Web Content Accessibility Guidelines) bør kontrasten mellom tekst og bakgrunn være minst 4,5:1 for vanlig tekst og 3:1 for fet tekst eller stor tekst.

Det vil si at på vanlig tekst må styrken være 3 ganger sterkere enn bakgrunnsfargen som er valgt. Disse kravene er viktig å forholde seg til, spesielt på nettsiden, da vi ønsker at alle som er interessert, har mulighet til å lese og se innholdet vi legger ut.

Det er også viktig å legge merke til at denne kontrasten er basert på hvit bakgrunn. Tar vi sort bakgrunn får vi en høyere kontrast, på dem som slår lavt i

fargevalgene på side 9. På den måten vil det være enkelt for kunde og designer å bruke fargene som tilstreber god kontrast avhengig av foregående fargevalg.

Det er også lagt med en versjon for hver farge med tint. Det vil si at den har en 80% gjennomsiktighet, og gjør det mulig for designeren å bruke grunnfargen og velge en tint farge, som kan fungere fantastisk fint i noen situasjoner. Det er moderne med pastellfarger, og dette gir muligheten for det i denne profilen.

Det er bevisst valgt en grunnfarge som ikke er av type pastell, ettersom da er det lettere å tinte fargene for å oppnå en slik effekt.

Samtidig som du har en grunnfarge som har god dybde og kontrast. Ettersom lesbarhet og opplevelse er veldig viktig.

Da CMYK-farger og lignende typer for utskrift og print ikke er aktuelt i denne leveransen, har jeg ikke inkludert det i skisser eller i dokumentasjon. Men det vil være mulig å åpne illustrator-filen og finne CMYK farger som er tilsvarende

valgte farger. Det vil være en litt større prosess, da det er ikke alltid printet farger oppleves lik som de digitale. Dette ville da vært viktig å teste og prøve for å finne ut. Det er ikke lagt inn tid til denne prosessen i denne oppgaven. #435635 Kontrast: 8.01:1

3.38:1

2.56:1

6.19:1

Kontrast: 8.2:1

Kontrast: 1.49:1 #FFCE00 Kontrast: 14.08:1

Profil Logo

Det står spesifisert i oppgavebeskrivelsen at logoen skal være i typen grotesk. Altså i en sans-serif font. Da overskrifter og brødtekster vil formidles med en serif font (Bennet Banner), fant jeg det naturlig og gjøre et skille fra logoen for å skape en kontrast mellom logo og annen tekst. På den måten skiller den seg ut, og skaper inntrykk som gjør den unik.

Videre så ser jeg at logoen på magasinet har en sans-serif font, og for å bygge inn under det jeg nevnte tidligere, med å bygge videre på profilen som finnes, så har jeg klart å oppnå dette.

Logoen består av flere versjoner. På samme måte som at fargene er produsert og valgt på en slik måte at de fungerer med god kontrast i flere bakgrunner, så er det likt med logo. Jeg har fokusert på en allsidighet i logoen og fargene, og gir produsenter/designere mulighet

til å velge variant og farge som gir best lesbarhet og kontrast i den settingen det blir brukt.

Logoen er basert på google fonten

Montserrat. Men det er gjort en del modifikasjoner. Deler av bokstavene har fått en høyere corner-radius, som vil gjøre at teksten har et mer særegent preg.

Videre i prosessen har jeg også minimert mellomrommet mellom bokstavene for å få bedre helhet og flyt i logoen. Det ble utforsket med å rotere bokstaver, men det ble aldri noe godt inntrykk i min personlige mening. Også forsøkte jeg en versjon hvor bokstaven “ i “ ble et info-symbol, som skulle representere organisasjonens formål med å informere og veilede. Jeg forsøkte meg med diverse geometriske symboler over i-en, og andre lignende løsninger.

Designskisser, idé-prossess

Til slutt kom jeg frem til to varianter jeg kunne si meg fornøyd med. Disse ser du på høyre side av skissen. Den øverste varianten er den jeg bestemte meg for å bruke. ikonet representerer et “blankt ark”. Noe som skal formidle den følelsen man sitter med når man skal starte et nytt kreativt prosjekt. Den symboliserer frihet, mulighet, kreativitet, åpenhet, og skal være et enkelt og stilrent uttrykk for en målgruppe som er svært opptatt av design.

Min tanke er at, som de aller fleste, har vi våre egne forutsetninger og meninger

hvordan en logo skal kunne se ut. Men jeg tror som designere og kreative aktører kan vi være enig i den følelsen når vi skal begynne på noe helt nytt og spennende, som noe godt.

Fonten oppleves moderne og stilren, og har god lesbarhet. Den er enkel som gjør den enklere å huske og det vil være kurant for å bygge merkevare rundt organisasjonens identitet.

Profil Logo

Primær-logo

Primærlogo

Sekundær-logo

Sekundærlogo

Nettside Wireframes / skisser

Det er viktig at nettsiden bygges med brukeren i fokus. Det vil si at brukeropplevelsen skal være god og nettsiden skal være godt gjennomført. For å kunne få dette til, er forarbeid en særdeles viktig del.

Forarbeidet inkluderer det å definere målgruppe (allerede definert i oppgave), utarbeide en profil (inkl. logo, farger, tekst) som er gjennomtenkt, og planlegge strukturen / hierarkiet på nettsiden.

Ettersom de to foregående elementene allerede er diskutert, så kan vi begynne med planleggingsfasen av nettsiden.

Vanligvis kan man starte med å skrive ned de undersidene som skal være med, og hva som faktisk er behovet vhos oppdragsgiverens kunder. For så å begynne å skissere ut dette med wireframes. En “Wireframe” er en visuell representasjon av innholdet du ønsker på hver underside. Ettersom det kan ta tid å både bygge og løse hierarkiet og deretter bygge gode design skisser

(wireframes) har jeg bestemt meg for en hybrid løsning som gir meg begge løsninger. Dette er for å spare tid, i en ellers tidsbegrenset oppgave. Ettersom jeg kun har et fåtall dager, og ønsker å produsere gode produkter, fant jeg dette som en god løsning på oppgaven.

Verktøyet jeg har valgt, for å strukturere og bygge skisser til nettsiden, er Octopus.do.

Det ble gjort rede for at det skulle være 5 undersider: Om oss, bli medlem, utlysninger, modul. og arrangementer.

Avvik: I nettside-skissen har jeg valgt å legge “Bli medlem” inn under om oss. Disse to er naturlig å ha sammen. Grunnen til at jeg avviker fra det originale oppsettet er flere. For det første vet vi at brukere på nettsiden ønsker at løsningen er “så enkel” som mulig. Det vil si at den er enkel å forstå og at man kan navigere seg dit man ønsker uten at det er lang vei til destinasjon.

Nettside Teknisk løsning

Før jeg begynner utbredelsen av nettsidens innhold og utforming, ønsker jeg å meddele at nettsidens tekniske løsning er Wordpress. Det vil også brukes div. plugins som gjør det mulig med funksjonalitet som kalender, skjemaer, lottie-animasjoner (anmasjon på logo), m.m.

Grunnen til at Wordpress ble valgt som teknisk løsning er flere. Først og fremst er det CMS-systemet (Content Management System) som gjør det enkelt og mulig å legge inn innhold på en enkel måte uten å måtte nødvendigvis kunne programmering.

Det gir det mulighet for å bygge databasen og nettsiden uten store programmeringsferdigheter. På den måten kan man bygge en god nettside effektivt og mer front-end.

Videre så gjør det mulig for at kunde (Estetikk.no) kan i ettertid benytte seg av nettsiden, bygge nytt innhold uten stor kompetanse i nettsideutvikling.

Wordpress består også av et hav med muligheter innenfor programutvidelser (plugins), temaer og mye annet. Det er muligheter for å lage brukere og mye mer. Ekspanerings mulighetene er mye større og bedre ved å starte i et CMS system slik som Wordpress.

Nettsiden er drevet av Wordpress sit CMS

Nettside

Navigasjon / meny

Menyen består av 3 elementer. Logo, navigasjon (lenker), og en CTA-knapp. Menyen er produsert med profilen i bakhodet, og det er laget to versjoner av menyen. En versjon benytter den grønne fargen, og en annen benytter den gule. Den grønne fungerer ypperlig på lyse

Mobil og desktop

Begge versjonene er optimalisert for mobil og desktop. Og på mobil er det en versjon som heter “off-canvas”. Det vil si at menyen dukker opp når man trykker på burgeren (meny knapp) i høyre hjørne. Da er lenkene lagt under hverandre for å kompensere for at mobiler er smale.

Videre så har jeg lagt inn funksjonalitet som gir brukeren mulighet til å se navi-

bakgrunner, mens dersom man ønsker en levende top-seksjon, slik som på forsiden, kan den gule være mer relevant, da den skaper høyere kontrast. Logoen er også animert og kjøres én gang per side visning.

gasjonen selv når man er lengre ned på nettsiden. Den dukker bare opp dersom man begynner å scrolle/dra seg oppover igjen. Dette er gjort på denne måten da leseren ofte er opptatt av selve innholdet på nettsiden når de er i en “nedover modus”, men når lesere går oppover er de som oftest interessert i å finne menyen eller gå et annet sted.

Forsiden

er lagt opp på en slik måte at den fungerer som en portal videre til de andre undersidene. Det vil si at alle undersider vil bli representert og “teaset” (å vekke interesse) for å trykke seg inn der man ønsker.

Det er også en god måte for kunden å få en helhetlig forståelse av nettsidens innhold, på lik linje som navigasjonen / menyen vil.

Videre så kan vi se for oss at det er viktig for Estetikk.no at brukeren ønsker å melde seg inn i fagorganisasjonen deres. Det

er derfor lagt opp en godt synlig CTAknapp i menyen som fører dem direkte til om oss siden, og den delen som har med det å gjøre der. Slik at de kan sende inn deres søknad.

Forsiden inkluderer også en hero-seksjon, som vil si en seksjon som tar mye plass og oppmerksomhet, helst på forsiden. I en hero-seksjon, kan det være naturlig å formidle noe som er viktig for organisasjonen. Det være seg en kampanje, en generell oppfordring, eller noe aktuelle nyheter eller kommende arrangementer.

Nettside

Om oss

Om oss vil inkludere en kort og konsis gjennomgang av hvem estetikk.no er, og hvorfor de finnes. Her er det viktig at innholdet er skrevet på en måte som er spennende og interessant. Dette kan gjøres både med tekst og visuelle

Bli medlem

Videre finner du en seksjon som handler om å bli medlem. Først hvorfor, og hva det innebærer, deretter et innmeldingsskjema som er godt gjennomtenkt. Et godt innmeldingsskjema er tydelig på verdien, men er også teknisk utført på en måte

hjelpemidler. Det viktigste er å fortelle hvorfor de finnes, og hvorfor de er viktige for leseren. “Hvilken verdi gir det meg?”

som gjør at innmelder ikke følger prosessen er tungvint eller lang. Det kan gjøres på forskjellige måter, f.eks. kan innmelding-prosessen deles opp, slik at det føles som mindre informasjon/ handlinger per gjennomførelse.

Nettside

Utlysninger

er bygd opp på en åpenbar og enkel måte. Den består av tre”tabs” som brukeren kan navigere seg gjennom. Det vil være “Aktuelle”, “Planlagte” og “Ferdige” seksjoner. Da det ofte kan være noen utlysninger ikke er klare helt enda, så kan de legges i planlagt. Det kan også være svært aktuelt legge ferdige utlysninger i egen del, da det kan være interessant for lesere å se resultatene eller vinnere av en utlysning. “Aktuelle” er de utlysningene som for øyeblikket er aktive og som er mulig å søke seg inn på. Her kan man trykke på knappen for å gå til undersiden som består av (1) mer informasjon (2) søknadsskjema/ bidrag.

Selve brødteksten er generert av Chat

GPT, da det var viktigere for meg å bruke tiden på bygge selve funksjonen, enn å finne på informasjon til utlysningene. Dersom denne siden hadde vært et ekte produkt, ville det vært nødvendig å kontakte Estetikk.no for å få opplysningene om utlysningene de har. Selve funksjonen, skjemaene, og oppsettet er klart og kan brukes i et slikt tilfelle.

Den delen som det står Chat GPT, kan benyttes til statusoppdatering på utlysning. Her ser jeg for meg en orange farge og teksten “problemer har oppstått søknad er stoppet for øyeblikket” kunne vært en status, eksempelvis. Eller grønt symbol, for å meddele at søknaden er åpen og klar.

Arrangementer

Denne delen av nettsiden handler om å inspirere, begeistre og holde kundene/ leseren aktive i deres informasjonsflyt. Det er derfor en særdeles viktig del av nettsiden. Som på andre sider er font og farger benyttet gjennomgående, og profilen er tilstede.

Du kan se alle arrangementer i liste, måned eller dagsvisning og du kan til og med søke etter et spesifikt arrangement. Tittel, dato, tekst og et innbydende bilde vises for hvert arrangement på en enkel og strukturert måte, slik at leseren skal kunne navigere seg enkelt.

Denne funksjonen er lagt opp på slik måte at dersom det skal være aktuelt for estetikk.no å legge inn nye arrangementer er det enkelt og sømløst for dem å gjøre det. Det er mulighet for å legge inn

nye arrangementer, arrangør og steder.

Videre så er det lagt inn funksjonalitet som gjør det mulig å legge et arrangement i din personlige eller arbeidskalender automatisk ved å trykke på knappene som finnes. Det er også mulighet til å abonnere på kalender. Det vil si, dersom estetikk.no legger ut nye arrangementer, vil det dukke opp i kalenderen deres. Det samme gjelder for arrangementer som allerede er lagt inn.

Alle arrangementer har siden egen landingsside, hvor det er naturlig å gi leseren mer opplysninger om arrangementet. Her er det mulighet å legge inn adresser, kart, kontaktinformasjon, og mye mer.

Nettside

Magasin

Magasinet er veldig fint og godt gjennomført, og derfor fortjente den en god modul for å vise dette frem. Det er derfor benyttet issuu.no som teknisk løsning for magasinet. Dette bruker vi mye i Amedia, til å opprette landingsside for bannerannonsene. Ettersom det ofte er laget produktkataloger for annonsene vi lager, kan det være naturlig at annonsene linker til print. Her har jeg opprettet en landingsside av magasinet, og eksport “embed”-koden til nettsiden. Den fungerer svært godt, da du kan enten blad i magasinet, åpne den i fullskjerm eller se den på issuu.no sine nettsider. Du kan til og med søke etter spesifikt tekst i dokumentet.

Videre så har jeg designet en landingsside som har helt sort bakgrunn, ettersom jeg ønsket at magasinet skulle få en

“scene” å stå på. På den måten er magasinet et stort fokus.

Det vil også være svært enkelt om det er nødvendig i fremtiden å bygge ut et arkiv av alle magasiner. Det vil gjøre at lesere kan finne eldre publikasjoner og lese disse. Dersom det vil bli aktuelt, kan dette “låses” bak innlogging, slik at f.eks. bare lesere som er medlem, får mulighet til å lese magasinet/ magasinene. Dette vil funke ypperlig for å drive kunder til å ønske å melde seg inn i fagorganisasjonene deres. Det var et godt salgspunkt for å få flere medlemmer.

Annonse Bannerannonser

Det har blitt produsert 2 sett med bannerannonser. En med budskapet til arrangementet “Biometri vs portrettfotografi” og et med budskap for workshop/ arrangementet “Hvordan skal vi NÅ vurdere medienes fagprøver?”

Begge annonsene har tatt utgangspunkt i å kunne brukes i Amedias annonseplattform. Da ser jeg for meg at det kan gi dem en god rekkevidde å vises der. Men begge annonsene er ikke utelukket for akkurat dette, og har mulighet til å kjøre andre steder. En av annonsene er laget i verktøyet Bannerflow, og det er da mulighet for å eksportere ut scripts (kodesnutt) som kan benyttes dersom de skulle ønske. Det kan også være mulig å eksportere i .mp4, dersom det er aktuelt eller stillbildet av en valgt frame/ eller flere.

Det ene budskapet består av et format på 980 x 600 og den andre er 320 x 400.

Grunnen til at det to av samme budskap er fordi den skal kunne kjøre både på desktop, men også på mindre flater som mobil.

Det andre budskapet (workshop) er også

laget med Amedia sin annonseplattform i tankene, og dette er en fullskjerm videoannonser. Det er flere grunner til at jeg valgte denne. For det første var det en god måte for meg å vise mine ferdigheter i After Effects, ved å lage en video-animasjon. På en annen side er en fullskjerm-videoannonser et veldig godt blikkfang hos leseren, da den tar opp hele skjermen. Det ble da produsert to versjoner, en som fungerer til mobil og en til større skjermer som desktop. Selve videoen er eksport i .mp4, og følger Amedia sine retningslinjer på størrelse, safe zones, format og tid.

Denne video annonsen, behøver heller ikke bare brukes i Amedia, men kan også fungere ypperlig i andre scener som på en tv-skjerm.

Bannerannonsene er lagt på en slik måte at de linkes til den respektive arrangementet på nettsiden. Og de består av CTA-knapper / oppfordring til å klikke seg dit.

Mine tanker Egenvurdering

Spennende å jobbe med et prosjekt som har et veldig aktuelt tema. Det var også flott å kunne bruke tiden på produsere gode produkter, istedenfor å jobbe med målgrupper og strategier. I en tidligere fagprøve workshop var ikke målgruppen definert, og da kan det ofte ta litt tid i starten, før man kan begynne på resten. Da fikk jeg større tid til å lage gode produkter, og det var essensielt for å rekke å komme gjennom det jeg hadde planlagt.

Jeg har vært svært opptatt av å gjøre det “lille ekstra” i denne oppgaven, og har forsøkt å gjøre det der det er mulig. Slik som å animere logo med After Effects, lage fungerende skjemaer, og utfordre meg selv ved å produsere video bannerannonser, istedenfor bare enkle stillbilde annonser.

Det har også vært viktig for meg å produsere en nettside som faktisk er funksjonell, og med tanken om at det er en “faktisk” kunde som har bestilt nettsiden.

Det vil si at f.eks. arrangement-delen faktisk fungerer, og er noe som en ekte kunde hadde kunne brukt.

Da jeg jobbet med “om oss” siden, fant jeg fort ut at en av samarbeids-logoene lignet veldig på den jeg hadde utarbeidet. Nemlig “Fespa”. Først fikk jeg egentlig litt sjokk, og tenkte “hva er sannsynligheten for det?” og “Må jeg lage helt ny logo nå?”.

Men så tenkte jeg litt videre på det, og kom frem til at selv om ikonet er relativt likt, er fonten så fonten og fargene så unike, at de fremdeles gir et helt annet inntrykk. Ettersom jeg også hadde animert logoen allerede, og designet struktur på nettsidens meny, var det ikke riktig avgjørelse å endre om. Det skal sies at jeg også ble svært fornøyd med logoen, så det er også en viktig grunn.

Alt i alt en svært utfordrende, men spennende oppgave.