Webdesign

– inspireret af naturens funktioner, former og farver

Budskaber

– kommunikation målrettet brugersegmentet

Brugerflade

design med fokus
på formål og brugervenlighed

Hvad er det her for noget?

Dette er min portfolio af de flow projekter jeg har lavet på 1. semester af Multimediadesigner uddannelsen.

Eksamensprojekt – 1. Semester 2018

Refleksion over flow #5

Det er en pudsig oplevelse, sådan at skulle forholde sig til et igangværende projekt. Har jeg overhovedet gjort mig nogen tanker over processen?

Jeg gik friskt i gang dagen efter at vi var orienteret om projektet. Jeg var jeg fuld af forventninger og havde hovedet fyldt med idéer. Lidt af en luksus når man står på tærsklen af at påbegynde et projekt – ovenikøbet et re-design af et eksisterende projekt, med de faldgruber det indebærer.

Jeg sloges fra start med min sædvanlige trang til bare at kaste mig ud i at få materialiseret nogle af mine idéer. Men jeg havde jo lovet mig selv, at jeg denne gang skulle tilgå projektet på en mere ”professionel” måde og ikke begynde på noget andet, før jeg havde en projektplan. Tvivlen ramte mig – var jeg overhovedet i stand til at gennemføre det her?

Nu er det jo ikke fordi at jeg ikke kan se værdien af at have en projektplan at holde sig til. Tværtimod har jeg selverkendelse nok til at vide, at jeg om nogen har brug for at have nogle rammer at arbejde inden for. Jeg er nemlig verdensmester i ”scope creeping”.

Jeg fik mandet mig op og kom i gang med min PBS. Det gik faktisk vældig godt og der gik ikke lang tid før jeg var i fuld gang med min WBS og tidsplan.

Jeg havde bestemt mig for at prøve at skrive ”indkommende” design og kode idéer ned, i stedet for at prøve dem af med det samme, som jeg ellers har tendens til at gøre. Der gik ikke lang tid før mit skrivebord flød med sedler, med mere eller mindre utydelige notater. Men det virkede og selvom jeg ikke havde det fulde overblik og en fiks og færdig WBS og tidsplan på plads, da jeg gav mig selv lov til gå i gang med designprocessen, følte jeg mig alligevel bedre organiseret end nogen sinde før.

Mit skrivebord under arbejdet med denne portfolio
Jeg valgte at arbejde hjemme, da faciliteterne bedre imødekommer min måde at arbejde på. Her et øjebliksbillede af mit skrivebord.

Opgavebeskrivelse

Formål

Formålet med portfolien er at præsentere og dokumentere dit faglige niveau og vise din faglige udvikling samt gøre dig bevidst om, hvad du har arbejdet med og hvad du har lært.

Det afsluttende eksamensprojekt på 1. semester har to fokusområder:

1. Komplet redesign af din portfolio

2. Opdatering af portfoliens indhold


Redesign af nuværende portfolio

Med udgangspunkt i det du har lært i løbet af 1. semester, skal du viderevikle det website, der udgør din nuværende portfolio.

Den nye portfolio skal fungere som udstillingsvindue for alt det du indtil nu har arbejdet med på uddannelsen, samt fremover kunne indeholde det arbejde du kommer til at udføre i løbet af de kommende semestre. Din portfolio er dit ansigt udadtil, der viser hvem du er, og hvad du kan over for virksomheder, studiekammerater, lærere mv.

Udformningen af din nye portfolio skal demonstrere dine evner inden for fagområderne design og visualisering samt interaktionsudvikling. Dokumentation af udviklingen skal desuden demonstrere at du kan planlægge dit projekt bl.a. ved at udarbejde PBS, WBS og Gantt-kor

Det er vigtigt, at du tager nogle konkrete beslutninger i forhold til portfoliens visuelle udtryk (typografi, farver, layout, ikoner, evt logo samt stemning osv.), og at du forholder dig konsekvent i forhold til disse beslutninger.

Du skal altså både designe websitet og begrunde dine designvalg og designprincipper ud fra de modeller og metoder du har lært i undervisningen. Designbeslutninger og -udvikling skal begrundes og være indeholdt i portfolien.

Du skal ligeledes kunne redegøre for, hvordan dit re-design tager udgangspunkt i en brugertest af portfolien.

Den tekniske del af arbejdet skal demonstrere, at du er i stand til at anvende de redskaber og metoder, som har været gennemgået i undervisningen.

Det er derfor et krav, at portfolien udvikles fra grunden uden brug af content management systemer eller CSS-frameworks af nogen art (eks. Wordpress, Bootstrap og lignende).

Opdatering af portfoliens indhold

1. Portfolioudvikling

Portfolien skal dokumentere den udviklingsproces, der ligger til grund for det nye portfoliodesign, projektplan-lægning, informationsarkitektur, designskitser, wirefra-mes, mockups etc. Altså skal portfolien indeholde udviklingsdokumentation „fortælle om sin egen tilblivelse” – som 1. semester eksamensprojekt.

2. Dokumentation af tidligere projekter

Portfolien skal præsentere og dokumentere resultatet af de 4 flowprojekter, som du har arbejdet med på semestret:

• Drøm din portfolio
• Byg din portfolio
• Byg en app
• Byg Sweetbot responsive website

Der skal som minimum være link til:

• Projektbeskrivelsen
• Den oprindelige løsning
• Rapporter (hvor de er udarbejdet som en del af et projekt)

3. Remake af tidligere opgaver

Du skal nu forholde dig til de resultater du tidligere er nået frem til i de tidligere projekter.

De produkter og projektrapporter, du har afleveret individuelt eller som gruppe, skal nu have en hel eller delvis „make over”.

Udgangspunktet skal være de kommentarer og den feedback, du har modtaget i forbindelse med de enkelte projekter.

