pilop
tilbagepil

Portfolio eksamensprojekt

Hele denne hjemmeside er mit eksamensprojekt. Jeg vil med dette projekt vise, hvad jeg har lært gennem hele vores første semester, hvor der har været fokus på designteori, kodning osv. Her på siden kan man se hele udviklingen af mit portfolio, hvor jeg har brugt, så meget af det vi har lært som muligt.


Første udgave af mit portfolio

Anden udgave af mit portfolio

Projektbeskrivelse

ver1

Udgangspunkt

I mit færdiglavet portfolio er der blevet taget udgangspunkt i mit forhenværende portfolio og mit feedback derfra og helt nyt feedback fra det jeg afleverede i december, da jeg stadig synes hele idéen var god. I mit seneste feedback fik jeg nogle nye idéer til hvordan jeg skulle lave designet lidt om og mere brugervenligt. Jeg har rette op på adskillige billeder og afsnit så de står mere på linje med hinanden. Jeg har gjort så mine links åbner i en ny fane. Ændret nogle farver og lidt i tekst, tilføjet links og så havde jeg overset at tilføje mit flowchart, men det er nu en del af desginprocessen.,

Jeg har haft problemer med den burgermenu jeg har lavet fra Codepen, da den kun virker på webform i google chrome, hvilket ikke er så brugervenligt. Jeg har dog valgt at beholde burgermenuen som den er, da den udover ikke fungerer helt på alle platforme og browsere er det hvad fra starten havde til hensigt med at lave, og ellers fungerer den som jeg gerne vil have den til. Designmæssigt har jeg lavet min projektside om så den passer bedre ind med de andre sider. Så har jeg også tilføjet lidt på kontaktsiden, da den var lidt kedelig i forhold til de andre sider.

Designvalg og designprincipper

Designprocesmodellen

Jeg har taget udgangspunkt i designprocesmodellen, der minder lidt om informationsarkitektur og et designbrief, i form af at man hele tiden har kunden med ind over sine tanker. Det er dog ikke et projekt jeg har lavet med en kunde men har alligevel fulgt processen. Først en research, derefter sitemap, wireframes og så lidt hen i det der minder om mockups. Så begyndte jeg at kode, og efter den lange proces sikrer jeg mig at koden er rigtig og validerer den. Så har jeg testet at den virker i forskellige browsere, og nu er den klar til launch.

designproces
aida

Aida modellen

Jeg har også valgt at tage udgangspunkt i aida modellen. Opmærksomheden skal komme på min forside igennem tegningen. Interessen skal komme på forsiden, når man opdager burgermenuen eller scroll down. Ønsket er at de finder hjemmesiden spændende og evt. får lyst til at skrive til mig omkring muligt arbejde. Målet er at blive kontaktet af mulige arbejdsgiver. Jeg har dog ikke en rigtig ’call-to-action’ knap ved brug af scroll-down, ellers kan burgermenuen virke som 'call-to-action', da man her kan komme direkte ind på kontakt.

Målgruppe og personas

Jeg vil gerne nå ud til dem, der har brug for hjælp inden for moderne digital design, basic opsætning af hjemmesider og evt. andet design. Det kan blandt andet være for små startupvirksomheder eller større virksomheder. Derudover har jeg indsnævret min målgruppe gennem de forskellige segmenteringsvariabler: Geografisk segmentering: Jeg vil primært nå ud til danske arbejdsgiver, da jeg har valgt at lave mit portfolio på dansk. Demografisk segmentering: Min målgruppe er folk, der enten selv har været på arbejdsmarkedet længe, eller som gerne vil nå ud på arbejdsmarkedet.

Primært vil min målgruppe ligge mellem 25-55 år og både kvinder og mænd. Psykografisk segmentering: Min målgruppe kan have forskellige formål med at kigge på mit portfolio. De kan komme fra meget forskellige miljøer og have helt forskellige personligheder. Adfærdsmæssigt segmentering: Dem der kommer til at gennemgå mit portfolio, er forhåbentlig nogle arbejdsgivere, der vil få loyalitet, til hvad jeg kan finde ud af, og er villig til at ansætte mig, selvom jeg ikke har den største erfaring endnu. Mine personas er lavet ud fra beskrivelsen af min målgruppe og kan ses her: Personas.

Gantt-kort

Gantt-kortet lavede jeg som det første, for at lave en plan over hvor meget tid jeg regner med at bruge på hvert område, og hvilke dage jeg har sat af til hver. Det var svært at lave som det første, da jeg ikke vidste med sikkerhed hvor lang tid hvert område vil tage. Jeg har så vidt muligt prøvet at holde mig til planen, det gik godt den første uge, da jeg var klar til at kode efter den første uge, hvor jeg også havde sat en milepæl. Derudover har jeg ikke helt holdt mig til planen, da nogle af områderne enten tog kortere eller længere tid end planlagt. Bedre syn af gantt-kort.

gantt-kort
projektstyring

Projektstyring

Projektstyring lavede jeg også en af de første dage, for at vise mine overordnede mål og sætte et ca. tal på hvor meget tid, jeg præcist vil komme til at bruge på alle områderne, der skal laves. Mit overordnet mål/OBS med mit portfolio er at udføre opgaven til højest mulig karakter. Min MBS, som også er et af de overordnet mål, er at lave et portfolio, jeg er godt tilfreds med. Det præcise antal timer jeg har skrevet på hvert område er ikke blevet overholdt helt, da det igen har været svært at skrive det ned på forhånd. Jeg har dog regnet ud af jeg i alt kommer til at bruge 118 timer og 53 minutter. Bedre syn af projektstyring.

