Det her oplæg vil jeg forsøge at strukturere over min samlede proces. Jeg vil tage udgangspunkt den plakat jeg tager med til eksamen. Man kan betragte indlægget her som en form for repetition og øvelse til eksamen.

Plakat til eksamen:

P3 stillede som krav, at vi arbejdede ud fra Design Thinking metoden fra Ideo:

Det er vigtigt at sige, at de metoder og værktøjer der bliver beskrevet i manualen bør betragtes som anbefalinger. Det som er vigtigt at forstå er at DT metoden er et værktøj som skal hjælpe designere med at skabe løsninger som er så relevante og brugbare for brugeren som muligt. Designerens egne agendaer skal altså holdes så relevante for brugeren som muligt. Design Thinking er en agil proces, hvilket betyder at man gerne, og faktisk helst, skal bevæge sig både frem og tilbage i de beskrevne processer. Det er derfor vigtigt at lade projektet fortælle dig hvor du er i processen.

Discovery

Kickoff & granskning

Første skridt var at forholde sig til projektet. Man skal granske det givne materiale, og forholde sig til ind- og udfaldskrav. Indfaldskrav er de krav du stiller til projektet før du går fremad med projektet. Hvilke informationer skal jeg bruge for at udføre projektet? Det er spørgsmål du stiller til klienten eller projektgiver, for at sikrer dit projekt kommer godt fra start. Udfaldskrav er de krav projektgiver stiller. Hvad skal klienten modtage i sidste ende?

Projekter fra UCL kommer med en beskrivelse som besvare de fleste indfaldskrav og stiller konkrete udfaldskrav.

Projekt 3 (P3) projektbeskrivelsen så ud således:

Hovedformålet er at kode en hjemmeside i HTML og CSS. Dertil skal der udarbejdes en plakat som viser processen og en afleveringsside med refleksion over selvvalgte læringsmål for semestret. Til sidst skal denne procesportfolio være udfyldt til forventning.

Research af målgruppe

I min research af målgruppen startede jeg med at besøge Danmarks Statistik. Her undersøgte jeg forskellige forhold indenfor multimediedesignernes branchekoder. Jeg kiggede på økonomisk udvikling, antal virksomheder, omsætning, og kønsfordeling inden for relevante industrier. På den måde kunne jeg få et solidt fundament at arbejde ud fra.

Her undersøgte jeg følgende branchekoder:

• 731100 – Reklamebureauer
• 620100 – Computerprogrammering
• 620200 – Konsulentbistand vedrørende informationsteknologi 702100 – Public relations og kommunikation
• 702200 – Virksomhedsrådgivning og anden rådgivning om driftsledelse
• 591110 – Produktion af film og videofilm
• 582900 – Anden udgivelse af software
• 620900 – Anden it-servicevirksomhed
• 731200 – Reklameplads i medier
• 581410 – Udgivelse af ugeblade og magasiner
• 741020 – Kommunikationsdesign og grafisk design

Branche

Observation:

Den samlede omsætning I de branchekoder hvor multimediedesignere ofte operere, er omtrentligt den samme over de sidste 10 år. fra 2011-2021. Men antallet af virksomheder indenfor de 2 største branchekoder er steget med over 35%, det betyder at konkurrencen er større. Antallet af virksomheder inden for udgivelse af computerspil og anden software er steget i antal angivet i procent med omtrent 60%, mens omsætningen i samme kode er steget med omtrent 150%! – Måske jeg kan finde noget af min målgruppe her? Det betyder at konkurrencen er steget voldsomt, mens den samlede omsætning, som kan betragtes som tilgængeligt arbejde, ikke er steget.

Fremgang hos konsumenter i eventfaget

Observation:

Stigende efterspørgsel blandt konsumenter i eventfaget efter COVID-19. Det betyder også at den potentielle omsætning vil være stigende.

Økonomisk udvikling inden for eventbranchen

Observation:

Antallet af virksomheder er steget, mens omsætningen i feltet er på vej op efter COVID-19. Det betyder måske at flere virksomheder har brug for multimediedesign for at øge omsætningen.

Kønsfordeling i eventbranchen

Observation:

Der er omtrent dobbelt så mange kvinder i konference- og eventplanlægningsfaget, som der er mænd.

Computerspilbranchen

Observation:

I computerspilbranchen er der omtrent dobbelt så mange mænd. Den mest prominente er en mand i start- midt-trediverne 30-34 år.

Beskæftigede i Teater, musik og kunst

Observation:

