Roman Shamin

Дизайн в Злых марсианах

2021-10-19T18:59:10.019Z

Это статья из внутреннего дизайнерского хендбука. Я подумал, что её публикация может помочь будущим соискателям на дизайнерские вакансии понять будут ли они чувствовать себя на своём месте, стоит ли идти работать в дизайн-отдел Злых марсиан.

Статью не стоит воспринимать в ключе «если не умеешь 100% перечисленного, то даже не пытайся» — нет! Пусть лучше она станет ответом на вопрос «если я хочу преуспеть при подаче на вакансию, что стоит знать?» для всех, кто планирует однажды присоединиться к нам.

Злые марсиане — не дизайн-студия, не рекламное агентство, не бюро разработки. Мы разрабатываем цифровые продукты под ключ, но не только. Мы описываем себя словом consultancy, однако наша работа не похожа на бизнес McKinsey и им подобных.

Марсиане — эксперты в том, чтобы сделать единицу из нуля. Быстрой итеративной разработкой провести клиента из состояния, когда есть только ворох неподтверждённых гипотез в голове, в состояние, когда в мире существует реальный цифровой продукт. Это определение может отличаться от официальной позиции, но вот как-то так суть компании понимаю я.

Что это всё значит для дизайнера.

Нужно будет запускать проекты с нуля

Марсианская команда нередко становится практически соавторами клиентских проектов. А когда вам доверяют участвовать в основополагающих для будущего бизнеса решениях, то это не только честь, но и ответственность.

В создании того, чего ещё нет, для дизайнера важно иметь виденье. После того как все понимают какую боль и для кого будет пытаться закрыть будущий продукт, часто именно на марсианского дизайнера ложится ответственность помочь команде с пониманием, а как собственно продукт будет это делать. Совсем круто, если дизайнер может помочь придумать какое-то инновационное решение, которое потом станет конкурентным преимуществом продукта на рынке. Это требует опыта, интуиции и смелости.

Любой клиент всегда приходит с «планов громадьём». Нужно уметь приземлить и сфокусировать поток идей до конкретных первых шагов. Выслушать всё и, пользуясь уже упомянутыми опытом, интуицией и смелостью, помочь выбрать ключевые функции — что-то, что ляжет в основу первого MVP и запустит проверку главных гипотез. Что-то, что можно выпустить так быстро, как только можно — буквально за несколько недель.

Основные клиенты Марсиан — стартапы. Мы на равных общаемся с предпринимателями из Долины, Нью-Йорка, Дублина. Поэтому у нас обычно нравится предприимчивым ребятам, которые мечтают однажды запустить и свой проект. Рано или поздно вы обнаружите в своей речи термины ROI, retention и product-market fit. Узнаете кто такие early adopters и какая связь между пиратами и метриками.

У дизайнеров, которые так умеют, есть приставка Senior в наших грейдах.

Нужно будет стать экспертом в дизайне интерфейсов

Если говорить просто, то это значит выбирать решение не потому что оно первым пришло в голову, а потому что вы знаете все популярные паттерны, подходящие под задачу, знаете достоинства и недостатки каждого и, соответственно, делаете взвешенный выбор, который способны обосновать.

Проверьте себя: в чём, на уровне экранов и опыта пользователя, разница между логином через телефон и через кнопки соцсетей? Какие достоинства и недостатки у всех вариантов? А с точки зрения безопасности? Когда имеет смысл использовать один, когда другой, когда всё одновременно?

Мы часто работаем с далёкой от дизайнеров и обычных людей предметной областью или технологией — machine learning, инструменты для разработчиков, augmented reality, blockchain и смарт-контракты. В условиях, когда привычки и приоритеты пользователей продукта не ясны. Когда у продукта ветвистые флоу и масса edge/corner/you-name-it кейсов.

Марсианская команда и дизайнер, будучи на передовой коммуникации, играют для клиента роль проводников по разработке для цифровой среды. Это значит, что клиенты могут рассчитывать, что вы сможете помочь принять обоснованное решение когда продукт выгоднее делать в виде нативного мобильного приложения, когда веб-сервисом, а когда гипотезу проще проверить почтовой рассылкой. Заказчик эксперт в своём бизнесе, мы — в создании цифровых продуктов.

Быть проактивным и вовлечённым

В наших командах нет роли «проджект-менеджер», если понимать её, как исполнителя функций «говорить с клиентом», «наполнять бэклог» и «пинать всех». Наши дизайнеры привыкли сами, вместе с инженером-тимлидом, создавать прогресс. Без испорченного телефона, напрямую общаясь с заказчиком, вытаскивать из него стратегию и приоритеты, переплавлять их в задачи, решать вместе с командой в какой последовательности и что будете делать. Управлять поставками, следить, чтобы дизайн рисовался вперёд разработки, обсуждать его с инженерами на соответствие техническим ограничениям и так далее.

Проверять, как дизайн сработал

Мы работаем циклами «гипотеза — фича — метрика». Вместе с клиентом придумываем гипотезу, которая включает метрики успеха и неуспеха. После выкатки фичи, метрика измеряется и команда вместе с клиентом решают насколько она сработала. Если не сработала, формируется новая гипотеза и цикл начинается сначала. Это не обязательно история про growth hacking фреймворк в чистом виде (хотя бывает и он), скорее здравый смысл — нужно, насколько возможно, сокращать шанс, что все делают никому не нужную вещь.

Как показывает опыт, фокус на проверке дизайна (метриками ли, опросами ли пользователей — инструмент проверки команда с клиентом выбирают сами) придаёт работе осмысленность и драйв. Люди наконец-то понимают в чём их работа. Распробовав однажды принятие собственных продуктовых решений, очень трудно вернуться к роли безвольного винтика, которому ПМ наполняет бэклог, а аналитик докучает с метриками.

Не забывать о красоте

Тут сложно, потому что надо прилагать сознательные усилия, чтоб после всех «более важных вещей» — решения т. н. задачи клиента, проработки кейсов, учёта технологических ограничений и правил дизайн-системы — после всего этого нужно остаться в живых и сделать кра-си-во. Типографикой, композицией, воздухом, цветом. Всем вместе.

Просто красиво. Просто чтобы вызывало эмоции.

Не забывать, что однажды проектом займётся команда клиента

И наконец, нужно быть готовым однажды передать свой ухоженный садик, где вами посеяна и взрощена каждая травинка. По себе знаю, это сложно. Сам грустил, передавая проекты. Видел с каким трудом ротировались марсианские дизайнеры. Сделать с этим ничего нельзя, зато можно научиться смотреть на всё философски — постоянны только перемены.

