Design @sophiakamtsikoudi - Tumblr Blog

video fra testing av spillet “Ikke I Min Hage”

Her er animasjonsvideoen jeg og ola @https://www.tumblr.com/olaolaolaola/

lagde til del 2 av opplegget vårt til teknisk museum.

Brief 8 Semesteroppgave energi

i dette prosjektet skulle vi designe et opplegg for ungdomskoleelever. gruppen min designet et brettspill som skulle bevisstgjøre ungdommen på utfordringer knyttet til energi uten å gjøre dem ansvarlige eller gi dem dårlig samvittighet.

vi valgte å lage et brettspill for å forsøke å la dem ha det gøy med læringen, fremfor ren informativ læring. det var også et poeng for oss å holde det så analogt som mulig, da ungdomskoleelever allerede bruker mye skjerm.

tanken med brettspillet er at de som spiller, skal få en følelse av hvor vanskelig energi kan være og kjenne konsekvensene av dette. Man kan gå hardt ut i starten med å plassere ut oljefelt for å få mange poeng, men etter litt tid, når andre energikilder og ressurser blir plassert rundt, kan dette straffe seg.

vi brukertestet mye for å i det hele tatt få spillet spillbart. det var vanskelig å få det til å flyte, når det er mange brikker som plasseres ved siden av hverandre, og alle skal påvirke hverandre på hver sin måte. Etterhvert ble det veldig gøy å spille, og vi fikk en følelse av hvor vanskelig dette også er i den virkelige verden.

storyboard og skisse til animasjon.

til del 2 av opplegget laget jeg og Ola animasjoner basert på energikildene som ble brukt i brettspillet. Animasjonene skulle visualisere plasseringen av energikilder/kraftverk og reaksjonene dette kan skape for mennesker og natur når det havner "i min hage". Måten situasjonene utspiller seg i animasjonen er så klart ikke helt lik som i virkeligheten, men vi valgte å sette dem litt på spissen, for å gjøre det morsomt og mindre dystopisk og dystert.

animasjonene er ment for å inspirere elevene til å bli nysgjerrige på hvordan dette faktisk utspiller seg i virkeligheten. de får en oppgave hvor de skal finne eksempler på dette i feks nyhetsartikkel, for å så snakke om hvordan situasjonen er i dag. vi tror at dette ville bidratt til å skape nysgjerrighet og engasjement rundt problematikken og konsekvensene.

her er en link til powerpointen som fra prosessen.

https://ahono-my.sharepoint.com/:p:/g/personal/sophia_schandy_kamtsikoudis_stud_aho_no/Eamg3TB_IGlGuuBMizTQdYIBfPjJCHobnYncczDBL_Hn7w?e=HuQd5t&fbclid=IwAR2u2WOyY5urTAKBrRaEZHFiVFAFJ4NEs02ycKaMh-30ozLk16s0aaDujek

#brief8 #brief 8 #aho #design #utstilling #tekniskmuseum #gk2

Brief 7. (gruppe 8)

“You've been hacked and need to solve a crossword at MATHALLEN to stop the attacks and keep your money safe. You have 12 minutes, starting now!”

Play testing...

We managed to do around 2 play tests each day with rapid prototyping and with new iterations each time.

early stages: get a working prototype to test concept mid stage: setting the tempo and adding pace. SPEEEED! final stage: Fine tuning the story and balance

Game mechanics / balancing factors

We tried to add depth to the gameplay with each iteration without making the game to difficult. I think we managed to do this and also keep the game fun and exciting. Example: hints getting hacked for set amount of seconds.

I feel like we had good, productive teamwork and that we had a good workflow.

Tobias was impressive with his coding skills to quickly put out a working crossword that helped tremendously!

#brief7 #Brief 7 #aho #gk2 #spilldesign #gamedesign #crossword #kryssord #hacker #game

Brief 6

Jeg var syk den uka vi holdt på med brief 6, så jeg fikk dessverre ikke vært med , men briefen er å finne på https://ahoexploringinteractions.tumblr.com.

Der kan man også finne link til de andre i klassen, og se hva de gjorde på den, og de andre briefene.

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

#brief6 #brief 6

Uken etter brief 4 gikk vi i grupper på 2 og 2 hvor vi nå skulle lage en nettside sammen.

Jeg jobbet sammen med Kim ,https://www.tumblr.com/nisju.

Hvor vi skulle lage en nettside basert på temaet “internett” eller som vi kalte det “internett arkeologi”

Jeg glemte å si det i forrige post, men under hele internett/ kode kurset brukte vi programmet Visual Studio Code til å kode nettsidene våre.

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

