Vormgeving – Briefing One page love DEADLINE One page love: tijdens het werkcollege in de week van 17 - 23 december 2012 Goed om te weten: het definitieve visueel design wordt beoordeeld door een andere vakdocent. Je eigen vakdocent is verantwoordelijk voor de beoordeling van het proces.
De opdracht: One page love
De opdracht: maak een one page website Maak met alleen kleur en typografie een layout van een biografie pagina over een ontwerper. Het kleurpalet, de letterkeuze en de layout komen voort uit de ontwerpstroming waar de door jou gekozen ontwerper door is beïnvloed in zijn of haar werk. Je vertaalt deze principes naar een one page website voor een gebruiker van nu. Er worden geen foto’s gebruikt in de site. Welke tekst en informatie moet je gebruiken in je visueel ontwerp? De tekst en de informatie die je nodig hebt om je ontwerp te maken schrijf en verzamel je zelf, de volgende onderdelen zijn verplicht: 1. de naam van de ontwerpstroming waar de door jou gekozen ontwerper door is beïnvloed 2. de voor- en achternaam van de gekozen ontwerper 3. 10 losse woorden, bedenk een aantal karakteristieke woorden, passend bij de gekozen ontwerper op het gebied van lettertype, typografie, compositie en layout, bedenk er minimaal 10. Denk aan: schreefloos, schreef, groot, stevig, diagonaal, asymmetrisch, balans, contrast, grid. Als je de ontwerpstroming en de gekozen ontwerper onderzoekt kom je vanzelf passende woorden tegen die je kunt gebruiken. Gebruik een mindmap om te associëren. 4. genealogische gegevens: geboorteplaats, geboortejaar - eventueel plaats van overlijden en sterfjaar 5. een tekst van 100-150 woorden waarin je de gekozen gebruiker informeert over het leven en werk van de ontwerper. Gebruik ook tussenkoppen. 6. externe links met bronvermeldingen
Vormgeving CMD Amsterdam 2012-2013 – One page love - pagina 1
Ontwerpeisen • je maakt de site voor een gebruiker van nu, kies zelf een gebruiker uit de volgende flickr pool: http://www.flickr.com/photos/jasontravis/sets/72157603258446753 • de site is 1280 pixels breed, de lengte is minimaal 1600 pixels maar mag langer • kies 2 lettertypes en gebruik maximaal 2 varianten in gewicht en grootte • de site wordt uitgewerkt in een kleurpalet van maximaal 3 kleuren, inclusief de verschillende tinten van deze kleuren. Wit + kleur = tint • het kleurpalet, de typografie en de layout van de site is geïnspireerd op 1 van de volgende ontwerpstromingen: • arts and crafts • de bauhaus stijl • de zwitserse school • je maakt de biografie pagina over een ontwerper. Kies 1 van de volgende ontwerpers: Pastiche • David Lance Goines • Charles Spencer Anderson Ornamentation • Marian Bantjes Entrepreneurship • William Morris • Charles Spencer Anderson • Piet Schreuders • Lucian Bernhard, een van de 3 leden van Contempora, samen met Rockwell Kent en Paul T Frankl Assymmetric Typography • Piet Zwart • Jan Tschichold • Willy Kunz • Kurt Schwitters • Paul Schuitema Abstraction • Joost Schmidt • Niklaus Troxler Triangulation • Herbert Bayer • Paula Sher • Aleksander Rodchenko • El Lissitsky Perfect Rectangles • Josef Müller-Brockmann • Catherine Zask • Jan Tschichold The Grid • Wim Crouwel • Emil Ruder Self-promotional Publishing • H.N. Werkman • Will H Bradley
Vormgeving CMD Amsterdam 2012-2013 – One page love - pagina 2
De dikgedrukte tussenkoppen verwijzen naar de ideeën in het boek ‘100 ideas that changed graphic design’ van Steven Heller en Véronique Vienne. • je schrijft en verzamelt zelf de teksten die je gebruikt in je visueel design • maak een vertaalslag van de ontwerpstroming naar een hedendaags visueel design voor de gekozen gebruiker Begin met het zoeken van informatie over de ontwerpers in de pdf’s van het boek ‘100 ideas that changed graphic design’ van Steven Heller en Véronique Vienne op intranet. Kijk hier voor informatie over de ontwerpstijlen: http://www.smashingmagazine.com/2009/08/02/bauhaus-ninety-years-of-inspiration/ http://www.smashingmagazine.com/2009/07/17/lessons-from-swiss-style-graphicdesign/ http://www.smashingmagazine.com/2010/01/07/12-modern-art-movements-toinspire-your-logo-design/
Hoe lever je je werk op? Opleveren
• • • • • • • •
• •
Tumblr: het proces en de definitieve uitwerking mindmap empathy map inspiratiebord (pinterest) moodboard met een keuze uit de inspiratie, de gekozen lettertypes en een kleurpalet de teksten en de informatie over de ontwerper die je gaat gebruiken voor je site bronnen, waar komt de informatie vandaan (hanteer de MLA standaard) layout schetsen, maak minimaal 5 handmatige schetsen schetsvariaties van je layout in de computer (minimaal 3), varieer met kleur, typografie en layout, bijvoorbeeld door het aanpassen van het gewicht en de grootte van het lettertype, het kleurpalet of de compositie definitieve uitwerking een korte toelichtig over hoe je de kleur-, typografische- en layoutprincipes van de ontwerpstroming hebt toegepast in het definitieve visueel design voor de gebruiker van nu
Werkcollege: visuele presentatie One page love • het definitief ontwerp van je site is een visueel design en wordt gepresenteerd in een online omgeving Je post alle vereiste onderdelen van de opdrachten op je eigen tumblr blog in de pagina: Vormgeving One page love (zie hiervoor het voorbeeld tumblr blog via de link op intranet). Zorg dat bij je docent de url van je blog bekend is.
Vormgeving CMD Amsterdam 2012-2013 – One page love - pagina 3
Beoordeling Als je aan alle onderdelen succesvol afrondt is het eindcijfer voor deze opdracht maximaal een 8. Een hoger eindcijfer is te halen door een van de volgende onderdelen uit te werken: Ophoging van het eindcijfer: bewegingsconcept voor je site uitwerken Bedenk en werk een bewegingsconcept voor de typografische content van je site uit. De layoutprincipes van de gekozen stijl bepalen hoe de content van je site beweegt. Bauhaus is bijvoorbeeld geschikt voor een diagonal beweging, zwitserse school is meer geschikt voor een horizontaal of verticale beweging. Doen Denk na over hoe de content van je one page website kan bewegen, maak minimaal 3 handmatige schetsen waarin je je denken over de beweging van je site op papier zet. Werk daarnaast een visueel storyboard van 5 schermen uit waarin je de gekozen beweging van je content uitwerkt. Leg kort in woorden uit welk layout principe je voor de beweging hebt gekozen en hoe je dit hebt omgezet in beweging. Lees over hoe bij Nike in de site het bewegingsprincipe parallax scrolling is gebruikt en wat hieraan vooraf ging: http://coding.smashingmagazine.com/2011/07/12/behindthe-scenes-of-nike-better-world/ Ophoging van het eindcijfer: het visueel design uitwerken in html/css Een uitdaging voor de front-end developers: werk het visueel design uit met html/css en maak hierbij gebruik van webfonts. Doen Het definitief ontwerp van het visual design maakt gebruik van webfonts en is gerealiseerd met html/css. De site draait op een serveromgeving (oege).
Kijk naar deze voorbeelden van one page websites waarbij vrijwel alle tekst is gezet met webfonts. De site http://www.kitchensinkstudios.com/ gebruikt de fonts Bodoni Poster en Brandon Grotesque. De site http://www.goodcorps.com/ gebruikt de fonts Monotype Sabon (hosting door Webtype), host FF Bau (hosting door Typekit) en Trade Gothic (hosting door Fonts.com). Je ontvangt feedback op de verplichte onderdelen. Kijk op intranet voor het beoordelingsformulier. Is de beoordeling op 1 van de onderdelen nog niet voldoende? Dan is je eindcijfer een 1.
Vormgeving CMD Amsterdam 2012-2013 – One page love - pagina 4
Herkansen One page website De herkansing is geen verbeterde of aangevulde versie van je eerdere werk. Je werkt voor de herkansing aan een visueel design van een biografie pagina voor een andere ontwerper. Voor de herkansing van je one page website kies je een andere gebruiker, een andere ontwerper, geïnspireerd door een andere ontwerpstroming. Je doorloopt opnieuw het volledige proces. Je post je werk in de pagina Herkansing Vormgeving One page love op je tumblr blog vóór de herkansingsdeadline en presenteert het werk aan de docent. Heb je de deadline niet gehaald, dan wordt je werk met een 1 beoordeeld. Je ontvangt alleen feedback op je werk tijdens de visuele presentatie.
Vormgeving CMD Amsterdam 2012-2013 – One page love - pagina 5