Der kan også være løsninger, som du undervejs mente kunne være blevet anderledes. Dette skal nu udføres og implementeres i portfolien. Forbedringer vil desuden kunne bygge på dialog med en vejleder mv. Du er også velkommen til at præsentere andre/egne design- og medieløsninger i portfolien.

Der skal altså være link til:

• Den forbedrede løsning (udover tidligere nævnte link til den oprindelige løsning)

4.Reflektioner over din læring

Portfolien skal præsentere din læring på en måde så man direkte og kronologisk kan se din udvikling. Du må selvfølgelig linke fra opgaverne til læringsdelen af portfolien, men det er vigtigt at læring har sit eget område/placering i portfolien.

Refleksionsspørgsmål du kan bruge, når du arbejder med din læring:

• Hvad har jeg lært under forløbet?
• Hvordan hænger det sammen med min forhåndskendskab til emnet og denne opgavetype?
• Hvad forventede jeg at lære?
• Hvad har jeg mere brug for at lære?
• Hvad vil jeg foretage mig for at komme til at lære dette?

Skema

Check skemaet på Timeedit om vejledning vedrørende de enkelte underviseres tilstedeværelse.

Ditlev: dsk@cphbusiness.dk
Frederik: fdta@cphbusiness.dk
Jesper: jhi@cphbusiness.dk
Marc: klu@cphbusiness.dk
Merete: mli@cphbusiness.dk
Morten: moro@cphbusiness.dk


Formalia

Den enkelte studerende er ansvarlig for egen portfolio og den afleveres individuelt. Arbejdet med opdatering af indhold i flow 4 kan udføres helt eller delvist i den gruppe der oprindeligt udarbejdede projektet.

Alle punkter skal præsenteres i din portfolio. Dokumentationen af portfolioens udvikling skal være tilgængelig på portfolien som en integreret del af indholdet og/eller som link til dokument i PDF-format.

Aflevering

Du afleverer projektet ved at uploade en pdf-fil med dit navn, din Cphbusiness e-mailadresse samt et link til din portfolio på Wiseflow.Portfolien skal uploades senest:

21. december 2018, kl. 12:00.


1. semester eksamen

Eksamen er mundtlig og finder sted den

14 - 16 januar 2018.

Eksamen har en varighed af 25 minutter – 5 min præsentation fra den studerende med efterfølgende 15 min. diskussion af portfolien og 5 min votering.

Skema for eksamensrækkefølge vil blive uploadet på Moodle i starten af januar 2019.

Projektplan

Product Breakdown Structure

PBS oversigt

Work Breakdown Structure

PBS oversigt

Tidsplan

PBS oversigt

Designvalg

Navigationsdesign / informations arkitektur

Med min PBS og WBS som udgangspunkt, begyndte jeg hele designprocessen med at tænke over sidens struktur og arkitektur.

Formål:

• Brugervenlig navigation
• Intuitiv navigation
• Enkel navigation
• Inspirerende navigation
• Logisk struktur i informationerne

Målsætning:

• At kunne navigere uden brug af menuen
• At kunne navigere som om siden er en – enhed
• At navigationen viser brugeren rundt på siden
• At navigationen kan åbne/lukke, tænde/slukke for information
• At navigationen kan huske hvor brugerne var og kom fra
• At navigationen giver brugeren lyst til at udforske siden
• At navigationen leder brugeren til den forventede information

Det er ikke uden udfordringer at lave en navigation der virker ”dynamisk” på en statisk side. Og da jeg ydermere havde truffet beslutning om at forfølge min oprindelige idé om at lave en ”one-page” side, var jeg tvunget til at søge nye veje i forhold til hvad jeg tidligere har lavet.

Jeg er overordnet endt med at være godt tilfreds med resultatet. Selvom jeg har måtte gå på kompromis med en række løsninger, er jeg lykkedes med at få indfriet de fleste målsætninger.

Sitemap

Visuelt design

Med en plan for struktur og navigation, var turen kommet til at overveje det visuelle udtryk. Planen var at være tro over for mine oprindelige tanker.

Formål:

• Organisk udtryk
• Dynamisk udtryk
• Personligt udtryk

Målsætning:

• At skabe opmærksomhed
• At skabe interesse for budskabet
• At skabe et ønske om at udforske
• At få brugeren til at søge informationer
• At brugeren føler sig underholdt
• At der er en rød tråd gennem siden

Jeg begyndte med at lave skitsere de idéer jeg havde. De runde former skulle være et gennemgående tema og skabe det organiske og dynamiske udtryk jeg havde planer om. Herefter lagde jeg mig fast på hvilke farver jeg ville bruge og begyndte af finde baggrundsbilleder. Jeg lavede også nogle muckups i af forskellige skærmstørrelser, for at afprøve om mine idéer holdt vand.

Typografi

Jeg følte at former, farver og billeder skabte tilstrækkeligt med visuelle virkemidler, og traf derfor et sikkert omend lidt kedeligt valg af typografi. Verdana til brødtekst og Trebuchet MS til overskrifter m.m. De er begge egnet til skærmbrug og tilgængelig på stort set alle platforme.

Eksempler på tidlige skitser
Eksempler på nogle af de tidlige skitser
Eksempler på muckups
Eksempler på muckups

Farvevalg

Jeg har valgt rene/klare farver da de skaber liv og opmærksomhed. Samtidig har hver af farverne en symbolik/signalværdi som jeg har ønsket at gøre brug af:

 rgba (15, 91, 38, 1.00) – Mørk grøn

Med den mørkegrønne farve ønsker jeg at symboliserer: Håb, fornyelse og fornuft.

 rgba (50, 35, 20, 1.00) – Lys grøn

Med den lysegrønne farve ønsker jeg at symboliserer: Fornyelse og friskhed.

 rgba (50, 35, 20, 1.00) – Brun

Med den brune farve ønsker jeg at symboliserer: Stabilitet, grobund og udholdenhed.

 rgba (2,25,114, 1.00) – Mørk blå

