design I Flashcards
(82 cards)
1
Q
Wat is design?
A
- grafisch ontwerp (logo design, letter design, branding, social media, website design)
- interface
- vormgeving en ontwerp
2
Q
doel design
A
- communicatiemodel
- visuele ondersteuning om boodschap over te brengen
3
Q
toolbox
A
- kleur
- typografie
- beeld
- vorm
- compositie en lay-out
4
Q
typografie
A
Omvat alle aspecten die horen bij het “opmaken” van een tekst (lettertype, regelafstand, grootte)
5
Q
letterontwerp
A
ontwerpen van lettertypes
6
Q
doel typografie
A
- Tekst leesbaar maken
- al iets vertellen over de inhoud
7
Q
geschiedenis typografie
A
- eerste schrift –> tekens
- beeldschrift
- Romeinse letters = basis van de schreefletter (met penseelstreek en bijtel)
- schrift van Karel de Grote
- de gotische minuskel (Bijbel –> smallere letters, duur papier)
- 1455: gutenbergbijbel –> basis boekdrukkunst
8
Q
de letter en het lettertype
A
- x-hoogte = hoogte van de letter
- kapitaalhoogte = bij uppercase
- stok en staart = uitsteeksels van x-hoogte)
- romein/romen cursief, italic
- kapitaal/bovenkast/uppercase onderkast/lowercase
- corpsgrootte = aanduiden in punten, grootte van letter
- lettergrootte roman is tussen 8 en 10 pt
- lettergrootte kleinst leesbare tekst is 5pt
- ligaturen = letters die aan elkaar hangen
9
Q
lettercategorieën
A
- Sans serif (schreefloos)
- Serif (schreef, op sommige plekken dunner)
- Slabserif (overal is de letter even dik)
- display (lettertype voor kleine tekst, karakterisitieke letters, opvallender, vooral bij logo’s en merken)
- Mono(spaced) (iedere letter neemt even veel plaats in, vooral vroeger gebruikt bij typemachine’s)
- handwriting/script ( vaak niet gebruikt in professionele wereld)
10
Q
leesbaarheid van een tekst (9)
A
- witruimte = rustpunt voor ogen
- alinea’s
- marges (afstand tussen tekst en rand)
- kolommen zorgen voor extra marges
- word spacing ( niet in blokken werken - zorgt voor grote gaten in tekst)
- interlinie (ruimte tussen de regels)
- tekst uitlijnen (meestal links)
- letter spacing (afstand tussen de aparte letters)
- het lettertype en de diverse lettergroottes en soorten
11
Q
manieren van uitlijnen
A
- uitgevuld/justify ( zorgt voor gaten)
- gecentreerd / Align center ( enkel voor titels en heel korte teksten)
- links uitgelijnd/ align left ( meest flexibele manier)
- rechts uitgelijnd / align right (vermijden!)
12
Q
doel compositie
A
- de drager boeiender, spannender maken
- structuur en hiërarchie aanbrengen in informatie
- informatie beklemtonen en sterker doen uitkomen dan andere
- zoeken naar evenwicht en inspanning
13
Q
factoren bepalen van lay-out
A
- vorm
- plaats
- verhouding
- oppervlakte van drager
- kleur
- negatieve ruimte
14
Q
soorten composities
A
- centrale
- symmetrische
- assymmetrische
- diagonale
- overal
15
Q
vector
A
- paden die gedefinieerd worden door begin- en eindpunt met daartussen andere punten
- kan elke vorm hebben
- mathematische parameters, geen pixels
16
Q
Vectorbestand
A
- grafische afbeelding die opgebouwd is uit vele individuele objecten
17
Q
kenmerken vectorbestand
A
- zijn oneindig schaalbaar
- kleine bestandsgroote
- zijn resolutie onafhankelijk
- geen achtergrond/ vrijstaande elementen
18
Q
pixel
A
- afbeeldingen in Photoshop
- 72 dpi nodig om een afbeelding scherp te zien ( 1 inch = 2,5 cm)
- verhogen van dpi maakt afgedrukte afbeelding kleiner ( en omgekeerd)
- onmogelijk om beeld in lage resolutie om te zetten in een hoge resolutie en de grootte te bewaren
- je kan resolutie van beeld niet verhogen om zo een beter kwaliteit te bekomen
19
Q
resolutie
A
pixeldichtheid van een beeld
20
Q
kenmerken pixel
A
- iedere pixel bevat unieke informatie
- niet oneindig schaalbaar
- resolutie web = 72dpi
- resolutie print = 300 dpi
- veel pixels = veel megabytes
- te weinig pixels = niet veel details/ wazig
21
Q
DPI
A
- Dots Per Inch
- beschrijft resolutie van beeld
- verwijst naar het aantal afgedrukte ounten op een vierkante inck van een door een printer afgedrukte afbeelding
22
Q
PPI
A
- Pixel per Inch
- resolutie van beeld beschrijven
- verwijst naar het aantal pixels op een vierkante inch op een computerscherm weergegeven beeld
23
Q
Place linked
A
- beeld uit Photoshop dat je plaatst in Illustrator afzonderlijk bewerken
- wordt automatisch aangepast
doorsturen? geplaatste beelden mee doorsturen
24
Q
place embedded
A
-beeld uit photoshop in Illustrator plaatsen en afzonderljk bewerken
-beeld wordt niet gezien als photoshop file maar als illustrator file
doorsturen? beeld is geïntegreerd –> zichtbaar voor iedereen
25
.psd
- photoshop native document
- behoud alle info die bij het beeld hoort
- behoud van layers, effecten, settings, kleuren, transparantie
- geen compressie
- enkel te openen in dezelfde versie van Photoshop
26
.ai
- adobe illustrator native document
- geen compressie
- behoud van layers, effecten, settings, kleuren, transparantie
27
.tiff
- tagged image file format
- behoud lagen
- beste kwaliteit ~ zeer zwaar
- voor drukwerk
28
.jpg
- Joint photographic experts group
- compressie (er gaat info verloren)
- goede kleurcompressie (max 16,7 miljoen kleuren)
- foto's
- compressie vs kwaliteit
- geen transparantie en minder scherpe kleurovergangen
- compatibel
29
.gif
- Graphics interchange format
- max 256 kleuren, verlies van beeldinformatie door compressie
- transparantie
- voor afbeeldingen met weinig kleur (logo's, iconen,..), animaties
30
.png
- portable network graphic
- aantal eigenschappen van . jpg en .gif
- max 256 kleuren
- transparantie
- combinatie graphics en image
- goede verhouding kwaliteit/compressie
31
.pdf
- portabkle document format
- universeel-niet aanpasbaar-vectorieel formaat
- onafhankelijk van software en besturingssysteem
- meerdere pagina's
32
fonts outline
- document in illustrator doorsturen
- neit iedereen heeft het font dat wordt gebruikt
- outlines maken van tekst --> wordt vector shape
33
werprocessen
- briefing en analyse
- research
- voorontwerp
- grafisch ontwerpen
- productie
34
doel briefing
- krijgen van omschrijving wat de klant nodig heeft
- via gesprek en vragen
- belangrijk dat je goed weet wie je klant is, wie zijn klanten zijn, wat de functie is
- kritisch en duidelijk zijn
- planning, wie doet wat, wat wordt verwacht, welk materiaal is ter beschikking, budget,...
35
vragen over de klant
- Wat doet je bedrijf?
- Waar zijn jullie actief?
- Wie zijn je klanten?
- Waarom wil je een nieuwe site, app, ...?
- Wat is je doelgroep/ Wie bereik ja al en wie wil je bereiken?
36
Vragen over het project
- Waarom wil je een site, app?
- Bestaat er al een site?
- Wat wil je bereiken?
- Is er een huisstijlgids?
- In welke talen communiceer je?
- Wie neemt de beslissingen?
- Wat is je planning?
- Welke informatie heb je al?
- Wat is je budget?
- Wat verwacht je van mij?
37
reserach
- je documenteren en informeren (concurrenten, klant, referenties)
- inspiratie zoeken en verzamelen (pinterest, op straat, boeken, films, in de winkel --> overal)
38
Persona
- fictief persoon
| - proberen in te leven in de wereld van de doelgroep (naam, leeftijd, beroep, woonplaats, gezin, loon,...)
39
branstorm stappen
- divergeren
- mindmapping
- convergeren
- moodboard
40
divergeren
- het vinden van zoveel mogelijk ideeën en oplossingen
- alle ideeën zijn goed, nog niet denken aan praktische zaken
- veel alternatieven
- durf extreme ideeën door te geven
- bekijk de dingen van een andere kant
- neem de tijd, een idee ontstaat niet zomaar
41
Mindmapping
- techniek die kan helpen om informatie, gedachten en denkpatronen in beeld te brengen
- helpen om nieuwe verbanden te zien, op andere ideeën te komen en overzicht te behouden
42
convergeren
- groeperen --> sommige ideeën horen samen of zijn hetzelfde
- schrappen --> sommige ideeën zijn niet haalbaar, lijken op iets dat al gedaan is, hebben al bewezen niet te werken
- selecteren/kiezen --> 2 of 3 ideeën kiezen die je verder wil onderzoeken
43
Moodboard
- creatief proces --> communiceren van ideeën, ideeën voorleggen aan de klant
- visualisatie van concept, idee, gedachte of gevoel
- basis voor de verschillende voorontwerpen en om de klant een eerste viduele richting te tonen
- helpen om esthetische beslissingen te nemen voor ontwerpproces
44
Web design moodboard
- focus op specifieke elementen die helpen visualiseren hoe je site en interface er zal uitzien
- kleurenpallet, fonts, fotografie/illustraties, navigatie, gebruik van ruimte
45
grafisch ontwerp
maken van style guide/huisstijlgids
46
grid
- wordt gebruikt als hulpmiddel voor de opbouw van een site (kolommen)
- dunne lijnen maken een gutter/margin
- men kan spelen met het aantal kolommen per blok om zo een ontwerp te maken
- horizontaal kunnen we 'inhoudelijk samenhangende" blokken creeëren
- minder afstand = blokken horen bij elkaar
47
fouten bij grid
- gutter wordt fout gebruikt
- witruimte of margin ontbreekt aan zijkant van scherm
- tekst/beeld staat te dicht bij de rand
- achtergrond van een vlak heeft andere kleur --> tekst mag niet helemaal in de hoek beginnen (marges gebruiken)
48
kleurencirkel
-bestaat uit primaire, secundaire en tertiaire kleuren
49
primaire kleuren
- kunnen niet gemaakt worden door andere kleuren te mengen
- gebruikt om andere kleuren te maken
- rood, blauw en geel
50
secundaire kleuren
- verkrijg je door primaire kleuren te mengen
| - groen, oranje en paars
51
CMYK
- voor drukwerk
| - cyaan, magenta, yellow, black
52
spotcolors
- bestaat uit 1 inkt
- kleur wordt gemengd tot 1 kleur voor er gedrukt wordt
- kleur is zuiverdere dan CMYK kleur
- VB/ Pantone
53
substractief mengen
- kleuren mengen met verf en inkt
- kleuren lichter maken door wit toe te voegen, of vergrijzen door er zwart bij te doen (ontstaan verschillende kleurnuances)
54
RGB
- rood, groen en blauw
| - gebruikt voor schermen, vaak kleurverschillen tussen verschillende scherm types
55
additief mengen
- kleuren weergeven met behulp van lichtbron en opgebouwd uit percentages rood, groen en blauw
- wit = gelijke hoeveelheid van de basiskleuren
- beeldscherm gekalibreerd of afgesteld op passend kleurprofiel (juiste kleur verkrijgen)
56
onzetting tussen kleursystemen
- niet alle pantonekleuren kunnen omgezet worden naar CMYK en/of RGB
- een pantonekleur kan veel feller/zuiverder zijn dan CMYK afgeleide
- een kleur in RGB kan veel feller zijn dan een CMYK afgeleide
- zoeken naar een variant in kleurwaaiers en op het scherm
57
- basis-kenmerken kleur
- tint/hue
- toon/value/ lightness (100% = wit)
- verzadiging/saturation (100% = volledige kleur)
58
koude kleuren
- zakelijk, rust, stabiliteit, vertrouwen
59
warme kleuren
-passie, emotie, vreugde
60
geel
- stimulerende kleur
- zon
) geluk
61
rood
- vuur, brand, warmte
- wekt energie op
- doet bloeddruk stijgen
- zorgt voor actie
- kleur met lef
- trekt de aandacht
62
groen
- natuur
- verzachtend, ontspannend
- harmonisch
63
blauw
- lucht
- rustgevende kleur
- afstandelijkheid
- zakelijkheid
- wekt productiviteit op
- vertrouwen
64
paars
- mystiek
- exclusief
- luxe
- spiritueel
65
- magenta
- vrouwelijk
- gevoelig
- intuïtief
- gewaagd
66
grijs
- soms saai
- stabiel
- emotieloos
- elegant
- veilig, neutrale keuze
67
zwart
- verfijnd
- elegantie
- durf
- kracht
- autoriteit
68
kleur toepassen
- rekening houden met kenmerken kleur (warm vs koud, psychologische waarde, primair vs tertiar)
- kleur geeft een sfeer weer en spreekt een bepaalde doelgroep aan (kleur staat niet los van inhoud)
- kleur trekt de aandacht (zuinig zijn met kleurgebruik)
69
kleurpalleten
- complementair
- monochroom
- split complementary
- analoog
- driehoek
- rechthoek
- vierkant
70
eerste schrift
- tekens
| - duurde meer dan 50 000 jaar voor we ons schrift hadden
71
Romeins schrift
- rond begin Westerse jaartelling
| - hoogtepunt: romeinse kapitaal, de Capitalis Romana --> moeder van alle Westers kapitaal- of majuskelschriften
72
schrift van Karel de grote
- de karolingische minuskel
- Omdat bijbel teksten in Latijn werden geschreven
- 768
- werd de dominante letter in West-Europa tot het eind van de 13de eeuw
73
gothische minuskel
- teksten kopiëren --> Veel werk en was duur
- Zuiniger omgaan met inkt door letter kleiner te schrijven
- sneller schrijven waardoor de letters hoekiger werden
- Bestond 2 eeuwen
- opgevolgd door andere gebroken schriften
74
Gutenbergbijbel
- 1455
- letters werden gezet uit losse metalen letters
- gebasseerd op gothische handschrift
- basis boekdrukkunst
75
letterfamilie
-alle mogelijke varianten van 1 lettertype
76
Schreefloze letter
- Franklin Gothic (1902)
- Gall sans (1927)
- Futura (1927)
- Din (1936)
- Univers (1956)
- Helvetica (1957)
- Arial (1990)
77
Arial
- basis lettertype Microsoft
- goedkoop alternatief van Helvetica
- 1 van de populairste schreefloze lettertypes
78
Schreefletter
- Garamond (1480-1561)
- Didot (1784-1811)
- Baskerville (1706 - 1755)
- Times new Roman (jaren 30)
- Bodoni
79
Didot
- gebaseerd op een verzameling verwante types die zijn ontwikkeld in de periode (1784-1811)
80
Baskerville
- John Baskerville (1706 -1811)
| - vormde hoogtepunt van een reeks experimenten om de leesbaarheid van drukwerk te verbeteren
81
Times New Roman
- jaren 30 ontwikkeld voor het Britse dagblad The Times
- vrij grootte x-hoogte met romein staartletters
- weinig invloed op de leesbaarheid maar zorgt ervoor dat er veel meer tekst op een pagina gedrukt kan worden
- zit in het Microsoft pakket - grote populariteit
82
Bodoni
- geïnspireerd door het lettertype van Baskerville
- smallere onderliggende structuur met vlakke, strakke schreefjes
- extreem sterk contrast tussen dikke en dunne slage en heeft een geometrische bouw
- digitale versie kent soms leesbaarheidsproblemen
