Lucky Clover

Oppgaven

Prosjektet tar utgangspunkt i CMS-plattformen Webflow.
Studentene setter opp en landingsside med tilhørende nettbutikk.
Det skal leveres en responsiv, universell utformet nettside, for mobil og desktop.
Nettstedet er en landingsside for den fiktive appen Lucky 4 Clover.
Nettsiden skal ha minimum tre produkter som selges.
Disse skal kunne legges til i handlekurven i ønsket antall og hvis det er relevant ønsket størrelse.
Det skal være mulig å gå inn på de ulike produktene ved produkt sidene.
Produktene skal ha tittel, beskrivelse, pris, bilde av produktet og eventuell annen relevant informasjon.
Det skal og være satt en definert mengde av produktene slik at det er behov for å lage et oppsett for når produktet er tomt på lager.

En løsning som motiverer de som bygger digitale løsninger å lære om prinsipper, retningslinjer og suksesskriterier innen temaet.

Det skulle leveres en prototype av en mobile-first nettside.

Hva jeg lærte

Jeg lærte meg nytteverdien av CMS, og å sette opp et CMS system i Webflow på en slik måte at jeg har kontroll over varelageret, og det ikke er mulig for kunden å kjøpe mer av en vare enn det jeg har på lager.

Jeg sørget også for å sette opp mulig betaling og la inn nødvendige koder for at siden skal huske hva som ligger i handlekurven om du går ut av siden.

Om CMS

Hva er CMS?

Et Content Management System (CMS) er en programvareplattform som brukes til å opprette, administrere og publisere digitalt innhold.
Dette systemet gir en brukervennlig måte for personer uten teknisk ekspertise til å opprette og vedlikeholde nettsteder og nettbaserte applikasjoner.

CMS-er er spesielt populære for å drive blogger, nyhetssider, netthandelssider, og bedriftsnettsteder.

Eksempler på populære CMS-plattformer inkluderer WordPress, Joomla, Drupal, Magento (for e-handel), og Squarespace.

Hver av disse har sine egne særtrekk, styrker og svakheter, men felles for dem alle er at de forenkler prosessen med å lage og håndtere nettinnhold.
Vi bruker Webflow CMS til å løse denne oppgaven.

Fordelene med å bruke CMS

Å benytte et Content Management System (CMS) har flere fordeler, spesielt for interaksjonsdesignere:

Brukervennlighet: CMS-systemer tilbyr et brukervennlig grensesnitt som gjør det enkelt å opprette og administrere innhold. Interaksjonsdesignere kan dermed konsentrere seg om designaspektene uten å måtte dykke dypt inn i teknisk kode.

Effektivitet: CMS gjør det raskere og mer effektivt å publisere innhold. Designere kan implementere endringer og oppdatere innhold uten å vente på utviklerteamet eller å måtte kode selv.

Konsistens i design: CMS tillater bruk av maler og stilsett, noe som sikrer konsistens over hele nettstedet. Dette er viktig for interaksjonsdesignere for å opprettholde en konsekvent brukeropplevelse.

Sammenarbeid og arbeidsflyt: CMS-er støtter samarbeid og arbeidsflytstyring, noe som er nyttig i team hvor designere, innholdsskapere og utviklere må arbeide sammen.

Skalerbarhet og fleksibilitet: CMS tillater enkelt skalering av nettstedet ved å legge til nye sider og funksjonalitet, noe som er avgjørende i en verden der innholdskrav stadig endrer seg.

SEO-vennlighet: Mange CMS-er er optimalisert for søkemotorer, noe som hjelper interaksjonsdesignere å sikre at deres design bidrar til bedre søkemotorrangering.For en interaksjonsdesigner er det nyttig å vite hvordan data opprettes og publiseres på nettsteder fordi:Det bidrar til bedre forståelse av brukerens reise og hvordan innholdet påvirker brukeropplevelsen.Det hjelper i å lage mer intuitive og brukervennlige grensesnitt, siden designeren har en bedre forståelse av innholdsstruktur og navigasjonsflyt.Det gir en helhetlig tilnærming til design, der tekniske begrensninger og muligheter blir tatt i betraktning under designprosessen.
Kilde: ChatGPT.

Stilguide

Farger og fonter har ikke vært ett fokusområde for denne oppgaven, så jeg har slengt sammen ett minimum på 10 shades av hver farge som er brukt.
Av fonter har jeg holdt det trygt og lettlest med Arial Normal400 for normal tekst, og Arial Bold700 for overskrifter.
Jeg har laget variabler av alle de brukte fargene i Webflow og Figma, slik at den er lett å legge til og endre. Jeg har kommet til å foretrekke variabler over styles etter at den nye Figma-funksjonen kom.
Grønnfargen har blitt valgt utifra hva som er Lucky 4 Clover (appen) sine farger, og hva som er godkjent WCAG 2.1 kontrast for privat sektor.
Ut over dette så tok jeg 4 separate kløverblad og brukte som stikkords-punkter, noe jeg syntes var ett fint lite prikken over i-en.
Stilmessig har jeg nok brukt mest tid på å lage mockups og bakgrunnsbilde til prosjektet selv.

Oppgaven

Hva jeg lærte

Leveranse

Tidsramme

Verktøy

Prosessen

Om CMS

Hva er CMS?

Fordelene med å bruke CMS

Endelig prototype

Stilguide

Oversikt prosjekter