Design thinking – projekt 3
Jeg har brugt design thinking (IDEO) igennem min design proces, det har givet en guideline til hvornår der skulle brainstormes (divergent thinking) og hvornår designet skulle konkretiseres (Convergent thinking) Design thinking tillader, at man springer frem og tilbage mellem faserne, hvilket gør at man løbende kan tilpasse løsningen ud fra nye indsigter og feedback.
Discovery – divergent > primær data = selv funden data
For at finde ud af hvad jeg gerne ville som multimediedesigner brugte jeg modellen the golden circle til at finde mit WHY, HOW, WHAT – Det gav mig også et indblik i at finde ud af hvilken type målgruppe jeg skulle gå efter.
WHY – hvad er mit formål og hvorfor interessere det andre
Jeg ønsker at skabe visuelle designs med fokus på boliginteriør og diy artikler som har et budskab og en god storytelling som man kan inspireres ad. Jeg ønsker at kunne visualisere ord som kan være svære at få sagt, i gennem visuel kommunikation og tydeliggøre formål og identitet gennem æstetik, rene linjer men udtrykke det uden at være for formel og gerne har et glimt i øjet og et strejf af humor
HOW – hvordan kan jeg løse opgaverne
Min arbejdsmoral ligger meget i at levere et helstøbt produkt og laver aldrig tingene halvt, jeg er ambitiøs når der er opgaver der skal løses og er ikke bange for at kaste mig ud i noget nyt.
jeg har en god visuel æstetisk forståelse som er spræng fyldt med ideer som jeg kan formidle igennem faglighed og anerkendte digitale programmer.
WHAT Hvad kan jeg tilbyde af digitale færdigheder
Illustrationer – (visuel kommunikation igennem grafisk designs)
Trykoplag– (Visuelt kommunikation igennem trykte medier)
Webdesign – (visuelt opbyggelse af hjemmesider gennem trends og farveforståelse)
animationer – (visuelt kommunikation gennem grafisk bevægelse og lyd)
Paper art – (visuel kommunikation ud af papir og karton)
Jeg vidste nu at jeg gerne ville finde en målgruppe kunne bruge min tilgang som grafisk designer. jeg begyndte at tænke på, hvilke ting og virksomheder som kunne være sjovt at arbejde med. Jeg har en stor passion for boliginteriør/antikviter og kreative udskejelser og det gjorde det mulig at gå på opdagelse i mange forskellige steder der enten havde brug for en grafisk designer eller havde et marketing team som man kunne blive en del af. Det helt store mål var finde en virksomhed der evt. kunne indeholde alle mine passioner og design tilgang. I min desk research fandt jeg frem til fire typer overkategorier for diverse virksomheder, Bolig magasiner, genbrug/antikvitets virksomheder, boliginteriørs virksomheder, Hobby, DIY Kreativtets virksomheder samt tre virksomheder pr. overkategori som jeg kunne appellere til. Jeg lavede derfor et mindmap over det hele for kunne danne mig et overblik samt finde ud hvad de forskellige virksomheder havde af designudtryk/tone of voice som ville passe ind i min personlighed.
Da jeg i min research kom forbi virksomheden kirppu, kiggede jeg deres instagram igennem og fandt ud af at denne virksomhed havde alle 3 af mine passioner samt havde et uformelt, kreativt og imødekommende design udtryk som passede lige ned i min personlighed. Varekategorierne var alt fra nye ting, ældre ting og kreative påfund, de havde således også et budskab om en grønne fremtid ved at gøre det lettere for kunden at tjene penge på deres brugte ting. I nogle af de stories på instagram, formåede de også være kreative ved at kombinere to ting og lave dem om til et nyt produkt, en kreativ genistreg.
Jeg fandt således også en jobannonce på hvad kirrpu faktisk forventede af en grafisk designer.
Research på hvordan forskellige portefolioer var bygget op:
Da jeg aldrig havde lavet præsentationsportefolio måtte jeg gå på research for at finde ud af hvordan sådan nogle kunne være bygget op. Jeg gik på opdagelse og de portfolioer som jeg kunne finde var hovedsageligt freelancere, og her har jeg taget udgangspunkt i fem mulitimediedesignere: https://sallyandrea.dk, https://cabiz.dk, https://katharinaskifter.dk/, https://karolinerelster.dk, og https://www.mettemaj.dk, De havde alle nogle inspirerende aspekter i hvordan den skulle bygges op.
I de fem portfolioer blev jeg særligst inspireret af hvordan header og footeren skulle stilles op.
Interpretation – convergent <
Målgruppen var fastlagt og jeg vidste hvad de havde af forventninger til en grafisk designer. Derfor udviklede jeg en persona ud fra jobannoncen så det gjorde lettere for mig at vide hvem jeg skulle tale ud til når det kom til copywriting og hvad jeg skulle gøre i min opbyggelse af min hjemmesides tone of voice.
Min tone of voice for hjemmesiden skulle således være en afspejling af mig som appellerede til dem, som nævnt tidligere var deres design udtryk imødekommende, uformel, og kreativ og de ord beskriver også mig og mit design udtryk, Jeg tilføjede nogle ekstra da jeg syntes det gav et større helhedsindtryk: Klassisk, Idérig, detaljeorienteret, underfundig, æstetisk, inspirerende og rolig.
Ideation >
Moodboard:
For at jeg kunne finde ud hvordan min tone of voice kunne udtrykkes gennem følelser, farver og interesser, udarbejde jeg et moodboard med mine interesser inden for boliginteriør, hobbyer og mønstre for at vise min æstiske tankegang og hvilke former og farver der appellerede til mig.
Ud fra mine valgte elementer blev der herefter også dannet en farve palette som jeg ville bruge på min hjemmeside.
Farvepaletten blev en blanding mellem analogt og komplimentær
Analogt fordi den hvide, grå, støvede grøn og okkergule, ligger tæt op ad hinanden i farvehjulet. Komplimentær fordi at den blå farve bryder de varme naturlige farver, omvendt når man taler temperature er den gule og blå direkte modsætninger af hinanden hvilket skaber kontrast og udgjorde sig til være mine to CTA områder/knapper.
Det geometriske hexagon mønster fra moodboarded gav mig inspiration til at lave et logo, som kunne fortolkes på flere måder. Jeg har fortolket min illustration på mit logo som en reference til mit sind som er en kasse fyldt med ideer og digitale færdigheder og som har flere sider og tilgange til visuel kommunikation. Omvendt kan kassen også fortolkes som et rum som er klar til at blive indrettet med alverdens ting og sager. logoet er således og sat sammen med principper fra gestalt lovene. Hexagonen/loget som egentligt består romber/rudeformer fremstår som kasse, men der er luft i mellem og bruger gestalts lov om lukkethed, da det ligner at det er en lukket figur, og pga af loven om nærhed (Proximity) hører romberne sammen og danner kasseformen. Det giver logoet et mere luftigt udtryk.
’’Hyrup Design’’ er skrevet med skifttypen poppins for signalere imødekommenhed og give et moderne udtryk, samtidig signalere det også en uformelhed, som passer godt til kirrpu designudtryk og koncept.
Da jeg havde opbyggede en lo-fi computerversion i figma, begyndte jeg at lave mobilversionen.
jeg prøvede at sætte mit logo ind i mobilversionen og synes det fyldte for meget i hovedmenuen, så jeg designede et alternativ logo som kunne gøre det lidt mere simpelt.
Undervejs i konstruktionerne af mit alternative logo kom der forskellige design elementer ud af det. Elementer som måske godt kunne bruges andre steder.
Da skrifttypen skulle vælges tog jeg udgangspunkt i mit logos skrifttype og brugte den til overskrift (bold) og underoverskrift (semibold) for forsat at signalere imødekommenhed og et moderne udtryk, til brødteksten valgte jeg en serif skrifttype merriweather (regular) for at signalere at jeg også kunne være professionel og alvorlig.
Herefter begyndte jeg at lave nogle af mine wireframes om til mock-ups så jeg kunne finde ud af hvilke elementer der skulle have hvilke farver og særligt få lagt mine call to action farver de rigtige steder.
I hele denne proces har jeg brugt C.R.A.P principperne i opbyggelsen
Contrast: Her brugte jeg kontrast både i typografi hierarki og farverkontraster. Jeg havde som sagt gjort jeg overskriften bold, underoverskrift semibold og brødteksten regular, som gøre det lettere for brugeren at navigere i læse rækkeføljen. Farvekontrasterne de grønne, blå og gule, gjorde sig gældende men særligst de gule og blå som jeg brugte til CTA.
Repetition: her jeg tog udgangspunkt i logoets hexagon form så samtlige visuelle elementer var denne figur og gav genkendelighed og mindeværdighed.
Alignment: Der er blevet skabt alignment med centreret overskrifter og left-alignet tekst for at skabe blikfang og vægtbalance mellem dem.
Der taget højde for lige stor whitespace ude siderne.
Proximity Der blevet skabt proximity i hvordan billederne er sat op. Der er således også blevet skabt proximity med valg af baggrundfarve på særligst projekt siderne
Med alle disse design overvejelser opbyggede jeg en styletile så jeg og andre kunne danne sig et overblik til silent feedback. I styletilen fik jeg også skrevet mine nøgleord samt 40 ord som beskrev mig og mit koncept.
Experimentation <
til silent feedback fik jeg virkelig meget ros for mange ting, overvældende lidt kritik og rigtig meget konstruktiv feedback som jeg tog med videre.
Mit styletile blev lavet om og fik tilføjet billedestil og knap-designs, Der blev deriblandt også kommenteret på mit valg af skrifttype på min brødtekst så måtte springe tilbage i til ideation for at finde ud af hvilken skrifttype der ville være bedre, jeg er fandt således også ud af at selvom serif skrifttyper signalere professionalisme er det ikke godt for læsbarheden på computerskærme da de små fødder på bogstaverne kommer i konflikt med pixelsne på skærme. Poppins sans serif skrifttypen som jeg ellers havde brugt til over og underoverskift, fungerede også ret godt som brødtekst i ’’regular’’. Jeg skiftede derfor til denne og lod typografi hierarkiet blive defineret af tykkelsen på bogstaverne samt lod mit hexagon koncept være det mindeværdige ved hjemmesiden. Jeg fik også brugt skrifttyperne i en længere tekst på det nye styletile så man kunne se brugen tydeligere. Jeg fik rokeret rundt på forskellige elementer så alt blev left-alignet i forhold til C.R.A.Ps alignment men beholdte overskriften i toppen centreret da det det leder øjet naturligt fra overskrift til brødtekst. og fik byttet rundt på burgermenu og logo i mobilversionen for at gøre det mere intuitivt.
Efter silent feedback spurgte jeg om en second opinion i forhold til mine frames. Særligst framet hvor når man trykkede på projekter, ville man komme ind på en side med alle kategorierne samlet for dernæst at vælge mellem dem og at hver kategori havde hver deres egen side. Jeg fik stemme enighed på at det ikke var nødvendigt og at kategorierne sagtens kunne ligge på den samme side i hver deres sektion. Derfor blev der også rokeret rundt på menuerne og resulterede i et meget mere simpelt design med færre klik.
Evolution >
Så skal der kodes!
I løbet af kodningsprocessen mødte jeg mange frustrationer men også succeser.
jeg brugte værktøjer som youtube, google, chatgtp, og en masse sparring med min studie gruppe og særligst med Tiffany. Undervejs blev jeg klogere på hvordan HTML og CSS var kædet sammen, samt hvor, hvornår og hvordan man kunne bruge flex og grid i sin kode. Undervejs i kodningen stødte jeg på forskellige design udfordringer og ændringer som fik mig til at gå tilbage til frem og tilbage fra evolution til ideation for at redesigne på ny.
Mit første udgangspunkt fra ideation med valg af materiale som jeg ville vise frem var illustrationer, animationer, fotografering, paperart, og webdesign, men da jeg skulle til at lægge billeder op til kategorien fotografering, gik det op for mig, at workshoppen i InDesign havde mere relevans i forhold til min målgruppe fordi der fremgik i jobbeskrivelsen at man kom til at arbejde med emaildesign og trykte medier. Jeg gik derfor tilbage til ideation inkomporede dette og deraf blev jeg også også nød til at redesigne den åbne kasse med digitale færdigheder da, InDesign nu også var en færdighed jeg kunne vise frem. Re-designet af den åbne kasse gav mig også mulighed for at skabe et indtryk af at min stærkeste kompetence var Adobe illustrator.
Der var også tilføjelser af knapper og funktioner som jeg ikke havde tænkt på som gjorde den mere intuitiv og brugervenlig. Ved min fremvisning af mine illustrationer havde jeg sat et lille forstørrelsesglas i midten. Men da der kom indhold ind i hexagonerne blev forstørrelsesglasset en kende usynligt. Derfor var jeg først ude i at lave en tekst linje med et forstørrelses glas i linjen, men den var ikke så intuitiv i mobil versionen, derfor lavede jeg en hexagon med et forstørrelses glas ved siden af galleribillederne og som tog brug af gestalt lov om nærhed og gjorde galleribillederne til en GUI = graphical user interface. WYSIWYG
Der var også udfordringer i opstilling af projekterne. Projekterne havde forskellige visningsformater igennem prototype, pdf og billeder. Derfor måtte der skabes knapper til henvisninger og henvisninger til slideshow.
Da jeg første gang prøvede at lægge min hjemmeside online, viste den ikke min skrifttype fra poppins og men kun standard serif skrifttypen og det var skyldtes at selvom visual studio code kunne registrere poppins så kunne browseren ikke. Derfor måtte jeg kopiere en henvisning fra google font og ligge den ind i min css.
Jeg oplevede også at når man åbnede min hjemmeside i chrome at den automatisk oversatte hjemme siden, hvor af at der på en af mine knapper stod ’’tryk her’’ men blev oversat til = ’’prøv hende’’ … hvilket skyldtes at jeg ikke havde ændret sproget til ’’da’’ i stedet for ’’en’’
Og sidst men ikke mindst er der blevet lavet en plakat som har illustreret min process igennem hele denne rejse.
men rejsen er ikke slut endnu, da der stadig er plads til forbedringer…
Refleksioner :
det har været en meget hård omgang at skulle jonglere med alle disse krav der var i opgaven. Det har været en opgave at lave en hjemmeside fra bunden når man i føler at man kun har forstået 10% … okay 15% af hvordan man koder i timerne. Lige så vel har det været en frustration at BEM har været et krav til opgaven, det er ganske vist en metode at struktere tingene på, men jeg har ikke kunne se fidusen i det.
Udover det har denne proces har givet mig en langt større forståelse af hvad de forskellige tags betyder og hvad der skal skrives i en HTML-fil før CSS’en giver en hjemmeside liv. Jeg havde nok heller ikke nået til hvor jeg er nu, hvis det ikke havde været for min studiegruppe. Jeg har brugt java-script i form af dropdown-menu og kontakt formular og det er ganske vist et helt nyt sprog som er meget kortere og i særdeleshed et meget utydelig sprog at forstå.
Det har været svært at slappe af i denne proces, fordi tingene tager tid og tålmodighed og at pauser kan føles som om man kommer bagud. Generelt set har kravene for de forskellige projekter været tårnhøje men lettere at navigere pga. gruppearbejde. Så at skulle sidde med alle opgaverne selv har været en udfordring.
Det har været svært at finde ud af hvordan man skulle finde sin vej igennem design-thinking-processen fordi målgruppe analyserne ligger forskelligt i forhold til hvilket design det handler om. Men jeg synes jeg fandt en vej, og der blev jo også sagt at der ikke var noget der var forkert i den proces.
ydermere har det også været svært at skulle designe hjemmeside som fortæller om en selv, men som skal appellere til en virksomhed, men det lykkedes at finde en måde og det er vel i virkeligheden også det design handler om.
BEM i koden har været vanskelig at forstå, men gennem flere ”samtaler” med chatgpt har jeg fået en lidt større forståelse for det, tror jeg. Jeg er i hvertfald med på hvad en block og et element er, men modifier er stadig lidt svær at forstå – men vi har heller ikke fået særlig meget undervisning i det.
Når alt det her er sagt, må jeg også sige at jeg stolt over at der nu ligger en hjemmeside ude på nettet med mit navn og mit design og alt hvad der er på den hjemmeside er noget der kommet fra en lille ide som har vokset sig til et gedigent produkt. Den mangler selvfølgelig nogle forbedringer, men havde ikke troet at resultat ville blive så godt.