Mavo Inft SE A - media

Mavo Inft SE A - media

1. Startpunt

Motivatiemotor

Deze examenquest maak je in de eerste plaats omdat deze deel uitmaakt van het mavo-examenprogramma informatietechnologie bij HVX.

Je leert in deze quest over grafische vormgeving en het ontwerpen van media-uitingen voor print, web en 3D. Als je dit hebt geleerd, heb je al een beetje meer in de gaten wat een opleiding tot grafisch vormgever in zou houden en ben je in staat mooie dingen te maken.

Verderkijker

Je kijkt voortdurend naar dingen om je heen die 'grafisch vormgegeven' zijn. Van apps op je telefoon tot een folder van de supermarkt en van reclame op YouTube tot je eigen identiteitsbewijs: over al deze dingen is nagedacht door professionals.

➜ Verzamel vijf media-uitingen die je aanspreken (door middel van een foto of screenshot) en vijf media-uitingen die je niet mooi vindt.

➜ Zet ze bij elkaar in Keynote. Beschrijf eronder met je ontwerpbril op waarom ze je aanspreken of waarom juist niet. Met je ontwerpbril op let je op kleurgebruik, lettertypen, vormen en opmaak. 

➜ Zet een PDF van deze keynote in de informatietechnologieklas van SeeSaw met de folders 'SE A - media' en 'verderkijker'.

2. Media ontwerpen voor print

Onderzoek

Om goed grafisch te kunnen ontwerpen - zowel voor printing als web - is het nodig dat je een aantal dingen leert. Dat doe je door PDF-documenten door te nemen en verschillende explainer filmpjes te bekijken.

➜ Leer over typografie: de vormgeving van teksten (zie hieronder).

➜ Leer over kleur (zie hieronder).

➜ Leer over lay-out en compositie (zie hieronder).

➜ Leer over afbeeldingen (zie hieronder).

➜ Leer over designprincipes (zie hieronder).

➜ Leer over branding en identiteit (zie hieronder).

➜ Maak zelf een sketchnote (liefst handgeschreven) die bovenstaande kennis samenvat op één grote, informatieve poster. Lever deze in via SeeSaw. Voeg de goede folders toe: 'SE A - media' en 'reisblog'. Veel informatie over sketchnoting vind je in deze presentatie.

➜ Leer te werken met vectornator op je iPad, een tool om illustraties en media mee te maken. Zie verder hieronder voor een tutorial.

Typografie

Lees onderstaande PDF door (let op: het is een automatische vertaling naar het Nederlands dus het is soms een beetje 'hoekig' vertaald) en bekijk de video. Ze behandelen dezelfde inhoud, maar door het op twee manieren tot je te nemen sla je het beter op. Doe dit ook met de vijf andere onderwerpen (kleur, lay-out en compisitie, afbeeldingen, designprincipes en branding en identiteit).

Open bestand PDF Grafisch ontwerp 1 - typografie

Typografie

Kleur

Open bestand PDF Grafisch ontwerp 2 - kleur

Kleur

Lay-out en compositie

Open bestand PDF Grafisch ontwerp 3 - layout en compositie

Lay-out en compositie

Afbeeldingen

Open bestand PDF Grafisch ontwerp 4 - afbeeldingen

Afbeeldingen

Designprincipes

Open bestand PDF Grafisch ontwerp 5 - designprincipes

Designprincipes

Branding en identiteit

Open bestand PDF Grafisch ontwerp 6 - branding en identiteit

Branding en identiteit

Vectornator

Vectornator is een app op je iPad, te vergelijken met Adobe Illustrator, waarmee je illustraties en printmedia kunt ontwerpen. En de naam zegt het al: vectornator is gemaakt om vectorafbeeldingen mee te maken.

Tutorial over Vectornator

Verwerking

Tijd voor actie en om het geleerde toe te passen!

➜ Maak een showcase van je eigen huisstijl. Die bestaat uit:

  • een logo
  • een visitekaartje
  • een folder (1 A4 dubbelzijdig en gevouwen) met informatie en afbeeldingen die ertoe doen
  • een verpakking of merchandise-item

