Share
Iconografie is tegenwoordig een integraal onderdeel van elk UI-ontwerpproject. Iconen hebben de mogelijkheid om ideeën, functies en betekenissen in een gemeenschappelijke beeldtaal over te brengen. Laten we eens kijken naar de hoeveelheid werk die gaat naar het maken van een icon set, evenals de logische fasen om te volgen bij het doen.
Voor de toepassing van dit artikel werken we met een pictogramreeks die ik onlangs heb ontworpen, Uicons genaamd.
De webdesign-community houdt van geweldige bronnen. Open source of niet, ze maken ons leven als ontwerpers zoveel gemakkelijker. Voordat u begint met het maken van een eigen pictogram, is het een goed idee om te zien of er al een is die aan uw behoeften voldoet.
Dus stap één is om bestaande pictogrammensets te controleren; je zou jezelf tijd en energie kunnen besparen door niet te herscheppen wat er al is.
Plaatsing gaat over het verschilpunt tussen uw voorgestelde pictogrammenset en een van de duizend bestaande pictogrammensets die er al zijn. Dit komt echt voort uit onze onderzoeksfase; zonder te weten wat al beschikbaar is, hoe weet u of er vraag naar of behoefte aan is?
De keuze van de iconen is enorm en je zult moeten beslissen welke stijl je iconen zullen zijn. Of het nu mono-tone, full colour, muti-color, driedimensionaal, cartoon, realistisch, silhouetten, handgetekend of pixel is, kies een stijl en blijf erbij.
Voordat ik Uicons creëerde, vond ik een behoefte / wil voor meerlagige vectorpictogrammen die pixel perfect waren. Ik wilde een pictogrammenreeks die meer diepgang en detail had dan de meeste bestaande monopictogramsets die werden aangeboden, zonder dat de pictogrammen met volledige kleuren moesten worden gebruikt.
Dus als je eenmaal een verschilpunt en een gekozen stijl hebt gevonden, is het tijd om door te gaan naar de planningsfase.
Bij planning gaat het er gewoon om te beslissen welke pictogrammen u in uw set wilt opnemen. U moet overwegen aan wie uw pictogrammenset een beroep zal doen en vervolgens een lijst maken (het best gedaan als een spreadsheet) op basis van die parameters.
Een goede tip is om uw lijst op te splitsen in subcategorieën zoals sociale media, bestandstypen, transport .etc. Naast het ordenen van dingen die je bestelt, zul je dit handig vinden tijdens de ontwerpfase. Als je de lijst afrondt, maak je je lijst met pictogrammen minder angstaanjagend..
De planningsfase is ook de perfecte tijd om te beslissen in welke maat of maten u uw pictogrammen zult aanbieden. Gemeenschappelijke dimensies zijn 16, 32 en 48 pixels, maar we beginnen steeds meer pictogramsets te zien die worden geleverd in schaalbare formaten zoals .CSH (Photoshop-vormbestand) en lettertype-indelingen. Meer over formaten later.
Tijdens de planningsfase is het goed om na te denken over het eerdere onderzoek dat je in fase één hebt gedaan. Er zijn honderden glyphs en pictogrammen die in aanmerking moeten worden genomen voor een complete set - je zult ze niet allemaal kunnen onthouden zonder een bepaald referentiemateriaal.
Wees hard voor jezelf tijdens de planningsfase. Wees niet bang om nee te zeggen tegen een idee of om de lijst te schrappen - het kan belachelijk snel uitblazen. Het maken van kwaliteitsiconen kost veel tijd en het maken van een set van 5000 (bijvoorbeeld) zal niet alleen voor altijd duren, het is moeilijk voor de eindgebruiker om te beheren.
Gedurende de 4 maanden die nodig waren om Uicons te creëren, merkte ik dat ik mezelf voortdurend afslachtte en aan de lijst toevoegde tot de release. Zelfs nu denk ik nog steeds na over welke iconen in de volgende release moeten worden opgenomen.
Je zou nu je lijst gevuld moeten hebben met ideeën voor je kick-ass iconen. Nu bent u klaar om aan de slag te gaan met ontwerpen.
Tijdens fase 2 en 3 besliste je over je pictogramstijl. Uw specifieke stijl heeft invloed op de toepassing of methode die u gebruikt om uw pictogrammen te maken.
In het geval van Uicons was ik schaalbare pictogrammen aan het maken (vectoren), die gebruikers konden verkleinen zonder kwaliteitsverlies. De meeste ontwerpers gebruiken Illustrator of andere vectorgrafiektoepassingen, maar een vectorprogramma kan uw leven moeilijk maken als u handgetekende pixelpictogrammen maakt. Kies de juiste app voor de taak.
Als ik nu 'inspiratie' zeg, bedoel ik niet 'plagiaat'. Maak het je eigen.
Pictogrammen zijn basisvormen die zijn gerangschikt om iets herkenbaar te maken. Het kan moeilijk zijn om al uw pictogrammen in te beelden en ze vanaf nul te visualiseren. Gelukkig heb je het onderzoek dat je deed in fase 1 en beschik je over een lijst met referentiepunten voor visuele inspiratie.
Het is goed om te spelen met alternatieve ontwerpideeën voor uw pictogrammen. Er zijn meerdere manieren om een winkel te vertegenwoordigen, om gereedschappen te vertegenwoordigen, om alles te vertegenwoordigen. Wees creatief. Behalve dat je een standaardpresentatie van het onderwerp van je icoon aanbiedt, probeer je ook een nieuw perspectief te bieden. Als elke pictogramontwerper dezelfde ideeën op dezelfde manier zou opleveren, zou de gebruikersinterface behoorlijk saai zijn.
Alleen omdat je iets hebt ontworpen, betekent nog niet dat het de laatste snit moet maken. Wees selectief over wat je uiteindelijk vrijgeeft aan het publiek. In het geval van Uicons is ongeveer 10% van de pictogrammen om de een of andere reden op de vloer van de uitsnijruimte achtergelaten.
De ontwerpfase is duidelijk de meest tijdrovende fase van het hele project, dus het is belangrijk om uithoudingsvermogen, blijvende kracht en consistentie te hebben.
Niet echt een toegewijde fase, maar een overdreven aanpak van je icon set. Op alle punten tijdens het ontwerpproces moet u er rekening mee houden dat uw pictogrammenset qua stijl en uiterlijk consistent moet zijn. Als je je niet al te veel zorgen maakt om consistentie tijdens het proces, dan zal continuïteit echt een speciale fase worden, terwijl je al je iconen aan het einde van de rit opnieuw bekijkt.
Slechte aandacht voor consistentie kan leiden tot ongelijke gewichten, verkeerde maten, verkeerde perspectieven of gewoon helemaal verkeerd. Na elk pictogram, ga een stapje terug en zie hoe het past bij degenen die je al hebt gemaakt - het kan gemakkelijk zijn om een vreemde eruit te pikken.
Mogelijk hebt u ervoor gekozen om uw pictogrammenset af te leveren in een vectorindeling zoals .EPS, .AI of .SVG. In dat geval hebt u een deel van het werk uit het proces verwijderd. Je kunt nog slimmer zijn en ervoor kiezen om je iconen vrij te geven als een lettertypebestand, of als een .CSH-bestand. Met elk van deze opties wordt een ervaren ontwerper zoals uw pictogrammenset nog meer. Het afdalen van deze weg kost wat meer moeite, omdat je je Illustrator-pictogrammen naar een ander formaat moet converteren, maar het extra werk levert enorme voordelen op.
Vanwege mijn verschilpunt bij het ontwerpen van Uicons, had ik in dit stadium een beetje meer werk voor de boeg. Mijn wens was om meerlagige vectorpictogrammen te maken die pixel perfect waren. Ik had het meerlaagse ding in Illustrator kunnen doen en liet ze zo voor mensen om te kopiëren en in Photoshop te plakken, maar ik wilde pixel-perfecte vectoren in een rasterprogramma.
Photoshop is geweldig. Dat wil zeggen, totdat u pictogrammen gaat maken. Photoshop staat om veel goede redenen afwijkingen op pixelbreedte toe. Je kunt een halve pixel of zelfs tweederde hebben als je wilt. Anti-aliasing zoals dit wordt genoemd, is geweldig voor lettertypen en bezier-curven, maar kan frustrerend werken als het gaat om het maken van pixel-perfecte pictogrammen.
Uicons vereiste het importeren van meerdere vectorvormen onafhankelijk van Illustrator in Photoshop, ze uit te lijnen, van grootte te veranderen en te stylen, en ze vervolgens te optimaliseren voor pixelperfectie door paden in stappen op te hogen met stappen om een eind te maken aan schone randen.
Gefeliciteerd met het maken van dit tot nu toe! Het is geen kleine taak om je eigen pictogrammenset te maken. Nu al het harde werk is gedaan, hoeft u alleen uw pictogrammen vrij te geven voor het publiek. Op dit punt hebt u besloten of u dit aanbiedt als een gratis pictogram dat is ingesteld voor de ontwerpgemeenschap of dat u een kleine vergoeding wilt voor de honderden uren die u hebt besteed aan het maken van uw killer-pictogramset.
Hoe dan ook, je hebt een podium nodig waarop mensen kunnen bekijken en downloaden. De gratis optie is het gemakkelijkst omdat je ze letterlijk naar een heleboel grafische bronsites en blogs kunt sturen om te publiceren, achterover kunt leunen en wachten op de complimenten..
Als u echter uw moordenaarsset wilt verkopen, heeft u meer werk voor de boeg. De eenvoudigste manier om ze te verkopen is om ze te hosten op een van de verschillende ontwerp-resource sites zoals GraphicRiver. Het downloaden en betalen wordt voor u geregeld en u heeft het voordeel van hun bestaande siteverkeer.
Als u meer proactief bent, is een andere optie om uw eigen website te maken om uw bescheiden geprijsde pictogrammen weer te geven en te downloaden. Als dit het geval is, zijn er geweldige opties om u te helpen de download- en betalingskant van dingen te regelen.
Met digitale bezorgservices als Fetch en Quixly is het supereenvoudig om uw pictogrammenset te verkopen door de bestellingen, de betalings- en betalingszijde van de dingen te verzorgen. U hoeft alleen een coole site te ontwerpen en te bouwen om uw werk weer te geven. Alle zware technische dingen worden geregeld.
Iconografie zoals elke visuele taal moet duidelijk en beknopt zijn. Wat je ook probeert te vertegenwoordigen met pictogrammen, houd het simpel en duidelijk en je kansen op universeel begrip zullen groter zijn.
Accentsconagua