Dizajn ilustracija za male ekrane

Kad sam razgovarao s Lyftom, jedna od posljednjih stvari koja su me pitali bilo je "Jeste li sigurni da ćete biti sretni? Vidio sam vaš rad i detaljan je kao sranje. Radimo na telefonima. Jeste li ikad razmišljali o tome koliko je mali ekran telefona? "

Nasmijao sam se, uvažio sam raspoloženje i prihvatio sam posao dvostruko teže - sa samozadovoljnim radom-zabrinutost-o-ja-mogu-crtati bilo gdje * upakiranim u svaki potpis.

Y'all.

Ilustrirati za male ekrane je teško.

Prvo što sam učinio bilo je pokušati potražiti vlastite rolete - znam kako to ilustrirati proizvodima, a robna marka Lyft u osnovi je moj brand (za sada više automobila, manje guzica) - ali mobilni uređaji su primarna platforma, ovo je neobilježen teritorij. Šalim. Totalno sam mislio da to mogu shvatiti grubom silom i općenitim stvarima - obično radim za mene. Ali drugo što sam učinio bilo je pokušavanje traženja vlastitih senka, pretraživao internet radi savjeta o ilustriranju za male ekrane. I tada je treća, četvrta i deseta stvar koju sam učinio preispitivanje interneta radi prijedloga ilustracije za male ekrane.

Koliko mogu reći, još to niko nije zapisao (premda se nekako nadam da ćete me nazvati zbog toga što sam propustio neki sjajan, fantastičan resurs, kao što je oh, moj loš, ali isto tako: konačno). Budući da produktivnost čini popise stvari koje ste već učinili, tako da ih možete prekrižiti: evo što sam naučio u posljednja tri mjeseca rada na stilu ilustracije Lyft.

Počnimo s automobilom (duh).

Što možemo naučiti iz dizajna ikona

U redu, pa ne znam kako prividno ilustrirati na malim ekranima, ali znam kako napraviti tits od ikone. Nekoliko je osnovnih načela koja se primjenjuju i na ilustraciju i na dizajn ikona.

Koristite univerzalna značenja

U dizajnu ikona upotreba univerzalnog značenja dodjeljuje simbole interakcijama koje zapravo imaju smisla za sve (a ne samo ljude unutar 100m silicijske doline), unatoč izrazito različitim pozadinama / kulturama, kako bi se stvorio pristupačniji, intuitivniji proizvod. Ilustracija, upotreba univerzalnih značenja koristi se istim razumijevanjem - da simboli i metafore ne uvijek prelaze kulture -, ali s očekivanjem da će korisnik usporiti i pokušati pročitati ilustraciju u kontekstu proizvoda, a ne jednostavno prihvatite to kao simboliku.

Dakle, kao da postoji tona ljudi koji su sada stvarni odrasli ljudi, koji se ne sjećaju da stotinu puta provlače hrpe disketa kako bi izvadili otpuštenu kopiju Lemmings-a, ali znaju da ikona diskete znači uštedu , Ilustracija diskete, međutim, wtf je to? zašto si obojio u ikoni za spremanje? Iako je princip isti, razina apstrakcije mijenja se kako se krećete od ikone do ilustracije. Ikone su simboli; ilustracije su prizori. Oba postoje u proizvodu kako bi vam pomogli da se brzo krećete i bolje razumijete proizvod. Oboje će vas usporiti samo ako pokušate uvesti nova značenja.

Kontekstna pitanja

Oznake ikona dajemo jer želimo dodati kontekst; naučiti korisnika što ta ikona znači za nas (kako bismo je kasnije mogli upotrijebiti bez naljepnice (čitaj: kada smo poznati)). Ilustracije već imaju kontekst. Oni postoje u kombinaciji s korisničkim sučeljem i kopijom, kao dijelom proizvoda koji korisnik već razumije. Na Lyftu crtamo automobile (… i točkove, sjedala i ceste…), jer, da, moramo puno reći o automobilima - ali i zato što je korisnik već spreman da očekuje i prepoznaje automobile. Kao da, ako izvučemo krumpir, oni će na kraju shvatiti o čemu se radi, ali za to su potrebni dodatni znakovi i više detalja, da kažemo da, točno ste vidjeli, u stvari smo nacrtali krumpir. Korisnik je već na pola puta kad držite ilustracije u domeni proizvoda i brže će prepoznati objekte / radnje, čak i ako smanjite razinu detalja dovoljno da se prilagodi tehnički nazvanim: smiješno mali zahtjevi veličine telefona.

Odaberite Clear over Clever

