Jonas' præsentationsportfolio

Det 1. semester af min uddannelse har budt på en bred vifte af adskillige opgaver, hver opgave med adskellige muligheder for at udfolde sine kreative egenskaber, indenfor "Adobe"-pakken.
Som nævnt på forsiden, har jeg tilegnet mig en særlig kendskab og kunnen indenfor "Adobe Illustrator", "Adobe Ligthroom Classic", "Adobe Photoshop" og "Adobe XD". Disse programmer er brugt i projekter, afleveringer og workshops.

I denne underside er der udvalgt nogle af de produkter som jeg har udarbejdet, ved brug af akademisk viden indenfor fagområderne, "Æstetik" og "Typografi". Der er med udgagnspunkt i "Æstetik", anvendt viden indenfor den faglige metode, "C.R.A.P.", og derudover viden indenfor fagområdet, "Farveteori" (som bl.a. inddrager emnerne, kontrastfarver og farvebetydning og -association).

Der er ud for hvert produkt en beskrivelse af, hvilken type af opgave som produktet er udarbejdet i. Der nævnes desuden hvilken akademisk viden og pot. faglig(e) metode(r) der er brugt, til udarbejdelsen.

Logo til en app, "Wroof", i forbindelse med en workshop, "Dating-app"-workshoppen (Forårs-holdet). Udarbejdet ved brug af "Adobe Photoshop".

Jeg startede oprindeligt på uddannelsen i multimediedesign, tilbage i februar, men grundet nedlukningen ift. covid-19, har jeg været nødt til at sygemelde mig med stress, og er så startet på et nyt hold (det som jeg på nuværende tidspunkt går på).
Dette produkt blev udarbejdet, i forbindelse med den dating-app worksshop der var, inden min sygemelding. Vi blev i denne workshop i min gruppe enige om, at udarbejde en dating-app til hundeejere. Jeg stod her for at lave logoet, til appen.
Der er her lagt vægt på faglig metode, indenfor "C.R.A.P.". Konrasten ses her ved f.eks. den lillae farve, ift. den gule. Jeg har udover faglig metode gjort brug af mine egen kreative evner og visuelle kompetencer, hvilket bl.a. kan ses ved det tykke sorte omrids, omkring logoet.

Logo til en app, "IT-Help", i forbindelse med en workshop, "Dating-app"-workshoppen (Efterårs-holdet). Udarbejdet ved brug af "Adobe XD" og "Adobe Photoshop".

Dette logo blev ligesom ovenstående produkt, udarbejdet ift. en workshop, hvor vi havde til opgave at lave en dating-app. Det var her anden gang at jeg deltog, i samme workshop.
Denne gang var det dog ikke helt ligesom sidst, da jeg ikke her stod for hele designet. En holdkammerat stod for videre stling, på "Adobe Photoshop", efter at jeg havde arbejdet på det, i "Adobe XD".

Øvelse, i forbindelse med undervisning i æstetik. Udarbejdet ved brug af "Adobe Illustrator".

På 1. semester, er æstetik et af de emner som er vigtige at sætte sig ind i, inden man fortsætter til 2..
Denne øvelse gik ud på at jeg i i "Adobe Illustrator" skulle lave en tegning, implementere det ind i "Adobe Illustrator", skabe et mønster ved markering af den implementerede tegning, og så føje det til i panelet, "Faverprøver", hvor det blev gemt.
Meningen med øvelsen, var at fremme forståelse for æstetikkens visuelle effekt, f.eks. gennem repetition af en given form, figur, mønster, etc..

Jeg valgte her at bruge mine kreative evner, til at tegne en besjælet vandballon, med en useriøs, komisk og på samme tid, sød, uskyldig udstråling. Tegne-stilen går igen, ved denne undersides sidste præsenterede produkt, der ligesom dette viser en form for humør-opløftende barnlighed.

