VanillaTime

Не так давно я начал плотно изучать возможность перехода со Sketch или Figma... Куда бы вы думали? На Framer X. Уоу, уоу! Спрячьте вилы и шарфики с надписью «За Sketch и двор стреляю в упор». Я не топлю за холивар «Что лучше: курица или яйцо?», я за развитие кругозора. Ведь ещё совсем недавно я бы рассмеялся в лицо тому, кто сказал бы мне, что можно подружить в одном туле дизайн и код. Уж слишком глубоки раны Adobe Muze и Dreamweaver — они заставляли страдать слишком многих. Но с Framer X дело обстоит немного иначе. Это тул похож на... Хм... Ну вот если Sketch — это Ламборджини, Figma — Tesla, Adobe XD — Toyota Corolla, то Framer X — бэтмобиль. Таинственный, с пушками, с высоким порогом вхождения... Бэтмобиль. Под капотом у него React, то есть гипотетически, все, что вы создаёте на канве также будет работать и на проде. Но давайте взглянем правде в глаза, качество автоматически генерируемого кода всегда вызвало вопросы. И при этом, беглое ревью вынесло вердикт — код уровня Джуна... Джуна. А нужно больше? Сами создатели Framer X говорят о том, что основная задача продукта не генерировать production-ready код (хотя вот библиотека анимаций как раз такая), а иметь возможность быстро разрабатывать и проверять свои решения, работать с реальными компонентами существующих систем. И если подумать, и правда, зачем пытаться заменить разработку автоматической генерацией кода (и делать это плохо), когда можно доверить работу профессионалам. А дизайнерам же можно использовать уже разработанные компоненты высокого качества. Ну вот создали вы библиотеку компонентов, разрабы сделали свою либу, отличную от вашей. (Технические ограничения) Вам переколбашивать вашу либу, чтобы работать с действительностью? А так можно было бы подключиться к Гиту вашей команды и дизайнить используя одни и теже компоненты. По мне, так это хлеб с маслом. Очень прельщает смещение фокуса с замкнутого дизайна на активную коллаборацию. Кстати о ней. Одной из фишек framer будет отсутствие плагинов. Вместо них наличествует магазин (где все бесплатно) готовых компонентов. Просто ставишь и можно работать и кастомизировать. К ним же можно отнести и целые дизайн-системы. Если волнуетесь о приватности, можно завести свой такой магазин только для вашей команды. Работать в классическом режиме сперва немного непривычно: автонестинг слоев, пока не осознаешь его, немного подбешивает; отсутствие некоторых удобностей графической работы, тоже вносит свои коррективы. В общем, как если бы пересел на новый автомобиль. Как только привыкаешь, все становится естественным. Помимо этого, меня подкупило то, с какой охотой сами создатели framer x идут на контакт и помогают развиваться не только продукту, но и сообществу вокруг него: одного письма достаточно, чтобы получить поддержку в организации митапа, нахождении спикеров и т.д. Не хочется отставать от мира, посему решил создать группу в фацэбуке для местного сообщества, где хотелось бы делиться новостями, подходами и просто шутейками :) Так что кому интересно, подключайтесь: https://www.facebook.com/groups/framerbelarus Если вам просто хотелось бы узнать больше про продукт, то можете посетить https://framer.com У них там много полезной документации и уроков. Ну а если вы уже начали тыкать палочкой и у вас возникли вопросы, то ответы можно найти в сообществе на Spectrum: https://spectrum.chat/framer?tab=posts

Вы когда-нибудь хотели замутить свою игру? Бьюсь об заклад, эти мысли так или иначе посещали вашу голову. Да чего греха таить, я и сам в своё время получил «хорошо» за курсовой проект-файтинг по «Алгоритмам и структурам данных»... Правда проект пестрил такими алгоритмичными изысками, как кнопки получения урона, вместо ударов :) И видимо вдохновлённые множеством работ подобного качества, ребята из Google намутили, чтобы вы думали... Наверное, правильно будет назвать конструктор игр :) Судя по промо, можно в многопользовательском режиме создавать локации, продумывать механику взаимодействие персонажа с реальностью и все это с огромным количеством моделей и без строчки кода (ну почти, если только не захотите). Так что, если у вас наметилась идейка для игры, которую неплохо было бы проверить, то можно заюзать этот инструмент ;) https://www.blog.google/technology/area-120/create-3d-games-friends-no-experience-required/?ref=webdesignernews.com

