Design af illustrationer til små skærme

Da jeg interviewede med Lyft, var en af ​​de sidste ting, de spurgte, “Er du sikker på, at du bliver glad? Jeg har set dit arbejde, og det er detaljeret som lort. Vi arbejder på telefoner. Har du nogensinde _tænkt over, hvor lille en telefonskærm er? ”

Jeg lo, satte pris på stemningen og accepterede jobbet dobbelt så hårdt - med en selvtilfredse dont-you-worry-about-me-I-can-draw-hvor som helst * pakket i enhver signatur.

Y'all.

Det er svært at illustrere til små skærme.

Den første ting, jeg gjorde, var at forsøge at se efter mine egne blindspots - jeg ved, hvordan man illustrerer for produkter, og Lyft-mærket er dybest set mit brand (flere biler, mindre rum, for nu) - men mobile enheder som den primære platform, dette er ikke-kortlagt territorium. KIDDING. Jeg troede helt, at jeg kunne finde ud af det med brute kraft og en generel ting-normalt-arbejde-ud-for-mig holdning. MEN den anden ting, jeg gjorde, var at forsøge at kigge efter mine egne blindspots, skurede internettet for at få tip til illustrering til små skærme. Og så den tredje, fjerde og tiende ting, jeg gjorde, var at skure internettet efter forslag til illustrering til små skærme.

Fra hvad jeg kan fortælle, har ingen skrevet det endnu (selvom jeg håber, at du vil kalde mig for at gå glip af en skinnende, fantastisk ressource, som åh, min dårlige, men også: endelig). Og fordi produktiviteten laver lister over ting, du allerede har gjort, så du kan krydse dem væk: her er hvad jeg har lært i de sidste 3-måneders måneder med at arbejde på Lyft-illustrationsstilen.

Lad os starte med en bil (duh).

Hvad vi kan lære af ikondesign

Okay, så jeg ved ikke, hvordan jeg illustrerer til små skærme tilsyneladende, men jeg ved hvordan man laver brysterne ud af et ikon. Der er et par grundlæggende principper, der gælder både for illustration og ikondesign.

Brug universelle betydninger

Ved ikondesign er brugen af ​​universel betydning at tildele symboler til interaktioner, der faktisk giver mening for alle (og ikke kun mennesker inden for 100 m af siliciumdalen) på trods af vidt forskellige baggrunde / kulturer for at skabe et mere tilgængeligt, intuitivt produkt. For at illustrere bruger universelle betydninger den samme forståelse - at symboler og metaforer ikke altid krydser kulturer - men med forventning om, at brugeren vil bremse og forsøge at læse illustrationen inden for rammerne af dit produkt, snarere end blot accepter det som symbolik.

Så ligesom der er masser af mennesker, der er faktiske voksne nu, som ikke kan huske, at de flippede gennem stabler af disketter for at trække en beat up-kopi af Lemmings for hundrede gang, men de ved, at disketteikonet betyder at gemme . En illustration af en diskettedisk er det dog? hvorfor farvet du gemte ikonet? Mens princippet er det samme, ændres abstraktionsniveauet, når du går fra ikon til illustration. Ikoner er symboler; illustrationer er scener. Begge findes i produktet for at hjælpe dig med at bevæge dig hurtigt og forstå produktet bedre. Begge vil kun bremse dig, hvis du prøver at indføre nye betydninger.

Kontekstsager

Vi giver ikonetiketter, fordi vi vil tilføje kontekst; at lære brugeren, hvad dette ikon betyder for os (så vi kan bruge det uden etiketten senere (læs: når vi er berømt)). Illustrationer har allerede sammenhæng. De findes i kombination med UI og kopi, som en del af et produkt, som brugeren allerede forstår. Vi tegner biler (... og hjul og sæder og veje ...) på Lyft, fordi, ja, vi har meget at sige om biler - men også fordi brugeren allerede er klar til at forvente og genkende biler. Som, ja, hvis vi tegner en kartoffel, vil de til sidst finde ud af, hvad det er, men det kræver ekstra signaler og mere detaljer for at sige ja, du så det rigtigt, vi tegner faktisk en kartoffel. Brugeren er allerede halvvejs der, når du holder illustrationer inden for produktdomænet, og vil være hurtigere til at genkende objekter / handlinger, selv når du reducerer detaljeringsniveauet nok til at imødekomme det teknisk betegnede: latterligt små telefonstørrelseskrav.

Vælg Clear over Clever

