Profielmodule 4 IA

Interactieve Vormgeving en Productie

Eindopdracht Klas 3 | Opdracht Klas 4

Pro Skill 1 | Pro Skill 2 | Pro Skill 3

Introductie

Overige skills voor IA ontwerpen: InDesign, XD, Website en Figma

Bestanden voor P4 Uitgeversgroep

PDF van H3 en PO H3

PO 3.01 Bestanden - Video
PO 3.02 Bestanden - Video
PO 3.03 Video 1 - Video 2

Skill 1: Interactief

Leerdoelen

Werkwijze

Voorbeelden van Interactieve ontwerpen.

Overheid

Reclame

Kunst

Meer...

WigglePixel/Maarten de Haas: WigglePixel.nl en webfolie.nl, BooomBassTic

Skill 2: Doelgroep

Leerdoelen

Werkwijze

Skill 3: Layout

Leerdoelen

Je kent de begrippen spread en stramien en je kan een stramien toepassen.
Je weet hoe je de snijtekens in Illustrator en in InDesign aangeeft zodat de drukker weet waar hij het papier moet snijden.
Je weet dat afloop gebruikt wordt om witranden bij het uitsnijden te voorkomen.

Werkwijze

Stap 1: Bekijk onderstaande uitleg van afloop en drukkersmarkeringen.
Stap 2: Bekijk de filmpjes over spreads, stramienen en het printen van een boekje
Stap 2: Maak opdracht 2D-S7-1

Stramien

Een stramien (ook wel grid of sjabloon of master page) is een vaste indeling die bepaalt waar elementen op een pagina mogen staan.

Het bestaat meestal uit kolommen, marges en hulplijnen. Een stramien helpt om een ontwerp overzichtelijk te houden en maakt het eenvoudiger om meerdere pagina’s dezelfde structuur te geven.

De lay-out is de manier waarop alle onderdelen – tekst, afbeeldingen, knoppen en witte ruimte – daadwerkelijk worden vormgegeven binnen het stramien.

Femke Klein: A Stramien

Bring your own laptop: InDesign: Masterpage (stramien in NL) en XD: Create a 12 Column Grid in Adobe XD
Raoul Postel: Layout voorbeelden

Afloop of in het Engels: Bleed

Stap1: Bekijk de uitleg van de CD Perserij.nl over afloop of bleed. Bedenk waarom jij afloop zou willen.

Drukkersmarkeringen

A. Sterdoel (niet optioneel) B. Registratiemarkering C. Pagina-informatie D. Interne snijtekens E. Kleurenbalk F. Tintenbalk

Bekijk bovenstaande voorbeeld:

Hoe groot is hier de afloop/bleed?
Wat zou jij de ontwerper adviseren?

Zie ook de blog van PimPrint

Verdieping

Meer weten over afloop (bleed) en snijtekens, kijk hier:

Bekijk bij drukkerij DrukZo hoe je het drukwerk aan moet leveren.
Adobe drukkersmarkeringen: Illustrator en InDesign.
En video's 'how to add bleed' van Printed.com: Illustrator en InDesign.

De drukker wil CMYK!

Ontwerp je document dat je wil printen altijd in CMYK. Eventueel kan je een RGB kleurprofiel ook omgezeten naar CMYK.
Bekijk de pagina Adobe CC Tips hoe je dat doet.

Opdracht: een vakantie ansicht met snijtekens.

Je mag met twee personen overleggen en samenwerken, maar lever wel een eigen product in.

Maak een ansichtkaart. Productie eisen:

A5 formaat
afloop 3 mm
met grote foto en tekst zie voorbeeld
inleveren als PDF op A4 formaat en mét snijtekens
documentnaam: Anzicht_Voornaam1_Voornaam2
inleveren via Teams

Skill 4: Typografie en Kleur

Zie 2D3D Beeldelementen Kleur en Typografie

Skill 5: Wireframe

Een wireframe is een schematische tekening van een digitale toepassing – meestal een website, app of interactief product. Het toont de structuur, functies en plaatsing van onderdelen, zonder dat er al vormgeving, kleurgebruik of typografie is uitgewerkt.

Uxcel course: Wireframe Best Practice

Alvarotrigo: Low Fidelity Wireframe for websites

Skill 6: Flowchart

Een flowchart, of stroomschema, is een visuele weergave van stappen, beslissingen en de volgorde van een proces. Het helpt om complexe informatie overzichtelijk te maken.

Stroomschema’s gebruiken standaard symbolen (start/eind, actie, beslissing) zodat processen voor iedereen begrijpelijk zijn.

Voor websites en interactieve documenten gebruiken we een flowchart om alle pagina's weer te geven.

Ter info: De Landingspagina is de eerste pagina waar je op terecht komt.

Dribble: Sitemap for Student Guide

Skill 7: Prototype/mock-up

Wat is het verschil tussen een high- en een low fidelity prototype?

Skill 8: User Experience (UX) en User Interface (UI)

UX staat voor User Experience, wat letterlijk gebruikers ervaring betekent.
Het draait dan ook om het ontwerpen van een optimale gebruikerservaring.

Bij het ontwerpen maak je bijvoorbeeld wireframes en animaties. Het kan ook zijn dat je twee verschillende knoppen ontwerpt en dat je vervolgens gaat testen welke type knop eerder gedrukt wordt zodat een klant beter/sneller doet wat jij wil dat hij doet.

UI staat voor User Interface, dat gebruikersomgeving betekent. Dit kan bijvoorbeeld de gebruikersomgeving van een website of een applicatie zijn.

Daar waar UX zich richt op de totale gebruikerservaring, ligt bij UI de focus specifiek op de interface.

UX staat voor User Experience, wat letterlijk gebruikers ervaring betekent.
Het draait dan ook om het ontwerpen van een optimale gebruikerservaring.

UI staat voor User Interface, dat gebruikersomgeving betekent. Dit kan bijvoorbeeld de gebruikersomgeving van een website of een applicatie zijn.

Daar waar UX zich richt op de totale gebruikerservaring, ligt bij UI de focus specifiek op de interface.

Check Figma for UX-UI design

style card UXDesign