Ребята, видимо, очень любят формы, раз у них получилось собрать довольно внушительный список лучших практик по их проектированию. Они кажутся довольно тривиальными, но вот нет-нет, да что-то и забудется :) потому продублирую здесь основные тезисы. Итак, основные компоненты формы: 1) Приветствуйте пользователей, давая им понять, где они и зачем это (можно даже дать приблизительную оценку времени). 2) Используйте осмысленные заголовки и описания, без излишеств и креатива. 3) Четко отделяйте вопросы друг от друга, не позволяйте им смешиваться в кучу. 4) Заранее подумайте над форматом: одностраничная форма или многостраничная. 5) Используйте подходящую формулировку в cta, уходите от жаргонных «submit» и «apply». 6) Определитесь с используемыми контролами: классика обычно работает лучше, чем замысловатые компоненты. 7) Приветствие-приветствием, а вот подбодрить нашего пользователя тоже нужно. Помните об этом. Голос вашей формы: 8) Помните с кем вы говорите, и что они — не вы. Пишите просто, не юлите, чтобы вас понимали. 9) Наполните ваши слова вниманием к человеку. Персонализируйте. 10) Старайтесь не использовать пассивный залог, а говорите активно: «Я пишу с надеждой в душе...» лучше, чем «Это письмо написано с горечью...». 11) Барницва! Режьте не жалея. Чем меньше слов написано, тем лучше вас поймут. Но не думайте, что это таки просто. 12) Если пишите на английском, используйте неформальные сокращения «don't», «can't» и т.д. 13) Уже порезали текст? Давайте теперь кромсать предложения. 14) Если думаете, что текст готов — перечитайте его ещё раз. Немного когнитива: 15) Ясно сравнивайте цену и выгоды, если таковые имеются. 16) Правильно форматируйте текст и используйте маски: вместо +375445768904 лучше +375 (44) 576-89-04. 17) Не ограничивайте пользователя строгим форматом, ну хочет он писать цифры через пробел, а не дефис, так пусть пишет. 18) Ещё не спрятали нож? Отлично. Нужно убрать и ненужные поля. 19) Постарайтесь не напрягать пальчики пользователей, заставляя их печатать. 20) Для нетривиальных форм используйте логику показов полей. 21) Визуализируйте информацию или последствия выбора. Покажите наглядно, сколько щеночков спасет пожертвование или сколько люди экономят. 22) Подумайте над цветом. Хорошенько. 23) Сделайте форму по-красоте. С приятными вещами приятно работать. 24) Располагаете вопросы в паюорядке нарастания сложности. По-возможности. 25) Ясно показывайте прогресс. Вопросы, ответы и группировка: 26) Перед формулированием вопросов подумайте, что вы хотите получить. 27) Группируйте с умом, по явным признакам, понятным пользователю. Можно даже дать группам названия. 28) Думайте над порядком, располагая важные поля выше, а желательные в конце. 29) Задавайте один вопрос за раз. 30) Ускоряйте работу с формой используя автоматизацию выбора, предустановленные значения и т.д. Только будьте осторожны, такие положения очень сказываются на результате. Немного конкретики: 31) Говорят, лэйблы стоит располагать над полем слева... Думаю правда :) 32) Много колонок хуже чем одна, так что не плодите их. 33) Используйте длину строки, как аффорданс: предполагайте длину ввода. Ошибки: 34) Не полагайтесь только на цвет, используйте разные способы донесения статуса. 35) Ошибку помещайте возле места, где она произошла. 36) Используйте валидацию полей «на лету», предлагая варианты исправления... 37) ... но не будьте слишком строги, а скорее гибки, обрабатывая данные, приводя их к нужному формату. Всяко о формах оплаты: 38) Не затягивайте. Никто не скажет спасибо за 7 шагов, которые нужно пройти, чтобы купить набор карандашей и детскую присыпку. 39) Ясно отображайте, что сделка безопасна: сертификаты, уверения, шантаж — все, что может помочь. 40) Также четко говорите, зачем вам нужна «чувствительная информация» пользователей. 41) Сохраняйте все, что можно по закону, ибо неровен час коннект пропадет, а ярость останется. 42) Тестируйте перед запуском. Подробнее можно узнать здесь: https://www.jotform.com/form-design/