Laat hierin zien dat je goed toepast wat je geleerd hebt uit je onderzoek. Je hebt dus serieus rekening gehouden met:

  • Typografie
  • Kleurgebruik
  • Lay-out en compositie
  • Gebruik van afbeeldingen
  • Designprincipes
  • Branding en identiteit

➜ Je mag een huisstijl bedenken voor jezelf, voor je moeder of vader (of ander familielid of iemand die je kent), voor een goed doel, voor het bedrijf van je dromen of voor een bestaande opdrachtgever.

➜ Gebruik vectornator om de onderdelen voor je huisstijl te maken. Dit is een showcase waarin jij laat zien dat je kunt toepassen wat je geleerd hebt, dus houd daar rekening mee.

➜ Lever de onderdelen van je huisstijl als één pakket in via Seesaw. Voeg de goede folders toe: 'SE A - media' en 'show'.

3. Media ontwerpen voor internet

Je eigen huisstijl vraagt niet alleen om ontwerpen die gedrukt kunnen worden, zoals je geleerd hebt in het vorige onderdeel. Ze vragen tegenwoordig ook om iets digitaals, vooral om een website, app of iets op social media. Dit kun je makkelijk ontwerpen met Adobe XD. Je uitdaging in dit deel van het SE is dan ook om een digitaal prototype te maken van een app of website die past bij jouw huisstijl.

Onderzoek

Leer werken met Adobe XD door de explainer filmpjes te kijken en zelf na te bootsen wat er gebeurt.

➜ Leer over ontwerpen: adobe XD filmpje 1.

➜ Leer over overgangen (transitions): adobe XD filmpje 2.

➜ Leer over components: adobe XD filmpje 3.

➜ Leer over repeating elements: adobe XD filmpje 4.

➜ Leer over makkelijk resizen: adobe XD filmpje 5.

➜ COOL: Leer over de nieuwe 3D-functies: adobe XD filmpje 6.

➜ Zet een verslag van je onderzoek in Seesaw met (enkele) uitprobeersels en hoe het je is vergaan. Vond je het makkelijk of juist moeilijker en hoe komt dat?

Adobe XD filmpje 1: ontwerpen

Adobe XD - je eerste ontwerp

Adobe XD filmpje 2: overgangen (transitions)

Adobe XD - transitions

Adobe XD filmpje 3: components

Adobe XD - components

Adobe XD filmpje 4: repeating elements

Adobe XD - repeating elements

Adobe XD filmpje 5: makkelijk resizen

Adobe XD - makkelijk resizen

Adobe XD filmpje 6: 3D-transforms

Adobe XD - 3D transforms

Meer weten?

Howard Pinsky is sowieso de moeite waard: hij heeft nog veel meer boeiende uitlegfilmpjes gemaakt over functies in Adobe XD.

⇱ Bekijk de YouTube playlist over functies van Adobe XD van Howard Pinsky

⇱ Bekijk verschillende prototyping voorbeelden (YouTube playlist) van Howard Pinsky

⇱ Nieuwste filmpje: 'design a social profile page' van Howard Pinsky

Verwerking

Tijd voor actie en om het geleerde toe te passen!

➜ Maak een ontwerp in Adobe XD voor een digitale uiting die past bij je huisstijl.

  • een website OF
  • een app OF
  • een social media-element (zoals Instagram story)

Het mag een combinatie zijn. Laat zien dat je kunt toepassen wat je over Adobe XD geleerd hebt:

  • Design
  • Componenten
  • Transitions
  • Repeating elements
  • 3D (niet verplicht)

➜ Zorg dat je huisstijl goed herkenbaar blijft en houd ook in dit digitale ontwerp rekening met designprincipes.

➜ Gebruik de share-functie in XD om je ontwerp te delen. Kies bij view setting voor 'presentation' en deel de link in Seesaw.

➜ Geef in een comment of in de link zelf uitleg over je ontwerp. Vertel waarom je het gemaakt hebt en welke keuzes je gemaakt hebt.

4. 3D-ontwerpen

Je gaat werken met shapr3d of uMake, beide zijn fantastische 3d-design tools voor je iPad. More to follow.