Schooltime
a
crea-minds
production
Inhoud: Concept blz.04 Inspiraties blz.06 Moodboard blz.08 Kleuren blz.10 Schetsen blz.12 Tijdlijn blz.14 Storyboard blz.16 Typografie blz.20 Fotografie blz.22 Video blz.24 Bronvermelding blz.26
2
3
concept Crea-minds gaat een webapplicatie 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 kunnen deze aanklikken waarna meer informatie over het vak verschijnt in de vorm van tekst, illustratie en/of film. Een hoofdaspect is de tijdlijn. Dit moet de reis van de student voorstellen gedurende de propedeusefase.
strak 4
Wij gaan uiteindelijk een prototype leveren van de webapplicatie. De prototype bevat een tijdlijn voor de C-propedeuse, een intropagina en een adviespagina. De tijdlijn bevat alleen informatie over de courses Branddesign en Remediate. Er worden illustraties ontworpen voor alle pagina’s van de prototype. Tevens bevat het prototype drie
zelfgemaakte video’s. Wij verzorgen een complete huisstijl en een werkende HTML code. Het prototype wordt in horizontale modus ontworpen. Door horizontaal te swipen gaat men naar een andere pagina. De tijdlijn onder in beeld geeft aan in welke periode de gerbruiker zicht bevindt.
simpel Het ontwerp van de hele applicatie zal simpel en strak zijn. Het wordt geen drukke omgeving waarin je te veel wordt afgeleid. Wij gaan uit van het principe “ Less is More”.
less is more 5
inspiraties Omdat wij een website gaan ontwerpen zijn de meeste inspiraties ook gebaseerd op bestaande html5 geprogrammeerde 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 Dit filmpje laat deze stijl ook nog eens een keer heel duidelijk zien. Nice and Serious is een Engels bedrijf die veel filmpjes en sites in deze stijl maken. Op hun website kun je in hun portofolio deze filmpjes en projecten bekijken, ook het introfilmpje op 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
kleuren De kleuren die wij willen gaan gebruiken zijn geen felle kleuren, dat is nu wel duidelijk. Wij maken gebruik van kleur paletten, deze bestaan uit rustige kleuren wat zorgt voor een strak design en kalmte uitstraalt. Hiernaast staan een paar zelgemaakte plaletten die wij misschien gaan gebruiken.
10
11
schetsen We hebben al een paar schetsen gemaakt, hierbij hebben we de stijl van onze inspiraties aangehouden 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.
gameboy Iphone
i pod
12
laptop
dockstation
13
tijdlijn De tijdlijn is ĂŠĂŠn van de belangrijkste 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 duidelijke lijn te maken met daarop iconen die weergeven in welk blok je zit. Je ziet hier de verschillende iconen. De eerste is simpel en kan overal worden toegepast, de andere twee slaan terug op een vak dat in dit blok wordt gegeven. Wij hebben gekozen voor de eerste omdat deze de aandacht van de andere objecten niet wegneemt en bij elk vak kan worden ingezet. Alle iconen zijn doorzichtig zodat het hoofdoel duidelijk blijft. De typografie is ook simpel en strak en daarboven alleen een lijn wat het ook strak maakt. Less is more.
14
15
storyboard De storyboards zijn per scene (vak) ingedeeld en de animaties staan er onder aangegeven deze horen bij de punten in de scene.
4 5
3
2 1
1. Bureaustoel scrollt horizontaal door de hele website. 2. Pen rolt naar rechts en er komt ‘‘typografie’’ te staan vanuit de pen. 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.
16
5 4
6
7 2
3 1
1. Bureaustoel scrollt horizontaal door de hele website. 2. Kopje valt om de koffie knoeit de tafel en de koffie vervormt zich in typografie. 3. Laptop opent zich vanzelf. 4. De wolken bewegen van links naar rechts 5. De klok wijzers spelen af. 6. Stopcontact komen elektrische straal uit. 7. Lamp brandt vanzelf.
17
storyboard adviespagina
2 1
1. Bureaustoel scrollt horizontaal en stopt hier. 2. Flyers die openen in een draai, met daarin de beroepen.
18
intro
1
2
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.
19
typografie De typografie die wij gaan gebruiken in onze website is voornamelijk voor de data op de tijdlijn en de doorlopende tekst die de vakken krijgen (in de opening van de laptop en die van het magazine) daarin komt tekst, een filmpje en fotografie. Verder komt typografie terug in de animaties, de pen die wegrolt waar tekst verschijnt en het kopje wat omvalt waar de tekst in de vlek verschijnt. Er komt ook nog tekst voor in het beginscherm/intro.
typografie voor de koppen gebruiken we een duidelijk, strak en opvallend lettertype zoals die hierboven, dit is Bebas.
typografie Voor 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 overbrengen met beeld.
20
21
Fotografie Bij fotografie moet je denken aan de sfeerimpressies bij de vakken, hierbij moet je denken aan eindproducten die wij gemaakt hebben zoals magazines bij branddesign. Wij willen ook in beeld brengen wat wij gebruiken om deze producten te maken. Denk hierbij aan een schetsboek en programma’s op de computer Indesign, Ilustrator, Dreamweaver etc.
22
23
video We willen de filmpjes modern en fris 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 achtergrond 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-
24
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.
De tekst “Brand Design” wordt na de intro verkleind en gedurende de hele video blijft het linksboven staan. De kleuren ervan zijn ‘ingebrand’. Dat wil zeggen dat deze elke keer veranderen naar bijpassende kleuren voor de achtergrondvideo.
25
Bronvermelding Alle afbeeldingen behalve de schetsen komen van de inspiratie sites het is moeilijk om per afbeelding de juiste apa te weergeven. Deze worden hier dus weergeven in groepen. als heerst de site van Every Last Drop. - de zon Van Nice&Serious (Z.D.). every last drop.[online afbeelding] geraadpleegd op 14 mei 2013. van, http://everylastdrop.co.uk/ Futere of car sharing: -wolken -bergen-bomen -grasheuvel Van Collaborative Fund & Hyperakt. (Z.D.). The future of car sharing.Geraadpleegd op 14 mei 2013. Van, http://futureofcarsharing.com/ Julia (L) Artem: -slowpoke balloon -rennend stelletje -blauwe vogel Door Julia Pavlova & Artem Chistyakov. (2013). Artem & Julia wedding. Geraadpleegd op 14 mei 2013. Van, http://artemjuliawedding.com/en
26
27
Einde
28