Если вам не чуждо замарать руки в коде, а заодно вам до жути хочется погрузиться в волшебный мир изометрии, то Zdog поможет вам и в том и другом. Исходя из того, что написано в интро и уроках на сайте фреймворка, то вы можете моделировать предметы используя HTML canvas или SVG. То есть прописывать ручками расположение объектов, их размеры, отношения. А после этого либо анимировать, либо цеплять на это волшебство события, по типу зума или поворота перспективы. Демо выглядят довольно внушительно, и подталкивают к экспериментам, но вот много ручной возни оставляет осадочек. Но проект пока находится в активной разработке, и команда знает о множестве багов, в чем честно признается :) Очень хочется посмотреть на дальнейшее развитие и возможную интеграцию с framer x. https://zzz.dog/

У вас никогда не было ситуации, когда вы говорите вашему фронту: «Вот тут покёрнить бы немного... Да и начертание давай другое поставим». И вы так смотрите на это понимающее кивание и осознаёте, что в голове у вашего визави только «шрифт заменить». И чтобы этот гэп закрыть, в nn group сделали довольно полный гайд по терминам типографики. Освежить никогда не помешает :) https://www.nngroup.com/articles/typography-terms-ux/

Довольно интересная, а главное, поучительная история о том, что работая над продуктом, стоит смотреть не только на проблемы текущих пользователей, но также за фронтир вашего восприятия. Так, например, Netflix рассматривала своим главным конкурентом не HBO Go, не Amazon Prime Video, а… Fortnite. До этой статьи и не знал, что это игра, спасибо другу, что просветил ;) Но этот интересный факт заставляет задуматься, что борьба происходит не только в алом океане конкуренции среди стриминговых гигантов, а ещё на более высоком уровне, ведь на кону наше внимание. Урок, который можно вынести прост: проблемы — это хорошо, но стоит думать ещё и о том, откуда они берутся, а также о возможностях, разбросанных вокруг. Смотрите на проблему шире. Например, все мы знаем о колоколообразной распределении пользователей по их уровню владения инструментом. В простонародии «Ориентируйтесь на средняков». Но что если ресурс сервиса уже исчерпан? Что если мы создали действительно хорошее взаимодействие и дальше будем только буксовать на месте, полируя и без того хорошее решение? Может есть лучший способ применения нашим усилиям? Есть. Например, взглянуть на границу нашего «колокола». За ней тоже есть пользователи, которые не входят в нашу ЦА… но почему? Что мы можем сделать, чтобы вовлечь и их? Может создать что-то новое? Это одна из стратегий создания голубого океана свободного от конкуренции рынка. Если вам будет интересно, то можно почитать одноименную книгу «Стратегия голубого океана. Как найти или создать рынок, свободный от других игроков». Очень интересно и полезно. https://www.mynameisjehad.com/have-you-talked-to-your-non-customers-lately/