У неотвратимости передачи проекта есть важный эффект: мы обязаны подготовить все наработки в лучшем виде. Круто, если проект при передаче сверкает: палитра, типографика, отступы, компоненты, все состояния всех переиспользуемых элементов дизайна задокументированы и снабжены примерами. Дизайнеры на стороне заказчика должны получить образцовый проект, реакция на который будет не «ох, придётся всё переделывать с нуля», а «вау, вот это уровень».

Послесловие для публичной версии

Понимаю, всё это, собранное вместе может звучать страшно. Напомню, нет требования соответствовать тексту на сто процентов, особенно в момент подачи заявки на вакансии.

Из действительно обязательного перечислю только:

Готовность работать без бэклога, лидировать разработку, быть агентом прогресса.
Готовность напрямую общаться с клиентом.
Умение делать дизайн интерфейсов, глубоко продумывать фичи и обосновывать свои дизайн-решения.
Умение делать аккуратно и красиво.

Это то, что мы проверяем при знакомстве и что действительно стоит иметь пререквизитом.

Остальное лучше считать облаком возможностей, из которого можно за годы интересной работы выбирать что-то для развития и копать вглубь.

P. S. Подпишитесь на мой твитер: @romanshamin.

Вино осени 2021

2021-10-09T11:31:57.121Z

Когда нужен жидкий клетчатый плед

Привет! Меня зовут Рома и я люблю вино. Люблю и до сих пор не понимаю почему. Когда пытаюсь об этом размышлять, на ум приходит несколько причин. Опишу одну.

Мне нравится, что когда перестаёшь пить массмаркет, то как будто бы становишься частью живой цепочки из близких по духу людей.

Вот пью я бокал вина. Бутылку этого вина специально для меня приберёг мой друг сомелье — такой же энтузиаст, просто начал свой путь в вине на пяток лет раньше.

Чтобы это вино оказалось в его баре, он договорился со своими хорошими друзьями из виноторговых компаний, чтобы они отложили несколько бутылок — иначе всё могут выкупить рестораны.

Виноторговые компании, которые занимаются таким вином, это не сотня человек с сетью офисов, а несколько друзей, решивших, что вино это теперь дело их жизни. Чтобы договориться о поставках в Россию, эти ребята специально летали к виноделу, иногда по несколько раз, и смогли построить с ним доверительные, часто тоже дружеские отношения.

И пусть на самом деле это не так, но мне хочется верить, что всё это доверие и тепло создают какую-то энергию, которая всего через два рукопожатия идёт, как ток по проводам, от винодела, его семьи, его земли, ко мне — только что сделавшему глоток замечательного вина.

Даже не могу передать как было приятно, когда после публикации Винолето 2021, я встречал в винных барах Москвы людей, которые подходили к винной стойке с отрытой в телефоне заметкой и просили сомелье налить что-то из моих рекомендаций. Да и сами сомелье начали узнавать меня в лицо, как автора «той самой статьи» и пожимать руку при встрече.

Всем ❤️

В этой подборке снова несколько вин, которые мне довелось попробовать этой осенью и которые чем-то запомнились. Это всё ещё только вина, сделанные с минимальным вмешательством, их всё ещё не найти на полках супермаркетов и обычных баров и ресторанов.

Я живу в Москве, поэтому рекомендовать где попробовать что-то из списка могу только для столицы. Если вы знаете, где найти какое-то из вин в вашем городе, напишите мне в твиттер @romanshamin — с радостью добавлю название заведения и город в статью. Давайте вместе соберем крутых ребят, которые возят и продают необычные вина!

Valdobbiadene Prosecco, Casa Coste Piane

Игристое, Италия

Винодельня «Каза Косте Пиане» — это Лорис Фолладор с семьёй. Их виноградники в «Вальдоббьядене» находятся на очень крутых склонах, которые невозможно вспахивать и обрабатывать традиционными способами с использованием сельскохозяйственной техники.

А из-за особенностей почвы, лозам, когда их высадили более 60 лет назад, пришлось продираться в глубину сквозь каменные образования, чтобы добраться до влаги. А когда лоза страдает, в кожице винограда накапливается больше вкусоароматических веществ. Поэтому такой сложный терруар это не проклятье, а награда. Именно благодаря всем этим факторам вина получаются такими необычными.

Лорис делает Каза Косте Пиане так, как его предки делали просекко до 1895 года (то есть, до изобретения профессором Федерико Мартинотти метода Шармá-Мартинотти). Он сохраняет осадок, который отфильтровывается от сусла на начальном этапе, и потом, на последних стадях, добавляет его прямо в бутылки. Живые дрожжи из осадка приводят к повторному брожению внутри бутылки, из-за чего появляются пузырьки и более сложная вкусовая палитра.

В итоге получается тончайшее, эфемерное, летящее просекко. Настолько тонкое, что любителям Бордосских блендов может показаться минеральной водой. В аромате пломбир, лимонная косточка, медоносы. Нежнейшая газация. Всего 11% алкоголя.

Потрясающее вино! Влюбился с первого бокала и до сих пор под впечатлением. Мне так оно нравится, что хочется заполнить им все свободные полки и шкафы в доме, лишь бы оно никогда не заканчивалось.

Где найти Casa Coste Piane в Москве

Винотеки Simple Wine
Кооператив Чёрный

Á Table!!!, Fabien Jouves

Розе, Франция

Фабьен Жув — первый винодел в поколении, хотя все его предки занимались фермерством. Изучал энологию и получил профессию виноградаря в регионе Бордо. Убеждённый биодинамист — верит, что виноградник должен быть гармоничной экосистемой, внутри которой важна каждая жизнь — и растения, и насекомого. И что всё, что нужно от винодела — не мешать терруару выражать себя в винах.

В Россию это вино привезла микрокомпания Wine Bureau, которую я уже упоминал в прошлой заметке, когда рассказывал про вина Vino di Anna.

«А табль» — очень лёгкое, нефильтрованное и сочное розе. В аромате клубничный кисель, терпкость клюквы, каркаде, побелка. Баланс вкуса смещён в сладость.

Это безумно классное вино тоже украло моё сердечко целиком. Готов пить его бесконечно и уж точно взял бы ящиком домой.

Где найти Á Table!!! в Москве

На вина! в Москве и Петербурге
Кооператив Чёрный (в октябре по бокалам)
Рестораны Big Wine Freaks в Москве и Петербурге

Danfora 2016, Maradei

Оранж, Италия

«Марадеи» — семейная компания, которая кроме вина производит оливковое масло. У компании были сложные времена, но в восьмидесятых Виттория Марадеи вместе с мужем и четырьмя дочерьми возродила её, а с 2014 полностью перевела на биодинамические методы земледелия.

