Issuu on Google+

Style Guide

Jordi Frederix cmm 2008 MM - C

CD-rom portfolio presentatie • www.yor-studio.nl

Style Guide MM-C 1


Style Guide Brainstorm - IdeeËnlijst Yor Studio

VORMGEVING

PRODUCTEN

Modern, Jong Eigentijds, Dynamisch Creatief en Stijlvol.

Meerdere filmpjes van verschillende onderdelen van het Spot2Go project. Flash buttons die opengaan als een kluisdeur, James Bond stijl. Wisselende achtergrond per project/pagina zodat de sfeer nog extra benadrukt wordt. Per project/pagina een andere playlist kunnen kiezen. Filmpje van mezelf in verschillende situaties die dan als intro filmpjes gebruikt worden. Buttons met een glinstering als over status. Buttons met verschillende blur effecten Zwart / wit buttons die bij een mouse over naar full-color faden. Silhouet van mezelf animeren. De vlakken van de buttons animeren en de tekst daaronder de kenmerken van een button geven. In de grote balk met eigen projecten op de homepagina een animatie in laten afspelen. Per project/pagina een wisselende opmaak van vlakverdeling.

Posters Manual shop in shop Verpakking Display’s Poster D&G Logo’s Project inrichtingen Menukaarten Pictogrammen Website’s Restaurant / cafe artiekelen Advertenties Outdoor- en indoorsigning Moodboards Wikkels Stadsplattegrond lay-out Bedrukkingen / applicaties Tram bedrukking Fashion magazine / brochure Reclamezuil Stapelobject open dag Ansichtkaart Shop card Hotel deurhanger Navigatie systeem lay-out Shopping stads plattegrond Bedrukking schoudertas Hotspots waaier

Goed gevoel voor ontwerp Een allrounder Donkere kleuren zwit en zwart special effects Contrasten Modern font Kleurrijk Lounge, Funky, Jazz en Soul muziek Glamour & Design Internationaal: Amsterdam, Parijs Londen, Milaan Fashion, lifestyle, fotografie, muziek, shoppen, ontwerpen.

Style Guide MM-C 2


Style Guide Brainstorm - gecategoriseerd Dolce&Gabbana project

Loods 5 project

eigen werk

Verpakking D&G Display D&G Shop is shop ontwerp Manual

Inrichting woonmaand Advertentie woonmaand Outdoor signing woonmaand Indoor signing woonmaand Menukaart woonmaand cafe Placemat woonmaand cafe Logo woonmaand Moodboards woonmaaand Poster woonmaand Website woonmaand

Lifestyle drink advertentie Fashion creatie yellow Benetton Magazine Covers iCreate Magazine lay-outs Webdesigner Dior style advertentie

Spot2go project

United Colors of Benetton project

Vormgeving

Ansichtkaart Amsterdam Shop card Bedrukking fiets taxi Hotel deurhanger T-shirt bedrukkingen Logo Spot2Go Navigatie systeem lay-out Shopping stadsplattegrond Bedrukking schoudertas Bedrukking flesje & verpakking (tas) Hotspots waaier Website lay-out Spot2Go

Bidon wikkel Stadsplattegrond lay-out Portemonnee bedrukking Tram bedrukking Website kledingwinkel Magazine fashion Moodboards kledingwinkel Reclamezuil kledingwinkel

Meerdere filmpjes van verschillende onderdelen van het Spot2Go project. Filmpje van mezelf in verschillende situaties die dan als intro filmpjes gebruikt worden. Buttons met een glinstering als over status.

Buttons met verschillende blur effecten. Zwart / wit buttons die bij een mouse over naar full-color faden. De vlakken van de buttons animeren en de tekst daaronder de kenmerken van een button geven.

Style Guide MM-C 3


Style Guide Brainstorm - afgevallen IdeeËn

PRODUCTEN Tas Pas Gek poster: de kleuren en compositie passen niet zo goed bij het andere werk wat er te zien is. Poster D&G: deze valt qua stijlen buiten de andere producten die voor het D&G project zijn gemaakt. Achtergrond D&G: deze komt terug in de verpakking van het parfum, en hoeft daarom niet nog eens apart getoont te worden. Inrichting Museum zalen: deze zijn geschetst of een knip/plak collage en vallen daardoor buiten de stijl die alle andere producten wel hebben namelijk een kleurrijke grafische compositie gemaakt. Bierviltje woonmaand cafe: geeft te weinig beeldvorming over het concept. Moodboards woonmaaand: passen qua stijl prima bij dit project, daarom wil ik ze niet allemaal gebruiken maar misschien wel een paar.

Kleding winkelpersoneel: is nog niet helemaal naar wens qua vormgeving. Portemonnee bedrukking: ik ga proberen om dit in 3D te kunnen laten zien, anders komt er misschien toch een platte uitslag van de bedrukking. Stapelobject open dag: dit project bestaat maar uit 1 product en daardoor te weinig om een pagina mee te kunnen vullen. T-shirt bedrukkingen Spot2GO: eentje van de twee is vrij simpel qua vormgeving, de andere past meer in de stijl van de andere beelden van dat project. VORMGEVING Flash buttons die opengaan als een kluisdeur, James Bond stijl: wordt te druk en past niet bij de stijl. Wisselende achtergrond per project/pagina zodat de sfeer nog extra

benadrukt wordt: ik wil mijn stijl laten zien en daarbij past een rustige moderne achtergrond. Per project/pagina een andere playlist kunnen kiezen: te leuke gadget die misschien de aandacht gaat afleiden. Silhouet van mezelf animeren: heel veel bewegingsvrijheid heeft hij niet en wordt te druk, gaat de aandacht afleiden. In de grote balk met eigen projecten op de homepagina een filmpje in laten afspelen: dan is het verassings effect weg en laat je al te veel zien aan beelden. Per project/pagina een wisselende opmaak van vlakverdeling: veel beelden die ik heb gebruikt zijn vrij druk. Als er dan ook nog eens per project een andere opmaak komt wordt het visueel heel druk.