А вот это уже интересно: Дональд Норман, пионер дизайна, ориентированного на пользователя, высказал свои мысли относительно эмпатии в дизайне. Да, той самой эмпатии, которую ставят во главу угла, когда речь идёт создании почти всех артефактов. Типа «Полевое исследование и персоны мы делаем, чтобы повысить эмпатию...» а зачем?... Чтобы повысить эмпатию. Никогда не понимал, почему дизайнеры это делают, но факт остаётся фактом. Ближе к сути. Дон Норман заявил, что не верит в такой подход, дескать, людей много, каждый уникальный и каждому проэмпатировать не получится. А если не получится, так зачем на этом сосредотачиваться? Дон говорил о том, что его концепция human oriented design строится и не том, чтобы пытаться проникнуть в голову людям, а чтобы лучше понимать их нужды, контекст и смысл самого предприятия. Мысли звучат очень здорово, и при этом, от себя хочу дополнить. Я полностью поддерживаю фокус Нормана на целях пользователя, и на вторичности эмпатии. Но. По поводу невозможности залезть людям в голову я бы поспорил. Как люди мы все не такие уж уникальные: строение и функционирование у нас очень похоже. Вы явно не сможете найти человека, мозг которого функционирует не при помощи нейронов и нейромедиаторов, а на пиве и рафинированом подсолнечном масле. То, что делает нас поистине уникальными — наш опыт. То есть у нас есть две составляющие: универсальная и уникальная. Уникальная — это призма опыта, через которую мы оцениваем реальность, и смоделировать ее действительно очень сложно. Но вот с универсальной работать можно и нужно, тем более, что для того у нас есть специальная часть мозга, названная зеркальными нейронами. Эти красавцы помогают нам стать на место нашего пользователя, пусть и с немалой погрешностью. А самый сок в том, что происходит это бессознательно, хотите вы того или нет. Последнее, я считаю максимально полезным навыком для любого проектировщика. Так что продолжайте исследования, но помните зачем они вам. А эмпатия придёт сама :) https://theblog.adobe.com/why-i-dont-believe-in-empathic-design-don-norman/

В копилку информации об анимации: Invision выпустили свою новую книгу о ней в рамках программы Design Better. Я пролистал — выглядит довольно годно, жаль в PDF нет самих примеров, но можно скачать файлы их Invision studio (пока не знаю зачем). В книге говорят о следующем: 1) Назначение движения. О том, как движение может изменять контекст взаимодействия или работать с ним, давая подсказки, привлекать внимание и побуждать к исследованию. 2) Принципы анимации: тайминг, скорости, положение, а также виды и особенности анимаций. 3) Взаимодействие с анимацией расскажет о том, когда и как нужно начинать с ней работать и как поддерживать и масштабировать этот паттерн на всем пути пользователя. 4) На сладкое: что ждёт нас за горизонтом, как нам интегрировать анимацию в наши дизайн-системы и зачем делать их человечными. В общем, в любом случае, стоит прочесть. https://www.designbetter.co/animation-handbook

Много кто пренебрегает созданием качественных пустых страниц, дескать их мало кто увидит, да и данными сервис обрастает довольно быстро. Однако, поддаваясь таким мыслям, мы упускаем наших пользователей. Их немного, всего ~5%, но разве они не заслуживают хорошего отношения? Тем более, что такие страницы можно использовать, чтобы побудить человека к действию, показать характер бренда, а также начать обучение. Так зачем же нам упускать такую возможность произвести хорошее первое впечатление? :) Подробнее можно прочитать в статейке: https://uxdesign.cc/why-empty-states-should-never-be-neglected-4618566b043f

