Проектиране на илюстрации за малки екрани

Когато интервюирах с Lyft, едно от последните неща, които питаха, беше „Сигурен ли си, че ще се радваш? Видях работата ти и тя е подробна като лайна. Работим по телефони. Замисляли ли сте се наистина колко е малък телефонен екран? “

Разсмях се, оцених настроението и приех работата два пъти по-тежко - със самодоволно нещо, което се притесняваш, за мен, аз мога да рисувам навсякъде *, опаковано във всеки подпис.

Y'all.

Илюстрирането за малки екрани е трудно.

Първото нещо, което направих, беше да се опитам да потърся моите собствени щори - знам как да илюстрирам продуктите, а марката Lyft в основата си е моята марка (повече автомобили, по-малко задници за сега) - но мобилните устройства като основна платформа, това е неизследвана територия. Шегувам. Напълно мислех, че мога да го измисля с груба сила и с общи неща - обикновено - работа за мен. НО второто нещо, което направих, беше да се опитам да потърся собствените си блайндове, разтърсих интернет за всякакви съвети за илюстриране за малки екрани. И тогава третото, четвъртото и десетото нещо, което направих, беше да търся в интернет за предложения за илюстриране за малки екрани.

От това, което мога да кажа, никой още не го е написал (въпреки че се надявам, че ще ме извикате, че съм пропуснал някакъв страховит, страхотен ресурс, като о, лошото ми, но също така: накрая). И тъй като производителността прави списъци с неща, които вече сте направили, за да можете да ги зачеркнете: ето какво научих през последните 3-ина месеца работа в стила на илюстрацията на Lyft.

Да започнем с кола (а).

Какво можем да научим от дизайна на икони

Добре, така че не знам как да илюстрирам за малки екрани очевидно, но знам как да направя циците от икона. Има няколко основни принципа, които се прилагат както за илюстрация, така и за дизайн на икони.

Използвайте универсални значения

В дизайна на иконите използването на универсален смисъл е присвояване на символи на взаимодействия, които всъщност имат смисъл за всички (а не само за хората в рамките на 100 м от силициевата долина), въпреки изключително различни фонове / култури, за да се създаде по-достъпен, интуитивен продукт. За илюстрация, използването на универсални значения е използването на същото разбиране - че символите и метафорите не винаги кръстосват култури - но с очакването, че потребителят ще намали скоростта и ще се опита да прочете илюстрацията в контекста на вашия продукт, а не просто приемете го като символизъм.

Така че, като че ли има един тон хора, които сега са действителни възрастни, които не помнят да прелистват купчинки дискети, за да извадят стотен път копие на Lemmings за стотен път, но знаят, че иконата на дискета означава, спаси , Илюстрация на дискета обаче, wtf това ли е? защо оцветихте в иконата за запазване? Макар принципът да е същият, нивото на абстракция се променя с преминаването от икона в илюстрация. Иконите са символи; илюстрациите са сцени. И двете съществуват вътре в продукта, за да ви помогнат да се движите бързо и да разберете по-добре продукта. И двете ще ви забавят само ако се опитате да въведете нови значения.

Контекстни въпроси

Ние даваме етикети с икони, защото искаме да добавим контекст; да научим потребителя какво означава тази икона за нас (за да можем да я използваме без етикета по-късно (прочетете: когато сме известни)). Илюстрациите вече имат контекст. Те съществуват в комбинация с потребителския интерфейс и копие, като част от продукт, който потребителят вече разбира. Ние рисуваме автомобили (... и колела, и седалки, и пътища ...) в Lyft, защото, да, имаме много да кажем за автомобилите - но и защото потребителят вече е подготвен да очаква и да разпознава автомобилите. Да, да, ако нарисуваме картоф, в крайна сметка те ще разберат какво е, но това изисква допълнителни сигнали и повече подробности, за да кажем „да“, видяхте правилно, всъщност направихме картоф. Потребителят е вече на половината път, когато държите илюстрациите в рамките на продуктовата област и ще бъде по-бърз за разпознаване на обекти / действия, дори и да намалите нивото на детайлите, достатъчно за настаняване на технически обозначените: нелепо малки изисквания за размер на телефона.

Изберете Clear over Clever