Når du arbejder i små størrelser, skal du tænke i arketyper, ikke smarte fortolkninger. Okay, det er lidt sjovt at placere en egentlig hamburger i stedet for hamburgermenuikonet, som vi alle kender og afskyr, men også: ikke. Brug zeitgeist til din fordel og vælg bare de ting, vi allerede ved.

Så ligesom, ja, min halve jeep, halv SUV, halvt IDK-jeg-kan ikke-virkelig-fortælle-biler-bortset fra-jeg-bare-tilføjet-ting-jeg-kunne lide ser cool ud og jeg er temmelig sikker på at alle slags super jeep findes teknisk (endda nogle med snorkler), men vi sigter mod, hvad den gennemsnitlige person tænker på, når de beskriver en moderne jeep, gemme de kreative friheder til reklametavlerne.

Hvad vi kan lære af typedesign

Der er ikke mange ressourcer om at illustrere til små skærme, men der er et faktisk lort-ton skrevet om at skabe læselig type. Og hvad har jeg sagt hele denne tid, hvis ikke, at illustrationer skulle være læsbare?

Forenkle (mere end du vil)

AKA serifs skaber bare støj under 10pt; kontrast mellem tykke / tynde tabt under 10pt

Du vidste det her, ikke? Det ville stadig være underligt, hvis jeg ikke sagde det. Vi fjerner serier for læsbarhed i små størrelser. Vi fjerner detaljer til læsbarhed i små størrelser. Intet fint foret. Intet lav kontrast. Intet tæt på hinanden. Spring over de seje asymmetriske detaljer, de ser alligevel bare ud som en fejl. Se efter elementerne i din illustration, der faktisk hjælper dig med at identificere den og den retning, den vender mod. Disse dørhåndtag ser ligesom ud, men ingen er på udkig efter dørhåndtag for at fortælle en bil fra en kartoffel. Du behøver ikke at fjerne alt, du kan bare ikke inkludere alt.

Silhuetter er alt

AKA titel sag er mere læselig end alle cap

Vi læser ordene, ikke de enkelte bogstaver; vi læser objekternes former, ikke detaljerne indeni. I type skal hvert bogstav være tydeligt nok til at blive fortalt fra hinanden, men ikke så tydeligt, at det distraherer fra det komplette ord. Som illustration skal hver detalje være adskilt nok til at være dets eget identificerbare objekt, men ikke så tydeligt, at det bliver omdrejningspunktet. Overvej både den overordnede form på illustrationen og formen på hver af dets komponenter. Udvid kanterne på hver af komponenterne for at indikere, hvor et nyt objekt begynder.

Må ikke gøre det, der er indeholdt i en cirkel ting, i det mindste i små størrelser, fordi: silhuetter

Overdriv alt

AKA-udvidede brevformularer og åbne tællere øger læsbarheden

Okay, så alt hvad du lige har gjort, gør det mere. Udvid kanterne på alle dine silhuetter, øg mellemrummet mellem hvert af elementerne. Så meget, at det ser lidt stumt ud, når du skalerer det op. I type kører vi med detaljerne - stræk i, klem m, træk hver stigning / fald ned, som vi kan finde - for at hjælpe dig med at genkende bogstavernes form på afstand. Som illustration går vi efter kanterne og proportioner. Fokuser på at skalere de objekter, der bedst hjælper os med at identificere illustrationen, og de skabende kanter for at indikere, hvor de begynder. De to hjul gør meget hellere at sige Jeep end tagstativet nogensinde vil, så de kan tage halve bilen op for alt, hvad jeg holder af.

Lys for at blive større; Mørkt for at blive mindre

AKA-omvendt type reducerer læsbarheden

Mørke farver trækker sig tilbage; lyse farver kommer frem. I type betyder det, at hvid tekst ser tungere ud. Vi imødekommer dette ved at bruge en lettere vægt eller give bogstaverne åndedrætsværelse med større kerning / førende. Som illustration skaber det et værktøj til finjustering af hierarkiet eller til at fjerne nogle af elementerne.

Det vil sige, hvis jeg vil have, at vinduerne skal føles lidt større, eller måske refleksen føles lidt for tæt på hjulene, når vi skalerer det ned, kan vi løse det med farve.

At få det til at arbejde IRL