Med den mørkeblå farve ønsker jeg at symboliserer: Ro og kvalitet.

 Hvid – Grå – Sort

Jeg valgte at benytte sort, hvid og gråtoner til afsnittet om mig selv. Dels for at nedtone denne sektion i forhold til, at meningen med min portfolio snare er at vise mine kompetencer end at vise mig selv frem. Samtidig signalerer S/H visdom og elegance.

 rgba (245,83,11, 1.00) – Orange

Med den orange farve ønsker jeg at symboliserer, at flow1 var fyldt med glæde over at komme i gang med en ny uddannelse og det gå på mod der fulgte med denne.

 rgba (34,115,240, 1.00) – Lys blå

Med den lyseeblå farve ønsker jeg at symboliserer, at der i flow 2 var mere overskud til koncentration og fordybelse.

 rgba (251,0,0, 1.00) – Rød

Med den røde farve ønsker jeg at symboliserer, at vi i flow 3 nu var fuld gan og at aktiviteten var høj.

 rgba (92,26,175, 1.00) – Lilla

Med den lilla farve ønsker jeg at symboliserer, at jeg i flow 4 følte en smule uro over at afgive kontrol men også muligheden for at give fantasien frit løb, på det område der interessere mig mest.

Farveskema for projektet
Illustration af farvernes primære funktioner

Billedvalg

Jeg har valgt at benytte naturbilleder alle de steder hvor billederne bliver brugt som baggrunde/dekoration. Årsagen er at jeg primært finder min inspiration i naturen og at de både skaber den stemning jeg ønsker og sender et signal om hvem jer er.

Billederne er udvalgt ud fra følgende kriterier:

• Billederne på ”landingssiden” er valg ud fra farverne, der i vidt omfang repræsenterer hele portfolioen. Vandliljen signalerer ting der folder sig ud, de flydende blade – at dette kun er overfladen og svampene – at det du ser, også findes når du ikke lige kan se det.

• Billedet på ”seneste projekt - flow 5 siden” er valg ud fra at farven og at et topskud signalerer noget nyt og friskt.

• Billedet på ”1. semester siden” er valg ud fra farverne, den grønne signalerer en ny uddannelse og den røde signalerer høj aktivitet, og at og at motivet signalerer at 1 semester var et efterårssemester.

• Billedet på ”tidligere projekter siden” er valg ud fra at farven og motivet, der signalerer grobunden og det der har været.

• Billedet på ”profil siden” er valg ud fra at farven og motivet, der signalerer viljestyrke, balance og noget der er flygtigt og foranderligt.

Alle billederne er downloadet fra pixabay.com under følgende licens: CC0 Creative Commons – Gratis for kommerciel brug og Ingen navngivelse påkrævet.

Kodedesign

Jeg valgte fra start at benytte ”display flex” og mit eget simple kolonnesystem. Hverken CSS Grid eller det ”Simpel grid” system, som vi havde fået lov at benytte, gik særlig godt i spænd med mine idéer om en masse cirkler. Og de steder hvor jeg med fordel kunne have brugt et grid-system, anså jeg at der ikke ville være den store gevinst ved at gøre det.

Jeg havde desuden beslutte mig for at prøve forskellige teknikker af, for at forsøge at vise en alsidighed. At der så i visse tilfælde var nemmere og måske bedre måder at kode tingene på, var så den pris jeg måtte betale. Jeg har derfor lavet nogle løsninger i CSS i stedet for at benytte JavaScript, for at prøve det af og dermed udvikle mig mest muligt.

Jeg har kodet det med udgangspunkt i ”desktop” versionen, da jeg vurdere at målgruppen primært vil se siden på deres bærbare eller stationære computer. Derudover har jeg valgt at fokusere på tablet og min laveste prioritet har været telefonen.

Brugertest

Pre-design test

Jeg havde inde jeg gik i gang med re-designet af min portfolio, foretaget to ”tænke højt test” på min eksisterende portfolio fra flow2. Ikke at jeg fik specielt mange brugbare data ud af dem. Men jeg fik dog bekræftet det jeg havde lært af den feedback jeg havde fået på flow 2 projektet og måske vigtigst af alt – der var muligheder i de runde former, som var værd at arbejde videre med.

Midtvejs test

Jeg havde bevidst fravalgt at lave en kortsorteringstest. Jeg frygtede at den kunne lede mig på vildspor i forhold til den idé jeg havde, og som jeg troede fuldt og fast på. I stedet besluttede jeg at lave en midtvejs ”tænke højt test” når struktur og navigation var nogenlunde på plads. Det viste sig at fungere godt og jeg var efterfølgende vældig tilfreds med resultatet. Min testperson, der er pædagog og således ikke har specielle forudsætninger for at teste hjemmesider, kom rundt i alle kroge af siden og havde spontant lagt mærke til og rost, nogle af de mere specielle løsninger jeg havde lavet. Hun oplevede siden som nem at navigere rundt på og brugen af farverne gav hende overblik over hvor hun var på siden.

Pre-release test

To dag før aflevering fik jeg lave yderligere to ”tænke højt test”. Jeg tog ind på CPH Business og fik den ene tutor til at lave en ”ekspert test” og fik min nabo der er kundechef i et IT-firma til at lave en ”superbruger test”.

Min "ekspert" test var kort men vældig brugbar.

”Ekspertens” dom

”Ekspertens” største anke var at ”flow overlay siderne” var fuld side højde, for at skjule det underliggende indhold, så man kunne scrolle længere ned end indholdet. Hus syntes endvidere at nogle af farverne var lidt skarpe og at det var generende at ”flow knapperne” på ”semester siden” bevægede sig.

På positiv siden nævnte hun menuen og at der generelt var effekter når musen var over noget man kunne klikke på, at det gav en god dynamik. Hun værdsatte også at løsninger og rapporter var integreret på siden, så man ikke nødvendigvis skal åbne dem i et nyt faneblad.