Когато работите в малки размери, трябва да мислите в архетипи, а не в умни интерпретации. Добре, разбира се, е смешно да поставите действителен хамбургер вместо иконата на менюто за хамбургер, която всички познаваме и ненавиждаме, но също така: не. Използвайте zeitgeist в своя полза и просто изберете нещата, които вече знаем.

И така, да, моят половин джип, половин всъдеход, половин IDK-аз-не-наистина-казвам-автомобили-отделно-само-добавени неща-харесвах ми изглежда готино И съм почти сигурен, че всички видове Супер джипове технически съществуват (дори някои със шнорхели), но ние се стремим към това, което средният човек си мисли, когато описва модерен джип, освен креативните свободи за билбордовете.

Какво можем да научим от типа дизайн

Няма много ресурси за илюстриране за малки екрани, но има действително написано за създаване на четлив тип. И какво съм казвал през цялото това време, ако не, че илюстрациите трябва да бъдат четими?

Опростете (повече, отколкото искате)

AKA серифите просто създават шум под 10pt; контраст между гъсти / тънки загубени под 10pt

Знаехте това едно, нали? Все още би било странно, ако не го казах. Премахваме серифи за четливост при малки размери. Премахваме детайли за четливост при малки размери. Нищо фино подплатено. Нищо нисък контраст. Нищо не се затварят заедно. Пропуснете хладните асиметрични детайли, те така или иначе ще изглеждат като грешка. Потърсете елементите на вашата илюстрация, които всъщност ви помагат да я идентифицирате и ориентацията, с която е изправена. Както например, тези дръжки на вратите изглеждат допинг, но никой не търси дръжки на вратите, за да каже на кола от картоф. Не е необходимо да премахвате всичко, просто не можете да включите всичко.

Силуети са всичко

Делото от заглавието на AKA е по-четливо от всички ограничения

Ние четем формите на думите, а не отделните букви; четем формите на предметите, а не детайлите вътре. Във вид всяка буква трябва да е достатъчно отчетлива, за да бъде разказана отделно, но не толкова ясно, че да отвлича вниманието от цялостната дума. За илюстрация, всеки детайл трябва да бъде достатъчно отчетлив, за да може да бъде идентифициращ обект, но не толкова ясно, че да се превърне във фокусна точка. Помислете както общата форма на илюстрацията, така и формата на всеки компонент. Разширете краищата на всеки от компонентите, за да укажете къде започва нов обект.

Също така не правете това, което се съдържа в нещо с кръг, поне в малки размери, защото: силуети

Преувеличете всичко

Разширените букви на AKA и отворените гишета увеличават четливостта

Добре, така че всичко, което току-що направи, направи го повече. Разширете краищата на всичките си силуети, увеличете интервалите между всеки от елементите. Толкова много, че изглежда някак тъпо, когато го мащабирате. По тип ние камионираме с детайлите - разтягаме i, притискаме m, изтегляме всеки възходящ / низходящ, който можем да намерим - за да ви помогнем да разпознаете формите на буквите от разстояние. В илюстрацията продължаваме след ръбовете и пропорциите. Съсредоточете се върху мащабирането на обектите, които ни помагат най-добре да идентифицираме илюстрацията, и създаването на ръбовете, за да посочите откъде започват. Двете колела правят много по-голям джип, за да кажа джип, отколкото багажника на покрива, който някога ще има, така че да могат да заемат половината кола за всичко, което ме интересува.

Лек, за да стане по-голям; Тъмно, за да стане по-малко

Обратният тип AKA намалява четливостта

Тъмните цветове отстъпват; ярки цветове излизат напред. Във вид това означава, че белият текст изглежда по-тежък. Ние приспособяваме това, като използваме по-лека тежест или даваме на буквите за дишане стая с по-голямо кернинг / водене. В илюстрация, той създава инструмент за фина настройка на йерархията или разкодиране на някои от елементите.

Тоест, ако искам прозорците да се чувстват малко по-големи или може би рефлекторът се чувства малко по-близо до колелата, когато го мащабираме, можем да го разрешим с цвят.

Да го накара да работи IRL