Вино — воплощение осени в бокале. Вино — тёплый клетчатый плед. Плотное, обволакивающее. В аромате карамель, древесная смола, мёд и специи. На вкус, как бренди — удивительно! Потрясающий цвет некрепко заваренного чая. Уверенные осенние 13,5% алкоголя.

Где найти Danfora в Москве

На сайте импортёра Piemaggio
Кооператив Чёрный
Бар Сентябрь на Покровке (в том числе по бокалам)
Сквот Винная на Солянке

As Xaras 2019, Fedellos do Couto

Красное, Испания

«Феделлос» переводится примерно как «парни». Выходит, Fedellos do Couto это парни Коуту — братаны из Коуту, если угодно. Парней четверо: Луис Табоада, которому принадлежит поместье, Пабло Сольдавини — агроном, специализирующийся на органических методах земледелия, а также локомотив всего проекта — молодые, но образованные и талантливые энологи Курро Барреньо и Хесус Оливарес.

В 2011 году ребята обнаружили и распознали потенциал заброшенных, труднодоступных северных и восточных участков региона Рибейра Сакра с уникальным терруаром, крутыми склонами, многовековыми терассами и старыми лозами местных сортов. Здесь, как и в хозяйстве «Каза Косте Пиане», возможно обрабатывать землю и собирать урожай только вручную.

Уникальный артефакт: карта участков, нарисованная Хесусом

«Ас харас» — красное вино из винограда менсия, собранного с противоположных сторон реки Xares, см. карту выше. Сделано в лёгком стиле. Совершенно неожиданная ароматическая палитра: дымность, цветы, тропические фрукты, специи, сырные и древесные ноты. 12,5% алкоголя.

Мне повезло побывать на благотворительной дегустации (организованной Кооперативом Чёрный и Wine Bureau, все средства от которой переводились мастерской для подростков с особенностями развития «Мастера и Маргарита»). Там мне удалось попробовать всю линейку вин Fedellos do Couto, совершенно точно могу рекомендовать любое из них. Этикетки очень узнаваемые, увидите любую бутылку — попробуйте обязательно!

Где найти As Xaras в Москве

Кооператив Чёрный (в октябре по бокалам)
Ресторан KM20 в Столешниковом переулке

Если вам доведётся пить одно из этих вин после прочтения этой заметки, задумайтесь на мгновение перед тем, как сделать глоток — вот и вы, через меня, стали частью цепочки из близких по духу людей, которым интересно вино, выращенное, сделанное, привезенное и, наконец, открытое друзьями для друзей.

Винолето 2021

2021-06-28T14:38:35.705Z

Что пить, если есть QR-код

Привет! Меня зовут Рома и я люблю вино. Люблю не как функциональную жидкость для снятия стресса вечером сложного дня — нет. Мне одинаково интересны и вкус вина, и история, стоящая за каждой бутылкой. Интересно знать имена виноделов, во что они верят и ради чего, живя крайне скромно, порой по-монашески аскетично, посвящают свои короткие жизни тому, чтобы сделать несколько десятков винтажей. И иногда, если повезет, еще и стать из-за своего вина настоящей легендой среди очень, очень узкого круга людей — винных энтузиастов, к числу которых я скромно причисляю и себя.

Ниже — подборка вин, которые чем-то меня зацепили в этом году и поэтому хочу, чтобы как можно больше людей тоже их попробовали.

Эти бутылки не найти в супермаркетах, редкие есть в винотеках. Это необычные вина — их называют натуральными, биодинамическими, артизанальными. Я считаю, что самый удачный термин — вина с минимальным вмешательством. Удачный, потому что передает философию виноделов. В отличие от больших винных заводов, эти люди (чаще всего либо одиночки, либо семьи) стараются как можно меньше манипулировать вкусом напитка. Как они сами говорят, выразить терруар — не мешать природе, а просто стать проводником тому, что земля и климат дали винограду.

Таких вин не делают много — философия их производства противоречит массовому промышленному. Многие и вовсе выделяют на страну по квотам (например, на всю Россию винодел может выделить всего 60 бутылок), поэтому если увидите где-то бутылку, которую я пометил как редкую, не сомневайтесь — покупайте сразу, уже завтра её в том же месте может не быть.

Naturalmente Frizzante, Casa Belfi

Игристое, Италия

Просекко настолько прочно обосновалось в винных картах, что не найти его можно разве что чебуречных. Чего не скажешь о просекко «коль фондо» — этот зверь все еще редкость. Хотя, стоит признать, именно Каза Белфи штурмует российские милионники уже третий год и его уже можно найти в любом заведении, которое называет себя модным.

Col Fondo (итал.) означает «вместе с осадком». В отличие от массовых просекко, при производстве Каза Белфи сусло не фильтруют, а готовое вино не снимают с осадка. Поэтому вино в бутылке получается чуууууть-чуть мутным. Если вас смущает осадок, то зря. По секрету скажу, что сам как раз предпочитаю «мутняк», потому что на мой вкус он часто (но не всегда) интереснее и глубже. Так что, прочь предрассудки — это не брак, это стиль!

Лёгкое, но без звенящей кислотности, если и почудятся яблоки, то точно не сводящие скулы Гренни Смит, а сладкие, жёлтые и даже скорее консервированные. Если прислушаться к вину внимательнее, то так же можно будет почувствовать цитрусы, луговые цветы, намёк на дрожжи и даже морскую гальку с ракушками.

А главное (барабанная дробь), всего 10,5% алкоголя — самое летнее из вин!

Где пить Casa Belfi в Москве

Почти круглый год оно есть по бокалам в баре Сентябрь на Покровке. Должно быть во всех На вина! — и в Москве, и в Петербурге. В салоне Real Authentic Wine.

И вообще, спрашивайте Каза Белфи в любом месте, именующим себя винным баром. Если его там нет, отбирайте у них звание винного! (Шучу, конечно).

Eule Purus, Rita und Rudolf Trossen

Белое, Германия

Рудольф и Рита Троссен основали хозяйство в 1978 и сразу же решили заниматься земледелием без использования синтетических удобрений. Первое вино «без манипуляций» создали в 2010, во многом благодаря поддержке дружественно настроенных сомелье — для Германии это редкость, а для того времени совсем уникальный случай.

Их рислинги со знаменитых сланцевых склонов Мозеля — одно из самых лучших и уникальных проявлений этого сорта. Сейчас их вина как раз из тех, что распределяются по квотам и присутствуют в картах лучших ресторанов мира, таких как Noma, Geranium, Mugaritz.

В Россию их привозит крошечная и очень идейная компания Diletant, основанная тремя бывшими сомелье. У ребят в портфеле всего пара десятков производителей, зато ни одного проходного. Я фанат вин Matassa из их портфеля, но об этом в другой раз.