Kad radite u malim dimenzijama, morate razmišljati u arhetipovima, a ne pametnim interpretacijama. U redu, nekako je smiješno staviti stvarni hamburger umjesto ikone izbornika hamburgera koju svi poznajemo i volimo, ali isto tako: ne. Koristite zeitgeist u svoju korist i samo odaberite stvari koje već znamo.

Dakle, kao da, moj polovni džip, pola SUV, pola IDK-ja-ne mogu-stvarno-reći-automobili-osim-samo-dodao-stvari-volio sam izgleda super i prilično sam siguran da su sve vrste super džipovi tehnički postoje (čak i neki s grickalicama), ali ciljamo na ono što prosječan čovjek misli kad opisuje moderan džip, osim kreativnih sloboda za panoima.

Što možemo naučiti iz dizajna tipa

Nema puno resursa o ilustriranju za male ekrane, ali zapravo je napisano sranje o stvaranju čitljivog tipa. I što sam govorio sve ovo vrijeme, ako ne, da bi ilustracije trebale biti čitljive?

Pojednostavnite (više nego što želite)

AKA serife samo stvaraju buku ispod 10pt; kontrast između debljina / stanjivanja izgubljenih ispod 10pt

Znao si ovo jedno, zar ne? Bilo bi i dalje čudno da to nisam rekao. Uklanjamo serife zbog čitljivosti u malim dimenzijama. Uklanjamo detalje za čitljivost u malim dimenzijama. Ništa fino obloženo. Ništa niski kontrast. Ništa zajedno. Preskočite cool asimetrične detalje, oni će ionako samo izgledati kao greška. Potražite elemente svoje ilustracije koji vam zapravo pomažu u prepoznavanju i orijentaciji koja je okrenuta. Kao da, te ručke na vratima izgledaju poput droge, ali nitko ne traži da kvake na vratima kažu automobil od krumpira. Ne morate uklanjati sve, ne možete sve uključiti.

Siluete su sve

Slučaj AKA naslova čitljiviji je od svih velikih slova

Čitamo oblike riječi, a ne pojedinačna slova; čitamo oblike predmeta, a ne detalje iznutra. Svako slovo mora biti dovoljno jasno da se razlikuje, ali ne toliko jasno da bi odvratilo pažnju od cjelovite riječi. Ilustracija, svaki detalj mora biti dovoljno različit da bi mogao biti vlastiti prepoznatljivi objekt, ali ne toliko različit da bi mogao postati žarište. Uzmite u obzir i cjelokupni oblik ilustracije, kao i oblik svake komponente. Proširite rubove svake komponente kako biste lakše naznačili gdje počinje novi objekt.

Isto tako nemojte činiti ono što se nalazi u krugu, barem u malim dimenzijama, jer: siluete

Pretjerivati ​​sa svime

AKA prošireni obrasci slova i otvoreni šalteri povećavaju čitljivost

U redu, dakle, sve što ste upravo napravili, radite više. Proširite rubove svih svojih silueta, povećajte razmake između svakog od elemenata. Toliko da izgleda pomalo glupo kad to povećate. U tipu, kamioniramo s detaljima - ispružimo ja, istiskujemo m, izvlačimo svaki uspon / silazni sila koji možemo pronaći - kako bismo vam pomogli da prepoznate oblike slova iz daljine. U ilustraciji idemo nakon rubova i proporcija. Usredotočite se na skaliranje predmeta koji nam najbolje pomažu u prepoznavanju ilustracija i stvaranju rubova kako biste naznačili gdje počinju. Dva kotača rade puno više za reći džip nego što će to ikada imati krovni nosač, tako da mogu uzeti pola automobila za sve do mene je briga.

Lagano da se poveća; Mračno da se smanji

AKA obrnuti tip smanjuje čitljivost

Tamne boje se povlače; pojavljuju se svijetle boje. Ako ukucate, to znači da bijeli tekst izgleda teže. Ovim se prilagođavamo lakšom težinom ili damo sobi za disanje s većim kerning / vodi. Ilustracija, stvara alat za precizno podešavanje hijerarhije ili dekodiranje nekih elemenata.

To jest, ako želim da se prozori malo povećaju, ili se možda reflektor osjeća malo preblizu kotačima kada ga smanjimo, možemo to riješiti bojom.

Neka to radi IRL

Kad radite na bilo kojem proizvodu, uvijek ćete se boriti s odlukom što zapravo treba ilustraciju; i osjećati se kao kod kuće u inače utilitarističkom proizvodu. Kad radite na malim ekranima - sa toliko mnogo stvari za reći; i toliko mnogo stvari koje je potrebno dodirnuti; a ljudi koji drže telefone daleko dalje od lica nego što biste mislili - problemi se samo povećavaju. Kao kad sam jednom pitao svog fizioterapeuta hoću li imati nekih dugoročnih problema, on je rekao: "Pa, samo će se pojačati problemi koje već imate" I bio sam poput kakvih problema?