Når du arbejder med et hvilket som helst produkt, vil du altid kæmpe med at beslutte, hvad der faktisk har brug for en illustration; og føle sig hjemme i et ellers utilitaristisk produkt. Når du arbejder på små skærme - med så mange ting at sige; og så mange ting, der skal tappes; og folk, der holder deres telefoner langt væk fra deres ansigter, end du troede - problemerne er bare forstørret. Sådan som da jeg en gang spurgte min fysioterapeut, om jeg skulle have nogen problemer på lang sigt, han var som "ja, det vil kun intensivere de problemer, du allerede har” Og jeg var som hvilke problemer?

Bliv hensynsløs: Har det virkelig brug for en illustration? (sikkert ikke)

Hey, lyt, (produkt) illustrations nummer en fan her. Jeg ville bestemt med sikkerhed være slingin-burgere, hvis du ikke lade mig trække på dine telefoner hele dagen. Men somme tider føler jeg, at jeg skylder produktdesign undskyldning. Jeg ved, at jeg snakede dig om at bruge illustration. Som, hey lyt til meg: illustration er sejt! .. men jeg mente ikke, at du skulle bruge det på Every. Enkelt. Screen.

Når du ikke bruger illustration til at løse et faktisk problem - forstærke / genfortolke kopi, oprette stenografi / analysere tekst, forklare nye funktioner, ect - det føles bare tvunget. Hvis du konstant forsøger at proppe i en anden illustration, bliver den tilgængelige plads til en illustration konstant mindre, mens forventningerne til illustrationen om at fange flere vokser. Virkningen af ​​alle illustrationer mindskes med hver efterfølgende unødvendig illustration, der lærer brugeren, at de kan (og bør) ignoreres. Lad i stedet indholdet - ikonografi, navigation og kopi - føre vejen, og brug illustration mere sparsomt med et mere spidst formål. Lad kopien først tage plads, og vent på din tur til at bruge illustrationen i den mere langvarige forklaring, når du er sikker på, at brugeren leder efter lidt ekstra hjælp.

Ikoner og illustrationer i glidende skala

Jeg har altid haft svært ved at beslutte, hvilke ikoner der skal leve med. En del af systemet eller en del af indholdet? Inspireret af typen eller af illustrationer? Børn til fraskilte forældre, de kan helt sikkert krydse grænsen i helligdage og weekender, men vi er nødt til at finde ud af, hvilken skole de skal lægge dem i, ved du? Når du arbejder på store skærme, sætter jeg dem med type. Med plads nok til konsekvent at bruge etiketter og store tekstblokke, der bruger ikoner til at hjælpe med at analysere det - er det sikkert at antage, at ikonerne oftere lever langs sidetekst i lignende størrelser. I mellemtiden kan illustration optage som hele skærmen. Når du arbejder på små skærme, er illustrationerne imidlertid, gætte du på det: lille. Og faktisk er ikonerne ganske store, for ikoner alligevel (de er mere til at tappe, ikke at analysere, og folk kan bare ikke se deres telefonskærme så godt, som det viser sig). Hvad jeg prøver at sige her er det tid til at skifte skole. Illustrationer, der designes til web, står alene som et unikt indhold og falder pænt i lille / mellemstor / stor og nærmer sig sjældent størrelsen eller konteksten af ​​et ikon. Designet til mobil lever ikonerne og illustrationer ofte i den samme størrelse beholder og skifter kun afhængigt af strømningens behov. Oprettelse af en illustrationsstil, der flyder jævnt fra ikon til illustration og tilbage igen, hjælper med at forsikre det, der nogensinde er billeder, du bruger i det begrænsede rum, føles som om det var designet til at være der.

Som flubber: strækbar, sammenfoldelig, meget viskøs

Ja. Jeg har set flubber igen for at skrive dette. Hvad? Når du arbejder på små skærme, er størrelsesbegrænsninger VIRKELIG. Ideelt set ville du samarbejde med designerne om at vælge den bedste måde at inkludere illustrationer på; realistisk får du sjældent første valg. De pladser, der er tildelt til illustration, er generelt forudbestemt og er ofte meget lodret eller vandret begrænset. Når du husker dette, når du lægger byggestenene til din illustrationsstil, og designe den til let at vokse til at passe til enhver beholder (og ikke blive begrænset af mere realistiske menneskelige proportioner) sætter du op til succes i små størrelser.

Jeg hader at skrive konklusioner. Håber dette hjælper! ️ Jeg gentager bare ting, jeg allerede sagde alligevel, og hvem har tid til det?

PS. Vi ansætter senior produkt- og systemdesignere. Slå mig op.

* Jeg kan ikke, fordi jeg bliver bedt om at tegne uden en wacom-tablet gør mig synlig kvalm