Рислинг «Айе Пурус» — это энергия и максимальная свежесть. Вино не игристое, однако имеет, как мы говорим, физз — то есть, слегка покалывает рецепторы. Раскрывается хрустящими зелеными яблоками, минеральной водой, морской галькой и тальком. Вино, которое выпивается мгновенно.

Где пить Eule Purus в Москве

Ресторан и отель «Рихтер» на Пятницкой
Ресторан ТоТо в Столешниковом переулке
Кооператив Чёрный

Jeudi 15 Rosato, Vino di Anna

Розе, Этна

Vino di Anna — это два человека: Анна Мартенс и Эрик Нариу. Австралийка Анна имеет диплом энолога и уже более 30 лет занимается виноделием. Француз Эрик основал и долгое время занимается легендарной лондонской виноторговой компанией Les Caves de Pyrene. Оба обожают Этну и однажды смогли купить виноградник прямо на ее склоне. Присмотритесь к этикетке розе «Жёди 15» — там как раз изображен сбор винограда в горной местности.

«Вина Анны» впервые попали в Россию в конце 2020-го и лично для меня стали большим открытием. Несколько товарищей из России с идеологическим локомотивом в лице Никиты Селиванова и Саши Андреева — в недавнем прошлом сомелье и профессиональные энтузиасты, а теперь микрокомпания Wine Bureau — смогли убедить Анну и Эрика, что в России есть люди, которые ждут их вина и смогут их оценить.

Оранж Palmento уже почти не найти, а вот розе Jeudi 15 ещё можно встретить в прогрессивных заведениях. Увидите — не медлите.

«Жёди 15» — вино из редкой категории, где лёгкость и сочность не оборачиваются примитивностью. Вино можно просто пить и не заморачиваться, а можно закопаться и найти в аромате много цветочных нот, арбуз, клубнику, клюквенный морс. Тоже нефильтрованное — если перевернуть бутылку и посмотреть на свет, то можно увидеть невесомые хлопья осадка, плывущие сквозь вино, как красные снежинки.

Всего 11,5 оборотов!

Где пить Jeudi 15 в Москве

Ресторан KM20 в Столешниковом переулке
Кооператив Чёрный в Лялином переулке

Увидите где-то еще, дайте знать.

Lezer, Foradori

Красное, Италия

Уже в 12 лет Элизабетта Форадори начала работать на семейной винодельне, а в 19, получив диплом энолога, возглавила ее. В то время, как все соседи выкорчевывали древний автохтонный сорт винограда терóльдего, Элизабетта решилась сохранить традиции деда и отца и продолжить делать из него вино. В 2000 году, уже будучи итальянской звездой виноделия, перевела виноградники на биодинамику и начала экспериментировать с выдержкой в амфоре.

Узнать больше на русском языке про Элизабетту можно из заметки Самвела в соцсетях Кооператива Чёрный.

Lezér — буквально переводится, как легкий. За этим названием такая история: в год создания этого вина случился град и побил половину урожая. Оставшаяся половина тоже была не в лучшем состоянии, однако Элизабетта решилась на эксперимент и все-таки сделала вино. Потом, иронизируя над обстоятельствами, назвала его Lezer и с тех пор делает каждый год.

В этой истории частичка философии всех этих виноделов — не бороться с природой ради узнаваемого и одинакового из года в год вкуса, а позволить вину выразить особенности каждого года, каждого урожая.

Lezer 2020 года продолжает оправдывать название. Это воздушное красное, почти розе, одновременно сочное и минеральное, чуть парфюмерное. В аромате роза, клубничные леденцы и специи.

Это вино — редкий случай, когда даже такая ориентированная на масс-маркет компания, как Симпл, иногда включает в свой портфель интересные этикетки.

Где пить Lezer в Москве

Винотеки Simple Wine
Кооператив Чёрный — по бокалам с пятницы по воскресенье весь июль

Baby Bandito Follow Your Dreams, Testalonga

Красное, ЮАР

Тесталонга — это муж и жена Крэйг и Карла Хоукинс. Крэйг — главный винный бунтарь ЮАР. Когда в 2008 он сделал свое первое оранжевое вино, то... не смог продать его на экспорт, потому что комиссия не смогла отнести вино к какой-то категории — категории оранжевых вин в ЮАР тогда юридически не существовало. Через несколько лет эту категорию добавили, во многом благодаря борьбе Крэйга.

Real Authentic Wine — или в обиходе RAW — cамый старый и самый матерый из самых маленьких российский экспортер — сделали всем нам огромный подарок, когда привезли в Россию целых шесть вин Тесталонга.

Baby Bandito — серия из трех вин: два белых Keep on Punching и Stay Brave, и красное Follow Your Dreams. Фотографию девочки на этикете сделал брат Крэйга во время путешествия по Камбодже, а граффити — дань увлечению стрит-артом.

Follow your Dreams — очень сочное красное с относительно высокой кислотностью, что нетипично для вин из жаркого ЮАР и показывает мастерство Крэйга. В аромате россыпь красных ягод — вишня, малина, гранат, их оттеняют специи и легкая дымность.

Где пить Baby Bandito Follow Your Dreams в Москве

Бар Сентябрь на Покровке
На вина! — в Москве и Петербурге
Салон Real Authentic Wine

Ну и, одной строкой. Эти бутылки из списка ниже, на июль 2021 года, сложно найти, некоторые практически невозможно, поэтому, когда мне встречается что-то — беру не думая! Слева направо на картинке:

Nonna Aurelia Carricante, Siciliano,
Нонна Аурелия (виноград карриканте);
Susucaru Rosso, Frank Cornelissen,
Розе Сусукару Фрэнка Корнелиссена;
La Guillaume, Jean Maupertuis,
Ля Гийом Жана Мапертюи.

Приготовьтесь, что все эти вина могут показаться вам необычными. Особенно, если сейчас вы пьете что-то из ассортимента супермаркетов — что совершенно не плохо, никакого снобизма!

В списке нет совсем glou-glou-шных вин и уж тем более нет рассольного родео, вроде знаменитых Зелёных колготок. Однако, всё равно, эти вина не будут похожи на обычные или, как мы говорим, конвенциональные. Но в этом и соль! Этот вкусовой опыт расширит ваш горизонт. Вы увидите каким еще бывает вино.

Ну и последнее. Вскрывая какую-то бутылку, почитайте историю винодела — хотя бы преступно короткий абзац из этой заметки. Дело в том, что если перестать довольствоваться только вкусо-ароматическими свойствами вина и добавить к ним впечатления от философии винодела, знания о том, какой путь прошли эти люди, за что боролись — то есть, если буквально узнать что привело к появлению этой конкретной бутылки, то это гарантированно добавит новое качество вашим впечатлениям. Мы, люди, любим истории. Так зачем пить только вино, если можно пить и вино, и его историю?