Postanite bezobzirni: treba li zaista ilustracija? (vjerojatno ne)

Hej, slušajte, (proizvod) ilustracija broj jedan obožavatelj ovdje. Kao, definitivno bih sigurno bio slingin burgere da me niste pustili da crtam po vašim telefonima cijeli dan. No, ponekad se osjećam kao da dugujem izvinjenje dizajna proizvoda. Znam da sam te nagovorio koristeći ilustraciju. Hej, slušaj meg: ilustracija je cool! .. ali nisam mislila da to trebate upotrebljavati na Svima. Singl. Zaslon.

Kada ne upotrebljavate ilustraciju za rješavanje stvarnog problema - pojačavate / reinterpretirate kopiju, stvorite kratkom rukom / raščlanite tekst, objasnite nove značajke, itd. - jednostavno se osjećaju prisilnima. Ako se neprestano pokušavate susresti s nekom drugom ilustracijom, raspoloživi prostor za ilustraciju neprestano se smanjuje, dok očekivanja za prikaz ilustracije rastu. Učinak svih ilustracija smanjuje se sa svakim narednim nepotrebnim ilustracijama, što uči korisnika da ih može (i treba) zanemariti. Umjesto toga, dopustite da sadržaj - ikonografija, navigacija i kopija - vode put i upotrebljavajte ilustraciju štedljivije i sa šiljatijom svrhom. Dopustite da kopija prvo zauzme prostor i pričekajte da dođete na red da upotrijebite ilustraciju u duljim tumačenjima objašnjenja kad ste sigurni da korisnik traži malo dodatne pomoći.

Ikone i ilustracije na kliznoj skali

Oduvijek sam teško odlučivao s kim ikonama treba živjeti. Dio sustava ili dio sadržaja? Inspiriran tipom ili ilustracijama? Djeca razvedenih roditelja, sigurno, oni mogu prijeći granicu za praznike i vikende, ali moramo shvatiti u koju ćemo ih školu uvesti, znate? Kada radite na velikim ekranima, stavljam ih u vrstu. Uz dovoljno prostora za dosljedno korištenje naljepnica i velikih blokova teksta koji koriste ikone za raščlanjivanje - sigurno je pretpostaviti da će ikone češće biti uz bočni tekst slične veličine. U međuvremenu, ilustracija može zauzeti cijeli ekran. No, dok radite na malim ekranima, ilustracije su, maleni. A zapravo su ikone velike, ikone su ionako (više su za dodirivanje, ne za razvrstavanje i ljudi jednostavno ne mogu tako dobro vidjeti svoje zaslone telefona, kako se ispostavilo). Ono što ovdje želim reći, vrijeme je za promjenu škola. Ilustracije za web, ilustracije stoje kao jedinstveni sadržaj, uredno padaju u male / srednje / velike i rijetko se približavaju veličini ili kontekstu ikone. Dizajnirajući za mobilne uređaje, ikone i ilustracije često žive u istoj spremnici, mijenjajući se samo ovisno o potrebama protoka. Stvaranje stila ilustracije koji glatko teče od ikone do ilustracije i opet natrag pomaže vam osigurati da se bilo koja slika koju koristite u ograničenom prostoru osjeća kao da je stvorena da bude tamo.

Poput Flubbera: rastezljiv, sklopiv, vrlo viskozan

Da. Ponovno sam gledao kako trebam napisati ovo. Što? Kada radite na malim ekranima, ograničenja veličine su stvarna. U idealnom slučaju, radite s dizajnerima na odabiru najboljeg načina uključivanja ilustracija; realno rijetko dobijete prvi izbor. Prostori koji su namijenjeni za ilustraciju uglavnom su unaprijed određeni i često vrlo vertikalno ili vodoravno ograničeni. Imajući to na umu kada postavljate građevne blokove za svoj stil ilustracije i dizajnirate ga kako biste lako uzgajali kako bi stajao bilo koji spremnik (a ne da vas ograničavaju realniji ljudski razmjeri), postavlja vas za uspjeh u malim veličinama.

Mrzim pisanje zaključaka. Nadam se da ovo pomaže! ️ Samo bih ponovio stvari koje sam već rekao, a tko ima vremena za to?

P.S. Angažujemo starije dizajnere proizvoda i sustava Javi mi se.

* Super ne mogu, kad me pitaju da crtam bez wacom tableta čini me vidljivo mučninom