Visual Proces

Design Thinking as design process. Designtænkning er en iterativ proces, hvor vi forsøger at forstå brugeren, udfordre antagelser og omdefinerer problemer i et forsøg på at identificere alternative strategier og løsninger, der måske ikke med det samme fremgår af vores oprindelige forståelsesniveau. Samtidig giver Design Thinking en løsning baseret tilgang til løsning af problemer. Det er en måde at tænke og arbejde på samt en samling praktiske metoder.

Det har fem faser, der hjælper med at navigere udviklingen fra at identificere en design udfordring til at finde og opbygge en løsning.

Discovery – vi få inspiration, lave research og indsamle information

Interpretation – Hvad er vores muligheder, hvordan løser vi problemet

Ideation – Vi generere ideer og forfin ideer.

Expirementation – Her laver vi wireframes og prototype og få feedback fra testpersoner.

Evolution – Hvis resultatet er godt så kommer vi at udvikler produktet hvis det ikke godt så kommer man tilbage til ideation fasen hvor vi kobler nye ideer.

Kilde: http://www.spencerauthor.com/what-is-design-thinking/

Divergent og Konvergent Tænkning

Divergent tænkning – er processen med at komme med nye ideer og muligheder – uden bedømmelse, uden analyse og uden diskussion. Det er den type tankegang, der giver dig mulighed for at være gratis, ‘gå stor’ og diskutere mulige nye måder at løse vanskelige udfordringer, der ikke har et enkelt / rigtigt / kendt svar.
Konvergent tænkning – er forbundet med analyse, bedømmelse og beslutningstagning. Det er processen med at tage en masse ideer og sortere dem, evaluere dem, analysere fordele og ulemper og tage beslutninger. Fokusere kun til det bedste løsning.

Kilde: https://psychologycompass.com/blog/creative/

Refleksion:

Vi har brugt design thinking as design process i vores Projekt 2 (Installations koncept HC Andersen Museum). For at guider os med vores projektet vi har brugt de fem faser på design thinking. Først har vi besøgt museum for at få inspiration, lave research om hvad for en teknologi de bruger og deres målgruppe. Efter det så brugte vi os Interpretation fasen hvor vi skal tænke på hvilken muligheder vi har. Men efter desk research for hvem besøgte musuem har vi fundet ud af at besøgende vil gerne være en del i udstillingen og vil have mere oplevelser end bare at kigge på og læse en lang tekst. Vi har generere mange ideer som muligt og kombinere det ting som giver mening. Men efter vi fik feedback så kommer vi igen for ideation fasen hvor vi kobler ny ideer. Vi kommer frem og tilbage i processen indtil vi har den bedste løsning til vores projekt. Vi har allesammen lært hvordan design thinking har brugt til dette projekt. Og nu har jeg bedre fortåelse af design thinking proces.

Usability Test / Brugertest

Brugervenlighedtest er en metode til evaluering af et produkt eller websted brugeroplevelse. Brugbarhedstest reducerer risikoen for at opbygge den forkerte ting. Det sparer penge, tid og andre dyrebare ressourcer. Det finder problemer, når de stadig er lette og billige at løse.

Fire trin til at udførelse en brugbarhedstest

  1. Opret en tidsplan
  2. Letter Testen
  3. Analysere sagsdata
  4. Opret testrapport

Her fik vi en opgave om at teste brugervenlighed af selvbetjeningsystem i kantinen i vores skole. Vi har to testpersoner som skal udføre en scenarie som de skal købe en bolle og bruge selvbetjeningsystem. Vi er alle tre i gruppen hvor en er moderator, observatorer og jeg optager en film og billeder. Det tager 15 min af det hele scenarie. Efter de to har gennemført scenarie spurgte vi om hvordan var deres oplevelse og var det tilfreds med systemet. De to testpersoner har forskellige feedback. En sagde at det svært at finde rundt i brugerfladen, overskueligt, dog lidt misvisende ift. “mærkater” . Feedback fra testpersoner

Testperson 1: Det er svært at manøvre rundt i selvbetjeningssystemet. Forventningen var, at det var lidt nemmere, samt at der var vejledning. Det er også uorganiseret og meget forvirrende layout.

Testperson 2: Overskueligt, men misvisende knapper og dårligt layout. Forventningen var at det bare fungerede. Synes at det fungerede, bortset fra mærkaterne.