Style Guide MM-C 4


Style Guide Flowchart

D

it Project opent met een splashpage. Daarna kan men doorklikken naar de home pagina. Daarop staan 5 buttons die elk naar een project verwijzen. Tussen de projecten is niet te switchen. Wil men een ander project bekijken moet dat via home pagina.

Eigen werk Eigen werk

Dolce&Gabbana Dolce&Gabbana

Splashpage Splashpage

Home Home

Loods 5 Loods 5

Spot2Go Spot2Go

Film mliF

United Colors of Benetton United Colors of Benetton

Style Guide MM-C 5


Style Guide Key - visuals

Style Guide MM-C 6


Style Guide Opmaak Fonts

VOORBEELD

Enter button Font: type: Grote: Kleur:

century gothic bold 18 px wit RGB: 255 - 255 - 255 Hex: #ffffff

Titels en koppen Font: type: Grote: Kleur:

century gothic regular 18 px wit RGB: 255 - 255 - 255 Hex: #ffffff

Body tekst Font: type: Grote: Kleur: of

century gothic regular 14 px wit RGB: 255 - 255 - 255 Hex: #ffffff zwart RGB: 0 - 0 - 0 Hex: #000000

ENTER

Loods 5 Spot 2 Go

Os dipsummy nullam, sum quat. Bore diat, suscill andigna facincing er augiamconse molor init.

Kleurenkaart

Hoofdkleuren

Zwart: RGB: 0-0-0 Hex: #000000

Wit: RGB: 255-255-255 Hex: #ffffff

Donkergrijs: zwart 50% RGB: 147-149-152 Hex: #939598

Lichtgrijs: zwart 25% RGB: 199-200-202 Hex: #c7c8ca

Steunkleuren

Overige kleuren / verloop tinten

Verloop zwart - wit Gradient

Style Guide MM-C 7


Style Guide Navigatie - splashe page Toelichting Intro filmpje als Quicktime. Deze wordt gemaskt en het zichtbare deel bevind zich binnen een deel van het logo. Vanaf het begin is er een skipmovie button om direct naar de homepagina te gaan. Speelt de klant wel eerst de film af dan verschijnt er na afloop van de QT-movie een enter button en verdwijnt de skip movie button. In de film zijn beelden verwerkt die te maken met mij als ontwerper en met het tot stand komen van de producten: schetsen, fotograferen, werken achter de computer etc.

Style Guide MM-C 8


Style Guide Navigatie - Home Toelichting De homepagina geeft een overzicht over mijn werk van de afgelopen jaren. De afbeeldingen in de frames zijn geanimeerde buttons. Onder elk frame staat een titel met de naam van het desbetreffende project. Boven aan de pagina in de linkerhoek bevindt zich het audio interface bestaande uit 3 knoppen (playpauze, pevious en next) en een fader voor het volume. Dit komt als vast element op alle pagina’s terug .

Style Guide MM-C 9


Style Guide Navigatie - Eigen werk Toelichting Omdat mijn werk voornamelijk uit liggende foto’s bestaat zijn er twee liggende vlakken. In die blokken komen beelden in de vorm van stills, sprites of filmpjes waardoor het een dynamische pagina wordt. De beelden worden in zijn geheel of een detail daarvan getoond. Het silhouet en het logo rechts boven krijgen de functie van een button om terug te komen op de home pagina. Deze elementen worden eventueel geanimeerd. Links boven het audio interface, als vast element.

Style Guide MM-C 10


Style Guide Navigatie - Projecten Toelichting Elk project krijgt deze layout die bestaat uit verschillende formaat blokken. In die blokken komen beelden in de vorm van stills, sprites of filmpjes waardoor het een dynamische pagina wordt. De beelden bestaan uit een combinatie van: print, online, 3D en film werk van een project. De beelden worden in zijn geheel of een detail daarvan getoond. Het silhouet en het logo rechts boven krijgen de functie van Home button. Links boven het audio interface, als vast element.

Style Guide MM-C 11


Style Guide Overige idËeen flash

Muziek

Home buttons

Playlist

Alle buttons op de home pagina worden een hele korte animatie + spot effects als de bezoeker erover heen gaat met de muis. De buttons veranderen van b.v. type: kleur, transparantie, blur of compositie.

- GarageBand loop - Hotel Paris - Soul lounge - Mercy / Duffy

bekijk

Pagina Silouthe In dit object dingen laten gebeuren zoals afbeeldingen en logo’s geanimineerd af laten spelen. Of het object zelf laten animeren bijvoorbeeld veranderen van kleur in in- en uitfaden.

Video Intro film - Head Kandy - Jamie Lidell - Candy Store - Fatboy Slim

Losse shots van mij als ontwerpen en dingen die bij het ontwerpen van producten horen zoals werken op de computer, overleg met de klant, tijdschriften bekijken.

Spoteffecten Passende moderne geluiden uit de Garageband collectie of van andere externe rechtvrije bronnen. Ik ga over het algemeen subtiele geluiden gebruiken en waar het past ook heftigere geluiden.

Interface Deze heeft een play-pauze knop en een vorige en volgende button. En een fader om het volume mee te regelen.

Spot 2 Go 1 movie met korte shots van Amsterdam over winkelen, lekker eten en drinken, uitgaan en overnachten in Amsterdam. Daarnaast komen korte filmpjes over elke thema. De klant kan dus kiezen welk filmpje hij wilt bekijken.

Style Guide MM-C 12


Yor Studio