29
dec
2015
Miller Digital blog - E-commerce

20 designtermen uitgelegd voor niet designers

Werken met bedrijven zoals het onze, waar grafische en user experience designers werken, kan voor een leek soms net zijn alsof je een nieuwe taal leert. Er komen af en toe termen op je af waar je nog nooit van gehoord hebt. Dit komt bij het ontwerpen en bouwen van website heel erg vaak naar voren maar ook tijdens het ontwerpen van drukwerk gebruiken de designers dikwijls woorden en termen die voor de leek niet volledig tot de verbeelding spreken. In dit blog probeer ik wat meer duidelijkheid te geven over veel voorkomende termen die grafisch designers gebruiken en die bij veel van onze klanten de afgelopen jaren niet helemaal duidelijk waren.

1. Typografie
Typografie betreft alle aspecten die horen bij het opmaken van teksten. Denk hierbij aan bijvoorbeeld de onderdelen lettertype of font(Time new roman, verdana of bijvoorbeeld Comic Sans), regelafstand (zie verderop in dit blog) of een keuze voor een schreef (Serif) of juist schreefloos (Sans Serif) lettertype. De typografie zorgt ervoor dat de designer de communicatie van het bedrijf of merk nog beter tot zijn recht kan laten komen.

2. Body tekst
De hoofdtekst in een website, flyer, brochure. In deze tekst staat de werkelijke boodschap die is aangekondigd door bijvoorbeeld een titel. De tekst die je nu leest is ook een body tekst.

3. Display type
Een lettertype wat gebruikt wordt om de aandacht extra op zich te vestigen. Denk hierbij aan titels van films op filmposters, titels van een artikel in bijvoorbeeld de Linda of de Quote en 1 van Nederlands grootste bedrijven die om dit soort titels bekend staat is “De Telegraaf”. Wellicht heb je ooit wel eens gehoord van de zogenaamde “Chocoladeletter koppen” waar de Telegraaf om bekend staat.

4. Hiërarchie
Een stuk tekst of een websitepagina heeft altijd een hiërarchie, dit is de opbouw van een pagina of stuk tekst. Vaak is deze opbouw niet heel verassend:

Titel
Eventuele Subtitel
Intro
Bodytekst

Onze blogposts zijn ook zo opgebouwd.

5. Teken spatiëring
De hoeveelheid horizontale witruimte tussen de tekens. Meer teken spatiëring zorgt vaak voor wat meer rust in een tekst. Valkuil is dat teveel teken spatiëring ervoor zorgt dat een tekst er heel onprofessioneel uitziet.

6. Regelafstand
De hoeveelheid verticale witruimte tussen regels tekst. Net als bij teken spatiëring zorgt meer regelafstand voor rust maar teveel regelafstand oogt erg onprofessioneel en onsamenhangend.

7. X-hoogte van een letter
Elk lettertype heeft een vooraf bepaald X-hoogte. In deze ruimte wordt de basis van een letter weergegeven met uitzondering van de stok en staart van de letter. De kleine letter X van een lettertypes is altijd de volledige basis, vandaar ook deze benaming.

8. Stok of staart van een letter
Enkele letters hebben een uitbreiding van de x-hoogte, een enkeling gaat hiervoor de lucht in. Deze uitbreiding wordt hier de stok genoemd. Het tegenovergestelde van de stok is de staart, de letters die een staart hebben gaan juist de grond in.

Stokletters zijn b, d, f, h, k, l en t.

Staartletters zijn g, j, p, q, ij, y

9. Soorten lettertypen
Lettertypen zijn er in verschillende vormen en maten. De meeste lettertypen zijn wel lid van een familie. Ik benoem er hier drie.

Sans Serif, een lettertype zonder decoratieve schreef. Vaak worden dit soort lettertypen gebruikt bij ontwerpen die modern, strak en stylish moeten worden.

Script, een lettertype dat altijd wat weg heeft van een handgeschreven letter. Dit soort lettertypen worden gebruikt wanneer een tekst elegant, persoonlijk of losjes moet worden.

Slab Serif, een wat dikker en blokkerig lettertype wat vrijwel altijd wordt gebruikt voor eyecatchers zoals titels of losse woorden in een advertentie.

10. Uitlijning
Een tekst kan afhankelijk van wat nodig is voor het design op verschillende manieren uitgelijnd worden. In principe zijn er vier soorten uitlijning; links, rechts, gecentreerd of uitgevuld.

