ontwerprapport schooltime, crea minds

28
Schooltime crea-minds a production

description

c-project han cmd ontwerprapport

Transcript of ontwerprapport schooltime, crea minds

Schooltime

crea-mindsa

production

Inhoud:Concept blz.04Inspiraties blz.06Moodboard blz.08Kleuren blz.10Schetsen blz.12Tijdlijn blz.14Storyboard blz.16Typografie blz.20Fotografie blz.22Video blz.24Bronvermelding blz.26

2

3

Crea-minds gaat een webappli-catie maken in HTML. Deze zal werken op zowel (Android) tablets als traditionele computers. De omgeving wordt een houten tafel waarop alle interactiviteit plaats zal vinden. Voor elke course zullen er één of meerdere elementen op tafel zichtbaar zijn. Studenten kun-nen deze aanklikken waarna meer informatie over het vak verschijnt in de vorm van tekst, illustratieen/offilm.Eenhoofd-aspect is de tijdlijn. Dit moet de reis van de student voorstellen gedurende de propedeusefase.

Wij gaan uiteindelijk een proto-type leveren van de webapplica-tie. De prototype bevat een tijd-lijn voor de C-propedeuse, een intropagina en een adviespagi-na. De tijdlijn bevat alleen infor-matie over de courses Brandde-signenRemediate.Erwordenillustraties ontworpen voor alle pagina’s van de prototype. Te-vens bevat het prototype drie

zelfgemaakte video’s. Wij ver-zorgen een complete huisstijl en een werkende HTML code. Het prototype wordt in horizontale modus ontworpen. Door hori-zontaal te swipen gaat men naar een andere pagina. De tijdlijn onder in beeld geeft aan in welke periode de gerbrui-ker zicht bevindt.

Het ontwerp van de hele appli-catie zal simpel en strak zijn. Het wordt geen drukke omge-ving waarin je te veel wordt afgeleid. Wij gaan uit van het principe “ Less is More”.

concept

simpelstrak

4

less is more

5

inspiratiesOmdat wij een website gaan ontwerpen zijn de meeste inspi-raties ook gebaseerd op bestaande html5 geprogram-meerde websites.De stijl die wij gaan gebruiken is strak, simpel en hip. Hier zijn een paar websites die deze stijl ook hanteren:

artemjuliawedding.com/en

futureofcarsharing.com

everylastdrop.co.uk Je ziet ook goed dat er niet te veel felle kleuren word gebrukt, dit spreekt ons ook heel erg aan.

vimeo.com/57858464#at=0 Ditfilmpjelaatdezestijlooknog eens een keer heel duidelijk zien.

NiceandSeriousiseenEngelsbedrijfdieveelfilmpjesensites in deze stijl maken. Op hun website kun je in hun portofolio dezefilmpjesenprojectenbekijken,ookhetintrofilmpjeop de homepage hanteerd deze stijl.

http://www.niceandserious.com/

6

7

Moodboard

8

In dit moodboard zie je ook de strakke illustraties en de doffe kleuren die wij ook zullen gaan hanteren. Niet veel details, simpele duidelijke illustraties waarvan iedereen meteen ziet wat het is.

9

kleurenDe kleuren die wij willen gaan gebruiken zijn geen felle kleu-ren, dat is nu wel duidelijk. Wij maken gebruik van kleur paletten, deze bestaan uit rus-tige kleuren wat zorgt voor een strak design en kalmte uit-straalt.

Hiernaast staan een paar zel-gemaakte plaletten die wij mis-schien gaan gebruiken.

10

11

schetsenWe hebben al een paar schetsen gemaakt, hierbij hebben we de stijl van onze inspiraties aan-gehouden en ook de objecten hebben we in deze stijl zo goed mogelijk proberen te illustreren.Hier een paar objecten die we in ons product gaan gebruiken.

Iphone

gameboy

i pod

12

dockstation

laptop

13

tijdlijnDe tijdlijn is één van de belang-rijkste dingen van de website, wij willen hierin de maanden aangeven en ook welk vak bij deze maand hoort. De tijdlijn moet dus goed in beeld zijn maar de objecten op de tafel moeten hier wel meer opvallen. Hij moet dus subtiel zijn maar wel aanwezig.

Wij willen dit effect bereiken door strakke fonts en een dui-delijke lijn te maken met daarop iconen die weergeven in welk blok je zit.

Je ziet hier de verschillende ico-nen. De eerste is simpel en kan overal worden toegepast, de andere twee slaan terug op een vak dat in dit blok wordt gege-ven. Wij hebben gekozen voor de eerste omdat deze de aan-dacht van de andere objecten niet wegneemt en bij elk vak kan worden ingezet.

Alle iconen zijn doorzichtig zodat het hoofdoel duidelijk blijft.