Toppen af forsiden til "mockup" af redesign-forslag, til hjemmesiden tilhørende "Gram Bowling Klup" (grambowlingklub.dk), i forbindelse med Projekt 1: Redesign af Hjemmeside. Udarbejdet ved brug af "Adobe XD".

Det første projekt som vi skulle arbejde med, var et projekt hvor opgaven var at udvælge en hjemmeside, som man ville have til opgave at lave redesign-forslag til, ved brug af "Adobe XD" og den faglige viden som man har tilegnet sig op til projektets kick-off, og så skrive en klient-rapport om sit forslag efter redesign-processen.
Jeg valgte i dette projekt, at tage udgangspunkt i hjemmeside tilhørende "Gram Bowling Klub". Jeg har igennem redesign-processen anvendt akademisk viden og faglig metode, indenfor "C.R.A.P.", og dermed gjort store ændringer. Heraf kan f.eks. nævnes, at hjemmesiden oprindeligt er forholdsvis mørk i sin fremtoning, og består af varme baggrundsfarver, som sort og brun. Redesign-forslaget fremkommer herimod lys, og med kolde baggrundsfarver, som lysegrøn og hvid.

Det første viste produkt fra dette projekt, er som nævnt toppen af forsiden til redesign-forslaget, til denne hjemmeside. Jeg valgte i "Adobe XD" at placere en scrolling-bar, så man under brugertest kunne rulle gennem teksten, således give en ægte browser-oplevelse og samtidig opretholde læsevenligheden. Læsevenligheden blev skabt, ved at give teksten en læsevenlig størrelse, som i dette tilfælde var så stor at forsiden ikke kunne vise al sin tekst, uden en scrolling-egenskab - derfor scrolling-baren.

Bunden af forsiden til "mockup" af redesign-forslag, til hjemmesiden tilhørende "Gram Bowling Klup" (grambowlingklub.dk), i forbindelse med Projekt 1: Redesign af Hjemmeside. Udarbejdet ved brug af "Adobe XD".

Under det første projekt på min uddannelse, lærte jeg mig selv at lave scrollbarer i "Adobe XD", via denne video, How to create a scroll bar in Adobe XD.
De uddannelses-ansvarlige lavede under min sygemelding en særaftale om, at jeg fik lov at arbejde alene i alle projekterne på uddannelsen, da de mente at jeg arbejder bedst alene. Jeg har af denne grund været skubbet ud i en stor løsrivelse og selvstændiggørelse. Jeg har været nødt til at finde ud af en lang række opgaver selv, hvilket har styrekt min evne til selv at kunne problemløse, under tidsbegrænsning. Videoen der lærte mig at lave scroll-barer er ét ud af en række elsempler på, hvordan jeg har måtte problemløse mine opgaver på kort tid, så at jeg dermed har kunnet formå at overholde mine deadlines.

"Overlay"-element til "mockup" af redesign-forslag, til hjemmesiden tilhørende "Gram Bowling Klup" (grambowlingklub.dk), i forbindelse med Projekt 1: Redesign af Hjemmeside. Udarbejdet ved brug af "Adobe XD". Produktet er en undermenubar.

Til mit design-forslag lavede jeg bl.a. to undermenu-barer, hvoraf der kun i tilfælde af den ene (den undermenubar vist her) er mulighed for at kunne trykke på knapper, og dermed blive ledt hen til undersider.
Der er her lagt vægt på C.R.A.P.-metodens princip om f.eks. linjeopstilling ("Alignment") og nærhed ("Proximity"), ved hhv. tekstens centrering, i knappernes midte, og knappernes relativt korte afstand, til hinanden.

Kommentarbokse for socialt netværk, til "mockup" af redesign-forslag, til hjemmesiden tilhørende "Gram Bowling Klup" (grambowlingklub.dk), i forbindelse med Projekt 1: Redesign af Hjemmeside. Udarbejdet ved brug af "Adobe XD". Produktet er lavet, som et "overlay"-element.

