Design Theorie voor 3-ICT Vormen en Afmetingen Als je een ontwerp gaat maken moet je in de eerste plaats met twee dingen rekening houden: de vorm van je ontwerp (bijvoorbeeld: vierkant, langwerpig, rond, zeshoek)en de afmeting, dus hoe groot het wordt. Waar moet je rekening mee houden:
Al vastgelegd Hoe de opmaak moet worden, is vaak van te voren al bekend. Denk maar aan een envelop: het adres moet op de goede plek staan en je kan 'm langs de boven- of zijkant dichtvouwen. TNT post wordt er niet blij van als je een enveloppe ontwerpt waarbij het adres op de achterkant moet staan! Op de Roncalli printen we alles op de kleurenprinter op A4 of A3 papier. • •
A4: 210 × 297 mm A3: 297 × 420 mm
Drukpers en Papier Waarmee ga je het straks printen en waarop? Wat kan deze printer eigenlijk? Wat zijn de (on)mogelijkheden ? Belangrijk daarbij zijn het aantal kleuren, het aantal DPI (dots per inch) en vooral de marges. Marges zijn de randjes wit aan de buitenranden van het papier, waar de printer niet kan printen. Hou het randje dus leeg in je ontwerp.
Financiën Finnaciën zijn geldzaken. Wat kost dat nou? Is groter en duurder echt beter? Hoeveel heeft de klant ervoor over? Maken wij er dan winst of verlies op! Een standaard vorm is veel goedkoper dan een ingewikkelde, omdat het papier speciaal gesneden moet worden.
Het Esthetisch Aspect Hoe mooi zijn de vorm en de afmeting van je ontwerp? Maak je een agenda, dan is het wel belangrijk dat de vorm niet te groot en niet te klein is. Maar ze zijn niet allemaal even groot! Hoe groot is nog handig? Passen de tekst en de plaatjes er dan ook goed in?
Een kop plaatsen Evenwicht en Harmonie In een goed ontwerp maak je een evenwicht tussen de verschillende elementen. Het moet een 1
gevoel van harmonie oproepen, het gevoel dat zegt: het klopt! Om dit te bereiken, moet je de elementen goed plaatsen. We gaan kijken naar verschillende manieren om een kop te plaatsen op papier. Welke stemming roept het op?
Uitlijnen Het links of rechts uitlijnen, of het centreren van de kop of tekst, heeft een groot effect. Je kan een woord ook horizontaal, verticaal of met een golfje vormgeven. Kijk maar eens naar deze voorbeelden.
Voorbeelden
Koppen met afbeelding of tekstblok Evenwicht en effect Als je een kop combineert met een afbeelding of een tekstblok, moet de kop in evenwicht zijn met het papierformaat en de andere elementen. Het ontwerp zorgt dan voor een optimaal effect bij de lezer.
2
Grootte Je kunt de grootte, de hoek en de richting van de elementen veranderen om ze onderling in evenwicht te brengen.
Voorbeeld Bekijk de volgende 4 voorbeelden:
3
4
Lettertypes Soorten Lettertypes Er zijn vele duizenden lettertypes, maar we verdelen ze onder in maar twee groepen: tekstletters en fantasieletters. Het belangrijkste verschil is de grootte: de fantasieletters zijn niet leesbaar / bruikbaar onder een grootte van ongeveer 14-punts. Tekstletters vormen het grootste deel van de tekst en worden dan gebruikt in 8-14 punts grootte.
Met en zonder schreef Een lettertype met schreef (engels:serif fonts) herken je aan de kleine horizontale streepjes aan de uiteinden. Schreefloze lettertypes (sans-serif fonts) zijn moeilijker te lezen dan die met schreef. Daardoor zijn ze meer geschikt voor een wat kortere tekst. Ook worden ze gebruik bij wat minder zakelijke teksten. Boeken en dergelijke worden meestal nog in serif uitgegeven. De volgende lettertypes zijn veelgebruikt. Hun belangrijkste eigenschap is genoemd in de tekst.
5
Hoogte en breedte Bij sommige lettertypes is elke letter even breed, zoals bij Courier en Consolas. We noemen dat fixed-width of monospaced. Dat is handig bij bijvoorbeeld programmeerwerk. Als letters van hetzelfde font een andere breedte hebben, noemen we dat variable width of proportioneel. Dan neemt bijvoorbeeld de 'l' minder ruimte in beslag dan de 'm'. De meeste fonts zijn proportioneel.
Effecten van Lettertypes De keuze van het juiste lettertype heeft flinke gevolgen voor de lezer. Voor het gevoel dat hij erbij krijgt.
Letterfamilies Opmaak van tekst Behalve de keuze van een lettertype en grootte, kun je nog veel dingen veranderen aan een tekst. Vergelijk de volgende voorbeelden: • • •
Een normale, vette, cursieve (schuin, italic) of vet-cursieve lettersoort. De interlinie of regelafstand, de witte ruimte tussen twee regels (line-spacing) Letter-spatiëring: de witte ruimte tussen twee letters.
Voorbeelden
6
Kleur Kleuren Kleur geeft de meeste opwinding. Je kan er makkelijk een stemming mee maken. We gaan kijken of kleur de boodschap kan versterken.
Een losse kleur Een losse kleur heeft al een bepaalde invloed. Kijk maar eens op deze kleurencirkel die komt van een therapeut.
Kleuren Combineren Als je de ene kleur naast de andere zet, kun je een aantal effecten oproepen: • •
harmonie: kies kleuren die dicht bij elkaar op de kleurencirkel liggen. spanning: kies kleuren die tegenover elkaar op de kleurenkaart liggen.
Contrast Veel contrast is witte letters op een zwarte achtergrond. Weinig contrast is gele letters op een witte achtergrond. Contrast heeft een direct effect op de leesbaarheid. 7
Plaats in de ruimte Een lichtere kleur geeft het effect van dichterbij, terwijl een donkerder kleur het effect van verder weg geeft. Door de pijlen en woorden in dit logo wordt dat nog eens versterkt.
Warm en Koud Heel belangrijk is of een ontwerp warm of koud aanvoelt. Warmere kleuren hebben meer rood. Koudere kleuren meer blauw.
Effect Woorden Met kleur kun je woorden een extra effect geven. 8
Grafische Bestanden
Compressie is een manier om bestanden kleiner te maken dan ze eerst waren. Vaak gaat daarbij informatie verloren: de afbeelding wordt slechter. Dat noemen we lossy. Als er geen verlies optreedt is het lossless compressie. Deze JPG afbeelding heeft extreem veel verlies. Het bestand is maar 11kb groot. De tweede afbeelding is 45kb maar wel van goede kwaliteit.
9
Je hebt ook een indeling in pixel- en in vector-bestanden. In een pixelbestand staat van elke pixel (beeldpunt) de kleur. Bij een vector staat alleen de vorm, grootte en kleur van een object en rekent het programma uit tot waar het komt. Als je een bestand wilt opslaan zonder verlies,dan kost je dat wel extra ruimte. Leer de volgende tabel uit je hoofd. gif
jpg
png
bmp
svg
Type
Pixel
Pixel
Pixel
Pixel
Vector
Compressie
Compressed
Compressed
Compressed
Niet Compressed
klein van zichzelf
Op Internet
Ja
Ja
Ja (1)
Nee
Nee (2)
Beste Gebruik Foto's, veel Weinig kleuren bij kleuren
Alles behalve foto's
Vectoren
Verlies & Verlies
Verlies
Geen Verlies (3)
Geen Verlies
Geen Verlies
Geen Verlies
Voetnoten ( (niet leren) (1) PNG plaatjes kun je gebruiken, als ze niet (deels) transparant zijn. Internet Explorer t/m 6.0 geeft ze niet goed weer. (2) SVG plaatjes worden ondersteund in Firefox vanaf versie 2 en vanaf Internet Explorer 7. (3) Bij het opslaan kan je zelf aangeven of je 100% wilt of minder. 100% geeft wel hele grote bestanden.
Einde
10