Detypografieisooksimpelenstrak en daarboven alleen een lijn wat het ook strak maakt.

Less is more.

14

tijdlijn

15

storyboard

1. Bureaustoel scrollt horizontaal door de hele website.2.Penroltnaarrechtsenerkomt‘‘typografie’’testaanvanuitdepen.3. Magazine blad opent zich vanzelf.4. De noten bewegen alsof er muziek afspeelt maar er speelt geen muziek af.5. Wolken bewegen van links naar rechts.

De storyboards zijn per scene (vak) ingedeeld en de animaties staan er onder aangegeven deze horen bij de punten in de scene.

1

23

4

5

16

storyboard

1

1. Bureaustoel scrollt horizontaal door de hele website.2.Kopjevaltomdekoffieknoeitdetafelendekoffievervormtzichintypografie.3. Laptop opent zich vanzelf.4. De wolken bewegen van links naar rechts5. De klok wijzers spelen af.6. Stopcontact komen elektrische straal uit.7. Lamp brandt vanzelf.

23

4

5

67

17

storyboard

1. Bureaustoel scrollt horizontaal en stopt hier.2. Flyers die openen in een draai, met daarin de beroepen.

1

2

adviespagina

18

storyboardintro

1

1. Hier kan je op klikken en dan ga je de C-propedeuse bekijken.2. Als je hierop klikt krijg je de I-propedeuse te zien.

2

19

typografieDetypografiediewijgaange-bruiken in onze website is voor-namelijk voor de data op de tijd-lijn en de doorlopende tekst die de vakken krijgen (in de opening van de laptop en die van het magazine) daarin komt tekst, eenfilmpjeenfotografie.

Verderkomttypografieteruginde animaties, de pen die weg-rolt waar tekst verschijnt en het kopje wat omvalt waar de tekst in de vlek verschijnt.

Erkomtooknogtekstvoorinhet beginscherm/intro.

typografievoor de koppen gebruiken we een duidelijk, strak en opvallend lettertype zoals die hierboven,dit is Bebas.

typografieVoor de doorlopende tekst willen we ook een strak lettertype met niet te veel schreven, er zal niet veel doorlopende tekst zijn, we willen de boodschap meer over-brengen met beeld.

20

typografie

21

FotografieBijfotografiemoetjedenkenaan de sfeerimpressies bij de vakken, hierbij moet je denken aan eindproducten die wij ge-maakt hebben zoals magazines bij branddesign. Wij willen ook in beeld brengen wat wij gebruiken om deze producten te maken. Denk hier-bij aan een schetsboek en pro-gramma’s op de computer In-design, Ilustrator, Dreamweaver etc.

22

23

videoWewillendefilmpjesmodernenfris houden. Daarom we ervoor gekozen om ze zo minimalistisch mogelijk te maken. We maken geen gebruik van felle kleuren. De kleuren die wij gebruiken zijn wat meer ‘retro’ en ogen wat natuurlijker.

Zoals u hieronder ziet, hebben we ook een frisse witte achter-grond gemaakt met een subtiele overgang naar grijs.

In het midden staat groot de naam van het vak. De kleuren die we gebruikt hebben zijn oranje en groen. Deze kleuren hebben we gekozen, omdat ze niet te veel zijn, maar wel opval-

len door de egale achtergrond.

Rechts onderin vind u het logo van Crea-Minds. We hebben ervoor gekozen om deze wat transparant te maken, zodat het niet te veel opvalt.

24

De tekst “Brand Design” wordt na de intro verkleind en gedu-rende de hele video blijft het linksboven staan. De kleuren ervan zijn ‘ingebrand’. Dat wil zeggen dat deze elke keer ver-anderen naar bijpassende kleu-ren voor de achtergrondvideo.

25

BronvermeldingAlle afbeeldingen behalve de schetsen komen van de inspi-ratie sites het is moeilijk om per afbeelding de juiste apa te weergeven. Deze worden hier dus weergeven in groepen.

alsheerstdesitevanEveryLastDrop. - de zonVan Nice&Serious (Z.D.). eve-ry last drop.[online afbeelding] geraadpleegd op 14 mei 2013. van, http://everylastdrop.co.uk/

Futere of car sharing:-wolken-bergen-bomen-grasheuvelVan Collaborative Fund & Hyperakt. (Z.D.). The future of car sharing.Geraadpleegd op 14 mei 2013. Van, http://futureof-carsharing.com/

Julia (L) Artem:-slowpoke balloon-rennend stelletje-blauwe vogelDoor Julia Pavlova & ArtemChistyakov. (2013). Artem & Julia wedding. Geraadpleegd op 14 mei 2013. Van, http://artem-juliawedding.com/en

26

27

Einde

28