Доступность в дизайне

2021-06-23T13:54:03.282Z

20% усилий дизайнера, дающие 80% доступности экранных интерфейсов.

In English: Accessible design from the get-go

Добиться стопроцентной доступности — сложная и параллельная разработке продукта задача. Для её решения нужны и усилия всей команды разработки, и ответственное отношение заказчика продукта, и, в идеале, отдельный профильный специалист.

Однако, заложить фундамент доступности может один человек, с макетов которого начинается внешний вид продукта — дизайнер. Как показывает опыт автора, для этого нужно не так много дополнительных усилий. Достаточно знать несколько узких мест и учитывать их во время разработки макетов.

Отдельная версия дизайна не нужна

Будет ошибкой считать, что люди с особенностями зрения, моторики или слуха — какая-то далёкая и немногочисленная группа пользователей компьютеров и телефонов. Многие люди начинают хуже видеть ещё в школе, у большинства зрение портится уже к 30-40 годам. Ухудшение моторики не всегда связано с травмами или физическими особенностями — вынужденное пользование большим смартфоном одной рукой, потому что в другой сумка с продуктами, тоже понижает возможности по манипулированию объектами на экране. Поэтому заботиться о доступности стоит для единственного и основного дизайна.

1. Восприятие текста

1.1. Делайте основной текст достаточно крупным*

* Достаточно крупный — это, для большинства современных шрифтов без засечек, кегль в районе** 14—18 пикс.

**В районе, потому что разные шрифты по-разному выглядят в одном размере (зависит от того, какую площадь кегельной площадки занимают знаки шрифта). Поэтому рекомендовать точную цифру не получится, доверяйте глазам.

1.2. Если нужно, разделяйте стили на Paragraph и UI

Предназначение интерфейса тоже имеет отношение к доступности. Где-то лучшую доступность обеспечит плотно упакованная информация, где-то — крупный свободный набор.

Почти всегда хорошая идея иметь в дизайн-системе раздельные текстовые стили: Paragraph — покрупнее и со свободным интерлиньяжем (минимум ×1.5 к кеглю), для набора текста для чтения; и UI — помельче, с максимально плотным интерлиньяжем, для интерфейсных элементов.

Пример дизайнерской дилеммы

В приложениях с боковой панелью свойств объектов (XCode, Figma и т. д.) можно набрать всё крупно — это повысит различимость текста для зрения, но тогда придётся много пользоваться скроллом, чтобы добраться до контролов в низу панели, что создаст нагрузку на моторику. А можно набрать помельче и тогда снизится доступность для зрения, зато в средний экран будет влезать больше интерфейса и скролл будет нужен реже. В профессиональных приложениях, где по тысяче раз на день работаешь с панелями, плотность информации может быть критичным параметром.

Слева скролл будет нужен реже, справа чаще

1.3. Старайтесь выдерживать CR 4.5:1 для 90% текста в интерфейсе

Стандарт WCAG 2.1 на 2021 год предлагает следующие ориентиры:

Текст для длительного чтения должен иметь коэффициент контрастности (далее CR — contrast ratio) не менее 4.5:1 (класс AA), а лучше 7:1 (класс AAA).
Крупный текст может иметь CR 3:1 (класс AA), но лучше стараться добиться 4.5:1 (класс AAA).
Для графики минимальный порог — 3:1.

Если аудитория интерфейса не имеет специальных запросов, никто не требует выдерживать уровень AAA по всему интерфейсу на 100%.

В общем же случае, CR 4.5:1 и выше — хорошая планка для самых главных частей интерфейса, с которыми пользователь работает большую часть времени.

Помните, что CR считается относительно фона и когда вы помещаете текст на цветную плашку, контрастность снижается.

Один и тот же синий имеет разный CR на разном фоне

При разработке палитры для нового проекта стоит сначала задать цвета для плашек, подложек контролов и панелей (обычно это светлые оттенки серого) так, чтобы их CR получился в районе 1.2:1. Потом оттенки для текста и акцентные цвета для контролов нужно выбирать так, чтобы их CR был не меньше 1.2 + 4.5 = 5.7:1 — чтобы даже на фоне с 1.2 они давали минимум 4.5:1.

Инструменты

Используйте плагины для Фигмы или Скетча, чтобы подбирать цвета с нужным уровнем контрастности. Например, плагин Contrast Алекса Карра для Фигмы.

Плагин Contrast для Figma

Для проверки живого сайта, например, при приёмке вёрстки, пользуйтесь утилитой Lighthouse, которая встроена в инструменты разработчика браузера Chrome.

Кроме этого, полезно знать, что в том же Хроме можно увидеть CR любого цвета, если нажать на квадратный семпл слева от HEX-кода в табе Styles:

Попап со свойствами цвета в Chrome Dev Tools

P. S. Будет честно упомянуть, что формула рассчёта CR, которую сейчас использует WCAG, вызывает вопросы. Например, иногда рассчётный CR получается выше у явно не лучшего сочетания цветов — см. статью The Myths of Color Contrast Accessibility.

Поэтому совсем слепо полагаться на коэффициент не стоит.

P. P. S. Ещё дизайнеру будет полезно разобраться что такое «восприятийная» яркость (perceptual lightness) и цветовое пространство Lab — это всё тесно связано с доступностью цветов и контрастностью.

1.4. Избегайте слишком светлого или мелкого текста при разделении на визуальные слои

Чтобы отделить менее важный текст от основного, вместо сильного изменения цвета или размера, стоит попробовать подобрать комбинацию двух параметров, но изменённых умеренно.

Например, для боковой выноски в статье стоит попробовать взять текст на модуль меньше и на шаг светлоты светлее. Возможно, комбинации размера и цвета хватит, чтобы достаточно отделить выноску от основного текста.

Хороший подход: выноска немного меньше и немного светлее

Не лучший подход: текст слишком мелкий

Не лучший подход: текст слишком светлый

Кроме этого, для разделения текста на уровни важности можно использовать:

другие начертания шрифта, например, наклонное (курсив) или сжатое (condensed);
парный шрифт — например, PT Sans к PT Serif и наоборот, если состав шрифтового семейства позволяет;
другой шрифт.

Например, на следующей картинке удалось оставить текст чёрным (хорошо для доступности), потому что сжатого начертания и уменьшения кегля на один модуль сетки оказалось достаточно:

Визуальное отделение через сжатое начертание и чуть меньший размер

1.5. Мелкий текст: больше межбуквенное расстояние + чуть пожирнее

