Share
Dit artikel is de tweede in een driedelige serie die de nieuwe benaderingen van iconografie toont die Iconic zal leveren.
Slimme pictogrammen hebben veel belangstelling gekregen, maar styling is misschien wel de handigste functie van dag tot dag. Icon sets beslaan een breed scala aan verschillende onderwerpen, maar worden weergegeven in een enkele visuele stijl. Dat is vaak geschikt, zo niet optimaal. Er zijn echter veel situaties waarin specifieke pictogrammen een specifieke stijl kunnen en moeten hebben (of het nu gaat om kleur, lijnbreedte of andere kenmerken).
Stylen was geen mogelijkheid met statische afbeeldingen (tenzij u bestanden uitvoert voor elke specifieke esthetiek). Pictogramlettertypen hebben ons dichterbij gebracht door een eenvoudige vormgeving toe te staan, maar deze was niet korrelig, wat betekent dat als u het pictogram rood kleurde, de geheel pictogram zou rood zijn. Met SVG bestaat de vrijheid om individuele elementen binnen een pictogram te stijlen, wat geheel nieuwe mogelijkheden opent.
De combinatie van SVG en CSS is magisch. Imagery kan geheel andere looks aannemen, op maat gemaakte behandelingen en interessante interactieve overgangen hebben. SVG-markup biedt toegang tot en controle over alle elementen die het bevat. Dit betekent dat een gloeilampje kan worden "verlicht" met CSS, het contrastpictogram kan worden gestileerd om a weer te geven specifiek contrast en een stoplichtpictogram kunnen communiceren Gaan. In staat zijn om op elementair niveau te stijlen, brengt iconen nieuw leven in - ze kunnen waar zijn uniek.
De volgende logische stap van het stylen van pictogrammen met CSS is het maken van set-brede thema's voor een consistente esthetiek. Een deel van onze focus voor Iconic is het blootleggen en aanpakken van de uitdagingen rondom pictogram-thema's. Normaal gesproken was het stylen van een set pictogrammen (afgezien van het eenvoudig veranderen van de kleur) een moeizame taak die afhing van het hebben van de bronvectorbestanden. Heb je ze niet? Nou, je hebt pech.
SVG-pictogrammen kunnen dit probleem oplossen. Ik zeg "kan", omdat het consequent structureren van een hele verzameling SVG-pictogrammen moeilijk is. De pictogrammen moeten worden ontworpen en gebouwd met het thema voor ogen dat de stijlen consistent zijn over de hele set. Wanneer het werkt, is het echter geweldig om te zien.
We hebben een demo samengesteld om pictogramthema's in actie weer te geven. Het laat zien hoeveel er precies kan worden gedaan als CSS-regels worden toegepast op een hele icon set.
Speel met onze demo met pictogramthema's.
Iconstyling kan veel verder gaan dan alleen willekeurige kleurveranderingen. Deze benadering geeft ons de mogelijkheid om een andere waardevolle informatielaag te bieden.
Denk aan alle pictogrammen die u ziet in een interface met contextuele informatie. Denk aan het penseel of vul de pictogrammen in verschillende toepassingen die aangeven welke kleur u wilt tekenen of opvullen. SVG-pictogrammen die zijn ontworpen om te worden gestileerd, kunnen dat ook.
Staat communiceren binnen een pictogram is vaak net zo eenvoudig als het gebruik van kleur. Dit kan al worden bereikt met pictogramlettertypen, maar wat als u verder wilde gaan dan een eenvoudige kleurenschakelaar? Dit is weer een perfecte use-case voor SVG & CSS. Laten we bijvoorbeeld eens kijken naar het WIFI-signaalpictogram.
Notitie: Het onderstaande voorbeeld is nog steeds een proof-of-concept-prototype. Geen van de volgende code is definitief, laat staan bèta. We zijn nog steeds in de R & D-fase van deze aanpak en we weten dat er nog veel zaken zijn die nog moeten worden aangepakt. We zullen werken aan een meer concrete richting voor deze methode nadat de Kickstarter-campagne is voltooid.
De werking van stylingpictogrammen is vrij eenvoudig. Als je in het verleden CSS hebt gebruikt (waarvan we aannemen dat je die hebt), is er weinig te leren. Dat maakt deel uit van wat deze methode zo geweldig maakt - het is verbazingwekkend krachtig met behulp van de vaardigheden en hulpmiddelen die je al kent. SVG-styling heeft een geheel unieke set CSS-regels die u moet leren, maar de concepten zijn eenvoudig en vergen minimale inspanningen om op te halen.
Het echte werk komt van het ontwerpen en bouwen van een pictogram om echt te zijn style-staat. Net als bij Slimme pictogrammen is deze methode afhankelijk van de SVG die rechtstreeks in de DOM wordt geïnjecteerd en die semantisch is gestructureerd voor styling. Dit gaat veel verder dan alleen het toevoegen van klassen aan elk element in uw SVG-pictogram (maar dat doet geen pijn). Een pictogram voor het stylen vullen is nog steeds een beetje een kunstvorm. We zijn er vrij zeker van dat er een wetenschap is en we hopen in de toekomst meer over het proces te schrijven. Ons doel met Iconic is om dit proces duidelijk en reproduceerbaar te maken, zodat andere icoonontwerpers hun iconen stijlvol kunnen maken.
Laten we het voorbeeld nemen van het stylen van het WIFI-signaalpictogram om de verschillende toestanden weer te geven. Je zult snel zien hoe benaderbaar het is.
Bekijk de code in actie
HTML
JS
$ ( 'Svg-inject') svgInject (.);
CSS
/ * Sterk signaal * / .iconic-signal.iconic-signal-strong .iconic-signal-base fill: # 569e26; .iconic-signal.iconic-signal-strong .iconic-signal-wave * stroke: # 569e26; / * Medium signaal * / .iconic-signal.iconic-signal-medium .iconic-signal-base fill: # efc411; .iconic-signal.iconic-signal-medium .iconic-signal-wave * stroke: # efc411; .iconic-signal.iconic-signal-medium .iconic-signal-wave-outer onacity: .3; stroke-width: 0,5; / * Zwak signaal * / .iconic-signal.iconic-signal-weak .iconic-signal-base fill: # b52808; .iconic-signal.iconic-signal-weak .iconic-signal-wave * stroke: # b52808; .iconic-signal.iconic-signal-weak .iconic-signal-wave-outer, .iconic-signal.iconic-signal-weak .iconic-signal-wave-middle onacity: .3; stroke-width: 0,5; / * Geen signaal * / .iconic-signal.iconic-signaal-none .iconic-signal-base fill: # 848484; .iconic-signal.iconic-signal-none .iconic-signal-wave * stroke: # 848484; ondoorzichtigheid: 0,3; stroke-width: 0,5;
SVG: signal.svg
Niet slecht, toch? Zodra een SVG-pictogram goed is ingesteld om te worden gestileerd, is de rest bergafwaarts!
Zoals je kunt zien, kun je het doen veel met SVG en CSS, maar er zijn nog steeds enkele beperkingen. Een van de belangrijkste problemen die we tegenkomen is de uitlijning van de lijnen. Alle lijnen in SVG 1.1 zijn in het midden uitgelijnd, wat betekent dat de lijn gelijkmatig verdeeld wordt over elke zijde van het pad. We denken niet dat dit optimaal is voor het pictogramontwerp om verschillende redenen, zoals mogelijk knippen bij verhoogde slaggewichten en een complexer tekenproces om in het midden uitgelijnde lijnen te verwerken.
Gelukkig is dit opgelost in SVG 2.0-streken kan nu midden, binnen en buiten worden uitgelijnd. helaas, het lijkt erop dat SVG 2.0 nog steeds een uitweg is. Onze hoop is dat Iconic meer belangstelling voor SVG zal genereren en meer zal aanmoedigen versnelde werkwijze.
Icoonstyling is een beetje over het hoofd gezien in Iconic, maar we denken dat het een enorm krachtige techniek is. We geloven echt dat dit een enorme impact zal hebben op de manier waarop mensen pictogrammen gebruiken in de toekomst. Het mooie van deze techniek is dat de technologie al breed wordt ondersteund - het enige dat u nodig hebt, zijn pictogrammen waarmee u kunt profiteren.
Het doel van Iconic is om nieuwe benaderingen van iconografie te helpen bieden. We hebben nog veel om met u te delen en kijken ernaar uit om onze volgende aflevering te delen.
Overweeg steun aan iconic op Kickstarter
Accentsconagua