”Superbrugeren” dom

”Superbrugeren” skulle lige vænne sig til måden at navigere på. Han udtalt at han nok var lidt konservativ og savnede en top- og/eller sidemenu. Han påtalte også, i lighed med ”eksperten”, at det var forvirrende at man kunne scrolle ned hvor der ikke var noget indhold. Han havde et blandet forhold til de integrerede løsninger og rapporter og ville fortrække at åbne dem i nye faneblade. Han var generelt glad for det visuelle design, specielt baggrundsbillederne og brugen af klare farver.

Ændringer efter testene

Jeg valgte efter testene at finde nogle løsninger på det begge mine testpersoner havde påpeget. Det er således ikke længere muligt at scrolle hverken op over eller ned under ”flow overlay siderne”.

Læring

Det er svært at vurdere hvad jeg har lært i flow 5, da det i skrivende stund ikke rigtigt er nået at bundfælde sig endnu. En ting er dog helt sikkert – jeg har både hvad angår design og kode bevæget mig ud i ukendt terræn med dette projekt. Og det har resulteret i en masse nye erfaringer.

Jeg er også blevet mere bevidst om nogle af mine egne styrker og svagheder. På nogle områder har rykket mig, i den rigtige retning, mens jeg på andre områder har måtte erkende at jeg falder i de samme huller, som jeg er kravlet op af så mange gange før. Men første skridt mod at ændre sin egen adfærd er vel at blive klar over at der er noget der bør ændres.

Hvad har jeg lært hen over 1. semester?

Selvom jeg har haft berøring med mange af de emner vi har haft i 1. semester, har vores underviseres, i mange tilfælde, haft en anden tilgang til dem. Jeg har derfor også set emnerne fra en anden vinkel og i nogle tilfælde fået en bedre forståelse af dem.

Jeg har helt sikker fået øjnene op for at prototyper og brugertest kan spare mig for mange timers arbejde, ved at jeg undgår at bruge tid på at færdiggøre fejlslagne idéer og løsninger. Samtidig kan det give inspiration til løsninger jeg ellers ikke ville være kommet på.

Plads til forbedringer

Jeg kan ikke erindre at jeg tidligere har haft/brugt så lang tid på et projekt, som det er tilfældet med dette eksamensprojekt. Alligevel står jeg tilbage med en oplevelse af at der er mange ting der kunne forbedres. Der er ting som jeg ville gøre, lave eller kode på en anden måde, hvis jeg skulle starte helt forfra med dette projekt igen. Men heldigvis også ting som jeg er sikker på at jeg vil genbruge i kommende projekter.

Det er nok ikke så usædvanligt at jeg stå tilbage med den fornemmelse, da jeg under processen har fået et større overblik og gjort mig en masse nye erfaringer. Og i virkeligheden er det vel blot et udtryk for at der er sket en læring.

Jeg har bevidst valgt ikke at gå den sikre og kendte vej. Både hvad angår det visuelle og koden, har jeg fået prøvet nogle nye ting af. Noget fungerer rigtig godt mens andet rummer plads til forbedringer.

 

Flow #1 – Drøm din portfolio

Refleksion over flow #1

Efter at have ”rodet” ganske lidt med Adobe XD, traf jeg en beslutning om at løse flowopgaven ved at lave min prototype som et Joomla site. Årsagen var at jeg så flere begrænsninger end muligheder, ved at benytte XD.

Efterfølgende har jeg indset at XD’s begrænsninger, et langt stykke hen ad vejen også er dets styrke. XD rummer således mulighed for at afprøve forskellige design- og navigationsidéer af, uden at være begrænset af hvad jeg selv er i stand til at kode.


Portfolio prototype
Portfolio prototype lavet i som Joomla CMS site.

Opgavebeskrivelse

En portfolio er et professionelt værktøj, som bruges til at vise dine kommende arbejdsgiver, hvem du er og hvad du kan.

Nu har du muligheden for at skitsere dit første oplæg til et portfolio i Adobe XD eller lignende prototypeværktøj. Aflever 1 PDF-fil (max. 3 sider og max. 10 MB) som beskriver og dokumenterer din prototype!

Tilføj et link i PDF'en til en online version af jeres portfolio (brug Adobe XD's "publish prototype"-link).


Portfolio opgave illustration
Illustration fra opgavebeskrivelsen.
Flow 1 rapport
Forsiden af flow 1 rapporten - tab på billedet for at hente den.

Læring i flow #1

De emner vi har beskæftiget os med i flow 1, er alle sammen emner jeg tidligere er blevet undervist i og har arbejdet med på Web-integrator uddannelsen. I mit tidligere erhverv som grafiker, har jeg desuden arbejdet en del med Photoshop.

Det til trods, fandt jeg det yderst berigende at gennemse flere af de Lynda tutorials om Photoshop, der var linket til i flow 1. Jeg blev bevidst om hvor meget jeg har at lære om Photoshop og fik genopfrisket en del af de helt grundlæggende funktioner.

Ligeledes er jeg ved at læse i ” Designing for the Web” af Mark Boulton, blevet bekræftet i at des mere man lære, des mere står det klart, hvor meget man ikke ved.

Den "Case Day" vi havde i intro ugen, fandt jeg både meningsfuld og lærerig. Ofte har det været ligesindede med en tilgangsvinkel svarende til min egen jeg har arbejdet sammen med i forbindelse med gruppeopgaver. Den dirversitet der opstod ved at blande studieretningerne var yderst inspirerende – og noget jeg håber vi får mere af.

Feedback på opgaven

Det var den første gang vi skulle præsentere en flowopgave og det var tydeligt at der var en spændt stemning. Jeg har lavet præsentationer mange gang, professionelt, i forbindelse med uddannelse og som underviser, så jeg meldte mig gladeligt som den første.