Den mest prominente grupper er selvstændige kvinder i start til midt fyrrerne. Generelt er kvinder i overtal.

Minervamodellen & Gallupkompasset

De samlede data ovenfor har jeg forsøgt at bruge til at bestemme segmenter i både minerva- og gallupmodellen. Grunden til jeg arbejder med begge, er fordi minervamodellen og gallupkompasset viser forskellige ting om segmenterne. Gallupkompasset siger noget om segmenternes forbrugsvaner, heriblandt medier, mens minervamodellen kan fortælle noget om segmenternes livstilsvalg. Det er en måde at komme længere ind i segmentets tankegang, vaner, udfordringer og andre generaliserede vilkår. Alt sammen baseret på data naturligvis. Gallupkompasset bliver løbende opdatere af Gallupkoncernen, mens minervamodellen, som stadig har ophav hos Nielsen og AIM, bliver vedligeholdt af dem.

Udvalgte segmenter

Minerva: https://www.michaelrurupandersen.dk/minerva-modellen/

Gallup: https://kantargallup.dk/da/gallupkompas – https://kantargallup.dk/kompas-segmenter

Primær segment: Eventbranchen

Grønt segment

• Forestil dig et gammelt egetræ, stærk og rodfæstet, der står fast i sine overbevisninger og værdier. Dette er en passende metafor for det grønne segment i Minerva Modellen.
• Individer i dette segment har også en høj uddannelse og indkomst, men i modsætning til det blå segment, er de mere fokuserede på det moralske aspekt.
• De er som gamle egetræer, stærke i deres overbevisninger og værdier.
• De er typisk kvinder i alderen 40 til 49 år, der har interesser inden for kultur, natur og skønlitteratur.
• Her er nogle af deres kendetegn:
  • Blødere værdier
  • Går op i miljø, naturprodukter og er ansvarsbevidste
  • Spiser oftere økologisk end andre segmenter og værdsætter madkultur
  • Er meget sociale og nyder at indgå i sociale fællesskaber
  • Går op i personlig udvikling
  • Går mere op i kulturelle oplevelser fremfor materielle goder
• Ifølge modellen så passer 25% af den danske befolkning i dette segment.

• De Moderne-fællesskabsorienterede
  • LinkedIn, Twitter, Pinterest og Instagram.

Sekundær segment: Dansk Spiludviklingsindustri

Blåt segment

• Forestil dig en løve, der stolt vandrer gennem savannen, altid på jagt efter det næste bytte. Dette er en passende metafor for det blå segment i Minerva Modellen.
• Individer i dette segment er typisk højtuddannede, har en høj indkomst og værdsætter prestige.
• De er som løver, altid på jagt efter succes og selvrealisering.
• De er typisk mænd i alderen 20 til 39 år, der stræber efter det gode liv og succes.
• De er meget fokuserede på karriere, har høje mål for fremtiden og følger trends.
• Her er nogle af deres kendetegn:
  • God selvtillid og dyrker individualisme
  • Går op i at opbygge en karriere
  • Værdsætter kvalitet og ny teknologi
  • Kan godt lide sport og er kulturelle
  • Har stor tiltro til egne evner
  • Smagfuld indretning i hjemmet og klæder sig altid efter lejligheden
  • Interesse i politik
• Ifølge modellen så passer 25% af den danske befolkning i dette segment.

• Det Moderne segment
  • LinkedIn, Twitter, Instagram, Snapchat og Pinterest

Tertiær segment: danske erhvervsdrivende, hovedsageligt indenfor detail (kun relevant for mindre opgaver)

Opsamling

Jeg har altså forsøgt at placere de data jeg indsamlede hos Danmarks Statistik, i de segmenter de 2 værktøjer tilbyder.

Interpretation

I interpretation-fasen forsøger jeg at konkretisere min indsamlede viden til konkrete resultater, og værktøjer som personaer, USP, The Golden Circle og SWOT-analyse. Det handler om at tage den data, jeg har samlet, og gøre den brugbar i forhold til projektets mål. Ved at bruge modeller som The Golden Circle og lave SWOT-analyser, kan jeg skærpe fokus og sikre, at jeg har en klar strategi og forståelse af, hvordan jeg bedst muligt når mine mål.

The Golden Circle

Hvorfor skal du vælge mig og min virksomhed? WHY

Jeg arbejder for at skabe en verden hvor de ting vi interagere med i hverdagen, er funderet i overvejede valg, som både er fremmende for bæredygtigheden og til menneskets bedste. Jeg ønsker ikke at lave eksempelvis reklamefilm som bruger upassende teknikker og indhold til at sælge, men at de derimod taler fra hjertet, gennem ærlige historier.