Forbedringer efter feedback: Layout, knapper, skannings ikon (MobilePay), farveskema, mere æstetik. “Total”-knappen ændres til “Betal”

Refleksion:

I dette opgave fik vi teste mange forskellige ting. I min gruppe fik vi at teste brugervenlighed af selvbetjeningsystem i kantinen i vores skole. Vi har to testpersoner som skal udføre en scenarie. De skal købe en bolle og brug selvbetjeningservice. En har det svært ved at betal fordi han har dækket mobilepay scanningen med sin tallerken. Og den anden har udført scenarie fint. Vi fik feedback fra testpersonerne som sagde at deres system var meget forvirrende og uorganiseret. På baggrund af feedback ved vi nu hvad skal forbedres i selvbetjeningsystem.

Animationsopgave

Jeg brugte illustrator til at tegne mit story board. Først brugte jeg en cirkel til hovedet. Og derefter en cirkel i øjnene og munden. Jeg brugte tekst til at skrive og firkantede til fotografiet.

My Story Board

Figure 1: My Story board using illustrator taken at Bjørnemosevej 108, Odense, September 15 , 2019.

Animate CC

Jeg lavede en simpel animation. Jeg brugte et symbol til at opbygge et ansigt i. Vælg for eksempel -Insert-ny symbol-head og lav et nyt symbol med et øje og mund også. Derefter satte jeg mit symbol hoved på det aktive lag og tilføjede øjne og mund. Fra venstre indsætter jeg en nøgleramme til et sekund og skaber en mellemlinje for øjnene. Nu ruller øjnene bare. Bagefter fik jeg munden til at åbne(brugt free transform) og sige haaaaaalooooo med bagrund lyd.

Billedet hopper bare frem og tilbage. Jeg brugte motion tween for det billede.

Filer til Animation

Her er de filer som projektet består af:

  1. Animate kildekode filen.
  2. Html dokument med animationen.
  3. Javascript fil med javascript koden.
  4. Lyd filen i mp3 format.
  5. Billeder i animationen.

Program

Adobe Illustrator, Adobe Animate, Visual Studio code and Audacity

Prototyping Workshop

Dating app for børn

Concept: Legeaftale

Institutionsbaseret app:

En app der gå ind under f.eks. en børnehave. Man skal være meldt ind i børnehaven, dermed opstår der et sikkerhedsnet der gør at det ikke er alle fra det offentlige som har adgang til app’en (hvilket der kunne opstår problemer ved). 

Formål:

Er at lave et system hvor der kan arrangeres legeaftaler inden for børnehavens grænser, men potentielt udenfor børnehave tiden. Så i stedet for at aftale en legeaftale i børnehaven, så kunne man gøre det over app’en hvor alle forældre fra børnehavens telefonnumre allerede står på.  

Legeaftale-Appen

Features

  1. børns profil
  2. rating
  3. interreser
  4. særlige hensyn
  5. familie tab (familie oversight)
  6. kalender

Page 1: Find din institution

  1. logo
  2. search-bar

Page 2: Login screen

  1. username/password
  2. checkbox:husk mig
  3. login

Page 3: Profilopsætning barn

  1. navn
  2. alder
  3. postnummer
  4. særlige forhold og hensyn
  5. interrese etc.

Prototype links

  1. Her er linket til Wireframe 
  2. Her er linket til Prototype

Reflektioner:

Vi har valgt at lave en dating-app til børn, fordi vi troede, at den ikke var opfundet endnu, og det er nyt for forældrene og institutionen. Dating-appen til børn er sikker at bruge til både forældre og børn, fordi de oplysninger, vi får, er forbundet fra børneinstitutionen. Vores øverste prioritet er børnesikkerheden ved at bruge vores app, så ingen “outsiders” kan bruge vores app, og mest af alt er det kun forældre, der kan logge ind.

Vi var ikke hel færdig med prototypen fordi de tre andre var til Hamborgtur. Jeg kunne ikke fortsæt fordi vi var jo fire i gruppe og det vigtig for mig at høre hvad de andre siger og hvad for en logo vi skal bruge så nogen ting. Det derfor prototypen er ufærdig. Men det er nemt at lave det. Det eneste udfordring var vi kunne ikke beslutte os hvad for en logo vi skal bruge til vores app.

Gruppe: Frederikke, Edna, Casper, Mathis

Typography

Mens jeg kørte til Babysam tæt på rosengårdcenteret så jeg denne reklame undervejs. Det fanger min opmærksomhed meget hurtigt på grund af det er ikke så tydeligt at læse noget tekst.