Jeg gennemgik det jeg havde lavet og nogle af tankerne bag udtrykket, farvevalg m.m. Jeg havde en fornemmelse af at det gik meget godt, og havde et svar parat på de spørgsmål som Ditlev og Marc stillede. MEN det var kun indtil Marc spurgte om jeg ville vise dem koden. Det ville jeg som sådan gerne, men forklarede at siden var en Joomla CMS-side og at koden derfor ville have en vis kompleksitet.

Jeg skal da lige love for at piben fik en anden lyd. Marc var på ingen måde imponeret og mente at det nærmest var snyd at benytte et CMS-system. Han fik dog pulsen lidt ned igen da jeg forklarede at jeg selv havde designet og lavet skabelonen, om end jeg havde fået hjælp fra et skabelon værktøj (Themler), til at generere koden. Jeg oplevede det som om at mine medstuderende syntes at det var meget fedt, det jeg havde lavet.

Flow #2 – Byg din portfolio

Refleksion over flow #2

Da jeg så flowopgaven til flow 2 var min tanke umiddelbart, at det ville jeg komme rimeligt nemt om ved. Prototypen jeg havde lavet i flow 1 var jo en fuldt funktionsdygtig hjemmeside og den lå allerede online. Jeg skulle således ”bare lige” opdaterer den med en ”profil side” og oprette et repository på GitHub.

Men næ nej – så nemt skulle det naturligvis ikke være. Jeg havde jo fået lidt på puklen over at have lavet ”prototypen” i et CMS system, så det blev gjort meget klart at opgaven skulle løses, udelukkende med HTML og CSS.

Normalt er jeg jo ”ikke” stædig, men fanden tog ved mig og jeg besluttede at gøre et forsøg på at kode en side der lignede min prototype. Det skulle vise sig at give en del udfordringer. Jeg besluttede mig desuden for at give min portfolio et lidt mere personligt præ, i form af profil-siden.


Portfolio - Min Profil
Profil-siden på den oprindelige portfolio.

Opgavebeskrivelse

Nu er det tid til at implementere en fungerende online version af din portfolio i form af et website, som du udvikler fra grunden ved hjælp af HTML 5 og CSS 3. Brug din prototype som oplæg – måske kommer du tæt på det første udkast, måske tager dit projekt en ny og uventet kreativ retning?

Du skal producere en online version og dokumentere din kode og projektstruktur på GitHub. Vi forventer:

• online version af din portfolio på dit Webhotel (ikke via GitHub pages)
• en repository til dit portfolio projekt
• en passende projektstruktur (filnavne, mapper)
• fejlfri kode (valideret!)

Udover den tekniske implementering, er det vigtigt, at du forholder dig til følgende, når du designer dit nye website:

• Hvem skal se min portfolio – hvem henvender jeg mig til?
• Hvordan præsenterer jeg bedst mig selv?
• Hvordan formidler jeg, hvad jeg har lært indtil nu og hvad jeg håber at lære fremover?

• Hvilken visuel stil og stemning ønsker jeg på min portfolio?
• Hvordan kan jeg give min portfolio et personligt touch?

Din portfolio vil følge dig gennem hele din studietid og er et vigtigt redskab til præsentation af dit arbejde og din læring, samt en platform, hvor underviserne løbende kan følge din faglige udvikling og studieaktivitet.

Flowet afsluttes med en fælles præsentationsdag, hvor vi vurderer og diskuterer jeres arbejde i plenum. Har du brug for yderligere feedback, kommentarer eller forslag til din portfolio, kan du kontakte underviserne efterfølgende.

Du afleverer her i opgaven:

• Et link direkte til din online portfolio
• Et link til dit GitHub repository

Projektet giver i alt 15 study points, som er fordelt på:

• 5 points for online versionen
• 5 point for dokumentation på Github
• 5 points for deltagelse i præsentationsdagen

Læring i flow 2

I lighed med flow 1 – har jeg tidligere beskæftiget mig med de emner som vi havde i flow 2. Det var således ikke nyt for mig at arbejde med HTML 5 og CSS 3 i Dreamweaver. Og upload til web-hotel med FTP har jeg gjort et utal af gange, mens jeg kun har snuset til GitHub.

Nu er det muligt at jeg nogle gange tager tingene lidt for bogstaveligt. Men når jeg får til opgave at genskabe en tabel fra Word i HTML og CSS, og der står at den skal komme så tæt på som muligt, så forsøger jeg at lave det ”pixel-perfect”. Det var lærerigt om end det tog sin tid.

At jeg havde arbejdet en del med HTML og CSS tidligere, betød at jeg havde overskud til at assistere nogle af mine medstuderende. For mig er det en god måde at lære på. Dels fordi at jeg er nødt til at formulere en given problemstilling på en måde som andre forstår og dels fordi at jeg bliver stillet over for nogle problemer som jeg ikke selv har oplevet.

Jeg oplevede det desuden som vældigt givtigt at få opdateret noget ”design-teori” i form af AIDA og CRAP modellerne og gestalt-lovene.

Feedback på opgaven

Jeg struttede af selvtillid da jeg skulle præsentere den ”nye” version af min portfolio. Nu havde jeg chancen for at bevise at jeg var i stand til at kode min prototype fra bunden. Det udløste da også en smule anerkendelse.

Det visuelle indtryk var der helt bevidst ikke ændret ved. Bortset fra ”profil siden”, der var en ny tilføjelse i forhold til prototypen. Mit forsøg på at personliggøre siden ved at gå i en helt anden retning med ”profil siden” blev isoleret set modtaget positivt. Men jeg fik, hvilket var helt fair, en del kritik for at den var stukket noget af i forhold til resten af siden.

Siden fungerede som sådan meget godt med det indhold der var på nuværende tidspunkt. Men der blev stillet spørgsmål til, hvor godt den ville fungere når der kom yderligere indhold på.

Flow #3 – Byg en app