Hjemmesiden havde intet socialt netværk for ikke-medlemmer, så jeg valgte at tilføje disse kommentarbokse. Kommentarboksene skulle vise, at brugeren nu havde mulighed for at kunne kommunikere og interigere, med medlemmer såvel som ikke-medlemmer, om bowling-klubben, og således få et socialtbaseret indtryk af stedet, og dermed nemmere kunne komme til beslutning, om at tilmælde sig klubben eller ej.

Kontakt-side til "mockup" af redesign-forslag, til hjemmesiden tilhørende "Gram Bowling Klup" (grambowlingklub.dk), i forbindelse med Projekt 1: Redesign af Hjemmeside. Udarbejdet ved brug af "Adobe XD".

To store forandringer som jeg har gjort ved hjemmesidens underside for klubbens bestyrrelse ift. æstetikken - herunder bl.a. "C.R.A.P.", har været billedernes opsætning ift. hianden og deres former. På hjemmesiden er bestyrrelses-medlemmerne opsat vertikalt for hinanden, formerne for de billeder der er (der er ikke et billede, for hvert bestyrrelses-medlem) er firkantede. Man skal i dette tilfælde scrolle, for at kunne få alle bestyrrelses-medlemmerne at se. I redesign-forsaget er der valgt et billede for hvert bestyrrelses-medlem, og billederne er placeret vertikalt for hianden. Brugeren skal i dette tilfælde ikke scrolle, for at se alle bestyrrelses-medlemmer; alle billeder med kontakt-informationer er samlet så man kan se det hele, på samme tid. Dette jeg vurderede at dette ville give brugeren en mere overskuelig oplevelse, ved sit besøg af bestyrrelses-siden. Billedernes former er gjort cirkulære, da runde former typisk er mere visuelt tiltrækkelige og behagelige, end kantede. Af samme grund har jeg valgt de afrundede knapper til redesign-forslaget, i modsætning til hjemmesidens firkantede knapper.

"Overlay"-element med kontaktoplysninger til webudvikler, til "mockup" af redesign-forslag, til hjemmesiden tilhørende "Gram Bowling Klup" (grambowlingklub.dk), i forbindelse med Projekt 1: Redesign af Hjemmeside. Udarbejdet ved brug af "Adobe XD". Produktet er et element der vises under knappen, "Kontakt webudvikleren", såfremt at man trykker på den.

Hjemmesiden havde sin egen underside til webudvikleren, med et billede. Jeg valgte derfor at lave et "overlay"-element i form af et slidedown-kort, til et af menubarens knapper i "Adobe XD", "Kontakt webudvikleren". Jeg vurderede at dette - ligesom med redesign-forslaget til den nye side med kontaktoplysninger, til bestyrrelsen - ville give en mere overskuelig brugeroplevelse, fremfor hvis der var en særskilt underside, med kontaktoplysinger til webudvikleren.
Jeg valgte at designe "overlay"-elementet simpelt og minimalistisk, uden et billede, men med et ikon i stedet. Det blev bestemt at gøre elementet afrundet i siderne vandret for hinanden, grundet som nævnt den visuelt attraktive virkning runde former har, kontra kantede.

"Overlay"-element med links til eksterne hjemmesider, til "mockup" af redesign-forslag, til hjemmesiden tilhørende "Gram Bowling Klup" (grambowlingklub.dk), i forbindelse med Projekt 1: Redesign af Hjemmeside. Udarbejdet ved brug af "Adobe XD". Produktet er en undermenubar.

Hjemmesiden havde ligeledes sin egen underside, med links til eksterne hjemmesider. Jeg lavede i dette tilfælde ligeledes et "overlay"-element med disse eksterne links, som ville blive vist under knappen, "Links".
Igen valgte jeg bl.a. at tage idgangspunkt i "C.R.A.P."-metodens princip, om linjeopstilling ("Alignment") og nærhed ("Proximity"), hvilket kan ses ved hhv. linkenes opstilling på ræderrække vertikalt overfor hinanden, og cirklernes korte afstand, til hinanden.