11. Kleurenpalet
Een reeks kleuren die doordat ze juist contra van elkaar zijn of juist in dezelfde kleurhoek zitten precies goed bij elkaar passen. Wanneer je kleuren uit hetzelfde kleurenpalet kiest zal het nooit het ontwerp nooit onrustig worden. Een website die wij vaak gebruiken voor het vinden van mooie paletten is Colourlovers (http://www.colourlovers.com/palettes)

Kleurenpaletten worden samengesteld op basis van hun eigenschappen. Dit kan een monochrome, analogisch, complementair of Triadic rijtje zijn.

12. CMYK OF RGB
Er zijn twee soorten kleurmodellen, CMYK en RGB. CMYK wordt gebruikt voor drukwerk toepassingen. Een CMYK kleur wordt altijd opgebouwd door de vier kleuren Cyaan, Magenta, Yellow en Key. Om deze kleuren voor het gemak even om te zetten naar een kleur die iedereen begrijpt; blauw, paars, geel en zwart. De CMYK kleur wordt gevormd door van de ene kleur meer toe te voegen en van de ander juist minder. Wanneer je alle 4 de kleuren voluit zet krijg je zwart en wanneer je alle kleuren volledig uitzet heb je niets (wit dus).
De tegenhanger van CMYK is RGB, dit kleurenmodel wordt alleen maar gebruikt voor webtoepassingen. De kleuren werken op dezelfde manier als die van CMYK alleen mengen we nu Rood, Groen en Blauw door elkaar om de gewenste kleur te krijgen.

13. PMS kleuren
Het bedrijf Pantone heeft in 1963 een universele gids uitgebracht met daarin kleuren en hun code. Door deze code weet iedere designer of drukker precies welke kleur er gebruikt moet worden. Kleurverschil is bij PMS kleuren niet mogelijk omdat de samenstelling van de kleur volledig vaststaat. Wel kan de ondergrond van het te bedrukken object ervoor zorgen dat de kleur anders naar voren komt. Om dit inzichtelijk te maken heeft Pantone verschillende gidsen uitgebracht. Enkele voorbeelden van deze gidsen (kleurenwaaiers) zijn de coated (c), uncoated (u), mat papier (m) of transparant (t).

14. Gradient
Een gradient is een verloop in kleuren, deze loopt vaak van licht naar donker maar kan ook van de ene naar de andere kleur overlopen. Je hebt twee soorten verlopen, een lineaire en radiaal, welke je hieronder als voorbeeld kan zien.

15. Opacity
De hoeveelheid transparantie die een object heeft. Des te lager het cijfer des te meer er van de achtergrond is te zien.

16. Resolutie
De hoeveelheid details die je kan zien in een afbeelding wordt uitgedrukt in resolutie. Over het algemeen is het zo dat des te hoger de resolutie is des te beter en scherper de afbeelding is. Wanneer de resolutie van een afbeelding laag is wordt deze al snel blokkerig zoals je bij deze ananas kunt zien.

17. Stockfoto’s
Een veel gehoorde term is stockfoto’s, maar niet iedereen snapt direct wat hiermee wordt bedoelt. Eigenlijk zegt de naam het zelf al; foto’s die op voorraad (stock) liggen. Designers zoals wij hebben vaak een abonnement op een website zoals 123rf.com of Istockphoto.com waarmee wij foto’s rechtervrij kunnen kopen om te gebruiken in websites. Vaak worden stockphoto’s gebruikt in afwachting van de definitieve foto’s van een fotograaf maar ook steeds meer kiezen klanten ervoor om stockfoto’s in de website of drukwerkproduct te blijven gebruiken. Dit is ook mogelijk door de kwaliteit van de stockfoto’s van tegenwoordig. Je ziet nog veel van die echt te perfecte mooie mensen op de foto maar de wat realistischere foto’s beginnen steeds meer de overhand te krijgen.

18. Logotype of beeldmerk
Een logo wat is opgebouwd uit tekst en geen beeldmerk heeft is een logotype. Voorbeelden van dit soort logo’s zijn bijvoorbeeld Google, Coca Cola of Ray-ban. De tegenhanger is vanzelfsprekend dan een logo wat geen tekst heeft maar alleen een beeldmerk. Deze laatste worden de laatste tijd wel ondersteund met een tekst.

19. Vector
Een vector afbeelding wordt anders dan een bitmapafbeelding opgebouwd uit formules en niet uit pixel weergave. Het voordeel hiervan is dat een vectorafbeelding oneindig uitgerekt kan worden omdat op dat moment de berekening opnieuw plaatsvind en hierdoor de afbeelding altijd scherp blijft. In onderstaand voorbeeld is goed het verschil te zien van een vectorrondje (links) en een rasterrondje (rechts). Op het oog zijn deze beide cirkels precies gelijk maar als je ver inzoomt zie je dat de linkerafbeelding scherp blijft en de rechter wazig en pixelig wordt.

20. Lorem ipsum
Vaak zijn er tijdens het ontwerpen van een website of drukwerkproduct nog geen teksten beschikbaar en wordt er door designers een dummy tekst gebruikt. Deze tekst is over het algemeen de Lorem Ipsum tekst. Deze latijnse tekst is naast een ideale tekst voor opvulling, omdat hij alle karakters van het alfabet bevat en de compositie hiervan ideaal is, ook perfect om tijdens een presentatie van een ontwerp de kijker niet af te leiden met teksten die niet relevant zijn.

Deze 20 termen uit de grafische branche kunnen aangevuld worden met nog vele malen dit aantal maar als je deze 20 termen snapt dan ben je al een heel eind. Natuurlijk is de grafische branche ook altijd in ontwikkeling en daarom zal dit lijstje altijd kunnen blijven groeien. Er komen jaarlijks nieuwe termen bij en de een is soms nog vager als de ander maar het zijn gelukkig niet de termen die ervoor zorgen dat designbedrijven zoals Miller Digital altijd een mooi en functioneel ontwerp kunnen maken of het nou voor een website of een drukwerkproduct is.

Mocht je een vraag hebben over een term dan horen wij dat graag, wij vinden het leuk om in klinkklare taal deze termen uit te leggen aan onze klanten!

Is dit artikel interessant voor je? Lees meer gerelateerde artikelen
UX design