Refleksion over flow #3

Ikoner, symbolik, typografi, farverteori og logo-design. Alt sammen emner som jeg holder meget af og har beskæftiget mig en lidt med tidligere. Det var dermed næsten uundgåeligt at flow 3 ville blive et højdepunkt i første semester.

Tænk hvis men en dag kunne ramme hovedet på sømmet og designe et ikon eller logo, der ville symbolisere en genstand, en stemning, en følelse, en funktion eller en handling. Et index som mennesker i generationer fremover ville kunne se og forstå, uden en nærmere forklaring. Så ville man vel nærmest være udødeliggjort.

Og da det så blev krydret med målgruppesegmentering og brugertest, som jeg i høj grad betragter som nogle af grundstenene for at kunne lykkedes med at lave et godt brugerfladedesign, hvilket er hvad jeg brænder efter at beskæftige mig med i fremtiden, så kunne det kun gå hen at blive et helt igennem fantastisk flow.


Bolig-app prototype
Bolig-app prototype lavet i Adobe XD.

Opgavebeskrivelse

Produkt

I projektet for dette flow, vil du designe og skabe en prototype på en mobil app. Du vælger selv den type enhed/smartphone og tablet du udvikler til, såvel som operativsystem.

Appen skal være en løsning til en af de tre nedenstående problemstillinger. Du vil bruge Adobe XD til demonstrere skærmene i appen og deres flow samt bruge Adobe Illustrator til grafik til interfacet og Adobe Photoshop til billeder.

Vælg ét af følgende temaer til projekt:

• Vejr app
• Boligsøgnings app
• Sportstracking app

Opgaven må udvikles i samarbejde med andre fx ved fælles ideudvikling og dataindsamling samt udvikling af grafik og billeder. Men den endelige prototype aflevering skal være unik og individuel.

Appen skal udvikles til både mobil og tablet og der skal være indhold i mindst 3 menupunkter og mindst 3 niveauer. Indhold skal være tilstrækkeligt til at brugertest kan gennemføres men generisk indhold og prosatekst kan være placeholder.

Der skal udvikles forslag til interface elementer herunder ikoner til appen, alle tegnet i Adobe Illustrator.

I skal teste, om brugerne forstår jeres design. I skal undersøge, hvordan I bedst organiserer indholdet i appen, ved hjælp af testmetoden kortsortering, samt om brugerne forstår hvordan appen fungerer, ved at gennemføre tænke-højt tests på den potentielle målgruppe.

Rapport

Aflever 1 PDF-fil med det fulde navn.

Indhold max. 3 sider* tekst og max. 10 MB

Angiv link til din XD prototype på forsiden

3* sider betyder 3 ”normalsider” og er et mål for mængden af tekstindhold = 2.400 anslag (incl mellemrum pr. side) og betyder at pdf-filen gerne må indeholde fx 8 sider/ark i alt.

Rapporten skal beskrive din prototype og visuelt dokumentere udviklingen, som fx en visuel logbog med kommenterede billeder/screendumps. Vi forventer som minimum:

• Kort beskrivelse af målgruppen (via 2 "personaer")
• App flowchart (fx tegnet i Illustrator)
• Dokumenter udvikling af screen mobile phone og tablet layout
• Dokumenter udvikling af app ikon design
• Kort opsummering af resultater af test (kortsortering + tænke-højt test)

Projektet giver i alt 15 study points, som er fordelt på:

• 5 points for aflevering af PDF fil
• 5 point for aflevering af app prototype i Adobe XD
• 5 points for deltagelse i præsentationsdagen

Flowet afsluttes med en fælles præsentationsdag, hvor vi vurderer og diskuterer løsninger i plenum. Du vil desuden få en kort skriftlig kommentar på Moodle. Har du brug for yderligere feedback, kommentarer eller forslag til din portfolio, kan du kontakte underviserne efterfølgende.

Flow 3 rapport
Forsiden af flow 3 rapporten - tab på billedet for at hente den.

Læring i flow #3

Flow 3 var ubetinget det flow jeg, ind til videre, havde fået mest ud af. Jeg har en smule viden om brugertest fra tidligere og har selv deltaget i en fokusgruppe for Erhvervs og Selskabsstyrelsen. Men det var meget begrænset hvor meget jeg havde benyttet det på egne projekter.

Det har således været lærerigt at opleve, hvordan en kortsorteringstest allerede i idé og udviklingsfasen kan være med til at spore mig i den rigtige retning i arbejdet med navigationsdesign og informations arkitektur. Tilsvarende har både ”gangster test” og ”tænke højt test” vist sig meget værdifulde til at blive be- eller afkræftet i de forestillinger jeg selv måtte have, om hvordan brugeren oplever og navigererr på en given side.

I den forbindelse har jeg måtte sluge en kamel. Om jeg ligefrem har set lyset i Adobe XD er måske nok lige at stramme den, men jeg er ikke længere i tvivl om fornuften i at lave test på en prototype, inden jeg bruger for meget tid på en endelig produktion.

Feedback på opgaven

Jeg følte at jeg var nået meget godt i mål med mange af de tanker jeg havde gjort mig da jeg skulle idéudvikle min app. Det skulle være en liebhaver bolig app. Mere specifikt – skulle det være en app, der indeholdte en kombination af de bedste søgemuligheder og funktioner, fra eksisterende app’s og boligportaler.

Jeg så derfor frem til at vise hvad jeg var kommet op med. Det var en fin præsentation, hvor jeg fik vist og fortalt om de tanker jeg havde gjort mig. Der var enkelte spørgsmål og en del positive tilbagemeldinger fra mine medstuderende og specielt en udmelding om at funktionen til at skjule uinteressant boliger, gjorde mig helt opløftet.

