Share
Denne artikkelen er den tredje i en tredelerserie som viser de nye tilnærmingene til ikonografi Ikonisk vil levere. Hvis du liker det du ser i denne artikkelen, kan du vurdere å støtte ikonisk på Kickstarter
Sponset innholdDette innholdet ble bestilt av Iconic og ble skrevet og / eller redigert av Tuts + -laget. Vårt mål med sponset innhold er å publisere relevante og objektive opplæringsprogrammer, casestudier og inspirerende intervjuer som gir ekte pedagogisk verdi til våre lesere og gjør det mulig for oss å finansiere etableringen av mer nyttig innhold.
Responsive iconography er tilnærmingen til å vise ikoner av passende troskap basert på et ikons displaystørrelse for å sikre optimal lesbarhet.
Innholdet vi lager, vises i flere permutasjoner enn noensinne. Enhet, skjerm tetthet, oppløsning, plattform, nettleser. Så mange variabler som alle har innflytelse (i varierende grad) på innholdets lesbarhet. Spesielt ikoner kan være ganske følsomme for størrelsen de vises i.
Hoveddirektivet for et ikon skal forstås. Til dette formål må et ikons lesbarhet sikres når det vises. Det er måter å designe ikoner for større lesbarhet - spesielt i mindre størrelser. Design på denne måten kan ofte komme på bekostning av estetikk - eller minst estetiske muligheter.
Estetikk spiller også en viktig rolle i ikonografi. Dessverre kan lesbarhet og estetikk ofte være motstridende krefter. Et ikons design har vanligvis en optimal størrelse hvor lesbarhet og estetikk er godt balansert. Meget få, hvis noen, ikoner kan finne en perfekt balanse mellom lesbarhet og estetikk i alle størrelser. Så hvis vi vil at våre ikoner skal være lesbare og attraktivt over et bredt størrelsesområde, krever det flere versjoner av ikoner som er optimalisert for bestemte størrelsesområder.
Denne ideen er ikke ny. Denne tilnærmingen pleide å være vanlig for rasterikoner. Med gjennomsiktigheten av vektorbilder på nettet, feiler vi som ikondesignere feilbarbarhet for lesbarhet. Så hva gjør Iconic's ta på denne gamle tilnærmingen unik? Ikonisk er frakt med tre størrelser på hvert ikon og Den leveres med kode for ikonene for å gi den optimal lesbare versjonen av hvert ikon automatisk.
Det er to grunnleggende måter å justere ikoner på. En spiller på antagelse, den andre er mer nøyaktig. Den ene er enkel, den andre mer kompleks. Den enkle tilnærmingen bruker medieforespørsler til å justere ikoner ved bestemte skjermbredder. Dette kan arbeid siden innholdsstørrelsen ofte skaleres ned i forhold til skjermstørrelsen - noe som betyr at et ikon som vises på en desktop skjerm sannsynligvis vil bli satt til en større størrelse enn på en mobil skjerm. Kan være.
De Ikke sant En måte å gjøre dette på er å bruke et ikons responsive funksjonalitet på elementnivået, noe som betyr at riktig ikon vises på grunn av ikonets dimensjoner, ikke skjermens dimensjoner. Den beste tilnærmingen er at ikonene skal være oppmerksomme på deres dimensjoner og bare bytte til den mest hensiktsmessige lesbare / estetiske versjonen. Dette slutter å være litt mer komplisert ...
Så, hvordan kan vi gjøre dette?
Merk: Eksemplene nedenfor er fremdeles prototyper med bevis for konsept. Ingen av følgende kode er endelig, enn mindre beta. Vi er fortsatt i FoU-fasen av denne tilnærmingen, og vi vet at det er mange problemer som fortsatt må tas opp. Vi vil jobbe mer konkret for denne metoden etter at kampanjen Kickstarter er fullført.
Det er noen måter vi takler responsiv ikonografi på nå, og "siste" retninger er fortsatt oppe i luften. Vi deler tre forskjellige måter vi tenker på teknikken for øyeblikket.
Først, den enkleste tilnærmingen. SVG har alltid vært kjernen i ikonisk, men det er lett å glemme at ikonisk var et av de første settene som også skulle sendes som en web skrifttype. Som det viser seg, fungerer webfonter enormt vel for responsiv ikonografi. Grunnen til at webfonter fungerer bra for responsiv ikonografi er at alle ikoner legges til i en enkelt skrift. Dette tillater størrelsesintervallene å bli behandlet som en annen vekt (for eksempel ikonisk-stor.otf, ikonisk-medium.otf, ikonisk-liten.otf). Hvert ikon på skjermen kan endres ved å endre font-vekt for webfonten. I demonstrasjonen nedenfor svarer ikonene på skjermbredden.
Se demo Som tidligere nevnt er justering av ikoner basert på skjermbredde ikke den beste tilnærmingen for å sikre lesbarhet. Ikoner må svare på sine egne displaydimensjoner. Dessverre har vi ennå ikke muligheten til å lage elementspørsmål innen CSS. Den gode nyheten er at folk tenker på dette og skaper løsninger. Demoen nedenfor bruker elementspørsmål og webfonter for et dynamisk justeringsikon basert på skjermstørrelsen.
Det har vært noe bra å tenke på i dette rommet, spesielt fra Andreas Bovens, som har snakket om SVG-bryterpunkter for en stund nå. Denne tilnærmingen er avhengig av at media spørringer i en SVG-fil referert til som en img, embed eller gjenstand bruk skjermdimensjonene til SVG. Betyr en medieforespørsel av en minstebredde på: 400 piksler innen SVG ville utløse hvis bildet var 400 piksler eller mer - uansett skjermbredde. Demoen nedenfor viser at funksjonalitet i aksjon.
Det er for øyeblikket et problem med denne tilnærmingen. Disse interne bruddpunktene virker ikke lenger når SVG-filen injiseres i DOM. SVG DOM-injeksjon er viktig for andre funksjoner i Iconic, så dette vil være noe vi må finne ut i nær fremtid.
Et uleselig ikon mislykkes i sin viktigste plikt. Vi må slutte å tenke på vektorgrafik som fangst-alt for ikonlesbarhet. Vi må designe ikoner som imøtekommer forskjellige størrelsesområder, og vi trenger verktøy som viser ikoner med riktig fidelity basert på skjermstørrelsen. Ingen av dagens meninger er perfekte. Men de er et skritt fremover i riktig retning.
Målet med Iconic er å bidra til å gi nye tilnærminger til ikonografi.
Vær så snill å vurdere Backing Iconic på Kickstarter
Accentsconagua