Hvordan vil jeg løse opgaver for dig? HOW

Gennem anerkendte teknikker og kreative værktøjer, vil jeg sørge for at de produkter jeg levere er af højeste kvalitet. Fordi jeg arbejder iterativt, kan jeg med større sikkerhed levere produkter i deres bedste udgave.

Hvad vil jeg tilbyde? WHAT

• Videoproduktion (reklamefilm, branding, promotion, musikvideo, konference)
• Grafisk arbejde (Plakater, flyers, kort-tegning, logodesign, videografik, o.l. grafik)
• Tonemester (Generelt arbejde med lyd på film)
• Facilitering (projektopstart, koordinering, planlægning)
• Marketing og optimering (SoMe, SEO, AdWords, Content-strategi)
• Branding (ToV, Copy writing o.l.)

SWOT over Makersjæl

Strengths:

• Erfaring – fra arbejde på campingpladsen og tidligere arbejdspladser
• Grundig – kæler for detaljen
• Teknisk dygtig – kan kode i bash, lidt python, html og css. Arbejder også tit med netværk og andre tekniske systemer. Erfaring inden for video, grafisk design, storytelling og programmering.
• Fordybelse – Evne til at fordybe mig i projekter. Jeg kan få mit liv til at dreje sig om det jeg arbejder med.
• Ærlig – jeg siger det som jeg oplever det.
• Arbejder effektivt. Spilder ikke min tid. Planlægger mit arbejde.
• ADHD – jeg har en evne til at opbygge hyperfokus.

Weaknesses:

• ADHD – kaos – kan være kaotisk i mit arbejde.
• Skalérbarhed – jeg er kun 1 person i virksomheden = begrænser størrelsen af projekter jeg kan tage ind.
• Overarbejder – jeg arbejder ofte for meget og laver for meget
• Mental sundhed – i øjeblikket har jeg mange negative udefrakommende faktorer i mit liv.
• Manglende erfaring – som virksomhedsdrivende.
• Udstyr – har det nødvendige, men er begrænset af udstyrets kapacitet og kvalitet.
• Tid – jeg er blevet far, og det tager tid.

Opportunities:

• Gå sammen i syndikat med kollegaer i faget, så man kan tilbyde at løse større opgaver.
• Netværk – bruge mit netværk til at få de første opgaver i hus. Der er rig mulighed.
• Markedet i eventbranchen er i fremdrift, lige så i spiludviklingsindustrien i Danmark. En gylden mulighed for at komme med i opsvinget.
• Tid – jeg er på SU og får løn, så derfor har jeg større økonomisk frihed til at starte virksomhed.

Threats:

• ADHD – kan gøre mig uarbejdsdygtig i perioder som kan gøre det svært at få afleveret projekter.
• Manglende erfaring – jeg kan risikere at mister kunder og penge, fordi jeg ikke ved hvordan man drifter virksomhed
• Overarbejder – det koster mange penge at lave arbejde ingen betaler for. Jeg skal være klar i mine aftaler med kunder, og holde mig til aftalerne.
• Tid – hvis tiden løber fra mig, risikere jeg at skulle betale penge tilbage til kunden.
• Udstyr – uden det rigtige værktøj, kan jeg ikke levere de lovede produkter i den lovede kvalitet, så måske jeg skal overveje at leje udstyr til større projekter.
• Dygtigere og mere erfarne multimediedesiganvirksomheder kan nemt “tage” kunder fra mig, fordi deres portefølje er tungere og tykkere.

USP

Hvad er en historie? Chat-GPT 3.5, en LLM af virksomheden OpenAI, og den siger “Historier underholder, uddanner, inspirerer eller informerer ofte læseren eller lytteren og kan udforske forskellige temaer og budskaber.”. Jeg tror på at din virksomhed er bygget på din og jeres historie. De historier er det som driver jer. Jeres historie er jeres kerne, og rummer også jeres visioner. Jeres historie er det som skal definere jer. Selv før den lange fortælling, gemmer der sig en for-fortælling. Jeres historier og fortællinger er jeres tungeste lod i jeres relationer til jeres kunder. MakerSjæl bruger jeres identitet, til at vise verden hvem i er.

Gennem fortællingen kan vi vise kunderne vej til jeres virksomhed.

Personaer

