Vormgeving Werkgroep 04! Gebruik van een grid en interactie. Bron: smashingmagazine.com, image credit: Kristian Bjornard

Transcriptie

1 Vormgeving Werkgroep 04! Gebruik van een grid en interactie Bron: smashingmagazine.com, image credit: Kristian Bjornard

2 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, uur. Zijn deze < 5,5 dan is Vormgeving onvoldoende afgerond en ben je welkom voor herkansing in het volgend schooljaar.

3 Opdracht: geef vorm aan de visuele identiteit van het chinese sportmerk Li-Ning

4 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.

5 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

6 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, 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.

7 Boek Vormgeving# Lees hoofdstuk 5: Putting it all together

8 Fotoconcept: zelf passende foto s kiezen# Kies een thema passend bij je eigen focus klant: Kijk bijvoorbeeld op 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.

9 Research: sfeer fotografie Let op resolutie van foto voor de print (minimaal A3) nodig voor de eindpresentatie Bronnen:

10 en productfotografie Bron:

11 Landingspagina, sfeer

12 Landingspagina, sfeer

13 Landingspagina, sfeer/product

14 Webshoppagina, sfeer/product

15 Webshoppagina, sfeer/product

16 Webshoppagina, product

17 Customisepagina, sfeer/product

18 Customisepagina, product

19 Customisepagina, product

20 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

21 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

22 Grid Bron:

23

24 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...

25 Gulden snede# Leonardo Da Vinci# 1490

26 Gulden snede = a : b = (a+b) : a circa

27 Voorbeeld illustator gulden snede: poster.ai

28 Grid design resource:

29 Voordelen van een grid Consistentie Raamwerk voor alle pagina s Makkelijk te gebruiken Een voorgedefinieerde structuur Nadelen rigide toepassing = levenloos design

30 Meer over grids Meer?

31 Interactie Bron:

32 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

33 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:

34 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

35

36 Inspiratie navigatiemenu Bron:

37 Let op: zaterdag 10 december, 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