Toffe content

Introductie

Planning

Wat ga je doen?

Nu gaan jullie daadwerkelijk je beelden maken. Denk aan foto's, illustraties, videos, animaties etc.

Deze opdracht doe je in de tweede en derde week van "Toffe Peer"

Leerdoelen

Materialen/Benodigdheden

Schets omzetten naar beeld

afhankelijk wat je gaat maken

Werkvorm

Je maak individueel schetsen voor de content die je wil gaan gebruiken in jullie app.

Theorie

Waar op letten bij illustraties?

1. Stijl en consistentie
Kies een duidelijke stijl (bijv. flat design, line art, 3D, cartoon).
Gebruik een consistent kleurenpalet dat past bij de rest van de app.
Gebruik gelijke lijnbreedtes, hoeken en verhoudingen in al je illustraties.

Voorbeeld: als je één illustratie met afgeronde hoeken maakt, zorg dan dat de rest dat ook heeft.

2. Formaat en schaalbaarheid

Werk bij voorkeur in vectorformaat (SVG), zodat de illustratie scherp blijft op elk scherm.
Zorg dat de illustratie schaalbaar is zonder kwaliteitsverlies.
Houd rekening met verschillende schermgroottes: test op zowel kleine telefoons als grotere schermen.

3. Donkere modus en thema’s
Test hoe je illustratie eruitziet op lichte én donkere achtergronden.
Je kunt eventueel twee versies maken (light & dark).
Vermijd volledig witte achtergronden – gebruik liever transparante of themakleuren.

4. Technische eisen
Resolutie: Begin groot genoeg (bijv. 1024×1024 px) en schaal later terug.

Bestandsformaat:
SVG (vector) – ideaal voor schaalbaarheid.
PNG – goed voor grafische illustraties met transparantie.
Transparantie: Gebruik die slim als je illustratie over gekleurde vlakken wordt geplaatst.

5. Compositie en inhoud
Centraal element: Zorg dat het belangrijkste onderdeel goed in beeld is.

Ruimte voor tekst/animatie: Houd ruimte vrij als de illustratie gecombineerd wordt met tekst of UI-elementen.

Vermijd te veel detail – op kleine schermen is eenvoud krachtiger.

Less is more: een eenvoudige illustratie komt vaak beter over op mobiel.

6. Toegankelijkheid en duidelijkheid
Gebruik voldoende contrast tussen onderdelen.
Zorg dat de boodschap van je illustratie snel duidelijk is.
Test op verschillende achtergronden

7. Herbruikbaarheid
Maak je illustraties zo dat je elementen hergebruiken of aanpassen kunt.

Werk met lagen in je tekenapp, zodat je snel onderdelen kunt verplaatsen, verwijderen of vervangen.

Waar op letten bij foto's?

1. Resolutie en kwaliteit
Gebruik de hoogste kwaliteit van je telefooncamera.
Let op scherpte, belichting en focus.
Maak meerdere foto's om later de beste te kiezen.

2. Staand of liggend (portret of landschap)
Bepaal vooraf wat de app nodig heeft: bijv. profielfoto's zijn meestal staand, banners eerder liggend. Houd rekening met uitsnijden – belangrijke details niet aan de randen zetten.

3. Achtergrond en compositie
Kies een rustige achtergrond zonder afleiding.
Zorg dat het onderwerp in het midden of op een logische plek staat (gebruik de regel van derden).
Vermijd schaduwen op het onderwerp (tenzij bewust gekozen).

4. Lichtgebruik
Gebruik natuurlijk licht als dat kan – dit levert vaak betere kleuren op. Vermijd harde flits tenzij het echt nodig is.
Let op overbelichting (te fel) of onderbelichting (te donker).

Waar op letten bij animatie?

Een animatie maken voor een app is super krachtig om de gebruikerservaring te verbeteren, maar het moet doordacht gebeuren. Hier is waar je op moet letten bij het maken van animaties voor een app:

1. Doel van de animatie
Weet waarom je de animatie gebruikt

2. Snelheid en timing
Duur: Hou het kort (vaak tussen 200–500 ms).
Vertraging (delay): Vermijd onnodige vertragingen; gebruikers willen tempo.

Gebruik spring of bounce effects spaarzaam, en alleen als ze passen bij de stijl.

3. Prestaties en platform
Houd animaties licht en soepel – geen haperingen.
Op Android en iOS zijn animaties hardwareversneld, maar zware animaties (zoals grote fades of SVG morphs) kunnen vertragen.

4. Stijl en visuele consistentie
Zorg dat animaties passen bij de look & feel van de app.
Houd overgangen consistent tussen schermen of interacties.
Gebruik niet te veel verschillende animatiestijlen (bijv. spring op één plek, fade op een andere = verwarrend).

5. Begrijpelijkheid en gebruiksvriendelijkheid
De animatie moet helpen bij het begrijpen van de interface, niet afleiden.

6. Herhaalbaarheid en controle
Herhaalt de animatie? Dan moet het niet irritant worden.
Kan de gebruiker onderbreken of overslaan?

7 Bestandsformaat en techniek (voor ingesloten animaties)
Voor geanimeerde illustraties of iconen:
GIF – simpel, maar vaak groter en minder scherp.
WebP (animated) – kleiner dan GIF, steeds breder ondersteund.
MP4 – alleen voor video-achtige content (bijv. onboarding video’s)

Opdracht: Content maken

N.a.v. je schetsen ga je nu daadwerkelijk je content maken.

Voor foto's kan je gebruik maken van je telefoon of een camera van uitleen. Let erop dat je de achtergrond rustig houdt en je onderwerp goed belicht is.

Illustraties kan je handmatig maken en dan inscannen of meteen digitaal uitwerken.

Videos met telefoon of camera sschool

Animatie (niet te ingewikkelt) via after effects

Tips/Bronnen

Page updated

Google Sites

Report abuse