Het is een tijdje geleden dat ik dit soort artikelen heb gedaan, maar vandaag ben ik terug en ik denk echt dat je van deze gaat houden. We gaan onze creatieve sappen in de wacht zetten en samen wat quality time besteden aan het verkennen van de geschiedenis en evolutie van die kleine beestjes die we graag "pictogrammen" noemen.
Dus, als je zo vaak in het icon design bent als ik (een digitale vuistbuil terwijl je lacht als een gek persoon), stop dan snel bij de dichtstbijzijnde espressomachine en pak een kop van die magische bonenlikeur, en stap dan voorzichtig op terug in de stoel en laat de reis beginnen.
Welnu, ik denk dat velen van jullie het antwoord al weten, maar als de sociale wetenschappen "Onderzoeksmethoden en -technieken" me iets hebben geleerd, is het dat voor elke studie (die dit artikel duidelijk is), je altijd moet beginnen met het rootniveau van uw concept en bouw vervolgens geleidelijk uw weg omhoog met behulp van meerdere lagen informatie.
Dus, "pictogram" is een zelfstandig naamwoord van Griekse oorsprong (eikόn), en wordt volgens het online woordenboek van Merriam Webster gedefinieerd als "een conventioneel religieus beeld dat meestal op een klein houten paneel wordt geschilderd en wordt gebruikt in de toewijding van oosterse christenen."
Ik denk dat we allemaal een wenkbrauw kunnen opkroppen en zijn het erover eens dat dit niet precies het soort 'pictogram' is waarin we geïnteresseerd zijn, omdat we niet echt bezig zijn met het schilderen van goddelijkheidsprekende afbeeldingen op hout (of Ik denk dat de meesten van ons dat niet zijn), dus laten we proberen de term vanuit een meer modern, technologisch perspectief te benaderen.
Vanuit een digitaal standpunt is een "pictogram" een "grafisch symbool op een computerscherm dat een object (zoals een bestand) of functie (zoals de opdracht of verwijdering) weergeeft".
Een nog meer verhelderende verklaring is te vinden op de online versie van de Cambridge Dictionary, waar ze het definiëren als "een kleine afbeelding of een klein symbool op een computerscherm waar je naar verwijst en klik (= druk op) met een muis om de computer een indruk te geven instructie."
Voordat we verder gaan, wil ik er graag op wijzen dat hoewel pictogrammen oorspronkelijk zijn gemaakt met de bedoeling om te worden gebruikt in grafische interfaces voor desktopcomputers, ze al snel hun nut hebben bewezen, en hun weg vinden naar andere schermgeschikte apparaten die hebben ze aangenomen vanwege hun gebruiksgemak.
De allereerste set computerpictogrammen werd geboren in 1981, toen computerwetenschapper David Canfield Smith en ontwerper Norman Lloyd Cox hun krachten bundelden om de 'office metaphor' naar de Xerox Star 8010 te brengen, de eerste computer die op kantoor voor die tijd was bedoeld.
Xerox Star 8010 - afbeelding geleverd door DigiBarn Het idee was om Norman een reeks kantoorartikelen te laten ontwerpen, zoals documenten, mappen, archiefkasten, enz., Die de eerste pictogramstijl (pixelart) zouden definiëren waarop alle andere zouden zijn gebaseerd.
De reden waarom pictogrammen zijn ontstaan, is dat computers zijn overgeschakeld naar een fase waarin ze een visueel symbool nodig hadden dat de interactie tussen de interface van hun software (de GUI of grafische gebruikersinterface) en de behoeften van de gebruiker kon vereenvoudigen..
Dit betekent dat het vanuit een symbolisch perspectief zowel een functie en een betekenis, omdat het zorgvuldig en correct moet overbrengen voorwerp of actie waarvoor het bedoeld was om te beschrijven, met behulp van visuele aanwijzingen die bedoeld zijn om zelfverklarend te zijn.
Je kunt meer leren over het onderzoeksproces dat betrokken is bij het creëren van dit soort visuele metaforen, door het lezen van mijn 10 beste tips voor het maken van Awesome Icons-artikel, dat de meeste, zo niet al je vragen zal beantwoorden.
Omdat het artikel zich richt op het presenteren en uitleggen van de evolutie van iconen vanuit een visueel perspectief, is het niet meer dan logisch dat we een paar momenten nemen om precies te zien wat "stijl" is, omdat vaak de term verkeerd begrepen wordt.
Als we teruggaan naar het woordenboek Merriam Webster, zien we het zelfstandig naamwoord gedefinieerd als "een bepaalde manier of techniek waarmee iets wordt gedaan, gemaakt of uitgevoerd".
Eén definitie stond echt in mijn gedachten, omdat het de term omschrijft als "een onderscheidende verschijning, meestal bepaald door de principes volgens welke iets is ontworpen".
Zet beide samen, en we realiseren ons snel dat stijl in feite een vorm van expressie is (visueel of van een andere aard) gebaseerd op een ingewikkelde relatie tussen de methoden en principes zorgvuldig gekozen en ontwikkeld door een maker (de kunstenaar) om breng zijn of haar visie in vorm.
Nu kan bijvoorbeeld de stijl van een acteur eenvoudig worden gereduceerd tot de manier waarop die persoon praat, loopt en kijkt. Zangers kunnen zichzelf onderscheiden door een specifieke set kleding en een zachtere of diepere stem aan te nemen.
Ontwerpers daarentegen streven naar een gevoel van stijl door verschillende visuele kenmerken toe te passen op basis van methoden en technieken die zijn ontwikkeld gedurende een lang proces van onderzoek en verfijning, waardoor ze hun eigen stijl zijn..
Nu is hier waar het een beetje lastig wordt, omdat het in het ontwerp is persoonlijke stijl kan snel worden genomen, nagebootst en geïtereerd, waardoor het een wordt collectieve stijl, waar verschillende ontwerpers gelijkaardige of zelfs identieke compositietechnieken volgen.
Dat gezegd hebbende, geen enkele individuele stijl is volledig puur, omdat alles dat gecreëerd wordt eigenlijk een visuele iteratie en / of evolutie is gebaseerd op het vorige werk van iemand anders.
Op dit punt zijn we erin geslaagd een idee te krijgen van wat 'stijl' is, maar laten we een paar momenten nemen en zien welke factoren de ontwikkeling en evolutie kunnen beïnvloeden..
Zoals we allemaal weten, zijn er voor elke kunstvorm een reeks gereedschappen en mediums die uiteindelijk van invloed zijn op de groei en populariteit ervan, en pictogramontwerp vormt geen uitzondering op die regel.
Als ontwerpers brengen we onze dagen door met het maken van digitale producten die bedoeld zijn om te leven binnen een digitaal medium, dat wordt beïnvloed door de staat en de evolutie van de technologie, bepaald door de rekenkracht en weergavevooruitzichten die tijdens het leven beschikbaar zijn. Dit is de reden waarom de reis van pixelkunsticonen naar volledig ontwikkelde skeuomorfische exemplaren erg lang was, omdat computers niet het onbewerkte vermogen hadden om het aantal pixels weer te geven dat we momenteel hebben.
Voor ontwerpers betekent dit dat ze zich altijd moeten aanpassen en volledig afhankelijk worden van het medium, dat afhankelijk van de evolutionaire status hun stijl kan beïnvloeden door creatieve beperkingen toe te voegen of te verwijderen.
Een perfect voorbeeld hiervan is VR (Virtual Reality), waar we net beginnen met het maken van vorderingen door de mogelijkheden en beperkingen van dit nieuwe en opwindende medium te achterhalen..
In het begin beloofde ik dat de studie zich zou concentreren op het presenteren en kort beschrijven van de tien stijlen die pictogramontwerp in zijn huidige staat vormden, dus zonder nog meer tijd te verspillen, nog een slokje van die hete koffie pakken en laten we er meteen in springen.
We gaan de boel afschrikken door de drie-eenheid te presenteren waar iedereen mee begon.
Zoals we enkele ogenblikken geleden zagen, werd de allereerste pictogramstijl die ontstond, gemaakt en gevormd door de technologie van zijn tijd, toen computers traag waren en ontwerpers te maken hadden met monochromatische beeldschermen.
De missie was om gebruik te maken van de bestaande beperkingen en de pictogrammen te maken met behulp van een uitgebreid proces van het positioneren van een bepaald aantal zwarte pixels over een vierkant raster, totdat het symbool vorm begon te krijgen, wat de naam is van de stijl..
De stijl zelf kan alleen als vetgedrukt worden beschreven, omdat deze harde, dikke, zwarte lijnen voor de contouren en zachtere, dunnere lijnen en details voor de binnenste compositiesecties gebruikte.
Voor mij persoonlijk zijn op pixels gebaseerde pictogrammen echt indrukwekkend, omdat ze niet alleen de eerste waren die personal computers openden voor de consumentenmarkt, maar ze ook in staat bleven om relevant te blijven vanwege de eenvoud van hun aard, sinds hun 36 jaar van het bestaan is er niet veel veranderd, en misschien is dat een goede zaak.
Xerox 8010 Star GlobalView OS - afbeelding geleverd door ToastyTechTegenwoordig blijven pixelart-pictogrammen hun populariteit behouden, omdat ze een krachtige nostalgietrekker zijn, die het gevoel en uiterlijk van de eerste dagen van het computergebruik terugbrengt, waarbij stijl niet ging over hoeveel details je in een kleine ruimte kon proppen, maar hoe je de aandacht van de ogen kon vangen met behulp van zo min mogelijk visuele elementen.
Het jaar is 1985 en ATARI heeft net TOS (The Operating System) geïntroduceerd met de lancering van zijn Atari 520ST computer, wat de eerste keer is dat we een visuele evolutie van de pixelpictogrammen te zien krijgen. Als de gebruiker voorheen te maken had met tweedimensionale pictogrammen, verandert de ervaring nu ten goede met de introductie van isometrische pictogrammen, gebaseerd op dezelfde "kantoormetafoor", die de illusie van diepte en dimensie toevoegt aan de GUI (grafische gebruiker) Interface) met behulp van de derde as.
Qua stijl was dit geen radicaal vertrekpunt. Zie het meer als een visuele verbetering, aangezien ze nog steeds op pixels waren gebaseerd, maar enkele subtiele veranderingen brachten, zoals de toevoeging van geprojecteerde harde schaduwen en uniforme lijndikte.
Voor sommigen lijkt het woord "isometrisch" niet de beste manier om de stijl te labelen, omdat een isometrische projectie volgens de definitie ervan een "methode is voor visueel representeren van driedimensionale objecten in twee dimensies" waarin "de drie coördinaten assen verschijnen even verkort en de hoek tussen twee van hen is 120 graden ". Voor mij persoonlijk kunnen ze worden gezien als de eerste pogingen om een nieuw perspectief te brengen naar de "kantoormetafoor" die uiteindelijk leidde tot wat we nu isometrische pictogrammen noemen.
Atari TOS - afbeelding geleverd door ToastyTechTegenwoordig heeft de stijl een radicale breuk geleden met zijn monochrome pixelgebaseerde oorsprong, die zwaar leunt op het gebruik van kleuren en vormen om driedimensionale objecten tot leven te brengen.
In termen van complexiteit is de stijl redelijk moeilijk te beheersen, omdat het vereist dat ontwerpers het object dat ze willen weergeven visueel opnieuw willen weergeven met behulp van een geroteerde kubus als een referentieobject, wat niet altijd gemakkelijk is, vooral als je vreemd handelt vormgegeven objecten.
Vier jaar snel vooruit en het patroon begint eindelijk te breken met de lancering van de NeXT-werkstationcomputer van Steve Jobs, die met NeXTSTEP OS werd meegeleverd.
Als tot nu toe iconen werden gezien als eenvoudige symbolen die bedoeld waren om de interactie tussen mens en machine te vergemakkelijken, ging Jobs naar het volgende niveau met de introductie van de eerste skeuomorfische iconen, die waren ontworpen om hun echte tegenhangers na te bootsen..
Zeg vaarwel tegen die dikke, dikke contouren, en hallo op een niveau van vakmanschap dat nog nooit eerder in een GUI (Graphical User Interface) is gezien, gekenmerkt door het gebruik van schaduw en zeer gedetailleerde illustraties die allemaal in dezelfde kleine ruimte zijn gepropt..
NeXTSTEP OS 0.8 - afbeelding geleverd door ToastyTechNaarmate computers krachtiger werden en de schermtechnologie evolueerde, werd het skeuomorfisme meer een kunstvorm dan een eenvoudig symbool, waardoor de technieken en de verbeeldingskracht van de makers naar een punt werden geduwd waar de afgebeelde objecten de grens tussen pixels en realiteit vervaagden.
Van ingewikkelde hellingen tot levensechte structuren, hooglichten en schaduwen, het proces kan echt moeilijk te beheersen zijn als je geen artistieke training hebt gehad. Als je in deze stijl bent geïnteresseerd, kun je beginnen met leren door een gestileerd aardbei-pictogram te maken, dat je alle basisprincipes laat zien.
De stijl zelf werd super populair in 2007 met de lancering van Apple's iPhone, en bleef zo tot het jaar 2012, toen er een verschuiving van realistische naar minimalistische pictogrammen plaatsvond.
Skeuomorfic Icon door Eddie LobanovskiyOp dit punt zal onze tijdlijn hier en daar een beetje wazig worden, omdat we voor sommige van de aankomende stijlen niet precies kunnen aangeven wanneer ze zijn verschenen en populair zijn geworden. Daarom heb ik besloten om groep en bestel ze op basis van de attributen die ze delen en waaruit ze zijn voortgekomen.
Lijnpictogrammen zijn een directe evolutionaire tak van de originele pixelart-pictogrammen, die een van de huidige populaire stijlen zijn die worden toegepast, vanwege hun vermogen om krachtige beelden te portretteren met behulp van eenvoudige vormen en contouren.
Voor een ontwerpfilosofie gebruikt de stijl zelf hetzelfde principe om de verschillende compositiesecties van het object te scheiden met harde, dikke lijnen, maar dit gebeurt met behulp van streken in tegenstelling tot individuele vierkanten. Door deze verandering van techniek is het voor de ontwerper gemakkelijker geworden om ze te maken en aan te passen, omdat je nu te maken hebt met vormen en paden in plaats van afzonderlijke pixels.
Bovendien is de stijl meer organisch geworden, omdat de evolutie van computerschermen het mogelijk heeft gemaakt om gebogen lijnen en afgeronde hoeken te gebruiken in vergelijking met vroeger toen je je ideeën tot leven moest brengen met superscherpe rechthoekige vormen.
Ik ben persoonlijk dol op de stijl, omdat het gemakkelijk te benaderen en goed te krijgen is als je het een paar keer hebt geoefend.
Vanuit een terminologisch perspectief komt het zelfstandig naamwoord "glyph" van het Franse "glyphe" dat zelf afkomstig is van het Griekse "gluphē" en kan worden gedefinieerd als een "hiërogliefenteken of -symbool". Vanuit een ontwerpperspectief is een 'glyph' een visuele stijl, waarbij de objecten worden weergegeven met monochromatische vormen die subtiele lege ruimten kunnen hebben die hun verschillende samenstellende secties scheiden.
Hoewel het eenvoudig van aard is, kan de stijl echt effectief zijn, vooral wanneer deze in kleinere formaten wordt gebruikt, omdat je het object kunt weergeven met een minimalistisch maar nog steeds begrijpelijk resultaat, waardoor het kan worden gezien als de voorloper van een plat ontwerp.
Glyph Icons door Martin DavidVlakke iconen als een stijl werden populair rond het jaar 2012, met de lancering van Microsofts opnieuw ontworpen visuele taal die we kenden als Metro (nu Fluent), die kwam als een directe reactie op Apple's misbruik van skeuomorfisme.
Visueel gezien was er een enorme verschuiving in de ontwerpfilosofie, gericht op een duidelijke, minimalistische benadering door het object te breken tot zijn essentie, en zo veel mogelijk details in het proces te verwijderen.
Dit leidde tot de geboorte van een nieuw soort pictogrammen die gemakkelijk te begrijpen en te gebruiken waren, vanwege het feit dat de focus was verlegd naar zorgvuldig gebruik van kleuren en geometrische basisvormen.
Uiteindelijk zagen ontwerpers het potentieel van een plat ontwerp en begonnen ze nieuwe pictogrammen te maken op basis van heldere vormen, zonder gradiënten of slagschaduwen, en ontwikkelden ze de stijl tot wat het nu is..
Plat pictogrammen door Dominic FlaskToen de zaken veranderden met een platte vormgeving, besloot Google in 2014 de verandering te omarmen en bracht ontwerper Matias Duarte aan boord om een eigen beeldtaal te maken, die hij Material Design noemde.
Als skeuomorfisme te veel aan de gang was en het platte ontwerp goed was, te vlak, plaatste Google zichzelf ergens in het midden door de hooglichten en schaduwen terug te brengen maar een subtielere aanwezigheid te geven, waardoor een visuele stijl werd gecreëerd waarin objecten over één gestapeld waren een ander. Ze gingen nog verder en stelden een behoorlijk uitgebreide online gids samen, waarin ze alles bespreken, van materiaaleigenschappen tot lay-outprincipes en kleurstijlen, waardoor het heel gemakkelijk is om in te springen en de stijl te adopteren.
Materiële pictogrammen zijn naar mijn mening een mooie aanvulling op een plat ontwerp en zolang Google iets te zeggen heeft, blijven ze populair.
Materieel icoon door Jovie Brett BardolesVoor de volgende stijl is het echt moeilijk om een label op te plakken, omdat het ergens tussen de grenzen van lijnpictogrammen en isometrische is geplaatst, waarbij de belangrijkste elementen van beide worden geleend..
Ik heb mijn brein bijna gebroken door te proberen het te definiëren, en ik kwam uiteindelijk tot de conclusie dat de beste pasvorm dimensioneel zou zijn, omdat het proces zich richt op het toevoegen van dimensie of diepte aan het pictogram vanuit een horizontaal perspectief.
De manier waarop het wordt gedaan, is door zowel de voorkant als een van de zijkanten van het object te presenteren, met behulp van rechthoekige vormen voor alles dat niet van ronde of gebogen aard is. Voor de objecten die binnen de tweede categorie vallen, worden ze meestal weergegeven met één perspectief, de voorkant, die zorgt voor een contrasterende en tegelijkertijd samenhangende balans tussen de samenstellende elementen van de icoon.
In termen van moeilijkheid is de stijl enigszins gemakkelijk te begrijpen en te beheersen zolang je een basisbegrip hebt van het perspectief, zodat je de details die nodig zijn voor zowel de voor- als zijsecties correct kunt definiëren en positioneren.
Dimensionale iconen door Ryan PutnamDe volgende is een categorie apart, want zo visueel aantrekkelijk als het is (kijk maar naar deze kleine schoonheden), het wordt niet zo vaak gebruikt omdat het meestal als te "speels" wordt beschouwd. De stijl werd populairder na de rebranding van Dropbox, die liet zien dat het potentieel is om een echt unieke identiteit te bouwen, met behulp van handgetekende lijnen die een wankele aard hebben.
Naar mijn mening kan dit type icoon vriendelijker zijn, omdat de relatie tussen hen en de gebruiker warmer wordt omdat je te maken hebt met symbolen die aanvoelen alsof ze niet door een computer zijn ontworpen, maar eerder door een levende, ademende menselijk.
Qua complexiteit kan de stijl moeilijk te hanteren zijn, vooral als je niet gewend bent aan tekenen en schaduwen, wat het ook moeilijk maakt om te imiteren, omdat je niet alleen de vormen maakt door rechthoeken en cirkels te klikken en te slepen.
Handgetekende iconen van Corrine AlexandraTen slotte hebben we een reeks pictogrammen die echt uniek is, omdat het dynamische karakter u ertoe aanzet erop te klikken. Hoewel ze eruitzien als pure visuele gimmicks, zijn geanimeerde pictogrammen de toekomst van interactie, omdat ze een ongelooflijke kracht hebben als het gaat om het boeiende proces tussen de gebruiker en de interface.
Ongeacht de vorm die ze aannemen (vlak, lijn, enz.), Kunnen geanimeerde pictogrammen iets nieuws en vers aan de tafel brengen, vanwege hun tweede status (wanneer erover zweeft), en dus de informatie verdubbelen die beschikbaar is voor de gebruiker, omdat wanneer blijven hangen, kunnen ze binnen een paar seconden nuttige gegevens overbrengen.
In een wereld waarin VR (Virtual Reality) en AR (Augmented Reality) de toekomst zijn, kun je het potentieel zien van het integreren van animaties in de structuur van pictogrammen.
In termen van complexiteit kan de stijl moeilijk te beheersen zijn, omdat je ze niet alleen ontwerpt, maar ook de tijd neemt om ze volledig tot leven te brengen, wat moeilijk kan zijn als je niet precies weet wat je via hen wilt uitdrukken..
Geanimeerde iconen door Dave ChenellVoordat we het afronden, wil ik elke ontwerper die deelnam aan het onderzoek en vooral ToastyTech bedanken voor het leveren van de afbeeldingen van de besturingssystemen..
Dat gezegd hebbende, ik hoop dat je het leuk vond om door de geschiedenis te gaan van wat we pictogrammen noemen en iets nieuws en boeiends ontdekt.
Als u meer wilt weten over pictogrammen, raad ik u ten sterkste aan enkele van de volgende artikelen te lezen, omdat ik er zeker van ben dat u nieuwe en nuttige tips zult vinden.