Jeg var via en sidste øjebliks brugertest, blevet brutalt bevist om at selve søgeknappen var skræmmende anonym, grænsende til det usynlige. Og det undgik naturligvis heller ikke Frederiks opmærksomhed. Han påpegede desuden at den grå farve på flere af funktionskapperne, kunne opfattes som om at de var inaktive. Jeg fik efterfølgende en fin kritik af den vedlagte rapport.

Flow #4 – Sweetbot.design

Refleksion over flow #4

Det kan både være en befrielse og en forbandelse, når man får en styleguide som man skal holde sig til. I dette tilfælde var det både og. En forbandelse fordi vi i dette tilfælde var låst til et farvevalg, der i sin kombination lå langt fra hvad jeg normalt ville arbejde med. Og en befrielse fordi det gav mulighed for at fokusere mere på navigationsdesignet end det visuelle. Det ville jo alligevel komme til at se rædderligt ud.

Når det så er sagt, ville præsentationsdage gå hen og vise hvor forskelligt et udtryk man kan ende op med, selvom man har samme udgangspunkt. Og jeg må da indrømme at jeg så noget fra de andre grupper, der æstetisk langt overgik det resultat vi var kommet op med.

Men vores fokus havde som sagt mere været på at skabe en velfungerende brugerfladen og en kommunikationsform, der hang sammen med den stil vi havde lagt og den målgruppe vi ville prøve at ramme. Så måtte udfoldelsen af vores kunstneriske evner vente til en anden gang. Og det lykkedes egentlig meget godt.


Skitser af design til mobiltelefon
De første skitser – til mobil venligt web-design.

Opgavebeskrivelse

Det lille fiktive webbureau Sweetbot har brug for jeres hjælp. Virksomheden har specialiseret sig indenfor følgende områder:

• Webudvikling
• Digital security
• Branding

Sweetbot er internationalt orienteret og består af 4 medarbejdere samt 2 CEOs. Sweetbot ønsker at implementere en dansk udgave af deres website. Websitet skal være optimeret til mobile enheder og Sweetbot ønsker desuden, at der skal indgå jQuery elementer i løsningen.

Udover den tekniske løsning, bliver I også bedt om at give et bud på visuelle elementer samt informationarkitektur til sitet. Sweetbot har en style guide som skal følges (se vedhæftede fil ) samt et logo som skal implementeres (se vedhæftede .eps fil ).

Sweetbot har netop udviklet deres egen e-commerce løsning under navnet HotBot, men mangler et logo samt ikoner til løsningen. Dette skal I også udvikle og demonstrere i den online website løsning. Logoet skal desuden tilføjes den aktuelle styleguide.

Sidst men ikke mindst skal I foretage en brugertest af sitet.

Flowet afsluttes med en fælles præsentationsdag, hvor vi vurderer og diskuterer jeres løsning i plenum.

Gruppestørrelsen skal være på 3-4 studerende.

Aflevering:

1 PDF fil (filnavn:MUL[A/B]-[Gruppe-nr]-sweetbot.pdf - eksempel: MULA-01-sweetbot.pdf) med

• Navne + Cphbusiness-mails
• Link til gruppens online løsning
• Link til gruppens GitHub repository
• Kort redegørelse for gruppens GitHub strategi
• Kort beskrivelse af de gennemførte brugertests

Projektet giver i alt 15 study points som er fordelt på følgende:

• 5 study points for aflevering af link til websitet
• 10 study points for præsentationen @ præsentationsdag

Flow 4 rapport
Side fra flow 4 rapporten - tab på billedet for at hente den.

Læring i flow #4

I dette flow var de specielt to emner der fangede min opmærksomhed. Design brief og projektplanlægning. Det skyldes formentligt at det er områder hvor jeg er klar over at jeg har nogle åbenlyse svagheder. Det var således positivt at få nogle konkrete værktøjer og metoder til dels at tilgå en designproces mere analytisk og ikke mindst til at strukturere planlægningen af et projekt.

Om jeg ligefrem har lært noget nyt i forhold til at indgå i et samarbejde om udarbejdelse af et projekt, ved jeg nu ikke. Men i dette projekt blev jeg meget bevidst om styrken ved at udnytte gruppens forskellige kompetencer. Omvendt blev jeg også bekræftet i at jeg bruger relativ mange resurser på at få samarbejdet til at fungere, resurser som jeg dybest set heller ville bruge på selve projektet.

Det var dog rat at opleve at jeg er blevet væsentlig bedre til at lægge de ting fra mig, som andre i gruppen har påtaget sig, og efterfølgende acceptere at de er blevet løst anderledes end jeg selv ville have gjort.

Feedback på opgaven

Vi skulle præsentere det resultat som vi var nået frem til, som gruppe. Noget vi med fordel kunne have lagt en plan for – men det havde vi ikke. Det gik vel egentlig meget godt alligevel og vi fik fremhævet de ting vi havde haft fokus på.

Overordnet høstede vi roser for vores lidt alternative navigation og vores velovervejede valg af kommunikationsform. Vi havde et langt stykke hen ad vejen holdt os inden for de grænser der var udstukket i styleguiden og havde bevist truffet nogle designvalg, der kunne begrundes med vores forestilling om målgruppen.

Eneste anke var at et af vores ikoner faldt lidt ved siden af, i forhold til vores begrundelse for valg af henholdsvis runde og firkantede former. Derudover skulle vi være beviste om at måden vi brugte ”logoet” på i vores navigation, udfordrede nogle af de uskrevne konventioner, der er almindeligt anerkendt.

Jeg forstår du higer efter at se mit re-design af Sweetbot.design

–og jeg lover at bestræbe mig på at have den klar næste gang du besøger min portfolio.

 

Photoshop
Adobe XD
Ophavsret
Prototyping
Designteori

Dreamweaver
HTML 5/CSS 3
Billeder/grafik
GitHub/FTP
Layout

Illustrator
Farver/typografi
Designprincipper
Dataindsamling
Brugertest

Style guide
Visuel identitet
Projektplanlægning
Javascript/jQuery
Responsive

