WORKSHOP 02 Typography is what language looks like Ellen Lupton
Vormgeving CMD P2013-2014 | Nicole Frank
Programma • Les 1: start opdracht vormgeving onderzoeken • Les 2: bezoek museum • Les 3: inleveren pdf van Pecha Kucha presentatie op moodle (AVV), Pecha Kucha presentatie en beoordeling, start volgen van online lessen en maken sketchnotes • Les 4-5-6: volgen van online lessen en maken sketchnotes • Les 4: zelf vormgeven, thema kleur, feedback (AVV) en uitwerken • Les 5: herkansing Pecha Kucha presentatie • Les 5: zelf vormgeven, thema typografie, feedback (AVV) en uitwerken • Les 6: zelf vormgeven, thema compositie/layout, feedback (AVV) en selectie • Les 7: inleveren handout Vormgevingsopdracht (proces en digitale uitwerking), sketchnotes Lynda in print en als pdf op moodle (AVV), beoordeling • Les 8: herkansing handout Vormgevingsopdracht
Vormgeving CMD P2013-2014 | NF
Wat gaan we doen? Minicollege: Typografie • Materiaal: pen en papier
Zelf aan de slag met de eindopdracht • Materiaal: pen en papier • methoden en technieken: associëren, mindmap (Tony Buzan), inspiratie (pinterest), moodboard, styletile, schetsen • Feedback
Huiswerk • Styletile Vormgeving CMD P2013-2014 | NF
Handout (print en moodle)
Deadline week 7: maak een handout met al je werk voor vormgeving http://intra.iam.hva.nl/content/1314/propedeuse/vormgeving//lesprogramma/
Leerdoelen, beoordeling is 75% van eindcijfer • student onderzoekt en analyseert ontwerphistorie, stijlen en vormgeving en gebruikt deze als inspiratie • student toont zijn/haar denken met schetsen • student werkt procesmatig aan verschillende vormgevingsopdrachten • student kent de theorie van typografie, kleur en layout en kan deze toepassen in eigen vormgeving • student presenteert en onderbouwt de vormgeving door te verwijzen naar de eigen inspiratie, schetsen en het doorlopen vormgevingsproces
Vormgeving CMD P2013-2014 | NF
Vormgeven:
associëren, inspiratie,
schetsen en een
procesmatige aanpak
Vormgeving CMD P2013-2014 | NF
Opdracht: ontwerp een one page layout voor een portfoliosite op basis van bootstrap* Onderweg heb je een toevallige ontmoeting met een potentiële opdrachtgever. Hij vraagt naar je portfoliosite. Die heb je niet… De opdracht Maak een visueel design van een portfoliosite om jezelf en je werk** te presenteren op basis van een bootstrap layout. • Kijk op intranet naar een uitgebreide beschrijving van de opdracht • Werk procesmatig, associëren, inspiratie, en ga dan aan de slag met het schetsen van layouts op papier • Oefen eerst met schetsen van de verschillende layouts Vormgeving CMD P2013-2014 | NF
http://visualdesignbasics.tumblr.com/
Vormgeving – Briefing eindopdracht DEADLINE In de week van 13 januari 2014 is de eindbeoordeling op afspraak. Je levert een handout (kleurenprint) van je werk in bij je docent tijdens de eindbeoordeling. Op moodle lever je een pdf in.
Opdracht: ontwerp een one page layout voor een portfoliosite op basis van bootstrap*
Bron: http://www.lovebootstrap.com/
De opdracht Maak een visueel design van een portfoliosite om jezelf en je werk** te presenteren op basis van een bootstrap layout. Bij vormgeving draait het niet om het daadwerkelijk implementeren van de site, maar om de manier waarop je met de opdracht aan de slag gaat. Hoe associeer je, wat is er belangrijk en specifiek aan een one page portfoliosite. Hoe kijk je, wat is je inspiratie en welke visuele elementen staan aan de basis van je site. Je toont (uitgewerkte) schetsontwerpen van de layout van je site en varieert in je layout met kleur, beeld en typografie. Je schetsen maken het proces naar het eindresultaat helder. In feite zijn ‘mooie’ schetsen voldoende om je verhaal te vertellen, maar de beste oplossing(en) werk je uit in Photoshop. In deze uitwerkingen op de computer pas je het gekozen kleurpalet toe (kuler.adobe.com), kies je een systeemlettertype en voeg je daar een ‘eigen’ lettertype aan toe (google.com/fonts, dafont.com). Maak verschillende uitwerkingen van de layout, varieer tot je een goede visuele hierarchie in je vormgeving hebt bereikt. In je proces laat je zien hoe je dit hebt gedaan (procesmatig werken). Doel: een visuele uitwerking van een online ‘visitekaartje’ waarin je jezelf en je werk presenteert.*** * Er is voor Bootstrap gekozen omdat jullie hiermee ervaring hebben opgedaan in project 2. Jullie kennen inmiddels de designprincipes van Bootstrap. Vanwege je kennis van het systeem kun je relatief snel onderzoeken en variëren met de vormgeving om een ‘eigen’ speciale layout voor een portfoliosite te realiseren. En wellicht zie je nu kans eerdere vormgevingsfouten, denk aan het kleurpalet of leesbaarheid van je typografie, te herstellen. Vanzelfsprekend ben je vrij je eigen keuze hierin te maken, je kunt een ander syteem kiezen of zonder een systeem als basis vormgeven. Overleg dit met je docent. ** Heb je al een toffe portfolio site, maak dan een portfolio site voor een ‘andere’ creatief (bv een fotograaf), of bv voor een galerie of winkel met een eenvoudig product (t-shirts?). Gebruik in dit geval ook de Empathy Map om je in te leven in de gebruiker. *** Aan het eind van de propedeuse heb je een gesprek waar je een portfoliosite van jezelf moet laten zien.
http://intra.iam.hva.nl/content/1314/propedeuse/vormgeving//lesprogramma/ Vormgeving CMD Amsterdam P1314 - Eindopdracht - pagina 1
To do: ssociëren en de opdracht verhelderen, pinterest en schetsen Vormgeving CMD P2013-2014 | NF
Inspiratie
Vormgeving CMD P2013-2014 | NF
http://www.bno.nl/
http://startupsthisishowdesignworks.com/
Oefen met schetsen
van bootstrap layouts
Vormgeving CMD P2013-2014 | NF
http://getbootstrap.com/
http://getbootstrap.com/
http://getbootstrap.com/
http://www.lovebootstrap.com/
http://www.lovebootstrap.com/
http://www.lovebootstrap.com/
http://www.lovebootstrap.com/
Feedback sessie (10 minuten) • Maak tweetallen • Je presenteert je schetsen aan de ander en licht toe welke schets het meest veelbelovend is (2 minuten) • De ander stelt vragen en/of geeft feedback – Als je feedback ontvangt reageer je niet, je luistert goed – De ontvanger maakt een notitie op het schetsvel van de vragen en de feedback
• Nu is de beurt aan de ander
Vormgeving CMD P2013-2014 | NF
To do: vastleggen van de visuele stijl van je Startup http://styletil.es/
http://styletil.es/
http://styletil.es/
http://www.adobe.com/nl/products/photoshop.html
Huiswerk Werk het proces van de opdracht netjes uit: • Associaties (mindmap, wordlist) • Inspiratie (pinterest) • Schetsen • Styletile in photoshop
Vormgeving CMD P2013-2014 | NF
Tot in het nieuwe jaar
Vormgeving CMD P2013-2014 | NF