Если визуальных уровней в дизайне много и приходится заходить на территорию мелкого текста (12 пикс. и ниже), то лучшее, что можно сделать — выбрать для него начертание Caption, если такое есть в шрифтовой семье. Обычно такие начертания специальным образом оптимизированы под мелкий текст — имеют более крупные и широкие буквы, их штрихи чуть толще, а расстояние между буквами чуть больше.

Слева обычный шрифт, справа для мелких подписей

Если начертания Caption нет, можно сделать следующее.

Раздвиньте немного межбуквенное расстояние (tracking в программах Adobe, letterspacing в Фигме и CSS).
Если позволяет шрифт, выберите чуть-чуть более жирное начертание. Например, если основной текст Regular, то для мелких подписей подойдёт Medium или Semi Bold.

Обе выноски маловаты, но нижнюю прочесть немного легче

Верно и обратное — сжимайте немного межбуквенное расстояние в крупных текстах, например, лид-абзацах и заголовках.

1.6. Помните, что выделения только цветом может быть недостаточно

Чтобы помочь людям с различными видами цветовой слепоты, дополняйте выделение элементов в ряду подобных чем-то, кроме цвета: начертанием шрифта, контрастным графическим элементом, пиктограммой.

Слева менее доступно, справа более

Здесь полезно знать, что нативные приложения для iOS и macOS могут учитывать включена ли у пользователя в настройках, например, опция повышенной контрастности. Это значит, что и ваш дизайн может в некоторых местах адаптироваться под эту настройку, особенно когда красота совсем сильно спорит с доступностью. Например, для режима повышенной контрастности можно сделать специальный дизайн с обводкой для выделенной опции фильтров:

Обводка добавляется, если в ОС включён режим высокой контрастности

Не стоит постоянно пользоваться этим приёмом. Во-первых, это получится всё-таки отдельная версия дизайна, а её, как мы помним из вступления, создавать не стоит; во-вторых, нет гарантий, что эта настройка включена у ста процентов людей с плохим зрением; в-третьих, плохая видимость может быть ситуативной — например, когда курьер пользуется навигатором в телефоне при ярком солнце.

1.7. Учитывайте цветовую слепоту в цветовом кодировании

Иногда интерфейс предполагает цветовое кодирование: зелёный успех и красная ошибка, разноцветные теги и так далее.

Во-первых, проверяйте достаточно ли различаются ваши оттенки в режиме эмуляции видов цветовой слепоты. Пользуйтесь программой Sim Daltonism, если работаете на маке.

С цветовой слепотой некоторые оттенки могут быть почти не различимы

Во-вторых, подумайте над тем, чтобы добавить к цвету дополнительную индикацию — паттерн или символы.

Режим цветовой слепоты в Трелло

2. Учитывайте системное увеличение шрифта и зум

Во всех операционных системах у пользователя есть возможность увеличить шрифт интерфейса, а в браузерах — масштаб страницы. Увеличение масштаба редко требует дополнительного внимания дизайнеров. А вот при разработке нативных приложений, у которых системно увеличивается только размер шрифта, дополнительные усилия бывают нужны.

2.1. Тестируйте веб-приложения при 200% зуме браузера

Если ваш лейаут следует всем принципам адаптивности, которые давно принятны в разработке под веб, то велика вероятность, что ничего дополнительно делать не придётся. Однако, возьмите за правило при приёмке вёрстки проверять как интерфейс выглядит при масштабе хотя бы 200%.

2.2. Тестируйте интерфейс нативных приложений с размером текста xxxLarge

Особенного внимания требуют все горизонтальные группы — табличные строки, тулбары с кнопками, меню и фильтры. Из-за крупного текста они могут перестать нормально влезать в отведённую ширину контейнера.

Типичная проблема с крупным шрифтом

Пользовательская настройка системного размера шрифта на разных ОС:

iOS: Adjust the display and text size on iPhone
Android: Font size & display size

Договоритесь с разработчиком о поддержке Dynamic Type (iOS) или Autosizing TextViews (Android).

Технология Dynamic Type помогает контролировать как будет выглядеть приложение на разных пользовательских настройках крупности текста.

Проверяйте как выглядит ваш лейаут при разных размерах системного шрифта (от xSmall до xxxLarge), особенно, если используете в дизайне кастомный шрифт.

iOS Dynamic Type

Документация

iOS: Dynamic Type Sizes
Andriod: Autosizing TextViews

2.3. Применяйте принцип «тексту — собственный этаж»

Текстовый контейнер — динамическая сущность. Он может в любой момент начать занимать больше или меньше места, чем занимал в макете, потому что пользователь увеличит шрифт в настройках ОС. Или инженеры на стороне заказчика изменят название кнопки без уведомления. Или однажды приложению потребуется мультиязычность и длины текста в разных языках станут непредсказуемы.

Самый бронебойный (но не всегда самый красивый) приём — выделять элементам с текстом собственный этаж контейнера.

Если вернуться к примеру из прошлого пункта, то, если выделить каждому элементу с непредсказуемым текстом — заголовку, подписи и кнопке — отдельные этажи, такому блоку будут нипочём и перевод на другой язык, и увеличение шрифта, и даже огромная цена:

Тексту — собственный этаж

2.4. Выбирайте многострочность вместо усечения

По возможности, откажитесь от усечения текста многоточием или фейдом. Выводите текст полностью, даже если он займёт несколько строк — это поможет пользователям экранных читалок.

Если усечение неизбежно, помните, что некоторые виды данных — имена файлов, номера карт и счетов, id-шники — лучше сокращать в середине. В идеале — умно, в общей части имени. Приемлемый компромисс — сокращать, оставляя несколько символов в конце.

У всех видов усечения с доступностью не очень, но два нижних варианта на волос лучше

Ещё, возможно, для вывода таких данных больше подойдёт моноширинный шрифт.

3. Подумайте о поддержке ночной темы

Всегда стоит как минимум подумать о том, чтобы предусмотреть ночную тему для интерфейса. Не из-за моды, а потому что в темноте тяжело читать со светлого фона. Кроме этого, существуют люди со светобоязнью.

Поддержка нескольких тем не всегда имеет смысл. Например, если вы работаете над контентным сайтом с большим количеством растровых изображений (особенно, если это UGC — контент, создаваемый пользователями), то готовить иллюстрации для тёмного и светлого фона может быть нерационально.

Удачный кейс для тёмной темы — приложение, где из графики только SVG-иконки, которые легко перекрашивать вместе с текстом.

Если возьмётесь за разработку ночной темы, не забудьте предусмотреть трёхпозиционный переключатель: следовать за настройками ОС, дневная тема, ночная тема.

Заложить фундамент поддержки визуальных тем поможет использование функциональных имён цветовых стилей. Однако, лучше всего настроить на старте проекта гибкую цветовую систему, как рассказано в первой части поста Figma DIY: Building a color system plugin в блоге Злых марсиан. Такая система позволит поддерживать неограниченное количество тем, легче добавлять их и удалять, динамически переключать прямо на макете с помощью простого плагина.

