Green Move
Til afslutningen af vores grundforløb var jeg oppe til en afsluttende eksamen, hvor opgaven var at designe en komplet visuel identitet til en fiktiv virksomhed.
Virksomheden opgaven omhandlede var GreenMove. En cykelhandler og mobilitetscenter. Med en fysisk butik der tilbyder cykler, tilbehør og udstyr, samt Smart teknologi og tracking af ture og CO₂-besparelser. Identiteten skal også afspejle Green Moves kerneværdier. Bæredygtighed, bevægelse, moderne teknologi og tilgængelighed.
Opgaven stillede tre konkrete krav til det færdige identitetsdesign:
Et logo, Logoet skal kunne fungere i farve og sort/hvid, bruges som app-ikon, være let genkendeligt kommunikere bevægelse + bæredygtighed.
En app, mini-app-flow med mindst 4 sammenhængende sider til GreenMove-appen. Siderne skal have tydelig navigation, være nemme at bruge.
En folder, Folderen skal informere om GreenMove, - brug den udleverede tekst + billeder. Den skal også fortælle om app'en og dens funktioner, også om relevante events og GreenMoves services.
Design af en visuel identitet til et fiktivt mobilitetscenter
Jeg har valgt at fremvise materialet i en lidt anden rækkefølge end min arbejdsproces, da processen involverede arbejde og overvejelser på tværs af opgaverne. I højre bjælke kan du læse om mit forarbejde, som kom før alt andet. Med nogen undtagelser.
"GreenMove er et cykel- og mobilitetscenter med base i Danmark, der arbejder for at fremme den grønne omstilling i hverdagen. Vi har særligt fokus på cyklen som et bæredygtigt, sundt og effektivt transportmiddel"
- GreenMove
Logo Designprocess
Første del af opgaven bestod i at designe et logo. Naturligvis var det første at gøre sketch nogen ideer ned, jeg fandt frem til at jeg gerne vil bruge G og M som hjulene på en cykel, og opbygge dem af stablede linjer. Som vist på højre.
Sketches tegnet på papir
Herefter begyndte jeg at tegne i Illustrator, startede med at bare lave bomærket i sort, jeg gjorde sikker på at alt skulle være i 2 nuancer, mørk og lys.
Screenshot af logo process i Adobe Illustrator
Bomærket fik noget mere finpudsning, både at sørge for alle linjer og linjeafstand var ens, samt tilføjede en baghjul skærm. For at få en bedre balance i billedet. Og så er det jo et meget fint logo hvis du allerede kender firmaet, men uden navn på vil man ikke vide mere end at det handlede om cykler. Derfor skulle der også være et navneskilt. Jeg tilføjede en kasse øverst og skalerede den så hele logoet passede i en 1:1 ramme.
Skrifttypen krævede lidt eksperimentation, før jeg fandt frem til en jeg synes godt om. Den hedder RL Aqva, har ingen varianter, men det var lige hvad jeg havde brug for. Tykkelsen, afstanden og den lille bølge agtige accent på nogle af bogstaverne, gav en venlig og natur tæt vibe. Jeg valgte også at runde 2 af hjørnerne på kassen, for at matche bedre. Som senere i min process blev en kerne del af identiten.
Logo fontvalg process
Zig Zag Folder
Næste del af opgaven satte krav på en folder, specifikt en zig zag / harmonikafolder. Det var op til personlig præference, hvordan man vil indrette den. Det eneste krav var dimensioner på på 100 x 145 mm pr side, 8 sider, print på SRA3, 2 sidet print.
Prototype
Ligesom logo, var første trin igen sketches. Jeg printede og skar en prototype ud, samt printede lidt på den for at få en sans af skala før jeg begyndte.
Prototype print af folder
Til design af folderen brugte jeg Adobe InDesign. Sat op som vist, 8 sider, delt op i spalter med 3mm bleed.
InDesign setup af folder, inkl få elementer
Tidligere i min proces da jeg lavede logoet, valgte jeg bare at runde hjørnerne for æstetik. Jeg valgte at beholde det som et designelement igennem min folder. Jeg valgte også at lave min app i tandem med folderen, for at beholde de samme designelementer og identitet igennem.
Jeg har igennem hele folderen gjort mit bedste for at holde alle marginer og størrelser. Flere steder omkring har jeg været inde og sørge for at det også var optisk rettet.
Kasse elememt rettet optisk med en guide firkant'
Trykklar produkt
Jeg har ikke mulighed for at gennemgå alle mine designvalg her. Du kan finde flere detaljerede noter i min dokumentation pdf. Den finder du under sidebaren helt i bunden.
Her vises det færdige design af de 2 sider i Indesign
Folder side 1 og 2
En lille note. Forsiden viser kun GreenMove logoet, men fortsætter ind på næste side, med en overskrift der siger "Gør det nemt" roteret 90 grader.
På samme måde skriver jeg "Vores mål" på kanten af 3 side som fortsætter i en kasse over på 4 side, der fortæller om GreenMoves mål. Men på samme tid hvis du fysisk vender folderen på siden, står der "Vores mål. Gør det nemt" for at give et hurtigt resume til læseren.
En masse test print
App-Flow
Sidste del var en app, lavet i Adobe XD. Her var der sat krav på minimum sider og ting der skal være med.
App‘en skal indeholde:
Startside + 3 af disse sider:
Tracking (bruger telefonens GPS til at registrere din rute, fart, distance og tid).
Statistik (antal k ørte km og hastighed).
Servicebooking (bestil tid til service på din cykel).
Profi lside (din profil på appen).
Der skal være fokus på:
enkel navigation
tydelige ikoner og layout
godt brugerfl ow
moderne digitalt design
Flowchart
Første og vigtigste ting for min app var god planlægning, før jeg begyndte at lave nogen app, vil jeg begynde med at lave et UX flowchart.
12. App UX Flowchart (lavet i draw.io)
Det her flowchart er til for at give mig selv en ide om hvilke sider jeg skal inkludere, og hvordan det skal være muligt at navigere de sider.
Adobe XD
Appen er lavet ved brug af Adobe XD. Jeg begyndte reelt på appen før folderen, men færdiggjorde dem på samme tid. Istedet for at forklare hvordan appen fungerer, kan du scanne QR koden på folderen eller finde den her https://xd.adobe.com/view/dcd85f2c-3a94-4267-981c-8d3243419bca-898b/
Adobe XD app-flow screenshots - design og flow
Jeg vil anbefalde du ser appen for dig selv, men jeg vil stadig sige lidt. Specifikt vil jeg highlight hvordan på kortet, så er tilbage knappen farvekodet. Det er efter hvilken side du gik igennem for at komme ind på kortet, der er en sidste rute i grøn, ny rute i hvid og gemt rute i orange.
Teknisk note
Appen er designet i Adobe XD i 1440 × 3216 px.
Kasserne har en hjørnerunding på 100 px i øverste venstre og nederste højre hjørne. Derudover er der anvendt en farvet drop shadow med værdierne X: 0, Y: -20 og Blur: 0.
Jeg har gjort stor brug af guides for at skabe et pseudo grid system, hvor elementerne placeres med enten 50, 100 eller 150 px afstand/margin.
Næsten alle artboards er animeret med Auto Animate. Jeg har oprettet to primære kasser med samme navn på tværs af alle artboards, så overgange og animationer fremstår flydende og sammenhængende.
Indhold
Green Move
Logo Designprocess
Zig Zag Folder
Prototype
Trykklar Produkt
App-Flow
Flowchart
Adobe XD
Supplerende
Moodboard
Identitet
Folder setup teknisk
Dokumentation pdf
Onedrive link
Moodboard
Før der kunne laves noget andet arbejde, var jeg nødt til at finde en retning, nogle farver og en generel ide om hvad det skal blive til. Derfor lavede jeg et moodboard. Jeg tog udgangspunkt i det grønne tema, både farvemæssigt og tematisk. Jeg var specielt fan af nogle landbrugsmarker logo, dem der ses i midten opbygget af parallelle linjer. Noget der også skilte sig ud for mig, var den enstemmige brug af sans serif skrifttyper.
4. Moodboard
Identitet
På et tidspunkt i min logo proces, lavede jeg et identitets layout ligesom nogle af dem på mit moodboard. Hvor jeg valgte et konkret farvepalette, skrifttyper og dannede en identitet.
5. Visuel Identitets layout
Folder setup teknisk
For dig der er interreseret.
Folderen er i 145 x 100 mm, 8 sider, 4 kolonner med 5mm gutter, 9mm margin alle sider og 3mm bleed. Herefter for at lave zig zag folderen, er siderne sat i grupper af 4, ved at slå shuffle fra, og rykke på dem over i pages panelet. Jeg lavede 2 lag, et til alt baggrunds materiale, og et til alt andet, som tekst og billeder øverst.
In Design tekniske detaljer
Dokumentation inkluderende alt teknisk info om folder print, setup og opfyldning af nogle ydeligere krav sat i opgaven. Samt app design og process.