En stor del af det data jeg har behandlet i projektet indtil nu, har været for at danne stærke personaer, som skal støtte resten af mit projekts tilblivelse. Man laver personaer for at være sikker på at man holder sit scope med projektet. Man sikrer at man sigter på den rigtige “fiktive person” i ens segment, og derved i sidste ende laver en løsning der er mere relevant for modtageren.

Primær persona

Sekundær persona

Discovery 2. gang

Her tager jeg et skridt tilbage til discovery-fasen. Det gør jeg fordi jeg nu har et solidt fundament, scopet med mit projekt, og derfor kan gå videre. Ved hjælp af mine personaer, de andre konkretiserede værktøjer i interpretation-fasen, og den indsamlede data, kan jeg nu udføre en visuel research.

Visual research

funktion og æstetik

Besøgsliste:

https://www.eventbranchen.dk/ 08-05-2024

https://innovativeevent.dk/tag/fremtid-i-eventbranchen/ 08-05-2024

https://svendborgevent.dk/ 08-05-2024

https://event-danmark.dk/#Section5 08-05-2024

https://copenhagenevent.dk/ 08-05-2024

https://www.jacobleander.dk/ 09-05-2024

https://1508.dk/ 09-05-2024

https://www.nozebra.dk/resultater/agf 09-05-2024

https://www.avcenter.dk/?gad_source=1 09-05-2024

https://magnaevent.dk/ 09-05-2024

https://foofighters.com/ 09-05-2024

https://sybogames.com/ 09-05-2024

https://ioi.dk/ 09-05-2024

https://tactilegames.com/ 09-05-2024

https://jacobdinesen.com/ 09-05-2024

https://www.arianagrande.com/ 09-05-2024

https://dypaang.dk/ 09-05-2024

 https://www.lydmand.nu/ 09-05-2024

https://fango.dk/ 09-05-2024

https://www.superside.com/ 09-05-2024

Research af teknik og trends

6 examples of exceptional mobile website design:

https://webflow.com/blog/mobile-website-design?utm_source=google&utm_medium=search&utm_campaign=SS-GoogleSearch-Nonbrand-DynamicSearchAds-Tier2&utm_term=dsa-1480385100845___697641339344__&gad_source=1 09-05-2024

• https://www.cornwallclimate.org/ 09-05-2024
  • Edge to edge video

• https://south40snacks.webflow.io/ 09-05-2024
  • Menu fold når man scroller

• https://www.jordangilroy.com/ 09-05-2024
  • Tunge flotte CSS animationer
  • Meget minimalistisk design

Responsive Web Design Trends: Enhancing User Experience Across All Devices

https://medium.com/@digitaldesignagency19/responsive-web-design-trends-enhancing-user-experience-across-all-devices-3d1620dfda08 09-05-2024

• Mobile-First Approach
• Accessibility and Inclusive Design
• Dark Mode and High Contrast Themes ß Også indtænke bæredygtighed

Top 5 Web and Mobile Design Trends in 2023

https://zensite.co/blog/web-mobile-design-trends-2023 09-05-2024

• CSS Animeret scroll på website til at guide historien
•  Single-page scrolling sites <– Ingen undersider – alt foregår på 1 side

10 inspiring examples of maximalism

https://webflow.com/blog/10-inspiring-examples-of-maximalism?utm_source=google&utm_medium=search&utm_campaign=SS-GoogleSearch-Nonbrand-DynamicSearchAds-Tier2&utm_term=dsa-1480385100845___697641339347__&gad_source=1 09-05-2024

• Mange af de maximalistiske sider er gået over og blevet minimalistiske

Mobile App Design Trends 2024

https://www.designstudiouiux.com/blog/mobile-app-ui-ux-design-trends/ 09-05-2024

• Flat Design: https://elementor.com/blog/flat-design/ 09-05-2024
• Neumorphism – Værd at undersøge i fremtiden
• Asymetriske elementer som guide og hjælp til brugeren

https://webflow.com/blog/web-design-trends-2021?utm_source=google&utm_medium=search&utm_campaign=SS-GoogleSearch-Nonbrand-DynamicSearchAds-Tier2&utm_term=dsa-1480385100845___697641339347__&gad_source=1 09-05-2024

• Parallakseeffekt til scrolling giver sitet dybde
• Horisontal scrolling
• At bruge støj (grain) til at gøre websites mere naturlige
• Afdæmpede farver, med stærke kontraster
• Man kan bruge sløring til at skabe adskillelse
• Retro fonts

https://uxplanet.org/need-ui-inspiration-discover-40-button-styles-that-pop-8b1f77db6b24 09-05-2024

• Knapper til inspiration