Функциональные имена цветовых стилей

4. Учитывайте экранные читалки

4.1. Структурируйте экран от важного к неважному

Придерживайтесь такой структуры экрана, чтобы он начинался с наиболее важного (заголовок, главные действия), а потом важность информации убывала слева направо и сверху вниз — именно так по экрану пойдёт читалка.

4.2. Передавайте альтернативные подписи вместе с макетом

Хорошие дизайнеры не используют рыбный текст в макетах. В хорошем макете текст должен быть готов к копированию в код — то есть, написан без ошибок и завалидирован клиентом.

Следуя этому принципу, стоит заботиться и об альтернативных подписях для не-текстовых контролов — например, для иконочных кнопок или переключателей (segmented controls).

Когда передаёте разработчикам макет с новым не-текстовым контролом, указывайте для каждой пиктограммы какой глагол (использовать для кнопок глаголы — хороший тон) нужно указать в коде — этот текст экранная читалка прочтёт незрячим людям.

4.3. Выбирайте многострочность вместо усечения

См. п. 2.4.

5. Разное

5.1. Разрабатывая анимации, помните, что людей с расстройствами вестибулярного аппарата может от них тошнить

Что почитать:

5.2. Не забывайте по возможности увеличивать область клика для ссылок и иконочных кнопок

Более того, в хорошей дизайн-системе даже кнопки без видимого тела (иконочные кнопки для тулбаров, навигационные кнопки, etc) должны наследоваться от родительского компонента кнопки и, соответственно, наследовать кликабельную область.

Кликабельная область больше видимой глазом

5.3. Не забывайте задавать кнопкам минимальную ширину

Чтобы контролы с короткими лейблами, например, кнопки ОК, не становились слишком маленькими.

5.4. Не переопределяйте дефолтный дизайн состояния «в фокусе»

Дефолтный для операционной системы стиль состояния «в фокусе» для элементов интерфейса поможет тем, кто навигируется по интерфейсу с помощью кнопки Tab, отличать маркер фокуса от элементов дизайна приложения.

Или, если уж решаете сделать этому состоянию кастомный дизайн, сделайте его консистентным для всех контролов и убедитесь, что маркер хорошо выделяется на фоне интерфейса.

Начинающим дизайнерам, которые к тому же впервые задумываются о доступности, может показаться, что рекомендаций слишком много, чтобы внедрить их все сразу. Ничего страшного, сконцентрируйтесь для начала на первом разделе — следите за размером текста и коэффициентом контрастности для основных цветов. Вы и сами не заметите как быстро забота о доступности перестанет ощущаться, как дополнительные усилия, и превратится в естественную часть процесса дизайна.

И помните, доступность нужна всем.

Что дальше

Книга «Про доступность iOS» Михаила Рубанова
Курс про цифровую доступность Валерии Курмак

Вопросы, ошибки, предложения, что ещё почитать дизайнерам → @romanshamin.

Не стесняйтесь прислать опечатку.

P. S. Открытые вакансии в Злых марсианах.

Как фронты могут сделать жизнь дизайнеров легче

2021-05-07T13:58:57.794Z

Это оформленный в виде поста твитер-тред о том, что бывает нужно от фронтов в плане понимания дизайна.

Важно понимать, что этот текст написан не потому что автор вдруг решил предъявить фронтам за все обиды, а потому что фронтенд-инженеры Злых марсиан сами попросили рассказать в каких местах командной работы у дизайнеров обычно болит. Ответ показался всем достаточно полезным и его решили опубликовать.

Пост-ответочка: как дизайнеры могут сделать жизнь фронтов легче.

Круто, если фронт становится напарником в систематизации дизайна. Если на одном экране три размера кнопок, идеально, если фронт вежливо спросит — это так задумывалось или баг? То же самое с цветами, отступами и остальными элементами дизайна.

Правило: задавать вопросы, когда не видно, где тут система.

С ростом проекта, будет круто, если фронт будет занимать активную позицию в задаче упаковки и сокращения сущностей. Например, придет и вежливо скажет, что в стилях уже 100500 переменных для отступов, может, отступы в 32, 34 и 36 пикселей заменить на что-то одно?

Круто, если фронту можно отдать кнопку «в покое» и попросить временно, пока все в огне лепят из говна и другого говна MVP, сделать ховер, клик и остальное на свой вкус. Круто, если результат будет укладываться в принципы системы и у синей кнопки не будет внезапно зеленого ховера.

Круто, если фронт знает золотой прием «я временно сделал так, если хочешь что-то поправить, пиши». Например, пользуется им, если в цепочке экранов дизайнер не сделал какое-то состояние — ситуация не становится блокером и не превращается в предъяву «не могу взять дизайн в работу».

Обычно фронты о таком и не молчат, но для полноты картины: круто, если фронт не молчит на предпоказе макета, что нарисованное потребует 3 месяца разработки. Всегда нужно вежливо об этом сказать, нормальный дизайнер выслушает проблему и вы вместе придумаете как выкрутиться.

Однако бывает, что после всех обсуждений все включая клиента решают все-таки угореть на 3 месяца. Круто, если фронт понимает, что иногда проекту нужны такие крутые/сложные/вау фичи, чтобы выделиться и, возможно, это как раз она и просто возьмет упорется и запилит в лучшем виде.

Круто, когда фронт может быть напарником по спецэффектам. Дизайнеров это не красит, но частенько они понятия не имеют на что способен современный CSS — анимации, режимы наложения, etc.

Круто, если у фронта есть чуйка в каких местах уместно прийти с «смотри, я могу вон ту штуку с вот этой воооот тааак зафигачить, цсс позволяет, хочешь так?». Чем больше дизайнер будет знать какие у него есть инструменты, тем больше выиграет продукт.

Хорошая дизайн-система такое почти исключает, однако, круто, если фронт видит мелкие визуальные косяки — текст съехал по вертикали, иконка относительно кнопки неровно стоит, кнопки на тулбаре подпрыгнули, вот это вот все.

Внимание фронта к таким мелочам превращает приемку фичи в бодрое «все круто, спасибо!», вместо высасывающего из всех участников жизнь списка из 50 просьб «подвинь вот тут на пиксель».

Общечеловеческое — полезнее не копить недовольство. Если кажется, что дизайн плохой, стоит созвониться с дизайнером и вежливо порасспрашивать почему то, что режет глаз, такое какое есть. Вероятность, что вам полегчает после понимания лежащих за дизайном идей, высока.

Комментировать текст лучше в твитер-треде.

P. S. Открытые вакансии в Злых марсианах.