А вы доводите дела до конца? За собой неоднократно замечал. Думаете, ваша прокрастинация следствие отсутствия силы воли? Может и так, но чаще это происки перфекционизма. Именно он заставляет нас отказываться от своих целей. Причём даже может нанести побочный ущерб, заставив отказаться от того, что мы и так делали. Например, вы ходили в тренажёрку 2 раза в неделю и решили увеличить это число до 5. В первую неделю все было хорошо, а во вторую у вас получилось посетить зал всего трижды. Как итог незакрытого гештальта, вы бросаете затею полностью. И это губительно, ведь именно завершение целей помогает сохранить мотивацию продолжать. Я часто наблюдаю такие симптомы у молодых дизайнеров, когда они полируют и без того блестящие решения, стараясь сделать их идеальными. Вместо того, чтобы идти дальше они топчутся на месте. Чтобы этого избежать — режьте цель пополам, или увеличивайте время в два раза. Помните о правиле Парето? 80% результата —20% усилий. Вы не сможете успеть все, нужно говорить нет и расставлять приоритет. Именно приоритет самого главного дела, которым стоит заниматься, остальное подождёт. Ваша цель должна приносить удовольствие и радость… или избавлять от угроз боли и страданий (мотивация через страх или поощрение), то есть помните о букве R в аббревиатуре SMART. Вместо того, чтобы делать что-то в достижении цели, мы можем прятаться в убежише, деятельности не требующей мастерства (типа, пойду посуду помою) или искать «благородные оправдания». Последние делятся на «нет, пока...» или «если, то...». Например, «Я не буду заканчивать проект, пока невыполирую его до блеска». Вроде благородно, но это никому не нужно. А потому, если говорите так — вам просто страшно. Не стоит. Отпустите. Выбросьте из своего гнезда кукушек— паразитов, которые формируют негласные правила. Например, «успех — зло» или «все богатеи — мудаки!» Негласные правила сродни установкам-сценариям, которые дают нам родители. Они хоть и кажутся безобидными, но наносят непоправимый урон нашей продуктивности. Как работать с этими кукушками: — выделить их (в основном они абсурдны, и ничем не подкреплены), — либо осознать их абсурдность, ответив на «Кто это говорит?», — либо заменить позитивными установками. Читерите, перфекционизм не терпит лёгких путей, но кто сказал, что путь к успеху обязательно должен быть сложным, полным страданий и ненависти к своей цели? Достигнуть ее, в таком случае, не слишком большое достижение. Гораздо лучше всё упростить и двигаться быстрее и веселее. При этом важно выбрать свой метод достижения, чтобы он входил в синнергию с вашими желаниями и мотивами. Тренировка одному или соревнование в группе? Как вам больше нравится. Думаете победители не бросают всё на пол-пути? Нет. Победители не тратят силы впустую. Отказ от невыгодных стратегий — проявление силы. Когда осталось совсем немного до финишной черты, у перфекционизма остаётся всего несколько козырей, которые он может в нас бросить. Но не стоит расслабляться, они довольно мощные. Например, страх «И что дальше?», когда мы не знаем, чем будем заниматься потом, когда уже достигнем цели. Или страхом несовершенства результата. Но знаете, ведь совершенства и не будет. Никогда. Ведь так устроен мир. Так что нужно только принять реальность и выжать по-максимуму из обстоятельств.

Но всё-таки есть вот такая ссылка, где можно посмотреть записи с RAUX 2019, только нужно зарегаться на 7 дней бесплатно. https://www.voka.tv/series/raux-2019 Всё ещё советую Антона Лёгкого 🙂

Сорри, сообщение удалено, по просьбе правообладателя. Очень извиняюсь )

Отличная статья о визуальной иерархии. Затрагивается много интересных аспектов: классические и очевидные методы работы с вниманием (размер, цвет и т.д.), а также «золотая жила», на которую автор смотрел, но не увидел — теория гештальта. Не для кого не секрет, что если вы хотите выделить объект, нужно повысить его контраст по отношению к окружению — сделать больше, изменить цвет или сделать непохожей формы. Однако правильная иерархия подразумевает работу не только с распределением внимания между объектам, разделяя их, но и уменьшение когнитивной нагрузки при восприятии, то есть группируя. И чтобы заниматься этим не «босяцки» нужно знать и применять законы гештальта: 1) Близость. Самый известный закон, который гласит, что предметы стоящие ближе друг к другу, воспринимаются более связанными. 2) Схожесть. Близкие по признакам объекты воспринимаются связанными. Словно в голове стоит группировка по цвету, размеру, форме и т.д. 3) Фигура-фон. Закон гласит, что мы всегда рассматриваем реальность в перспективе: то есть если перед нами рисунок круга вписанного в треугольник, то мы скорее воспримет их, как круг, лежащий на треугольнике. Но никак не треугольник с вырезанным в центре кругом. И при этом, фигура выделяется гораздо активнее, чем фон. 4) Замкнутость. Даже если мы скроем часть изображения, то наш мозг дорисует остальную часть сам. Так, например, работают пунктирные линии. 5) Целостность. Даже если фигура имеет разрыв или состоит из нескольких частей, мы склонны воспринимать все вместе. Например, буква "i" воспринимается как один глиф, хоть состоит из нескольких частей. 6) Общий фон... объединяет элементы. Но это я довольно поверхностно и грубо, для более глубокого изучения материала, советую обратиться к книге Джеффа Джонсона «Умный дизайн». И статейку прочитать все равно полезно :) “The fundamentals behind visual hierarchy” by Pascal Potvin https://link.medium.com/9OpEBFzvzW