Figure 1: Reklamer ved rosengårdcentret taget i Ørbækvej 75 , Odense, September 28, 2019.

Mens jeg kørte til Babysam tæt på rosengårdcenteret, så jeg har denne reklame undervejs. Det var min opmærksomhed meget hurtigt på grund af teksten var ikke så tydeligt at læse.

Design og Typography

Normal Reklame

  1. Den første ting, der fanger mit øje, var den hvide baggrund af tallet 34 og derefter de ekslusivt i Normale tekster.
  2. Den næste ting var de lodrette tekster og de hvide streger.
  3. Margen er ikke lige og for meget  unødvendige hvide streger.
  4. De brugte for mange skrifttyper og har et dårligt hierarki.
  5. Uorganiseret information.
  6. Den normale virksomhed antager at være normal i alle vinkler, men jeg synes, deres reklame skal forbedres i typografi og design.

Forslag til Forbedringer

Normal Reklame

  1. Brug en simpel fonts til overskrift og brødtekster for nem læsning.
  2. De hvide baggrunde skal passe til nummeret 34 og de eksklusivt i Normale tekster.
  3. Fjern de hvide streger.
  4. Lodret tekst skal ændres til vandret for nem læsning.
  5. Margenen på den blå baggrund skal være lige.
  6. Brug et logo ad gangen.
  7. Fjern overskydende tekster, der ikke er relevante.
  8. Gør oplysningerne mere tiltalende.
  9. Organiser oplysningerne i ret sted.

Reflektion:

Typografidesign er meget afgørende at bruge. Du skal kende dit formål, inden du vælger den rigtige typografi af dit produkt. Men selvfølgelig betyder størrelserne også noget, og det er det også med leading, kerning og tracking. Og sans serif-skrifttyper, der normalt bruges af mange til at lave websider, fordi det er let for brugerne at læse en tekst. Men serif ser godt ud i udskrivning af fx-reklamer, flyers osv. Ikke alle skrifttyper passer til ens formål. Så overvej at finde den rigtige typografi til dit produkt, så dine brugere forstår, hvilken besked du sender.

Moving Art Workshop

About the Painting

Artist: El Greco, the  Greek mannerist painter.

Time period: c. 1597-1599

The style: Oil paint on canvas

Location: National Gallery of Art Washington DC

It depicts a legend in the life of Christian saint Martin of Tours: the saint cut off half of his cloak and gave it to the beggar.
source:wikipedia

Figure 1: Saint Martin and The beggar painting taken at Bjørnemosevej 108, Odense, September 18, 2019.

My Short Story Board

  1. Saint Martin is trying to communicate with the beggar by moving his head a little bit.
  2. The Beggar is listening carefully and looking at the saint.
  3. After awhile Saint Martin is wipping the horse and the horse is just nikking and sparking his legs in the air.
  4. While the beggar still looking at him.
Figure 2: My story board about the painting of Saint Martin and the beggar taken at Bjørnemosevej 108, Odense, September 18, 2019.

Moving Art Workshop Links

Saint Martin and the beggar

  1. Animate fil med kode
  2. HTML document med animation 
  3. Javascript fil med javascript kode
  4. Billede 1 i animation.
  5. Billede 2 i animation.

Here is the link for my first moving art try out

  1. Landscape Moving art
  2. Reference of the landscape painting

Reflections: 

At first I thought it will be easy to do this animated painting. I already imagined on how to do it. I just have to cut some parts of the body I would use to make it moved on my animation. But then when I started looking for a painting it already took me some time to find the right one. I am looking for an easy one but it’s just hard (woman thing). Then I found a landscape. Actually the landscape was easy to animate because I just have to add some elements on it. For example I add a ball jumping and birds flying etc. But then I am not satisfied again so I decided to do saint martin and the beggar instead.  The tricks on how to make a painting moved is I used photoshop to cut some body parts. But then it is also hard to use photoshop in my opinion but I found out how. Anyway there is a lot of ways on how to cut some parts of an image in photoshop but I used quick selection tool and then layer via cut and eksport the parts I cut..

Then the tricky part is how to make the parts moved naturally, using animate cc it was possible but I am not yet good at it. My moving art is not yet finish but I delivered it anyway.The next workshop I will do better. I just need more time to learn the program.

Why I choose to deliver Saint Martin and the beggar painting?