Когато работите върху който и да е продукт, винаги ще се борите да решите какво всъщност има нужда от илюстрация; и да се чувствате като у дома си в иначе утилитарен продукт. Когато работите на малки екрани - с толкова много неща за казване; и толкова много неща, които трябва да бъдат докосвани; и хората, които държат телефоните си далеч по-далеч от лицата си, отколкото бихте си мислили - проблемите са просто увеличени. Все едно, когато попитах един път моя физиотерапевт дали ще имам някакви проблеми в дългосрочен план, той беше като „ами това ще засили само проблемите, които вече имате“ И аз бях като какви проблеми?

Вземете безмилостно: Има ли наистина нужда от илюстрация? (вероятно не)

Хей, слушайте, (продуктовата) илюстрация е номер едно фен тук. Подобно, аз със сигурност бих бил слинги бургери, ако не ми позволихте да тегля по вашите телефони по цял ден. Но, понякога имам чувството, че дължа дизайн на извинение. Знам, че ви говорих да използвате илюстрация. Като, хей, слушай мег: илюстрацията е готина! .. но не исках да кажа, че трябва да го използвате за всеки. Single. Screen.

Когато не използвате илюстрация, за да решите действителен проблем - подсилете / преинтерпретирайте копие, създайте стенограми / анализирайте текст, обяснете нови функции и др. - просто се чувствате принудени. Ако непрекъснато се опитвате да се натъкнете на друга илюстрация, наличното пространство за илюстрация става все по-малко, докато очакванията за илюстрацията да заснеме повече нарастват. Въздействието на всички илюстрации намалява с всяка следваща ненужна илюстрация, което учи потребителя, че те могат (и трябва) да бъдат игнорирани. Вместо това оставете съдържанието - иконография, навигация и копие - да води пътя и използвайте илюстрацията по-пестеливо, с по-заострена цел. Позволете на копието първо да заеме място и изчакайте вашия ред да използва илюстрация в по-отдавнашното обяснение, когато сте сигурни, че потребителят търси малко допълнителна помощ.

Икони и илюстрации в плъзгаща се скала

Винаги ми е било трудно да решавам с кои икони да живея. Част от системата или част от съдържанието? Вдъхновен от типа или от илюстрациите? Деца на разведени родители, сигурно, те могат да преминат границата за празници и уикенди, но ние трябва да разберем в какво училище да ги въведем, знаете ли? Когато работите на големи екрани, аз ги поставям с тип. С достатъчно място за последователно използване на етикети и големи блокове текст, които използват икони, за да го разберат - е безопасно да се предполага, че иконите ще живеят по-често в страничен текст с подобни размери. Междувременно илюстрацията може да заеме целия екран. Когато работите на малки екрани обаче, илюстрациите са, познахте: малки. И всъщност иконите са някак големи, за икони така или иначе (те са повече за докосване, не за разбор и хората просто не могат да виждат екраните на телефона си толкова добре, както се оказва). Това, което се опитвам да кажа тук, е време да сменим училищата. Проектирайки за уеб, илюстрациите стоят самостоятелно като уникално съдържание, попадат спретнато в малки / средни / големи и рядко се доближават до размера или контекста на икона. Проектирайки за мобилни устройства, иконите и илюстрациите често живеят в един и същ размер контейнер, като се променят само в зависимост от нуждите на потока. Създаването на стил на илюстрация, който плавно преминава от икона към илюстрация и отново, помага да се гарантира, че който и да е образ, който използвате в ограниченото пространство, се чувства така, сякаш е проектиран да бъде там.

Като Flubber: разтеглив, сгъваем, силно вискозен

Да. Прегледах отново флъш, за да напиша това. Какво? Когато работите на малки екрани, ограниченията на размера са ИСТИНСКИ. В идеалния случай вие работите с дизайнерите, за да изберете най-добрия начин за включване на илюстрации; реално рядко получавате първи избор. Пространствата, отредени за илюстрация, обикновено са предварително определени и често са много вертикално или хоризонтално ограничени. Имайки това предвид, когато поставяте строителните блокове за вашия стил на илюстрация и го проектирате лесно да се разраства, за да се поберат на всеки контейнер (и да не бъдете ограничени от по-реалистични човешки пропорции) ви създава успех при малки размери.

Мразя да пиша заключения. Надявам се това да помогне! ️ Просто бих повторила неща, които вече казах, и кой има време за това?

PS. Ние наемаме старши дизайнери на продукти и системи. Удари ме.

* Супер не мога да бъда помолен да рисувам без таблет wacom, ме видимо гадно