Страны Скандинавии всегда отличались любовью к эстетике и функциональному дизайну. Вот и сейчас в Норвегии решили устроить конкурс на дизайн паспорта, чтобы... Ну люди гордились, доставая из широких штанин свой документ. А заодно, гордость эту приправить исторической составляющей и отличительными чертами страны. Концепт выглядит очень хорошо: простые геометрические пейзажи отлично справляются с функцией, при этом не отвлекая от важной информации типа виз и регистраций. Стоит взглянуть :) https://neue.no/work/norwegian-passports/

Работа из дома имеет очень много всяких плюшек, но порой без крепкого плеча (или кнута) довольно легко поддаться энтропии и зпрокрастинироваться до дедлайна, а там, «зад в огне» тушить остатки проекта. Чтобы этого не произошло, кто-то хитрый придумал социальную механику виртуального сотоварища. Идея проста: созваниваетесь со случайными воркером, делитесь планами на временной промежуток и работаете, поглядывая друг на друга, ну а в конце делитесь результатами. Социальное давление сделает свое дело и насильно втянет вас в поток. Наверное... Сам не пробовал, но почему бы и нет — миллионы коворкингов не могут ошибаться. Главное не переборщить :) https://www.focusmate.com/

Если кто-то раньше пользовался сервисом Inbox от Google, то вы знаете, что он из себя представлял — упрощённую версию Gmail без лишнего хлама и перегруженности. Очень жаль, что его закрыли и пересадили всех на анаболичный флагман. Для меня процесс перехода был до жути болезненным. И вот я натолкнулся на интересную статью и плагин для chrome, который делает из Gmail что-то удобоваримое. Интересно не только, что эта функция востребована, но и то, что послужило для автора стимулом действовать: раньше он работал в Google, создавая Inbox, и когда ушел был очень расстроен насаждением Gmail и тем, во что он превратился. Потому и решился на такой эксперимент. Отзывы говорят очень хорошие, да и чтиво интересное :) https://www.fastcompany.com/90338929/the-former-lead-designer-of-gmail-just-fixed-gmail-on-his-own

Друзья, я хочу вас всех сердечно поблагодарить за то, что вы инвестируете свое внимание в мой скромный канальчик. Нас уже больше 1 000 и это отрадно греет мне ❤️. Спасибо вам!

Сегодня прошел RAUX 2019, на которой мне посчастливилось быть спикером. Речь вели о геймификации: что это, почему работает, как делать на примере. Атмосфера ламповая, только вопросов было мало :/ Зато появился материал, которым хочется поделиться :) https://medium.com/design-spot/%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B8%D1%80%D1%83%D0%B5%D0%BC-las-vegas-249801d02281?source=friends_link&sk=974cac22f50cad04546d9667a11e428e

На UX Movement появилась статья в тему, как предотвратить ложные нажатия между иконками в ряду. Совет прост: давайте больше расстояния 🙂 Также там интересно пояснено, зачем иконке по тапу появляющаяся область вокруг: чтобы дать пользователю подсказку о том, что он что-то нажал, ведь иконку саму он своей сосиской закрывает. Очевидно? Не всем, потому и пишу 😉 https://medium.com/@uxmovement/how-to-prevent-users-from-mistapping-icons-cfad3463c736

Сейчас перед нами встала одна очень интересная задача: создать гайдлайн, но не для компонента, а для иллюстраций. Возникла идея создать конструктор сцен, чтобы можно было собрать иллюстрацию под любую историю. И только голова начала наполняться мыслями, как кое-кто навёл на опыт коллег из лаборатории Касперского: https://vc.ru/design/36056-kak-my-razrabatyvali-stil-korporativnoy-illyustracii-laboratorii-kasperskogo В статье довольно много годных идей: стандартизация не только персонажа, но и цветовой гаммы теней, а также обьектов переднего и заднего планов, фонов, толщин линий в разных масштабах, пластичности и взаимодействия объектов. Однозначно стоит заценить. Что-то подобное делали Shopify, если мне не изменяет память, но там был менее системный и более философский подход :)