https://www.sphinx-solution.com/blog/types-of-ux-buttons-and-best-design-practices/ 09-05-2024

• Knapper til inspiration

Flat design, afrundede knapper, simple rolige farver, stærke kontraster, minimalistisk design, animationer, få farver, tydelige CTA

https://dribbble.com/search/button 09-05-2024

• Knapper til inspiration

https://www.sitepoint.com/understanding-and-using-rem-units-in-css/ 09-05-2024

https://freefrontend.com/css-buttons/ 09-05-2024

https://alexfoliotemplate.webflow.io/ 10-05-2024

• Inspiration til menu

https://webflow.com/list/horizontal-scroll?utm_source=google&utm_medium=search&utm_campaign=SS-GoogleSearch-Nonbrand-DynamicSearchAds-Tier2&utm_term=dsa-1480385100845___697641339341__&gad_source=1 10-05-2024

• Generel inspiration

https://dribbble.com/tags/website-menu 10-05-2024

• Inspiration til menu

https://www.zalando.dk/ 10-05-2024

• Bredde omtrent 1200px
• Gør det nemmere at designe
• Begrænser antallet af mediaqueries!

https://ucl.itslearning.com/DashboardMenu.aspx?LocationType=Personal&DashboardType=MyPage 10-05-2024

• Ca. 1100px I bredden

https://ioi.dk/ 10-05-2024

• Bruger full width
• Mere cinematisk / immersivt

https://webflow.com/blog/website-footer-design-examples?utm_source=google&utm_medium=search&utm_campaign=SS-GoogleSearch-Nonbrand-DynamicSearchAds-Tier2&utm_term=dsa-1729073405028___697641339326__&gad_source=1 12-05-2024

https://webflow.com/blog/website-footer-design-examples?utm_source=google&utm_medium=search&utm_campaign=SS-GoogleSearch-Nonbrand-DynamicSearchAds-Tier2&utm_term=dsa-1729073405028___697641339326__&gad_source=1 12-05-2024

• Footer inspiration

Ideation

I min visuel research hentede jeg en masse inspiration og pejlinger, som jeg har forsøgte at konkretisere til faktiske udkast og idéer. Denne del af processen kastede to ting af sig: et moodboard, og en styletile.

Et moodboard bruges til at indfange designidéer, kommunikere et “feel” eller en følelse, eller måske til at udforske farvesammensætning. Moodboardet danner ramme for at designe en styletile i overgangen til experimentationfasen.

Moodboard

Styletile

Styletiles skal fungere som designsprogsskabelon mellem designeren, projektet og projektets interessenter. I dette projekt er bærer jeg alle tre hatte, men deler dog den sidste hat med interessenterne, som er mine personaer. Alt multimediedesign i projektet bliver baseret på denne styletile. Det gælder alt fra dokumenter til projektets færdige produkt. <– Bare et lille hint til den første af de 8 gyldne regler: “strive for consistency”.

Experimentation

I experimentation-fasen skal der samles feedback og bygges prototyper. Det handler om at få gjort ens idéer og tanker til virkelighed, og teste om de holder! Her startede fasen ud med silent-feedback på skolen. Mit styletile var under udvikling under silent feedback.

Silent feedback

Det drejer sig om at skabe et miljø hvor respondenterne, til den ønskede feedback, kan være så ærlige som muligt. Det blev sat op så vi ikke skulle interagere med hinanden, så vi kunne forblive følelsesmæssigt neutrale. Vi skulle altså gå fra projekt til projekt og tilbyde feedback til projekterne individuelt.

Feedback fra dagen:

Nogle af punkterne havde jeg svært ved at tolke ind i projektet, mens andre faktisk ændrede mit projekt. På baggrund af feedbacken mit styletile simplificeret i overskrifter, og der blev sorteret farver og tilføjet knapper. Dertil udviklede jeg et logo, også på anbefaling. Jeg forsøgte at udvide mit projekt til folk i detailfaget, ved at være mere konkret med mine tilbud.

Ideation 2. gang

Efter at have modtaget feedback, blev jeg naturligt tvunget tilbage i ideation-fasen, så jeg kunne indføre ændringerne og tilføjelserne

Styletile efter feedback:

Experimentation 2. gang

Nu begynder selve produktudviklingen, og dertil hører prototyping. Det er vigtig at iterere over de idéer man får, fordi man for hver gang raffinerer dem hver gang. Man arbejder altså hermeneutisk, det vil sige at man forholder sig til sit arbejde over flere omgange. I denne fase holder jeg fokus på at få skabt prototyper, og gerne i forskellig detalje grad. Først lavede jeg paper-prototypes af wire-frames, derefter lavede jeg en lo-fi wireframes, efterfølgende byggede jeg en hi-fi mock-up prototype og til sidst byggede jeg hjemmesiden, på baggrund af alle de foregående prototyper.