Informationsarkitektur

Brainstorm

Efter jeg havde planlagt hvordan min tid kommer til at blive fordelt på de forskellige områder, gik jeg igang med informationsarkitektur. Her startede jeg med at lave en brainstorm over hvad mit portfolio skulle indeholde, og hvordan designet skal se ud. Mange af punkterne er taget fra hvordan mit gamle portfolio så ud, da jeg som sagt også har taget udangspunkt i det til at starte med.

brainstorm
sitemap

Sitemap

Derefter gik jeg i gang med at lave et sitemap, som giver et større og bedre overblik over hele mit portfolios struktur. Det viser hvilke punkter, der skal være i min burgermenu, og hvilke underpunkter hver af dem har.

Skitser

Mine skitser blev lavet meget hurtigt og kun til mobil platform, da jeg hellere ville i gang med wireframes og mere i dybden med mere detaljeret design. Derudover er mit design noget jeg har kopieret fra mit gamle portfolio med nogle ændringer, og derfor blev jeg hurtigt afklaret med, hvordan meget af det skal se ud.

skitser
moodboard

Moodboard

Jeg lavede mit moodboard ud fra hvilke ting, der inspirerede mig til at lave mit design. Jeg valgte den blå farve, da den er frisk men stadig rar at kigge på. Derudover har jeg også tilføjet tegninger, da jeg gerne vil have tegninger af mig selv lavet i illustrator, fordi jeg synes det også viser, at jeg godt kan lide at være kreativ i hånden.

Wireframes

Mine wireframes blev lavet meget simple, og var til at give et hurtigt overblik, over hvordan alle mine sider skal se ud på både mobil, tablet og web. De minder meget om hinanden da jeg har valgt at lave en one-pager og en burgermenu til at navigere rundt, hvis man ikke vil/kan finde ud af at bruge one-pager metoden. Dog minder resultatet af mit portfolio ikke helt om de wireframes jeg lavede, da jeg under processen fik lidt nye idéer, til hvordan det skulle se ud.

wireframes
flowchart

Flowchart

Jeg lavede mit flowchart for at vise en af de mange forskellige ruter på mit portfolio, og det giver et klarer overblik over hvordan strukturen over min hjemmeside fungerer. Jeg lavede en rute der viser hvordan man kommer fra forsiden og ind til de wireframes, jeg lavede til min app under flow 3. Det kan godt være svært for en ny bruger på hjemmesiden at finde rundt, da der er mange muligheder at vælge imellem, derfor er det vigtig med en god struktur.

Mockups

Mine mockups er lidt mere detaljeret end mine wireframes, i form af at jeg har tilføjet farve og, opstillet hvordan meget af teksten skal stå. Jeg lavede mine mockups ud fra mine wireframes, så derfor er mit endelig portfolio ikke helt lig med hvad mine mockups viser, da jeg f.eks. har valgt at lave hver underside til de forskellige projekter lidt anderledes for hver side. Det er kun siden der beskriver udviklingen af mit eksamenprojekt, der stemmer overens med den mockup, jeg har tegnet for projekt undersiderne.

mockups
syletile

Styletile

Min styletile er lavet ud fra de farver, den typografi og de tegninger, jeg har valgt at bruge på mit portfolio. Som sagt længere oppe har jeg taget udgangspunkt i mit forhenværende portfolio, derfor er farverne og typografien den sammen, men jeg har valgt at lave tegningerne lidt anderledes. Den blå farve har jeg valgt, da den er beroligende og lidt ungdommelig. Typografien er lidt modsat hvad man normalt vil vælge til en hjemmeside, da det er bogstaver med fødder, altså en serif font. Jeg har valgt den, da jeg synes den er med til at give mine afsnit med tekst en god læselighed, da den danner linjer med fødderne. Mine tegninger er lavet i illustrator ud fra et rigtig billede.

Kodning

Efter jeg fik lavet informationsarkitektur, gik jeg i gang med at kode. Jeg fokuserede først på, hvordan det vil se ud på webform og derefter mobil og tablet. Jeg har altså lagt fokus på at mit portfolio er responsive og virker på mobil, tablet og web. Jeg startede med at kode min index fil, som også er min one-pager, og derefter kodede jeg alle mine projektsider, som fungerer som en normal side, hele min hjemmeside er altså ikke en one-pager. Det eneste jeg har haft problemer med, har været at skjule overflødigt content på tablet og mobil form, og i nogle browsere også på web form.

Fremadrettet

Jeg har så vidt muligt prøvet at få mine ambitioner fra flow 2 lavet i mit nye portfolio og mere til. Jeg kunne dog godt tænke mig at videreudvikle på mit portfolio, en gang når jeg har lært mere i de forskellige programmer. Forsiden vil jeg gerne have mere liv på, ved at tegningen kunne blive til en animation, i form af at den kunne gå. Derudover vil jeg forhåbentlig have udvidet min projektside, både med skoleprojekter, fritidsprojekter og evt. projekter jeg har lavet for kunder.