Multimedia- designer

1. Semester

Efteråret 2018

 

Upcycling – Design projekt

Fra ide til produkt

Dette projekt er lavet af: Ole Sandvang Høj

Det er lavet i som et design projekt i forbindelse med – Design Valgfag på Web-Integrator uddannelsen på RTS – November 2016. Indholdet må udelukkende benyttes i forbindelse med ovenstående skoleprojekt. Det indeholder materiale der kan være ophavsret beskyttet.

Cykel bruges til transport af bambus

Opgave: Upcycling

Vi skulle lave et designoplæg til et upcykling projekt. Selve projektet var valgfrit, det kunne være noget konkret eller det kunne være noget opdigtet, så længe det overordnede emne var upcycling.

Emne

Jeg lagde mig ret tidligt fast på at jeg ville lave et støtte projekt til “Baisikeli”. Baisikeli upcycler brugte danske cykler i Afrika, med lokal arbejdskræft, som de også står for uddannelsen af. Kampangen skulle få københavnere til at donere deres brugte cykler til dette projekt.

Mision

Kampagnen skal få Københavnere til at donerer deres brugte cykler til et bedre liv i Afrika. Målet er at skabe en bæredygtig cykelindustri i Afrika – intet mindre!

Produkt: Fysisk og digitalt (Web)

Vi skulle lave mindst to produkter. Der skulle være mindst et fysisk produkt i form af en flyer, plakat, folder, sticker eller et visitkort. Der ud over skulle vi designe en tilhørende hjemmeside med index side og undersider.

Vision

Formålet med kampagnen er at skabe fokus på at de op i mod 400.000 cykler, der hvert år kasseres i Danmark, kan få et nyt liv til gavn for udviklingen i Afrika. Kampagnen skal formidle hvilken forskel en cykel kan gøre for en afrikansk familie og udviklingen i de fattigste del af Afrika. Der ud over skal den oplyse om forskellen på et socialt projekt og velgørenhed.

Målgruppe

Københavnske cyklister mellem 18 og 45 år, der er bosiddende i Københavns brokvarterer og på Amager.

Målet er at skabe en bæredygtig cykelindustri i Afrika – intet mindre!

 

Beskrivelse af kampagnen

Ved kampagne start skal der hænges plakater op, ved alle større læreanstalter, ved Metro og S-tog stationer og ved offentlige arbejdspladser. Målet med plakaterne er at skabe opmærksomhed og trafik på kampagnes hjemme side.

Hjemmesiden skal oplyse om den forskel en udrangeret dansk cykel kan gøre i Afrika, og give Københavnerne en let adgang til at donere deres brugte cykel til projekt ”Bikes for a Better World”.

BASIKELI – Bikes for a better world

Baisikeli betyder cykel på swahili – Baisikeli er en privat virksomhed, der er fokuseret på at udvikle cykelkulturen i Østafrika.

Ved at indsamle brugte danske cykler og sende dem til Afrika, hvor de bliver repareret og solgt af lokale, bidrager Baisikeli til at forbedre den Østafrikanske befolknings mulighed for transport og uddanne næste generation af Afrikanske cykelmekanikere.

Design procesen

Storyboard over Up-Cycling

Brainstorm

For at få et overblik over hvilke emner jeg skulle fokuseres på, lavede jeg en "drejebog" som noget af det første. Det giver et visuelt overblik.

Da jeg nu havde en idé om srukturen, var det tid til at komme videre med selve design procesen. Her er et “Moodboard” et godt redskab til at få mig i den rigtige stemning når jeg skal idé udvikle og “brainstorme”. Mens jeg laver det, får jeg samtidig inspiration til både former, farver og indhold.

Kampagnen skulle have et logo

Jeg gik herefter i gang med at tænke i at kampagnen skulle have et logo. Det skulle være let genkendeligt og samtidig fortælle noget om hvad kampagnen gik ud på.

Jeg endte op med at lave hele to logoer. Det ene blev et overordnet projekt “UP-CYKLE” logo og det andet et decideret kampagne logo til “Doner din cykel – til et bedre liv”.

Logoer - skitser og endelige resultat
Mood Board
 

Skitser, grafik og layout

Da der nu var kommet nogenlunde styr på kampagne og indhold skulle jeg i gang med den egentlige designfase. Der skulle laves skitser, grafik og layout.

Skitse af index side
Skitse af Baisikeli side
Skitse af forskel side
Skitse af doner side
Grafik elementer Up-Cykle layout

Prototype

Skærmdumpe af index side
 

Tidligere projekter

Preview af MUMS hjemmeside

Stemning

Idé, Design & Kode

Frontend skoleprojekt på web-integrator uddannelsen.
(HTML, CSS, JavaScript)

Dokumentation

Strategi

IDÉ, Design & Indhold

Content Management System. Design & produktion.
(Live CMS site)

Preview af Hvalpe på Kollensøvej hjemmeside
Preview af UpCycling hjemmeside

Sybolik

Koncept & Design

Prototype til designprojekt om up-cycling i forbindelse med web-integrator uddannelsen.

• Jeg er positiv.
• Jeg værdsætter samarbejde og sparring med andre.
• Jeg er videbegærlig og bliver motiveret af at skulle tilegne mig nye kompetencer.
• Jeg er løsningsorienteret,
engageret, vedholden,
loyal og fleksibel.

• Jeg har mere end 20 års erfaring med grafisk produktion og formidling.
• Jeg er vant til at finde kreative løsninger, når jeg bliver stillet en udfordring.
• Jeg har en uddannelse som Web-integrator.

• Bruger jeg på hunde.
Dels med træning af mine egne labradorer og som hundeinstruktør.
• Derudover både spiller jeg og lytter en del til – musik.
• Og så er jeg stor nyder af malt whisky.

Kollensøvej 8,
3550 Slangerup

eller telefon:
+45 40 29 22 21