Vormgeving Werkgroep 04! Gebruik van een grid en interactie
Bron: smashingmagazine.com, image credit: Kristian Bjornard
Programma deze week # In de werkgroep vandaag: Het visual designproces, de uitwerkingsfase Gebruik van een grid en interactie Deze week practicum: Zelfstandig werken, feedback en cijfers deelopdrachten (op afspraak)
Volgende week: alles over de eindpresentatie Let op: deadline herkansing deelopdracht 1 en 2 is zaterdag 10 december, 23.59 uur. Zijn deze < 5,5 dan is Vormgeving onvoldoende afgerond en ben je welkom voor herkansing in het volgend schooljaar.
Opdracht: geef vorm aan de visuele identiteit van het chinese sportmerk Li-Ning
Het Visual Designproces In een ontwerpproces doorloop je de volgende fasen:
1. de onderzoeksfase 2. de conceptfase 3. de uitwerkingsfase In elke fase zul je verschillende activiteiten ondernemen, je denkt, kijkt en doet en tijdens de eindpresentatie overtuig je mr. Jay Li. Door elke fase met aandacht te doorlopen zal de kwaliteit, maar ook # de orginaliteit van je werk toenemen.
3. Uitwerkingsfase Resultaat van de uitwerkingsfase: je gevonden (of eigen) fotografie, een uitgewerkte en gedetailleerde grafische stijl, uitgewerkt naar verschillende toepassingen. Doen: schetsen verder uitwerken op de computer, definitieve keuze uitwerken naar de verschillende toepassingen Overtuigen: Presenteren
Deelopdracht 3 1. het fotografie concept 2. schetsontwerp van het affiche, minimaal twee varianten 3. schetsontwerp van de landingspagina, minimaal twee varianten 4. schetsontwerp van de webshop- en/of customizepagina, ! minimaal twee varianten 5. schetsontwerp van de twee banners, minimaal twee varianten Let op: zaterdag 10 december, 23.59 uur, derde deadline en deadline herkansing deelopdracht 1 en 2 Zie intranet voor deliverables van deelopdracht 3 Hoe lever je je werk op? Op eigen blog.
Boek Vormgeving#
Lees hoofdstuk 5: Putting it all together
Fotoconcept: zelf passende foto’s kiezen# Kies een thema passend bij je eigen ‘focus’ klant: Kijk bijvoorbeeld op www.flickr.com bij sports photography: - x-treme sports - sports fashion - sports street Onderzoek: welke fotografie spreekt je ‘focus’ klant aan? Kies met een reden en met gevoel voor wat je denkt dat je ‘focus’ klant zal aanspreken.
Research: ’sfeer’ fotografie
Let op resolutie van foto voor de print (minimaal A3) nodig voor de eindpresentatie Bronnen: http://www.flickr.com/photos/mfiorentino/904854596/sizes/o/in/pool-53326846@N00/ http://www.flickr.com/photos/bojd/256802608/sizes/l/in/photostream/ http://www.flickr.com/photos/slashed/5995461166/ http://www.flickr.com/photos/alanmahon/ http://www.flickr.com/photos/alyonabauska/4621385958/ http://www.flickr.com/photos/shutterthink/5621838826/in/photostream/
en productfotografie…
Bron: http://www.sneakerobsession.com/27262/li-ning-baron-davis-001-ucbd/
Landingspagina, sfeer
Landingspagina, sfeer
Landingspagina, sfeer/product
Webshoppagina, sfeer/product
Webshoppagina, sfeer/product
Webshoppagina, product
Customisepagina, sfeer/product
Customisepagina, product
Customisepagina, product
Leerdoelen Vormgeving # • • • •
De student ontwikkelt basiskennis over vormgeving en visuele begrippen De student kan communiceren met behulp van een visueel ontwerp De student kan diverse middelen effectief inzetten in het ontwerpproces De student leert om te gaan met feedback, leert vormgeving te onderbouwen en kan zijn werk helder presenteren en van commentaar voorzien
Beoordelingscriteria Vormgeving # • • • • • • • • •
de student levert de producten zorgvuldig en binnen de deadline op de student verbetert zijn werk naar aanleiding van de feedback De student begrijpt de kenmerken van een vormgevingsprobleem en kan de randvoorwaarden formuleren de student past onderzoek, jargon en kennis van de visuele basiselementen in het vormgevingsproces toe de student maakt schetsen om vormgeving te visualiseren de student experimenteert en varieert bij het uitwerken van de vormgeving de student toont de verschillende fasen van het creatieve proces en licht deze toe de student kan het definitief ontwerp helder overdragen in woord en beeld het definitief ontwerp laat een passende en orginele oplossing voor het vormgevingsprobleem zien
Grid
Bron: http://blog.wanken.com/wp-content/uploads/2011/03/wim_crouwel_poster_design_typography_grid.jpeg
Waarom een grid? • = systeem • helpt bij het toegankelijk maken van informatie, # de rol van de vormgever is dat dit op een aantrekkelijke manier gebeurt • afspraken over toepassing • vanaf de jaren 30 van de vorige eeuw gebruiken grafisch ontwerpers grid systemen voor pagina layout Niet nieuw, het gebruik is al eeuwenoud...
Gulden snede# Leonardo Da Vinci#
1490
Gulden snede = a : b = (a+b) : a
circa 1503–1507
Voorbeeld illustator gulden snede: poster.ai
Grid design resource: http://www.thegridsystem.org/
Voordelen van een grid • • • •
Consistentie Raamwerk voor alle pagina’s Makkelijk te gebruiken Een voorgedefinieerde structuur
Nadelen • rigide toepassing = levenloos design
Meer over grids
Meer? http://www.smashingmagazine.com/2011/11/09/establishing-your-grid-in-photoshop/# http://www.fuelyourcreativity.com/grid-based-design-toolbox/ http://www.bol.com/nl/p/duitse-boeken/grid-systems-in-graphic-design/1001004008210740/index.html
Interactie
Bron: http://www.kennychen.net/blog/2008/04/05/flickr-user-model-diagram/
Interactie gaat over gedrag en ervaring Visual Design versus Interaction Design A visual designer is designing for communication and aesthetics (beautiful but static) , an interaction designer is designing to communicate behaviors (gedrag) and experience (ervaring) Vormgeven voor Li-Ning (Visual Design) Affiche: communicatie en esthetiek vormgeven Landingspagina: sfeer/esthetiek, functionaliteit (navigatiemenu) vormgeven Webshop- en/of customisepagina: sfeer/esthetiek, functionaliteit vormgeven Banners: sfeer/esthetiek, functionaliteit (doorklik) vormgeven Extra (excelleren >7) voor Li-Ning (Interaction Design) Interactiemodellen: gedrag en experience vormgeven
Interaction Design, basics/tips! TIP 1 Denk vanuit de doelgroep en praat met je doelgroep TIP 2 Zorg dat je gebruiker zich kan oriënteren op je site Waar ben je? Hoe ben je daar gekomen? Waar kun je naartoe vanaf het punt waar je bent?
Bron: http://www.flickr.com/photos/jasontravis/sets/72157603258446753/with/5820657337/
Interaction Design, basics/tips! TIP 3 Eenvoud is beter
TIP 4 Design voor een dialoog, de dialoog van de gebruiker en de site. Wat is de visuele taal van de feedback?
TIP 5 Wat is de workflow? Waar kom je vandaan en waar ga je naartoe? ! Elke handeling van de gebruiker moet worden ontworpen
Inspiratie navigatiemenu
Bron: http://webdesignledger.com/inspiration/20-inspiring-navigation-menus
Let op: zaterdag 10 december, 23.59 uur, ! deadline deelopdracht 03 en ! herkansing deelopdracht 01 en 02#
Ik zie je werk voor! Li-Ning graag tegemoet! In de practica krijg je je cijfers!*
* Alleen op voorwaarde dat je binnen de deadline oplevert en je blog url bekend is bij je docent