Paper-prototypes (lo-fi)

Stregtegninger på papir, som skal understøtte indholdet. Baseret på visuel research tidligere i processen.

Wire-frame

Her arbejdede jeg nærmere med C.R.A.P. i et forsøg på at fremme indholdet, ved hjælp af layout. Mine designvalg er alle med udgangspunkt i at styrke layout. Ingen content-choices her!

Her er et udpluk fra C.R.A.P. overvejelser i processen:

Proximity / Repetition:

• 16px til sammenhængende elementer
• 48px til adskilte

Mål ovenfor er baseret på REM systemet. I mit tilfælde har jeg valgt at definere min rem som 16px = standard højde.

Contrast / Alignment:

• Alle elementer holder 16px til kanten, med mindre det er billeder. Det fremhæver billederne at de går til kant og giver dem en smule kontrast til knapper og tekst.
• Knap til CTA på forside nederst er rykket til højre som “kontrast” eller “break the pattern” !

Mock-up

Nu skal der tages stilling til indholdet. Det generelle layout er skabt, og nu skal vi sørge for at skabe brugbarhed, læsbarhed og feedback til brugeren. Mock-up blev også brugt til at visualisere min vision, og få første smag på hvordan siden skulle se ud. Prøv den her:

I denne prototype har jeg brugt 8 golden rules til at udvikle brugerfladen.

Consistency:

• Brug “streger i firkant” som designsprog
• Vær opmærksom på CTA som eksempelvis footer CTA og forside CTA

Shortcuts:

• En stærk footer, hjælper brugere til hurtigere betjening af din side, og generel nemmere kontakt!

Feedback:

• Giv dine brugere feedback! Når de hover over en knap, skal den reagere. Det samme når de trykker!

Jeg vender tilbage til 8 golden rules i næste prototype, fordi de bliver mere relevante i udviklingen.

Hjemmeside

Nu skulle al ting blive til virkelighed. Hjemmesiden skal kodes! Her har jeg selvfølgelig fokus på det tekniske. Udvalgte ting jeg har fokuseret på er: WCAG, 8 golden rules, optimering, effektivisering.

Se og prøv den afleverede side her: https://www.eksamen.lefty.dk

WCAG

(Web Content Accessibility Guidelines) er tjekket løbende med: https://achecks.org/checker/index.php – her er der blevet givet retningslinjer for hvordan elementer skal udformes for at eventuelle skærmlæsere kan læse siden korrekt. Jeg har haft fokus på at tilføje “alt”-attribute, for at sikrer at eventuelt synshæmmede kan forstå sidens indhold. Den melder 1 fejl på et i element, som er brugt i teknisk øjemed til portfolio karrusellen på forsiden. Det har umiddelbart ingen betydning for skærmlæseren i følge mine tests med onlineværktøjer.

8 Golden Rules

Error handling

• Hav et system, som kan håndtere fejl. Sørg for at brugeren bliver tilbudt løsninger på problemet. Gerne forskellige, så man kan holde brugeren på siden.
• 404 side – fejlside – en side som ikke eksistere
• 500 side – fejl – server der ikke kan løse request, interne fejl

Reversal of Actions, Memory Load & Locus of Control

• Sørg for adgang til navigationen på alle tidspunkter.
• Det skal være nemt for brugeren at navigere, og det skal uden frygten for at fejle, eller vælge permanente forkerte valg.

Optimering

Optimering drejer sig om at have fokus på load-times, load-orders og cache control. Jo hurtigere siden kan respondere på brugerens input, jo bedre. Det betyder nemlig at man undgå unødvendigt overhead.

Igennem Google Lighthouse, og netværks-overvågning i Chrome udviklerværktøjer, kan man danne sig et overblik over hvilke elementer der loades “for sent”. Jeg blev opmærksom på at mine fonts fra google stod i vejen for FCP (First Contentful Paint) og LCP (Largest Contentful Paint). For at ændre load-orderen kan man med fordel bruge javascript-biblioteker, men fordi de er bandlyst, må vi nøjes med de værktøjer HTML tilbyder. Vi bruger relationen “preload” i <head> til at få billeder i header, hero og menu til at loade først. Vi løsriver altså elementerne fra den typiske load-order. Mine fonts henter jeg direkte fra googles bibliotek, og pre-loader på siden, så jeg ikke skal igennem googles style-system fra google fonts, som har det med at sløve indlæsningen drastisk.