I choose this painting because I like the horse to moved. I thought it was easy for me to cut of some parts of it using photoshop then animate it afterwards. But then it wasn’t really easy afterall. At first I made an animation with a landscape but then I changed my mind because it is so easy to add some elements on a landscape and I dont really need to cut some parts. But I like to challenge myself if I can do better that’s why I animate saint martin and the beggar instead. Because I thought it would be fun animating the horse. I would like to make the horse nikking and moving his legs but it is not that easy though. I tried and tried until I succeed. The movement is not the best but I made them moved a bit and that’s all that counts. 🙂

Aesthetics Design and Principles

C.R.A.P EXERCISE

Figure 1. C.R.A.P exercise taken at Bjørnemosevej 108, Odense, September 13, 2019.

C.R.A.P PRINCIPLES

Contrast – Orange color

  •  Text have a good contrasts between sizes, colors and fonts.
  • Some of the box elements is wider than the other.
  • The direction of the text messages goes horizontal and vertical. 

Alignment – Green color

  •  The menu, three boxes, and brown box is centered.
  • The  left and right margined is very aligned.
  • Header and footer is well aligned too.
  • The texts are in the right place and space in between are equal.

Repetition – Purple color

  • Text thickness and thinness, fonts, colors and size are being used repeatedly.
  • Boxes are being used many times.
  •  Orange highlight of text have been used in three boxes too.

Proximity – Yellow color

  • All boxes has a good equal space.
  • They also have equal size in between texts.
  • The relationship between elements is really well combined and well thought. Becuase you can see that the menu has defined by the color green, and the three boxes belongs to each other because of being close and the footer has another color to define they are there together.

Reflections

Aesthetics design is very essential when we make a product. It gives us the feeling of pleasure to use that product. So when a products looks good more people gonna use it. For example in this CRAP exercise I have, I choose SPIES website to see how they use the CRAP design. And most importantly they have a functional website, very usable and it’s pleasing to the eye because of using contrasts, repetetion, alignment and proximity principles.

Introprojekt

STORYBOARD

“Grisen har det sjovt.”

  • En gris lavet af modellerboks og have farve lyserødt.
  • Grisen gik til mudderpøller og ligger lidt.
  • Rasmus kæler og kvaser grisen med sin hånd.
  • Bagefter skærer strimmel ud af grisen
  • Til sidst lægger på grill og bliv
Figure 1. Our materials and storyboard for Stop Motion Introproject  taken at UCL Seebladsgade Odense, September 4, 2019.

Det her var en story board hvor det fortæller om grisen. Hvad laver han og hvad skal ske til det ende. Det var et værd at lave det fordi man ved hvad skal ske hver eneste skridt og så har vi spare tid og energi. Processen blev lettere fordi story board har hjulpet os med at se hvad skal grisen lave trin for trin.

Figure 2. Our storyboard for Stop Motion Introproject  taken at UCL Seebladsgade Odense, September 4, 2019.

PRODUKTION

Figure 3. Our Stop Motion video production taken at UCL Seebladsgade Odense, September 11, 2019.

Reflektioner: GRISEN

Det var let at lave stop motion video. Du skal bare installere stop motion studio app fra google play eller App store.Og så tager vi bare masser af billeder af vores produkt, nemlig “Grisen har det sjovt”. Vi var fem i gruppe, og vi arbejdede godt sammen. Vi hjalp hinanden med til at fremstille alle de materialer, vi har brug for til at optage billeder og lave en video af vores produkt. Jeg har lært, hvordan man laver en stop-motion-video. Vi tog billeder af grisen hver bevægelse, og det ser ud til, at grisen kan gå selv, og derefter efter at have taget et billede, flytter vi grisen fremad igen. Og så fjernede vi vores hånd, efter at vi havde taget et billede. Den eneste udfordring med grisen var, at den måtte ligge på mudderpøle. Det var svært at tage et billede den tredje del i storyboard, fordi grisen langsommere ligge ned i mudderpøle uden en hånd, der holder den. Vi løst problemet ved at bruge en gennemsigtig snor til at holde grisen, mens jeg tager en masse billeder af den. Så det var som om grisen gjorde det selv. Da vi har taget billeder, eksporteret vi det for at redigere og lave en video. I det hele taget synes jeg, at stop motion var nemt at lave.

GRISSEBASSENE:

Amalie Lauritsen, Edna Valter, Stephen Nguyen, Rasmus Højberg, Rasmus Andersen