Share
Dit artikel is de derde in een driedelige serie die de nieuwe benaderingen van de iconografie toont die Iconic zal leveren. Als je het leuk vindt wat je in dit artikel ziet, overweeg dan om iconisch op Kickstarter te steunen
Gesponsorde inhoudDeze inhoud is gemaakt in opdracht van Iconic en is geschreven en / of bewerkt door het Tuts + -team. Ons doel met gesponsorde inhoud is het publiceren van relevante en objectieve zelfstudies, casestudy's en inspirerende interviews die echte educatieve waarde bieden aan onze lezers en ons in staat stellen om het creëren van bruikbare inhoud te financieren..
Responsieve iconografie is de benadering om iconen van gepaste getrouwheid weer te geven op basis van de weergavegrootte van een pictogram om optimale leesbaarheid te garanderen.
De inhoud die we maken, wordt in meer permutaties dan ooit bekeken. Apparaat, schermdichtheid, resolutie, platform, browser. Zoveel variabelen, die allemaal (in verschillende mate) van invloed zijn op de leesbaarheid van onze inhoud. Vooral pictogrammen kunnen behoorlijk gevoelig zijn voor de grootte waarin ze worden weergegeven.
De hoofdrichtlijn van een pictogram moet worden begrepen. Daartoe moet de leesbaarheid van een pictogram worden gegarandeerd wanneer deze wordt weergegeven. Er zijn manieren om pictogrammen te ontwerpen voor meer leesbaarheid, vooral bij kleinere formaten. Ontwerpen op deze manier kan vaak ten koste gaan van esthetiek - of op zijn minst esthetische opties.
Esthetiek speelt ook een vitale rol in de iconografie. Helaas kunnen leesbaarheid en esthetiek vaak tegengestelde krachten zijn. Het ontwerp van een pictogram heeft meestal een optimale grootte waar de leesbaarheid en esthetiek goed in balans zijn. Zeer weinig of geen pictogrammen kunnen bij elke maat een perfecte balans tussen leesbaarheid en esthetiek bereiken. Dus als we willen dat onze pictogrammen leesbaar zijn en aantrekkelijk over een groot bereik, vereist het meerdere versies van pictogrammen die zijn geoptimaliseerd voor specifieke groottebereiken.
Dit idee is niet nieuw. Deze aanpak was normaal voor rasterpictogrammen. Met de doordringing van vectorafbeeldingen op het web, hebben wij als pictogramontwerpers de schaalbaarheid voor leesbaarheid verwaarloosd. Dus wat maakt Iconic's deze oude aanpak uniek? Iconic verzendt met drie formaten van elk pictogram en het wordt geleverd met code voor de pictogrammen om automatisch de optimaal leesbare versie van elk pictogram te bieden.
Er zijn twee eenvoudige manieren om pictogrammen aan te passen. Men speelt op aanname, de ander is nauwkeuriger. De ene is eenvoudig, de andere complexer. De eenvoudige benadering maakt gebruik van mediaquery's om pictogrammen op specifieke schermbreedten aan te passen. Deze kan werk omdat de inhoud van de afbeelding vaak kleiner wordt in verhouding tot de schermgrootte, wat betekent dat een pictogram op een desktopscherm waarschijnlijk op een groter formaat wordt ingesteld dan op een mobiel scherm. Kan zijn.
De rechts manier om dit te doen, is door de responsieve functionaliteit van een pictogram toe te passen op elementniveau. Dit betekent dat het juiste pictogram wordt weergegeven op basis van de afmetingen van het pictogram, niet van het scherm. De beste benadering is dat pictogrammen zich bewust zijn van hun afmetingen en eenvoudig overschakelen naar de meest geschikte leesbare / esthetische versie. Dit wordt een beetje complexer ...
Dus, hoe kunnen we dit doen?
Notitie: De onderstaande voorbeelden zijn nog steeds prototypes van het 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.
Er zijn een paar manieren waarop we op dit punt responsieve iconografie aanpakken en de 'laatste' richtingen zijn nog steeds in de lucht. We zullen drie verschillende manieren delen waarop we op dit moment over de techniek denken.
Ten eerste de eenvoudigste benadering. SVG is altijd de kern geweest van Iconic, maar je vergeet gemakkelijk dat Iconic een van de eerste sets was die ook als weblettertype werd verzonden. Het blijkt dat weblettertypen werken enorm goed voor responsieve iconografie. De reden waarom weblettertypen goed werken voor responsieve iconografie is dat alle pictogrammen aan een enkel lettertype worden toegevoegd. Dit maakt het mogelijk dat groottebereiken worden behandeld als een ander gewicht (bijvoorbeeld Iconic-Large.otf, Iconic-Medium.otf, Iconic-Small.otf). Elk pictogram op het scherm kan eenvoudig worden gewijzigd door de lettertype dikte voor het web-lettertype. In de onderstaande demo reageren de pictogrammen op de schermbreedte.
Zie demo Zoals eerder vermeld, is het aanpassen van pictogrammen op basis van schermbreedte niet de beste manier om de leesbaarheid te garanderen. Pictogrammen moeten reageren op hun eigen schermafmetingen. Helaas hebben we nog niet de mogelijkheid om elementquery's binnen CSS te maken. Het goede nieuws is dat mensen hier over nadenken en workarounds maken. De onderstaande demo gebruikt elementqueries en weblettertypen voor een dynamisch aanpassend pictogram op basis van de schermgrootte.
In deze ruimte is heel goed nagedacht, met name van Andreas Bovens die al geruime tijd praat over SVG-onderbrekingspunten. Deze benadering is gebaseerd op het feit dat mediaquery's binnen een SVG-bestand waarnaar wordt verwezen als een img, embed of voorwerp gebruik de schermafmetingen van de SVG. Dat betekent een mediaquery van min-width: 400px binnen de SVG zou activeren als de afbeelding 400 pixels of meer was, ongeacht de schermbreedte. Onderstaande demo laat zien dat functionaliteit in actie is.
Er is momenteel een probleem met deze aanpak. Die interne breekpunten werken niet meer als het SVG-bestand in DOM wordt geïnjecteerd. SVG DOM-injectie is essentieel voor andere functies van Iconic, dus dit zal iets zijn dat we in de nabije toekomst moeten uitzoeken.
Een onleesbaar pictogram mislukt in zijn belangrijkste taak. We moeten stoppen met het denken aan vectorafbeeldingen als de allesoverheersende factor voor de leesbaarheid van pictogrammen. We moeten pictogrammen ontwerpen die geschikt zijn voor verschillende groottebereiken en we hebben hulpmiddelen nodig die pictogrammen op de juiste getrouwheid weergeven op basis van hun weergavegrootte. Geen van de huidige meningen is perfect. Maar ze zijn een stap vooruit in de goede richting.
Het doel van Iconic is om nieuwe benaderingen van iconografie te helpen bieden.
Overweeg steun aan iconic op Kickstarter
Accentsconagua