Pictogrammen ontwerpen

Pictogrammen (of ikoontjes) kennen we allemaal. We komen ze immers in het dagelijks leven vaak tegen: denk maar aan de wasmerkjes in je kleding, de aanduidingen naar de toiletten of het pictogram wat ons duidelijk maakt dat er een pinautomaat is. We zijn er zo aan gewend dat we ze niet meer bewust waarnemen. Op het internet is het winkelwagentje natuurlijk een oude bekende. Net als een huisje, wat staat voor “home”.

 

Opdracht

Ontwerp zelf minimaal 3 pictogrammen voor je website. Deze pictogrammen moeten uiteindelijk geanimeerd worden met behulp van Photoshop. De 3 geanimeerde pictogrammen ga je op je WordPress website plaatsen.

Je hebt de volgende pictogrammen nodig:

  • Een pictogram voor een Nieuwe Post
  • Een pictogram voor een Hot Item of Populair Item
  • Een pictogram voor Contact Opnemen

Gaat het goed? Dan kun je de volgende ikoontjes ook maken:

  • Een pictogram voor Belangrijke informatie
  • Een pictogram voor Grappig Bericht
  • Of kom zelf met voorstellen

 

Hoe pak je dit aan?

  1. Doe eerst onderzoek naar pictogrammen. In de tekst hieronder vind je al wat linkjes. Zoek een stijl die jij mooi vind.
  2. Maak een grid; dit is systeem waarmee je door middel van een aantal horizontale en verticale lijnen makkelijker een tekening kunt maken.
  3. Maak een styleguide; dit is een document waarin je je lijnvoering vast legt. Het gaat er om dat jij beslist of het allemaal strakke lijnen zijn of handgetekende lijnen. Dikke, dunne of kalligrafische lijnen. Kleurgebruik.
  4. Schets jouw pictogrammen.
  5. Werk ze uit in Illustrator.

 

Flat design met deep shadow

Flat design met deep shadow

 

Retro icons

Retro icons

 

Retro icons 2

Retro icons 2

 

Een bekende serie ikoontjes is wellicht fontawesome. Dit is een font (net als Arial en Times) maar dan met ikoontjes. Middels een Kickstarter campagne is recentelijk fontawesome 5 gelanceerd. Zie hier de Kickstarter video ;-)

 

 

 

Eerst nog wat lezen?

Een goed pictogram kan tekst vervangen en is duidelijk voor mensen uit verschillende culturen. Een pictogram moet daarom voor een zeer grote groep mensen herkenbaar zijn en dat maakt het ontwerpen van pictogrammen zo moeilijk. In feite moet je publiek jouw pictogrammen leren lezen. Je kunt ze er wel bij helpen door op zoek te gaan naar zo logisch mogelijke vormen.

Daarnaast zijn pictogrammen ook mode afhankelijk. Kijk eens naar de volgende set:

hipster-icons

Voor wie een beetje bekend is met de hedendaagse Hipster cultuur zal dit bekend voorkomen. Voor anderen zijn het gewoon plaatjes van een hoed (te gebruiken voor garderobe bijvoorbeeld) of een pijp (te gebruiken voor rookruimte bijvoorbeeld).

 

Wat is een goed pictogram?

Goede pictogrammen voldoen aan de volgende voorwaarden:

  • Een pictogram moet duidelijk blijven als deze verkleind wordt!
  • Het moet een eenvoudig, simpel beeld zijn.
  • Meestal alleen maar in zwart-wit.
  • Als je kleur gebruikt kies dan dezelfde kleuren als de rest van je ontwerp.
  • Maak goed gebruik van contrast (verschil donker – licht).
  • Wees niet te gedetailleerd, ga niet zitten priegelen; je ziet het toch niet.
  • Gebruik geen tekst (hoogstens een letter of een cijfer); teksten zijn toch niet te lezen.
  • Zorg voor eenheid in stijl (lijnvoering, afronding van hoeken, vormen etc) zodat het duidelijk is dat een serie bij elkaar hoort.

Ontwerp pictogrammen met behulp van een grid

Hierop zie je ook dat er een grid gebruikt wordt om alle pictogrammen op uit te lijnen. Op die manier zorg je er voor dat er eenheid in stijl is (lijndikte, radius etc). Pictogrammen kunnen uiteraard veranderen door de jaren heen. Een leuke blog is te vinden op http://1stmuse.com/pictograms/ (EN) waarbij de pictogrammen van de Olympische Spelen door de jaren heen worden getoond.

  Het grid wat ontwikkeld is door Otl Archer voor de pictogrammen in Munchen.


Het grid wat ontwikkeld is door Otl Archer voor de pictogrammen in Munchen.

Overzicht van de ikoontjes van Otl Archer.


Het grid wat ontwikkeld is door Otl Archer voor de pictogrammen in Munchen.

1972 Munchen

1972 Munchen

1972 Munchen

1972 Munchen

1972 Munchen

1972 Munchen


Grid ontworpen door Nikolai Belkow voor de spelen in Moskou, 1980.

Grid ontworpen door Nikolai Belkow voor de spelen in Moskou, 1980.

1980 Moskou

1980 Moskou


 

Soorten pictogrammen

Er zijn de volgende soorten pictogrammen te onderscheiden (bron http://www.manualise.com/nl/blog/pictogrammen-en-symbolen-in-handleidingen/):

  • Iconische pictogrammen – dit zijn vereenvoudigde plaatjes en zijn relatief makkelijk te begrijpen. Bijvoorbeeld een auto op een schuine helling
  • Symbolische pictogrammen – dit zijn abstractere vormen en moeten geleerd worden. Bijvoorbeeld het uitroepteken wat gevaar / let op betekent.
  • Tot slot heb je ook mixvormen – het sneeuwkristal is daar een voorbeeld van; het is een afbeelding maar deze stelt ‘kou’ voor in plaats van een sneeuwkristal.

 


Andere voorbeelden

Andere voorbeelden van series zijn:

Film rating

de-pictogrammen-van-het-toerisme-en-van-de-vakantie-14646090

Pictogrammen in metro style

Pictogrammen in metro style

 


 

Links over pictogrammen

Tussen taal en beeld.
Over pictogrammen van de Olympische Spelen (Engels)
Over het ontwerpen van pictogrammen
Font Awesome