Icon Design in 2020: The Key Trends
Iconen zijn misschien wel een van de belangrijkste - en onderschatte - voorbeelden van design in je portfolio. Hier is een blik op het pictogramontwerp met enkele inspirerende voorbeelden.
Pictogramelementen worden bijna overal weergegeven, maar worden soms als bijzaak geproduceerd. Dat mag niet zo zijn. Een geweldig pictogramontwerp kan onderscheidend zijn en finesse en flair toevoegen aan een project.
Laten we eens kijken wat er nieuw is en wat er hot is in het ontwerpen van pictogrammen in 2020!
Verken Envato Elements
1. Lijnpictogrammen met kleurvormen
Lijnpictogrammen zijn altijd een populaire keuze, dankzij een veelzijdige stijl die er goed uitziet bij bijna elk ander ontwerpelement. De trend voegt net iets meer visuele interesse toe met een vleugje kleur, vaak in de vorm van een cirkel of vierkant, achter het lijnpictogram.
De kleurvorm kan een deel van het lijnpictogramontwerp vullen, maar meestal zweeft het gewoon op de achtergrond. Dit kleine beetje visuele interesse kan een pictogrammenset aan elkaar binden, een merkkleur benadrukken of gewoon een oudere site met lijnpictogrammen opfrissen.
Het lastige deel van het pictogramontwerp is de plaatsing en de grootte van het kleurvormelement. Als het te groot of te helder van kleur is, kan het het pictogram wegnemen. Als de vorm te klein is, riskeer je dat het eruit ziet als een vergissing.
Hoewel er geen perfecte grootte is, behouden de meeste pictogrammen die deze trend gebruiken de kleurvorm tot ongeveer een kwart van de volledige grootte van het pictogram.
2. Abstracte pictogramvormen
Weet u niet zeker welk pictogram uw inhoud vertegenwoordigt? Een abstracte pictogramvorm zou het antwoord kunnen zijn.
Meer ontwerpers maken abstracte stijliconen voor gebruik op websites. Het leuke van deze stijl - en trend in het algemeen - is dat abstracte stijlen een gevoel van eigenzinnigheid en verwondering creëren die passen bij enkele van de grotere algemene trends in design.
De sleutel tot het werken met abstracte vormen is ervoor te zorgen dat je niet per ongeluk iets repliceert en dat pictogrammen echt abstract zijn. (Probeer geen pictogrammen te maken die vergelijkbaar zijn met uw logo, ze kunnen er bijvoorbeeld uitzien als fouten.) Voor iets dat echt overeenkomt, gebruikt u hetzelfde kleurenpalet voor pictogrammen en merkmaterialen.
3. Primaire kleuren
Primaire kleurenpaletten zijn een gedurfde, heldere en boeiende keuze voor kleine designelementen.
Deze trend in pictogramontwerp maakt gebruik van rood, blauw, groen en geel (samen met paars en oranje) om een basisset kleurregels te creëren. Wat deze stijl doet werken, is een focus op kleur om de aandacht te vestigen op kleine elementen op het scherm. Primaire kleuren zullen ook opvallen tussen alle "materiële" kleuren die de laatste tijd paletten hebben gedomineerd.
Verzacht het ontwerp met verlopen (of faux-ombre verlopen, zoals het voorbeeld hierboven) om te voorkomen dat het kleurenpalet er te elementair uitziet. Ga niet overboord wanneer u met primaire kleuren werkt. Ze kunnen een beetje overweldigend zijn. Overweeg een gedempt primair palet of monochroom schema.
4. Pictogrammen met achtergrondpictogrammen
Sommige trending iconen hebben eigen iconen. Ernstig!
Voor uitgebreider gebruik van pictogrammen - we nemen hier geen kleine favicons - pictogrammen kunnen worden gestapeld en gelaagd om meer een kunstelement te creëren.
Deze trend maakt vaak gebruik van kleur en schaduw om onderscheid te maken tussen het hoofdfocuspictogram en achtergrondpictogrammen. Het primaire pictogram is vaak in kleur of een gevuld pictogram. De achtergrondpictogrammen zijn bijna altijd lijnstijl en hebben mogelijk lichte kleurenpaletten.
U kunt dit effect creëren met veel vooraf gemaakte pictogramkits door pictogrammen op verschillende manieren te mixen en matchen. Creëer diepte en visuele interesse met pictogrammen met een soortgelijk thema en blijf bij slechts een handvol elementen om te voorkomen dat de scène te druk wordt. Wees niet bang om elementen te gebruiken en opnieuw te gebruiken en gebruik dezelfde pictogrammen (afwisselend lijn en gevuld) op achtergronden en voorgrond.
5. Tweekleurige pictogrammen
Een andere trend voor het ontwerpen van pictogrammen die voortbouwt op populaire lijnpictogramstijlen, is het maken van tweekleurige elementen.
Tweekleurige pictogrammen kunnen voortbouwen op uw bestaande kleurenpalet of merkkleuren of bijna elk ander kleurenpaar combineren. Zoek bij het ontwerpen met de pictogramtrend naar kleurparen die opvallen tussen de achtergrond waarop u ze wilt gebruiken.
Kies voor het ontwerp een primaire kleur voor het grootste deel van het pictogram. Gebruik een secundaire kleur om een element van het pictogram te accentueren. (Denk aan het gebruik van de primaire kleur voor 70% tot 80% van het ontwerp en de secundaire kleur voor de rest.)
Dit creëert een accent in het pictogramontwerp dat de aandacht zal trekken naar het ontwerpelement en hopelijk ook naar de omliggende inhoud.
6. Icoon “steno”
Als je door een app store bladert, zie je veel veelvoorkomende kenmerken: enveloppen voor mail-apps, controles voor productiviteits-apps, sloten voor beveiligings-apps.
Dit steno-pictogram geeft een snel visueel bericht dat gebruikers vertelt wat de app doet. Deze zelfde afkorting is bijna universeel van toepassing op alle pictogramontwerpen. Terwijl ontwerpers experimenteren met iconen in hun eigen stijl, bestaat de neiging om iconen te gebruiken voor een specifieke betekenis.
En dat is een goede zaak. Een pictogram moet in één oogopslag gemakkelijk te zien en te begrijpen zijn. Een pictogram moet gebruikers helpen te weten wat ze moeten doen en hoe ze met het ontwerp moeten omgaan. Deze veel voorkomende pictogramafkorting is een mooie evolutie van hoe je dat moet doen.
7. Heldere kleuren
Heldere kleurkeuzes zijn van groot belang geweest in alle aspecten van het ontwerp. Dat is niet anders met pictogrammen. Een felle kleur is een verleidelijke manier om de aandacht naar het pictogram te trekken.
Kleur wordt op een aantal verschillende manieren gebruikt als het gaat om de trend van het pictogramontwerp:
- Als achtergrond met een wit of zwart lijnstijlpictogram
- Voor pictogramelementen in kleur met een realistischer uiterlijk
- Voor pictogramelementen met een vlakker, kleurverloop of superhelder ontwerp
Populaire kleurkeuzes in de heldere familie zijn geel, blauw, groen en paars. Deze kleuren zijn meestal aan de heldere kant en het is populair om een kleurenpalet te maken met drie tot vijf tinten voor een icon set.
Weet u niet waar u moet beginnen? Material Palette toont kleuren die een groot deel uitmaken van de trend van het kleurpictogramontwerp.
8. Pictogrammen in logo's
Let op hoeveel logo's pictogrammen bevatten. Als je er eenmaal over nadenkt, zal het moeilijk zijn om niet alle kleine pictogrammen in het logo-ontwerp te zien.
Het leuke van een pictogram in een logo is dat het werkt met de merknaam en met enige tijd en merkwaarde op zichzelf kan staan. Denk aan het bovenstaande voorbeeld, Spotify. Hoewel de muziekprovider nog niet zo lang bestaat (in het kader van merken), is de cirkel met drie lijnen zeer herkenbaar.
Het pictogram werkt in kleur en zonder - een sleutel van een sterk pictogram - en kan alleen staan of met belettering. Deze veelzijdigheid maakt het gemakkelijk te zien waarom pictogrammen een populair element zijn in logo-ontwerp.
9. Cirkels
Cirkels zijn een van de meest harmonieuze vormen. En als het gaat om pictogramontwerp, zijn ze behoorlijk populair. Van pictogrammen die zich in een bol bevinden tot cirkels in objecten, het creëren van een ontwerpmarkering met cirkels kan precies het juiste gevoel voor gebruikers creëren.
(Wilt u meer weten over cirkels in ontwerp? Dat hebben we hier.)
Een deel van de invloed van cirkel in pictogramontwerp kan terugkomen op enkele van de richtlijnen die door Google zijn opgesteld met Material Design. Al die ronde knoppen zijn perfect om op mobiele telefoons te tikken. En diezelfde filosofie is van toepassing op pictogramontwerp. (Bedenk eens hoe vaak een pictogram een aanraakbaar of klikbaar element is.)
Het deel dat een kleine truc kan zijn over deze pictogramtrend is het in elkaar grijpen van cirkels op alle plaatsen waar andere vormen worden gebruikt. App-pictogrammen zijn meestal vierkant; social media profielen zijn rond (en vierkant).
Zorg er bij het maken van een rond pictogram voor dat de inhoud van het pictogramontwerp gemakkelijk te begrijpen is in kleine formaten, omdat u het vaak moet verkleinen om op andere plaatsen te passen.
10. Lijnstijl pictogram ontwerp
Lijnstijlpictogrammen lijken de trend te worden die nooit oud wordt.
Een deel van de reden is dat deze pictogramstijl praktisch overal op elk achtergrondtype kan werken. Veel van de populaire, downloadbare pictogrampakketten bevatten vanwege deze veelzijdigheid vaak een lijnstijlontwerp.
Dit is gemakkelijk te zien in het bovenstaande voorbeeld. Elk pictogram is gemakkelijk te zien en te begrijpen op vrijwel elk formaat.
11. Eenvoudige elementen en weergaven
Zoals met de meeste andere designtrends in 2020, maakt eenvoud ook deel uit van icon design. Eenvoudige vormen en geografie worden gecombineerd om bijna simplistische weergaven voor pictogrammen te creëren.
Het resultaat is een behoorlijk kunstzinnig ontwerp dat gebruikers doet kijken.
In het voorbeeld met voedselpictogrammen hierboven gebruikt elk pictogram de rode draad van een cirkel in het pictogram. Dit kan de algemene vorm van het pictogram zelf zijn of een onderdeel van het pictogramontwerp. Deze vorm verbindt elk pictogram met elkaar in het project.
12. Pictogrammen met verlopen
De trend in verloopkleuren die een van de dominante thema's van 2019 is geworden, speelt ook een rol bij het ontwerpen van pictogrammen. Van eenvoudige gradiënten in lijnstreken (zoals het voorbeeld hierboven) tot volledige gradiëntkleuring tot witte pictogrammen op een gradiëntachtergrond, dit kleurenschema is populair.
Dat is misschien wat zo aantrekkelijk is aan het gebruik van verlopen in pictogrammen (en in het algemeen) - er zijn zoveel verschillende manieren om de trend te gebruiken. U kunt een verloop toevoegen en nog steeds geen project hebben dat er net zo uitziet als iets anders.
13. Focus op eenvoudige kleuren
Icoonontwerpers nemen ook de tegenovergestelde benadering met kleur en houden vast aan eenvoudige, beperktere, meer basale kleurenpaletten voor deze kleine ontwerpelementen.
Een beperkt palet gebruiken is een geweldig idee. Met een ontwerp dat zo klein is, kan te veel kleur of detail de ruimte snel overweldigen en oogvermoeidheid veroorzaken.
U wilt niet dat gebruikers moeten nadenken over wat het pictogram is of wat kleur betekent. Door de hoeveelheid details te beperken - inclusief uitgebreide kleuren - kan elk afzonderlijk pictogram een beetje gemakkelijker te zien en te begrijpen zijn. Dit is het belangrijkst met pictogrammen die in de kleinste formaten worden gebruikt.
14. Alles in app-stijl
Een van de redenen waarom iconen zo populair zijn geworden, is dat we ze al voor bijna alles ontwerpen. Van app-pictogrammen tot app-stijlpictogrammen voor favicons of desktop-pictogrammen, deze stijl is praktisch overal.
Pictogrammen in app-stijl hebben een eigen stijl. Dit bevat:
- Vierkant van vorm
- Afgeronde hoeken
- Gekleurde achtergrond (meestal één kleur)
- Eenvoudige vorm binnen icoon
- Veel contrast tussen pictogram en achtergrondkleur
- Geen tekst of belettering
15. Dikke, uniforme slagen
Lijnstijlpictogrammen zijn niet alleen populair, maar vooral pictogrammen met dikke lijnstreken zijn populair.
Deze pictogrammen zijn vaak ontworpen voor toepassingen met één kleur en worden vaak gebruikt in wit of zwart bovenop kleuren- of fotoachtergronden.
Pictogrammen met dikke, uniforme lijnen worden het vaakst alleen gebruikt, zoals een karpictogram of contactpictogram. Ze worden niet vaak gebruikt in een verzameling pictogrammen.
16. Plat pictogrammen blijven populair
Hoewel veel van de harde focus op plat ontwerp is verdampt, is het pictogramontwerp nog steeds vrij plat (of op zijn minst bijna plat).
Dit komt waarschijnlijk door het supereenvoudige karakter van een plat ontwerp en het idee dat deze look vrij gemakkelijk kan worden geïntegreerd met een aantal andere stijlen.
Zelfs als je naar enkele van de voorbeelden en trends in het pictogramontwerp kijkt, zul je zien dat veel ervan plat zijn. (Lijnstijlpictogrammen zijn bijvoorbeeld bijna altijd plat.)
17. Emoji-pictogrammen
Emoji's zijn bijna hun eigen taal geworden - een meer visuele vorm van communicatie die steeds algemener wordt geaccepteerd.
Het pictogrammenontwerp krijgt ook een emoji-achtige flair. Deze pictogrammen zijn herkenbaar aan een focus op de hoofdvorm van een persoon of wezen. (De door Star Wars geïnspireerde emoji-pictogrammen hierboven zijn een goed voorbeeld van hoe je plezier kunt hebben met het ontwerpen van pictogrammen.)
Deze stijl van het pictogram zou geweldig kunnen werken voor een contactpagina of voor het vertegenwoordigen van mensen of persona's in een ontwerp.
Hoe een beter pictogram te ontwerpen
Het maken van een goed pictogram of een set pictogrammen is meer dan alleen maar springen op enkele van de nieuwste trends op het gebied van pictogramontwerp. Vanwege het kleine formaat van pictogrammen zijn aandacht voor detail en precisie een belangrijk onderdeel van het ontwerpproces.
Eenvoudige regels gelden nog steeds voor pictogramontwerp in 2019. Combineer deze richtlijnen met enkele van de trending-ideeën hierboven om iets te maken waar je dol op bent:
- Begin met een raster
- Bouw met geometrie
- Creëer een unieke vorm
- Geef pictogrammen voldoende ruimte
- Blijf bij uw merkkleuren
- Gebruik consistente divots
- Ontwerp voor de kleinste maat die je nodig hebt
- Versier niet
Richtlijnen voor het ontwerpen van pictogrammen
Een goede manier om bij te houden wat er in zit, is door te kijken naar grafische standaarden en stijlgidsen. Elke keer dat Apple of Google hun aanpak verandert, verandert ook iedereen. Deels omdat het moet en deels omdat de nieuwe stijl vaak een afspiegeling is van de tijden en trends in icoonontwerp.
Hier vindt u richtlijnen:
- Apple App-pictogrammen
- Android App-pictogrammen
- Materiaalontwerp Productpictogrammen
- Materiaalontwerp Systeempictogrammen
Gevolgtrekking
Pictogrammen zijn een handige ontwerptool. Van gebruik als app-pictogrammen tot websitemarkeringen of favicons tot divots die in een logo of tijdens een ontwerpproject kunnen worden gebruikt, het pictogram is een blijvende markering.
Benader het pictogramontwerp op dezelfde manier als bijna elk ander project, maar denk echt na over eenvoud en grootte. Pictogrammen zijn gemaakt om snel naar te kijken en zijn vaak klein. Dit kan een grote impact hebben op het ontwerp.