GAME EMULATOR™

Dette er en Gameboy spillemulator på Windows 95 som vekker maksimal nostalgi! I samarbeid med Kim.

Laget i vscode med html, css (og 18 rader javascript.)

#brief5 #brief 5 #aho #gk2 #design #kreativtinternett #samarbeid #koding #nettside #html #css #retro

Brief 4 Nettside

Etter app-design gikk vi over til å lære koding. Spesifikt html og css.

I brief 4 fikk vi i oppgave å bare leke litt med html og css for å forstå hvordan det funket, og bare lage en morsom nettside om hva vi ville, eller en typ CV-/ Portefølje-nettside.

Jeg valgte å lage en liten nettside om the office som jeg så på i den perioden.

Den hadde litt forskjellige html og css triks som vi hadde lært, en hjemmside med kort informasjon om serien og noen av hoved-skuespillerene,

en link til første episode på Netflix og en liten ekstra side på nettsiden som anbefalte to serier som ligner litt, og man kanskje vil like om man synes the office er morsomt.

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

Først er html koden til nettsiden min:

<!DOCTYPE html>

<!--Fikk ikke favicon delen til å fungere i dokumentet, brukte alle disse metodene, men ingen funket:

</head> <body>

<header> <p> The office </p> </header>

<ul>

<li><a href="https://www.netflix.com/watch/70105212?trackId=255824129&tctx=0%2C0%2CNAPA%40%40%7C00418210-0292-4b66-942b-52cb044e3950-14124282_titles%2F1%2F%2Fthe%20office%2F0%2F0%2CNAPA%40%40%7C00418210-0292-4b66-942b-52cb044e3950-14124282_titles%2F1%2F%2Fthe%20office%2F0%2F0%2Cunknown%2C%2C00418210-0292-4b66-942b-52cb044e3950-14124282%7C1%2CtitlesResults%2C70136120%2CVideo%3A70136120">Netflix</a></li>

<li><a href="shows.html">Similar shows</a></li>

</ul>

<h1> Hvorfor?</h1>

<p>

Korte episoder.

<br>

Jeg vil prokrastinere

</p>

</div>

<h2>Some of the characters</h2>

<br>

<b>Michael Scott</b> played by <span>Steve Carell</span>

<br>

<br>

<b>Dwight Schrute</b> played by <span>Rainn Wilson</span>

<br>

<br>

<b>Pam Beesly</b> played by <span>Jenna Fischer</span>

<br>

<br>

<b>Jim Halpert</b> played by <span>John Krasinsky</span>

<br>

<br>

<b>Stanley Hudson</b> played by <span>Leslie David Baker</span>

<br>

<br>

<b>Kevin Malone</b> played by <span>Brian Baumgartner</span>

</p>

</div> </body> </html>

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

Deretter er det html dokumentet til side nr 2 på den lille nettsiden min om the office:

<!DOCTYPE html>

</head> <body> <header> <p> The office </p> </header> <div class="container">

<ul>

<li><a href="https://www.netflix.com/watch/70105212?trackId=255824129&tctx=0%2C0%2CNAPA%40%40%7C00418210-0292-4b66-942b-52cb044e3950-14124282_titles%2F1%2F%2Fthe%20office%2F0%2F0%2CNAPA%40%40%7C00418210-0292-4b66-942b-52cb044e3950-14124282_titles%2F1%2F%2Fthe%20office%2F0%2F0%2Cunknown%2C%2C00418210-0292-4b66-942b-52cb044e3950-14124282%7C1%2CtitlesResults%2C70136120%2CVideo%3A70136120">Netflix</a></li>

<li><a href="#">Similar shows</a></li>

</ul>

<p>

<ul>

<li> - WHAT WE DO IN THE SHADOWS</li>

<br>

<li>- BROOKLYN 99</li>

</ul>

</p>

</div>

</body>

</html>

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

Til slutt er det css dokumentet til html-dokumentene mine:

header p { background: rgba(255, 255, 255, 0.5); border: 1px; padding: 20px; margin: 50px 70px 40px 10%; display: inline-block; font-size: 50px; color: white; } body { background-image: url(http://lokagraph.com/wp-content/uploads/2018/05/dunder-Mifflin-building-the-office-where-location.jpg); font-family: roboto; }

@keyframes dwightanimation{ 0% {padding-left: 0%;}50% {padding-left: 50%;}100% {padding-left: 0%;}}

.dwight{

width: 30px;

height: 30px;

background-image: url(Img/dwightpng.jpeg);

background-size: cover;

background-position:center;

animation-name: dwightanimation;

animation-duration: 8s;

animation-timing-function: ease-in-out;

animation-iteration-count: infinite;}

.container{ height: auto; display: flex; padding-left: 8%; padding-right:8%; box-sizing: border-box;}

.nav ul { display:inline-block; background-color: rgba(255, 255, 255, 0.5); padding: 10px; list-style: none; }

.nav li { display: inline; list-style: none; font-size: 30px; margin-left: 50px; margin-right:50px;}

.nav li a { text-decoration: none; color:blue}

.box{ display: flex; height: 125%; align-items: center; }

.tekst{ padding:20px; flex-basis: 50%; background-color: rgba(255, 255, 255, 0.5);}

/* jeg prøver å få litt bakgrunnsfarge bak i hvertfall skrifteni gallery for å gjøre det mer leselig, men den dukker ikke opp :.( */

.gallery { align-items: center; text-align: center; font-size: larger; margin:5% 0 0 30%; background-color:rgba(255, 255, 255, 255, 0.5);}

.gallery span { color: blue;}

.gallery img{ height: 30%; width: 30%; background-color:rgba(255, 255, 255, 255, 0.5);}

.characters{ padding: 5px; color: aliceblue; background-color:rgba(255, 255, 255, 255, 0.5);}

.kasse{ display:inline-block; height: 125%; align-items: left; }

.skrift{ padding:20px; flex-basis: 50%; background-color: rgba(255, 255, 255, 0.5);}

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

Her er de fleste bildene jeg brukte, ikke alle ville la seg laste opp her på tumblr, men de fleste vises under her:

#brief4 #nettside #website #brief 4 #the office #theoffice #html #css #koding #coding

Apps week 3

Jobbet med @julicvijanovicstudio. Denne uka skulle vi fortsette med det samme som forrige uke.

Men..... vi følte at vi hadde jobbet oss helt fast, og selv om vi hadde jobbet med hva vi fikk tilbakemelding på forrige fredag, så følte vi ikke at vi var der vi ville, men vi kom jo ikke på hva mer vi kunne gjøre med den.

Så vi tok den smarte beslutningen at vi gikk tilbake til tegneblokka, og kom på et helt nytt konsept.

Det ble da “Bakehjelpen” som er en app som skal gjøre det lettere å hjelpe lokale aksjoner og veldedigheter gjennom baking. Du skal lettere kunne se arrangementer og institusjoner i nærheten (eks. dyrebeskyttelsen har en innsamling, eller et barnehjem) og kommunisere med dem slik at man kan bake dem en kake.

Link til prototype i Figma:

https://www.figma.com/proto/hYM3QVNKdbxM69pinWH7Q3/Charity-Cake-App?page-id=0%3A1&node-id=28%3A24&viewport=-1488%2C2610%2C0.59&scaling=scale-down&starting-point-node-id=73%3A295

Og her er link til presentasjonen vår (som vi også hadde i Figma): https://www.figma.com/proto/1W3gEPOoGoWyzyLXran0zq/Presentasjon_App?page-id=0%3A1&node-id=1%3A2&viewport=88%2C248%2C0.09&scaling=min-zoom&starting-point-node-id=1%3A2

#brief3 #figma #prototype #app #appdesign #gruppearbeid #groupproject #cake #sharing

App week 2

Me and @julicvijanovicstudio made a prototype for an imagined app!

“pynterest” a Pinterest like app about sharing cake decorating methods and recipes.

Link to the Figma prototype:

https://href.li/?https://www.figma.com/proto/RoV2pV7kslCqdTEoriNQ2X/Pynterest_App?page-id=0%3A1&node-id=1%3A2&viewport=492%2C484%2C0.08&scaling=scale-down&starting-point-node-id=1%3A2

#Brief3 #cake #cakeapp #prototype #figma

Figma

This week we started learning how to use Figma...

It was a bit complicated in the beginning, and I am still confused 90% of the time, but with enough testing, I usually find a way to emulate what I want.

In the beginning, it was a lot of joking around. I got the prompt Cake. So in the beginning it was a lot of joking with “Cakes by drake”

After a while I managed to actually come up with a more serious idea.

Since I got the prompt Cake. And we had to make an app about sharing what we got as a prompt, and it was supposed to be a free service, so this is the prototype of my free service, of sharing different ways to slice cakes.

It would be an app that you could use if you have an arrangement or maybe just baked a cake for some friends, and you want to make sure that everyone will get a slice!

What/Who/Why/When:

What: How to slice cakes

Who: anyone who needs or wants to know how to slice their cake.

Why: Because when the amount of people who would want a slice exceeds 10 or if it is an odd number, it´s hard to know how to cut the cake so everyone gets an even slice.

When: arrangements where there will be more than one person, and you want to make sure everyone can get a slice.

I got some of my friends to test the app:

One in the beginning stages of prototyping, where I tested some layouts etc.

And there's the last test I did, where I tested the apps navigation. Here I got a few comments like how my phone hides part of the app, and some scrolling functions not being intuitive, but I haven't had time to fix those yet.

I've managed to make this prototype (hopefully it works):

--> --> --> --> --> --> https://www.figma.com/proto/KCbxjyBG89GxyUN5lxDQZZ/Untitled?page-id=0%3A1&node-id=1%3A2&viewport=-15%2C14%2C0.39&scaling=min-zoom&starting-point-node-id=1%3A2 <-- <-- <-- <-- <--

#Brief3 #Figma #app #cake #slice #aho #Student

Marvel Interactive Prototype

Check out this interactive prototype https://marvelapp.com/bcafgj3

Marvel Prototype for app

The beginning of brief 3. Learning to make apps in the interaction design course. For a fun start we used the app Marvel to make a little prototype of an app. Me and the one I was paired up with decided to make a very simple prototype of an app where you would be able to rent a companion if you maybe need a +1 for a wedding or want to pay to gp on a date to see what it's like, without the commitment. Kind of like the "rent a boyfriend" thing that they have some places like Japan.

#Brief3 #app #not a dating app

Here's a little side project me and Kim @https://www.tumblr.com/nisju

had during the video project.

we found it difficult at first to find a theme for our videos, so as we were joking around with different ideas as to what to make a “how to”- video about. the idea of how to stalk your teacher came about.

we found that a bit too much, so we settled for How to lear as much as possible from your teacher. And mate a little tribute video of him. It was very fun how he didn't even notice the camera.

All the info about him took us about 5 minutes to obtain. Even the his family's phone number, which we called, and told about our little side project. They were happy to help, and sent us a little video.

After seeing the video he was even inspired to make his own!

So I hope what our teacher learned from this was that he has a lot of traces on the internet, and if this video made him worried, he might think a bit more about his internet traces in the future.

But we love you anyways HG!

#brief2

Final video of the video project Brief 2: Make a “How to” video of a “ritual” or thing you do normally/often/daily.

I used procreate for the animations, and premier pro for the editing.

#Brief2 #aho #video #howto #adobe #premier pro #procreate #animation #funny

A messy video of what the bathroom looked like under filming, and a hint at the way I filmed the shower drain shot.

#Schoolproject #AHO #brief2 #howtovideo #cleantheshowerdrain

A few random shots from the insanity that was cleaning a shower drain 50 times in one day for the camera.

ahoexploringinteractions

Brief 02 : Instruksjonsfilm

Her ligger PDF av forelesning: Intro2DigitalStorytelling_GK2.pdf

“How to” instruksjonsfilm/animasjon

Lage en instruksjons film for et rituale du utfører ofte (hver dag).

Valgfritt medie, film eller animasjon (men film om dette er nytt for deg)

Ikke bruk tekst eller tale for å forklare

Bruk real lyd.

Max 1 minutt (.mp4 format)

Last opp innen fredag kl 11:00

Opplasting:

sophiakamtsikoudi

This was the brief for last week. I ended up making a video about how to clean the shower drain. I´ll post the video along with a few photos etc.

ahoexploringinteractions

Brief 01 : Ai Fanzine

"AI is GREAT/BAD for DESIGNERS & ARCHITECTS…"

Vi starter semestret med å lage en Fanzine med AI generert innhold. Her skal dere dykke ned i alle AI's muligheter og utfordringer. Dere er satt i en gruppe som enten skal argumentere/formidle om AI er Great eller Bad for designere og arkitekter. Gjør dette gjennom å vise hva som er mulig nå og hva som kan bli resultatet i fremtiden. Dette er en oppgave dere eksperimentere og tester de ulike ressurssene som ligger tilgjengelig på på nett.

2 grupper (GREAT/BAD) Se slack for inndeling…

1 side pr student

Leveres som 1 pdf

A4 stående

Alt innhold skal genereres av AI! (men du kan sette sammen resultatet selv, se hvor "lite" du kan påvirke:-)

Last opp her, før torsdag kl 19:00: A4 PDF Her fyller du ut referanse/link til siden din: AI is GREAT…

Forelesning PDF: Last ned her…

Trending Blogs

Recently Viewed Blogs

Design