Как дизайнеры могут сделать жизнь фронтов легче

2021-05-07T09:58:18.617Z

Cайдбар №1: людей, у которых есть систематические, а не единичные проблемы считаем профнепригодными. Если дизайнер все время забывает какие-то состояния экранов, компонентов, не переиспользует, неаккуратен, невежлив — это не ок, однако, оставляем таких за рамками текста.

Сайдбар №2: если вы дизайнер интерфейсов и когда-нибудь решите написать на вакансию в Злые марсиане, считайте тред требованиями к соискателям.

Это ответочка к посту о том, как фронты могут сделать жизнь дизайнеров легче.

1. Дизайн-система

Жизнь фронта драматически улучшается, если в дизайне есть система. Почему: если систему не создаете вы, ее приходится создавать за вас фронтенд-инженеру — так устроен код, у них выбора нет.

Отсутствие системного подхода гарантированно приведет к постоянным конфликтам с инженерами. Так делать не круто, это часть нашей дизайнерской работы.

Дизайн-система (преступно коротко) это когда дизайн построен из ограниченных наборов текстовых и графических стилей, переиспользуемых компонентов и последовательных правил компоновки.

Круто, если при поддержке и развитии системы, дизайнеру не пофиг что там в коде и он занимает активную позицию в задаче двусторонней синхронизации компонентов. Например, оформляет все изменения как фичу или, хотя бы, не забывает предупредить.

В прошлом треде я писал, что круто, когда и фронт в этом вопросе не пассивен. Это все еще так, но это не повод наглеть и заставлять фронта постоянно ходить к вам с вопросами «а этот новый отступ это апдейт старого или как?»

2. Процесс работы

Фичи

Круто, если дизайнер, видя перед собой Очень Большую Фичу, заботится о своей команде и с ранних этапов обсуждения с клиентом, предлагает план как съесть слона по частям — достигнуть результата через серию небольших задач, которые можно дизайнить, верстать и выкатывать по очереди.

Не круто дизайнить что-то огромное месяц и потом вываливать на инженеров 50 макетов. В этом объеме будет очень тяжко разбираться. Вы и сами задолбаетесь объяснять по кругу как эта глыба работает. В итоге, вы как команда гарантированно где-то скосячите — проверено на себе всей историй IT, поверьте.

Ну и при последующей приемке верстки, вам же будет проще отсмотреть небольшой кусок, выдать фронту две просьбы что-то поправить, вместо того, чтобы пыхтеть два дня, в результате выкатить сотню правок, которые вам потом снова перепроверять. Это высосет жизнь и из вас, и из фронта.

Правило: разбивайте фичи на фичульки.

Круто, если дизайнер уважает мнение технической команды и понимает, что технические ограничения это просто часть устройства мира, не чья-то лень, не злой умысел.

Если нарисованное трудно реализовать, круто, если дизайнер проявляет инициативу, собирает дружелюбное и вежливое обсуждение, чтобы вместе придумать выход.

Круто, если дизайнер не напрягается от просьбы фронта объяснить свои дизайн-решения. Очевидно, никто не пытается вас уличить в косяках — инженер пытается разобраться в устройстве дизайна, чтобы делать свою работу осознанно. Вашему фронту не пофиг — это же круто, вам повезло!

Макеты

Круто, если дизайнер владеет золотой привычкой утверждать макеты у технической команды. Не знаю даже, нужно ли обосновывать — очевидно, что ребята, которые будут превращать картинки в работающий продукт, должны наблюдать за ходом дизайна и врубаться что происходит, чтобы вовремя ворваться со «стойте, запахло техническими проблемами».

Второй убитый заяц — к моменту, когда фича придет в разработку, инженеры уже будут примерно знать что там надо делать и почему решения такие.

Третий — вопросов про ваши дизайн-решения не будет, если все будут видеть откуда у них ноги растут.

Сайдбар: я сам вообще предпочитаю синкаться с командой несколько раз в день. Еще до макетов рассказываю в канале проекта словами идею решения, в процессе делюсь недоделанными кусками, объясняю каким путем решил пойти и почему. С таким подходом у команды появляется миллион шансов не только указать на невидимые мне проблемы, но и предложить идею покруче.

Передача в разработку

Очень круто, если дизайнер дизайнит не только продукт, но и... документацию фичи. Это значит, что а) вообще всё, что касается фичи, собрано в одном месте; б) все идеи графически и текстом объяснены.

Представьте длинный артборд в Фигме — собраны все экраны, касающиеся фичи, стрелочками показан флоу, нужные штуки подписаны, причем в контексте, варианты состояний показаны, тоже близко к контексту. Если фича ссылается к решениям из прошлых фич — нужное оттуда должно быть скопировано. Есть ссылка на таску в трекере.

У этого приема есть крайне полезный сайд-эффект: если фича понятно описана, то это не только помогает фронтам и другим инженерам быстрее разобраться что надо делать, но и а) упрощает дизайнеру демонстрацию клиенту, б) сам дизайнер, вернувшись к фиче через год, сможет восстановить что и почему делал.

Правило: 100% знаний о фиче должно быть собрано в одном месте.

3. Знания

Круто, если дизайнер в курсе технологий. Например, чувствует себя уверенно, чтобы найти на Гитхабе нужный файл, поправить пару строк и оттуда же из веб-интерфейса закоммитить изменения на проверку инженерами. Или понимает, что если приложение использует геолокацию, то она может быть отключена на устройстве пользователя.

Не стоит кипятиться, никто не требует знаний, как у инженеров. Не надо уметь настраивать Вебпак, писать на Реакте. Осваивать чужую профессию не надо.

Однако, понимание синтаксиса HTML и CSS, блочной модели, как браузер строит веб-документ, что такое DOM — это правда не рокет-саенс. Это несложные и базовые, особенно для дизайнеров интерфейсов, знания. Буквально основа профессии.

Отдельно круто, если дизайнер сам умеет технически реализовывать спецэффекты. Например, знание синтаксиса описания анимаций на CSS позволит не мучать фронта три часа «а давай вот тут чуть плавнее», а самостоятельно отполировать анимацию до идеала.

* * *

Вот, кажется, и все. Если вам кажется, что все перечисленное не ваша работа, поверьте, вам стоит пересмотреть свои взгляды. Мой опыт показывает, что от этих штук одни выгоды — атмосфера в команде классная, все на одной волне, продукт идет бодро, без критичных косяков. В итоге у вас растет зарплата, потому что вы объективно становитесь более лучшим профессионалом и вас рекомендуют коллеги.

Комментировать текст лучше в твитер-треде.

Ссылки по теме

Как выглядит хороший макет — Блог Михаила Озорнина

P. S. Открытые вакансии в Злых марсианах.