Forside til app, i forbindelse med aflevering, "Food Experience App". Udarbejdet ved brug af "Adobe XD".

Jeg havde forholdsvis tidligt inde i semestret en opgave, hvor jeg skulle designe en app til bestilling af fastfood. Dette var min første individuelle aflevering, og vi havde fra d. 8. september til d. 1. oktober, til at lave og aflevere den.

Jeg har igennem hele design-processen af min madbestillings-app - med det selvvalgte emne, "sushi" -,fokuseret på "C.R.A.P."-metodens principper, og har i dette tilfælde lagt vægt på minimalismen i appens udseende.
Med udgangpunkt i forsiden alene, kan nævnse alle fire "C.R.A.P"-principper. Nærheden ("Proximity") kommer til udtryk, i knappernes forholdsvise korte afstand til hianden og lange afstand, fra skærmens grænse, og linjeopstillingen ("Alignment") ses, ved tekstens centrerede placering, på hver knap. Kontrasten ("Constrast") ses, ved farverne rød og hvid. Repetitionen ("Repetition") er tydeligt vist, gennem tekstens genkendelige stilart og farver for hver knap, til valg af sushi. Taget i betragtning af de to kanpper i det røde felt, ses genkendeligeheden ved den hvide farve.

Overlay-element til app, i forbindelse med aflevering, "Food Experience App". Udarbejdet ved brug af "Adobe XD". Produktet er et tegn til brugeren, der giver visuelt udtryk for at der er trykket på en knap.

Til app-designet lavede jeg dette "overlay"-element, som skal dukke op på skærmen, så snart at man som bruger har trykket på knappen, "Filter out background noice". Man vil således få en opfattelse af, at man har trykket på knappen gennem animation, og dermed en intuitiv bruger-oplevelse.
Typografien er egnet til apps og hjemmesider, og repetitionen ("Repetition") ses, ved det genkendelige ikon i den hvide cirkel.

Overlay-element til app, i forbindelse med aflevering, "Food Experience App". Udarbejdet ved brug af "Adobe XD". Produktet er et tegn til brugeren, der giver visuelt udtryk for at der er trykket på en knap.

Ligeledes er der lavet et "overlay"-element, til når brugeren har trykket på knappen "Speech to text". Der er også her lagt vægt på en app-/hjemmeside-egnet typografi, og repetition ("Repetition"), ved det genkendelige ikon, i den hvide cirkel.

Menu-side til app, i forbindelse med aflevering, "Food-app". Udarbejdet ved brug af "Adobe XD".

Ved at man kunne få lov at vælge hvad der var ønsket på den uvalgt type sushi, gennem en slide-funktion, ville bruger-oplevelsen blive forholdsvis intuitiv, fremfor hvis menusiden var af samme stilart, som forsiden.
"C.R.A.P."-principperne kommer til udtryk, ved tekstypens genkendelige stilart, ift. forsiden ("Repetition"), kontrasten set ved rød og hvid ("Constrast"), Tekstopstillingens orden, i alle sidens områder ("Alignment") og den samlede opstilling af tekst- og billede-elementerne ("Proximity").

Ingrediens- og beskrivelses-side til app, i forbindelse med aflevering, "Food-app". Udarbejdet ved brug af "Adobe XD".

De små billeder visende ingredienserne på den valgte type sushi - efter at have valgt hvad type kød man vil have på/ efter at man har valgt at man gerne vil have sin sushi, i vegetarisk udgave - vil ligesom de to "overlay"-elementer, tale til brugerens visuelle oplevelse. "C.R.A.P."-principperne kommer igen til udtryk, ved bl.a. tekst- og billede-elementernes tætte placering, ift. hinanden.

Odrebekræftelses-side til app, i forbindelse med aflevering, "Food Experience App". Udarbejdet ved brug af "Adobe XD".

