Share
Het vertalen van de 'iconische' kenmerken van een object naar iets dat metaforisch zinvol en onmiddellijk herkenbaar is, is geen eenvoudige taak - vooral als het ontwerp even effectief moet zijn op 48x48 pixels als bij 256x256!
Een gedenkwaardig en functioneel pictogram is mooi, iconisch, zinvol en functioneel. Hier zijn tien verstandige tips over het maken van uitstekende pictogrammen.
Een van de belangrijkste aspecten van pictogramontwerp is om een pictogram te maken dat onmiddellijk herkenbaar is. Of het nu gaat om een blauwe kikker of een blikje, wat het probeert weer te geven, moet in een oogopslag herkenbaar zijn of het doel van het pictogram is verslagen. Een pictogram moet natuurlijk 'iconisch' zijn van de metafoor die het vertegenwoordigt.
In een ontwerpstudie over het pictogram bij Smashing Magazine bespreken ontwerpers van het hoofdpictogram Vu en Min Tran hun proces achter de potloodafbeelding als onderdeel van hun Bright! Icon Set.
Het tekenen van een pictogram betekent dat de meest typische kenmerken van een object worden getekend, zodat het de actie van het pictogram kan vastleggen of het concept en de nuance kan vertegenwoordigen.
Zoals je misschien weet, zijn er over het algemeen drie soorten potloden om uit te kiezen:
- Prisma-vormig lichaam met een glanzend met glazuur gecoat uiteinde.
- Prisma-vormig lichaam met een gum bevestigd aan het potlood door een heldere witte metalen ring.
- Cilindervormig lichaam zonder gum.
We kiezen de tweede soort voor het pictogramontwerp omdat deze alle benodigde elementen bevat, waardoor het voor de kijker gemakkelijker wordt om het beeld te herkennen.
Soms is het beter om de meer gecompliceerde vorm van een object te kiezen, omdat er minder andere items zijn die dezelfde unieke kenmerken delen, waardoor het specifieke object dat u probeert weer te geven gemakkelijker te identificeren is. Er zijn veel cilindrische voorwerpen met puntige uiteinden naast potloden (pennen, markeringen, spijkers) en bij kleinere grootte kunnen zij niet te onderscheiden zijn, maar slechts heeft een potlood een prismavormig lichaam met een gom bevestigd door een heldere witte metaalring. Het wordt 'iconisch'.
Voor pictogrammakers DryIcons is een belangrijke waarde in hun ontwerpproces dat ze hun pictogrammen redelijk eenvoudig en basisstijlgewijs houden, in tegenstelling tot het streven naar een definitieve stijl. Dit maakt de pictogrammen veel veelzijdiger en bruikbaarder in een reeks projecten die ooit als een volledig pakket aan softwareontwikkelaars zijn verkocht. Als uw pictogram er in een groter aantal instellingen beter uitziet, wordt de potentiële markt groter.
Wat trends betreft, vinden wij dat het erg belangrijk is om dingen simpel en eenvoudig te houden, zodat ze hun oorspronkelijke doel kunnen dienen: in uw project passen, omdat het lijkt alsof dat zo was zoals het zou moeten zijn. Dat is de enige trend die we volgen.
Een bijzonder nuttige tip bij het ontwerpen van meerdere pictogrammen voor een pakket is om consistentie tussen hen te bieden, niet alleen in stijl, maar ook in de details zoals de lichtbron. Hoewel dit meestal een secundaire gedachte is, kan het niet-overeenstemmen van één pictogram in het pakket de algehele kwaliteit van de pictogrammen ernstig beïnvloeden.
In dit overzicht van de Windows Vista-pictogrammen ziet u hoe de lichtbron is gewijzigd tussen besturingssystemen, maar consistent is met alle pictogrammen in elke set.
Schaduwen in Vista-pictogramobjecten zijn indicatief voor ware, realistische diepte, net zoals ze bestaan in elk object in de echte wereld. Vista-pictogrammen hebben niet de platte schaduwen van rechtsonder, die standaard zijn voor Windows XP-pictogrammen. De lichtbron is ook compleet anders in Vista-pictogrammen. Alle objecten worden nu rechtstreeks in de lichtbron geplaatst. Van Windows 95 tot Windows XP is de lichtbron op alle pictogrammen altijd van linksboven en worden de objecten tegen de klok in gedraaid, weg van de lichtbron. De plaatsing van de Vista-pictogrammen en de verlichting zijn volledig omgekeerd in vergelijking met Windows XP en oudere Windows-systeempictogrammen.
Pictogrammen moeten vaak in verschillende grootten worden gebruikt, daarom is dit een goede kans om de schaalbaarheid van vectorafbeeldingen maximaal te benutten om een fantastisch ontwerp te maken dat voor meerdere doeleinden kan worden gebruikt.
Wat meer is, met vectorsoftwarepakketten zoals Adobe Illustrator, kunnen elke vorm, helling en lijn waaruit het pictogram bestaat op elk moment worden aangepast en aangepast, in tegenstelling tot een op pixels gebaseerd ontwerp dat opnieuw moet worden getekend wanneer er wijzigingen worden aangebracht.
Deze uitstekende handleiding voor pictogramontwerp hier bij VECTORUTS gaat door het proces van hoe een verbluffende afbeelding kan worden gemaakt op basis van de basisvormen en verlopen van Illustrator.
Integendeel, vectorafbeeldingen zijn dat niet altijd de beste aanpak voor pictogramontwerpers. Met veel pictogrammen die zeer kleine schalen vereisen, slagen vectorafbeeldingen er vaak niet in om een heldere weergave te reproduceren wanneer ze worden gerasterd. In deze gevallen geeft het volledig opnieuw tekenen van het pictogram in een aantal opgegeven formaten het beste resultaat.
Web Interface Designers Firewheel Design benadrukken deze aanpak in hun bespreking van bitmap versus vector:
Wanneer u een vectorafbeelding maakt, oorspronkelijk op 24x24 formaat en deze verkleint tot 16x16, komen de relatieve verhoudingen niet overeen. Er is geen manier om 24 pixels aan informatie gelijkmatig te verdelen in 16 pixels ruimte (onthoud dat er niet zoiets bestaat als een halve pixel). Dus het beeld vervaagt.
Er is ook geen manier om 24 pixels informatie gelijkmatig naar boven in 32 pixels ruimte te schalen. Nogmaals, het beeld vervaagt.Verder, als je diezelfde vector afbeelding neemt, oorspronkelijk op 24x24 formaat en het op 48x48 schaal, dan verdubbel je nu de verhoudingen. U hebt geen scherpe 1-pixellijnen meer. Je hebt dikke lijnen van 2 pixels. Schaal het groter op (zeg tot 96x96) en die lijnen worden nog dikker.
Net als bij punt één, waar werd vermeld dat het cruciaal is om de 'iconische' kenmerken van een object te vangen, is het ook belangrijk om te onthouden dat er enorme culturele verschillen kunnen zijn in de herkenning van alledaagse voorwerpen.
Turbomilk bespreekt dit in hun nuttige verzameling van 10 fouten in pictogramontwerp met het voorbeeld van een mailbox. Wat de herkende vorm en kleur van een mailbox in het ene land zou kunnen zijn, is misschien totaal verkeerd voor een ander land.
Het is altijd nodig om rekening te houden met de omstandigheden waarin uw pictogram zal worden gebruikt. Een belangrijk aspect hierbij zijn de nationale kenmerken. Culturele tradities, omgeving en gebaren kunnen van land tot land sterk verschillen.
Gebruik universele beelden die mensen gemakkelijk zullen herkennen. Richt je niet op een secundair aspect van een element. Voor een postpictogram is bijvoorbeeld een landelijke postbus minder herkenbaar dan een postzegel.
Notitie: besteed bijzondere aandacht aan deze regel bij het ontwerpen van pictogrammen op basis van waarschuwings- en verkeersborden, die per land verschillen.
Als een pictogram wordt gemaakt als een neutrale afbeelding in een cirkelvorm, wordt dit waarschijnlijk over het hoofd gezien. Het gebruik van sterke kleuren en een interessante vorm die het object versterkt, helpt het pictogram op te vallen. Denk eraan dat pictogrammen zelden op een monochrome achtergrond worden weergegeven - in de meeste gevallen zal er veel achter hen gebeuren, dus ze zullen moeten opvallen. Overweeg ook om glans en schaduw te gebruiken om een meer dynamisch eindresultaat te creëren.
Jasper Hauser, de ontwerper achter het Camino-icoon, vertelt dit in een interview met 'What makes good icon design?'
In principe zijn er twee aspecten die de basis vormen voor een goed pictogram: 1) vorm en 2) kleurgebruik. Als je naar het Appzapper-pictogram kijkt, zie je dat het 1) een originele vorm heeft en 2) onregelmatige kleuren en een onregelmatige kleurencombinatie gebruikt. Het doen van een blauwe cirkel zal niet opvallen.
Er is al gezegd dat ontwerpers van pictogrammen kleine schalen moeten aanpassen aan hun iconcreaties. Met de technologische ontwikkeling van ontwerpers moet echter ook rekening worden gehouden met het gebruik van pictogrammen op een veel grotere schaal dan de standaard. Een voorbeeld hiervan doet zich voor in Windows Vista, waar de pictogrammen kunnen worden geschaald tot 256 px hoog!
In een interview met Brian Brasher, een kunstenaar bij Firewheel Design, werd hem gevraagd:
John Marstall: Wat is uw mening over de verschuiving naar grotere pictogrammen en onafhankelijkheid van de resolutie?
Brian: Grotere pictogrammen betekenen meer details, wat een rijkere GUI-ervaring betekent, evenals het verwijderen van veel beperkingen die een pictogrammaker op hem heeft geplaatst om een afbeelding leesbaar te maken. Jammer genoeg betekent het weggooien van die beperkingen dat veel iconen die er op hun ware grootte behoorlijk spiksy uitzien modderige, grove gruwelen zijn op 32x32 en lager. Een tweesnijdend zwaard. Er zullen slachtoffers vallen.
Schetsen is een gangbaar proces in elk aspect van het ontwerp en het gaat verder in het pictogramontwerp. Het invullen van een reeks ideeën op papier helpt echt bij het ontwikkelen van een beknopt product dat voldoet aan de eisen van zijn doel. Omdat een pictogramontwerp moet voldoen aan een gedefinieerde reeks verhoudingen en dimensies, terwijl het nog steeds 'iconisch' en onmiddellijk herkenbaar is, is planning vooraf ongelooflijk belangrijk.
Michael Matas, een grafisch ontwerper die iconen voor het Mac OS X-platform heeft gemaakt, deelt zijn eigen manier van werken:
Ik begin altijd op mijn witte bord. Ik probeer goede en duidelijke metaforen te bedenken voor het pictogram. Ik schets verschillende ideeën en eindig meestal het hele witte bord. Wanneer ik een goede metafoor bedenk, begin ik met het schetsen van de lay-out van het pictogram en vanuit welke hoek ik het ga tekenen. Ik ga op Google Image Search en Watson's fotozoekopdracht en probeer goede foto's te vinden voor het object dat ik aan het tekenen ben. Ik download alles wat er goed uitziet en open ze allemaal in Photoshop. Ik maak een nieuw Photoshop-bestand om het pictogram in te tekenen en dat venster omringen met de afbeeldingen die ik van internet heb gedownload. Ik gebruik de webafbeeldingen om me te helpen een idee te krijgen van hoe de textuur en vorm eruitzien. Maar als ik kan, probeer ik altijd naar echte objecten te kijken om inspiratie op te doen.
De taak van een pictogram is om een actie of idee weer te geven in de vorm van een grafisch symbool. Daarom spelen metaforen een cruciale rol in het onmiddellijk vertalen van die actie of idee naar de gebruiker. Bij het in dienst nemen van een reeks nieuwe icoonontwerpen voor Macinstruct, overwoog het team een reeks metaforen om de moeilijkheid van hun online tutorials te vertegenwoordigen:
Misschien waren de moeilijkste pictogrammen om te beslissen onze zelfstudiemeters. We hadden een manier nodig om de moeilijkheid van onze tutorials te beoordelen, en we wilden een echt creatieve, effectieve manier om dit te laten zien. Na een paar dagen brainstormen kwamen we met de volgende ideeën:
- Thermometers: eenvoudige zelfstudies zijn koud, middelgrote zelfstudies zijn gemiddeld en harde zelfstudies zijn hot.
- Verkeerslichten: groen voor gemakkelijk, oranje voor gemiddeld en rood voor hard.
- Karate Riemen: witte, oranje en zwarte gordels, ala karate vaardigheidsniveaus.
- Puzzels: een puzzel met 1 stuk opzij. Kleinere stukken gelijk aan harder.
- Luchtvaartthema's: Bril voor eenvoudige, oude lederen helm en bril voor medium en jagerpiloothelm en luchtmasker voor harde.
- Engineering Images: een handleiding en een printplaat, een printplaat en een aantal tools en een oscilloscoop.
Uiteindelijk hebben we al deze ideeën voor iemand die vrijwillig door onze eigen Ric Getter werd aangeboden, verwijderd. Iedereen was het erover eens dat het gebruik van zakbeschermers om aan te geven moeilijk was een geweldig idee!
Accentsconagua