Effektivisering

Alle mediefiler skal igennem en optimering. Ofte er billeder og videoer lagret i højst mulige kvalitet, uden hensynstagen til brug online. Når en side skal indlæses, har filstørrelser alt at sige for sidens indlæsningshastighed. Derfor har jeg valgt at bruge google webp-format (til billeder) og webm-format (til videoer), som halvere størrelsen på filen, men beholder samme kvalitet, i forhold til en png, eller jpg-fil. Enkelte steder har jeg været tvunget til at bruge en gif, simpelthen fordi jeg ikke har mediet i andet format, og der desværre ikke var tid til at reproducere materialet i Premiere Pro. Derudover skal dine filer også komprimeres. Man kan ikke nøjes med at konvertere medie-filerne til webp og webm formatet. Nogen kvalitet må man gå på kompromis med, men ofte er det overhovedet ikke synligt i sidste ende. Se eksempelvis på billedet af mig på forsiden.

Evolution

Denne fase er en “elastisk” fase. Med det mener jeg at mens hjemmesiden blev udviklet, bevægede jeg mig mellem experimentation og evolutionfasen. Med det skal forstås at man implementere en løsning på hjemmesiden, og går til evolution-fasen for at evalurer ens fremskridt. Man iterere altså over hjemmesidens løsninger, udvikling og indhold.

Efter aflevering, til forberedelse

For at forsætte min videreudvikling og forbedring af hjemmesiden vil jeg gerne bruge følgende to værktøjer til at indsamle mulig feedback.

Heuristisk evaluering

Heuristisk evaluering er et værktøj som forbinder sig til de heuristiske principper af Jakob Nielsen, 1994. Det er 10 tommelfingerregler som er baseret på studier om menneskets hjerne og adfærd i forbindelse med interaktive designs. Med det kan jeg finde umiddelbare fejl i min brugerflade, uden jeg nødvendigvis skal samle mange respondenter. Det kan gøres selv.

Brugertests

Brugertests af respondenter i målgruppen kan give et meget vigtigt indblik i mulige forbedringer af siden. Jeg kan i samme ombæring få data om min målgruppes adfærd på min brugerflade.

Min tanker er at kører en think-aloud test, med enkelte mål for respondenten om at tage kontakt på siden og generel/specifik viden søgning. Jeg regner med at have mellem 5-8 respondenter fra mit målgruppesegment.

Refleksion

Først gør jeg det Andrea siger jeg ikke må: Shit jeg har lært meget ;-). Min største udfordring har været mine personlige forhold. Jeg blev far, min egen far fik konstateret kræft, og jeg har skulle passe et arbejde undervejs. Tidsstyring har været essentielt for mig. Kode-delen har været nemmere for mig, fordi jeg har tidligere erfaring med kodning før. Jeg har på nogle punkter måtte gå på kompromis. Min energi er her til sidst blevet meget lav. Jeg vil gerne fordybe mig yderligere i kodning i fremtiden. Jeg kan se nogle steder hvor programmering i javascript kunne gøre nogle ting meget nemmere. Eksempelvis burgermenuen. Med javascript bliver koden kortere og simplere – vel og mærket hvis man bruger systemer som Saas. Jeg har også måtte droppe en kontaktformular, fordi jeg satte mig et mål fra starten om at alt på siden skulle fungere 100%. I den forbindelse glæder jeg mig til vi måske? skal have om php-systemer og php-calls.

Note to future self: Check yourself before you wreck yourself ! – Forventningsafstem i tide, så du kan leve et mere helt liv undervejs.

Mit råd til kommende MMD’er og mig selv. Lyt til StudMaks – lav en tidsplan – spørg om hjælp!

Ha’ et godt liv.. Jeg mener det! <3

Vi har holdt åbne spontane sparrings-møder på discord. Det vil sige at alle i klassen kunne møde op og få inspiration, udveksle problemer eller bare snakke om løst og fast.

5. maj 1. møde:

2 andre studerende og jeg snakkede om organisering af projektet, og belæg for vores målgruppevalg. Vi fandt ud af at man godt kan bruge Danmarks Statistik til at stille skarpt på ens målgruppe. Vi har blandt andet fundet data på kønsfordeling inden for forskellige branchekoder, for at kunne lave en bedre persona i sidste ende.

https://www.dst.dk/da

5. maj 2. møde:

Vi mødtes 5 studerende og snakkede om personaer. Der var tvivl om hvorvidt man skulle have dem med. Personligt anbefalede jeg klart mine medstuderende at tage personaer med, så man kan holde sit “scope” (retning) i sit projekt.

Jeg hjalp også en medstuderende med at forstå relative- og absolute-path. Nogle links og objekter i hendes filsystem linkede ikke til de korrekte stier. Dette virkede også som en repetition for mig selv. Alle virkede glade <3.

6. maj 3. møde:

2 andre studerende og jeg snakkede løst og fast om planlægning og krav. Det er vigtigt at holde sit scope med ens projekt, så arbejdsopgaverne ikke løber fra en. Hvis man ikke tidsstyrer kan man risikere at projektet vokser sig for stort for tidligt, hvilket kan resultere i at man misser sin deadline og at projektet derfor fejler.

7.maj 4. møde

En studerende og jeg snakkede om forskellige designværktøjer. Vi kom frem til at værktøjer som moodboard, styletile og håndskitser er essentielle til at kunne fokusere projektet, og igen at holde scopet.

Jeg og 2 andre blev enige om at silent-feedback skal være en pejling mellem os studerende. Det er en gylden chance for at fange åbenlyse tidlige fejl og mangler.

14. maj 5. møde

I dag talte vi om:

• Flex i CSS
• Forventningsafstemning af projekt
• JavaScript og frameworks

Flex i CSS

Flex kan være svært, derfor er det vigtigt at dobbelttjekke sine subs og mains. Det vil sige at hvis du ikke har dine ting i de rigtige containere, kan du ikke organisere sub-containere korrekt, og derved ikke opnå ordentlig alignment.

A Complete Guide to Flexbox

Forventningsafstemning af projekt

Projekt 3 handler om vores proces. Derfor skal vi huske at lave det som støtter os i processen. Det betyder at man nogle gange må sortere noget fra, man gerne ville have med. Jeg måtte nøjes med mock-up af mobilsiden. Dertil skal det siges at jeg havde lavet wireframe (lo-fi – paper) til begge sider. Layout er på plads, og kan derfor godt laves uden. Hvis jeg var ansat i en virksomhed som mock-up-bygger, vill jeg selvfølgelig lave alle, som er krævet af proces, kolleger og mit arbejde. Jeg blev heldigvis gjort opmærksom på at det kun er ting og projekter, både skolerelateret og privat, som skal indgå på præsentationsporteføljen. Tak Sophie! <3

JavaScript og frameworks

Det er ikke tilladt at bruge frameworks. Det er fordi vi skal eksamineres i basic HTML og CSS. Derfor skal side udarbejdes ud fra vores nuværende skill-set. “En anden god gang” tænker jeg. Der er jo nogle meget stærke animationsværktøjer i Bootstrap-Sass systemet. JavaScripts er ikke et krav til dette semester, så derfor er brugen deraf op til en selv. Du bliver ikke vurderet derpå.

16. maj 6. møde

En medstuderende og jeg selv, snakkede om fonts, metoder til import, og vigtigheden af fallback-fonts. Det er vigtigt at vi er opmærksomme på at ikke alle fonts fungere overalt. Man skal derfor sikre sig at der er en font til backup, som eksempelvis:

.genericclassname {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

Her der referere vi til en font-familie af sans-serif. Det betyder at hvis den importerede font Roboto ikke er tilgængelig, skal der bruges den først tilgængelige sans-serif font på systemet som indlæser siden.

19. maj 7. møde

En sød medstuderende fortalte at personen havde misset nogle vigtige informationer til kick-off, og derfor var kommet alt for sent i gang. Vi snakkede om vigtigheden af at spørge til råds hos medstuderende, og i tilfælde af pres, forventningsafstemme med sig selv. Nogle gange er laveste bar for succes, den eneste løsning. Jeg håber alt går for dig <3

Mange løse møder efter d. 19. maj

Efterfølgende blev møderne mere løse. Jeg tilbød at man kunne mødes online, nogle gange tilbød nogle andre. Vi snakkede meget om tekniske løsninger og problemer. Mange forstod ikke github og ftp til subdomæne. MEN fordi vi sad sammen tit, fik vi hurtigt styr på det. Jeg valgte også at installere Rust Desk, fordi når man skal vise hvordan man løser tekniske ting og udfordringer, kan det være nemmer hvis man kan styre musen, og simpelt sagt “VISE HVORDAN”. Det viste sig også at være en stor succes.

Refleksion: Øvelse gør mester!