Brugeren ser her tydeligt at den ønskede type sushi med den ønskede type kød/i den ønskede vegetariske udgave er bestilt, gennem "uppercase"-teksten, "SUCCESS!", og de illustrationer der er vist på siden. Jeg har lagt meget vægt på æstetikken i denne side, især ved brug af "emoji"-illustrationerne.
Billedet af den valgte sushi er - ligesom de to "overlay"-elementer for redesign-forslaget til hjemmesiden tilhørende "Gram Bowling Klub" -, afrundet i siderne vandret for hianden, og der er taget højde for hvilke tekst-informatiner som brugeren bør se først og til sidst, ved valg af forskellige font-størrelser. I denne sides tilfælde, bør teksten "SUCCES!" være det første der læses, dernæst "Your order is en route..." og til sidst, "We've send a receipt by ypur email".

Side til digitalt katalog, udarbejdet frivilligt og ved brug af "Adobe Lightroom Classic", "Adobe Photoshop" og "Adobe Illustrator".

Jeg valgte som nævnt på forsiden, at lave tre ekstra-materialer, i form af to sider til digitalt katalog, og et loading-ikon.
I design-processen af dette produkt, har jeg udover "C.R.A.P."-metodens mange principper, gjort brug af den viden som jeg har lært, fra hvad jeg på min uddannelse har lært, i 1. semesterets emne, "Typografi". Jeg har ydermere haft gavn, af mine egne kreative kompetencer, og har udfoldet det visuelle evner som jeg i høj grad prioriterer at bruge, på min uddannelse.
Den valgte typografi er velegnet til hjemmesider, og eftersom at dette er en side til et digitalt katalog (også kendt som, "online katalog"), er den anvendte font-type passende.
Lampen er via "Adobe Lightroom Classic" og "Adobe Photoshop" gjort lysere, end alle andre elementer på billedet, for at kommunikere til brugeren at det er lampen der er til salg. Der er i dette tilfælde tale om visuel kommunikation, hvor brugeren for en opfattelse af hvad man kan købe på katalog-siden.
Figurene skaber med sine farver og nuncer, kontrast og former, giver siden stil, og fremhæevr lampen om det der skal være i fokus, ved at figurerne nemlig går bagom den.

Side til digitalt katalog, udarbejdet frivilligt og ved brug af "Adobe Lightroom Classic", "Adobe Photoshop" og "Adobe Illustrator".

Ligesom at ovenstående produkt viser en varer der er til salg, gennem "C.R.A.P."-metodens fire principper og typografi, giver dette produkt ligeledes brugern en opfattelse af at det er lænestolen, der er i fokus. Her er der valgt nogle andre farver og nuancer til figurerne, og dermed er der skabt en anden kontrast, end ved ovenstående produkt. Når dette så er sagt, gøres der stadigvæk brug af "C.R.A.P."-metodens fire principper, min viden indenfor hvad jeg har lært i emnet, "Typografi" og mine egne kreative kompetencer og visuelle evner.

Loading-ikon, uarbejdet frivilligt og ved brug af "Adobe Illustrator" og "Adobe XD".

En sjov lille idé om et loading-ikon, var det sidste frivillige kreative produkt ift. min uddannelse, som jeg ønskede at kaste mig ud i på mit 1. semester, inden eksamen.
Her kan det nævnes, at jeg har valgt en forholdsvis passende font-type, da det er et loading-ikon, til en hjemmeside for brugere med en dyb interesse, for video-/computer-spil, og alt hvad der omhandler dette emne.
Font-typen var ikke noget der fulgte med i "Adobe Illustrator". Jeg aktiverede den via "Adobe Creative Cloud"-programmet, efter at have ledt efter den mest "gamer"-agtige font-type, som jeg kunne finde. Jeg endte med at konstatere, at den viste font-type for dette produkt, ikke kunne blive mere "gamer"-agtig.