Егор Горохов написал, как дизайнеры студии Kelnik передают верстальщикам информацию о вертикальных отступах.

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

Уровень блока показан цветом.

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

Расставить отступы по странице — дело не быстрое и муторное. Но преимущества такие:
— Макеты выглядят аккуратнее;
— Проще рисовать после перерыва;
— Новый дизайнер, которого подключают к проекту, рисует в той же системе координат, для фронтендеров не будет сюрприза;
— Поддержка проекта опирается на конкретные цифры при разработке.

По оценке фронтендеров, время на работу с отступами сокращается на 90%. Фронтендер тратит 5−10 минут на заведение настроек в SASS и больше не переживает об отступах. Ему не нужно ничего замерять линейками, он своими глазами видит (цветовое кодирование), какой отступ у блока.

https://designpub.ru/82cad46dd34f

Если в вашей команде нет специалиста по написанию микротекста (интерфейсного текста), вам могут пригодиться рекомендации Райана Кордела.

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

2. Сокращайте формулировки. Избавляйтесь от длинных заумных слов и витиеватых предложений. Избегайте страдательного залога.

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

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

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

6. Тестируйте понятность, иерархию и полезность текста: проводите исследования, узнавайте мнения людей, даже если они не совсем ваши целевые пользователи.

https://telegraf.design/6-pravil-mikrorajtinga-dlya-produktovyh-kompanij-bez-ux-kopirajtera/

Тейсану Тюдор поделился советами UX-дизайнерам, которые собираются работать в корпорации.

Применимо к любой специальности:

1. Будьте готовы ждать, пока вам поручат действительно важную задачу. Это похоже на RPG: до боя с драконом надо выполнить много скучных квестов.

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

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

4. Спросите о планах развития команды: расширение исследовательской работы, объём инвестиций в обучение, готовность к полевым исследованиям, возможность получить доступ в UX-лабораторию для тестирования? Надо понять, какие усилия и ресурсы вкладываются в команду.

5. Не ввязывайтесь в политические игры. Предложите свои рекомендации по проекту кому-нибудь нейтральному.

6. Научитесь говорить нет. Не соглашайтесь помогать, если вопрошающий точно не знает, что ему нужно. Или если это отвлекает вас от действительно важной задачи.

Применимо к UX-дизайнерам:

7. Проверяйте, что ваши усилия, вложенные в поиск решений, отражаются на продукте, а не остаются стикерами на доске идей.

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

9. Научитесь разбираться, когда надо отступить и когда надо добиваться совершенства. Не все заботятся о UX, кто-то просто хочет побыстрее закончить работу. Научитесь разговаривать с разными людьми и объяснять, как ваша работа добавляет долгосрочную ценность пользователям и компании.

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

11. Договоритесь о терминах с участниками команды.

https://ux.pub/10-veshhej-kotorye-ya-xotel-by-znat-do-togo-kak-stal-ux-dizajnerom/

Артемий Лебедев, Илья Михайлов и Артём Горбунов для альманаха «100 лет дизайна» вспоминают веб-дизайн 1995−2000 годов.

— Сайт как свиток и как книга с оглавлением;
— Резиновые сайты;
— Влияние технических ограничений;
— Особенности дизайнеров того времени: тогда — стремление пройти по верхней грани технологических возможностей, сейчас — стремление добиться решения задачи (выразительности послания) как можно меньшими средствами, в том числе нулевым интерфейсом;
— Баланс пользы продукта для бизнеса и для потребителя;
— Чем вдохновлялись в то время;
— Как веб повлиял на окружающий мир: ожидание интерактивности от окружающих объектов, взаимодействие жестами (свайп, пинч);
— Будущее дизайна.

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

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

https://www.youtube.com/watch?v=OB59qDfIiQs

Егор Камелев написал, зачем нужны функциональные спецификации.

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

Зачем нужна:
1. Донести до разработчиков информацию, которую невозможно отобразить в интерактивном прототипе;
2. Чтобы стать частью договора на разработку;
3. Помогает восстановить информацию по «замороженным» на длительное время проектам;
4. Во время её написания проектировщик проделывает двойную проверку интерактивного прототипа, находит ошибки и несостыковки и вносит правки.

https://vk.com/@projectorat-pochemu-neobhodimo-pisat-funkcionalnye-specifikacii

Команда Readymag подготовила материал о сетках: какие бывают и чем они полезны дизайнерам и пользователям (читателям).

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

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

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

Обложки дисков британской группы The XX, а также сольников Джейми Смита, одного из членов коллектива, — пример концептуальной серии, построенной на одном приеме и простейшей сетке. Первый студийный альбом The XX — это высеченное отверстие в виде креста (или буквы X) в полностью черном внешнем конверте пластинки, в котором виден полностью белый внутренний конверт.

Обложки синглов и EP, связанных с этим альбомом, отличаются тем, что появляется изображение на внутреннем конверте.

Второй альбом и все релизы, связанные с ним, имеют белый внешний конверт. Конструкция «креста» может рассматриваться как сетка этого макета.

На основе этой сетки построена форма отверстия во внешнем конверте сингла Jamie XX Edits, созданного только Джейми Смитом. Таким образом, подчеркивается, что он является частью коллектива. Тут можно возразить, что членов группы трое, а концов у креста четыре, но знающие люди помнят, что на раннем этапе в составе The XX было четыре человека.

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

https://almanac-rus.readymag.com/grid/

Ещё одно интервью с Павлом Грозяном, на этот раз в текстовом формате.

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

«Я рассматривал много вариантов, но подавался только туда, куда мне могли сделать интро (возможность пообщаться с потенциальными коллегами). Не видел смысла тратить время на "холодные" заявки.

Дошел до оффера из Uber Eats, но понял, что это не то место, где бы я хотел работать. "У нас все отлично, только ты должен быть, как акула. Если ты плывешь медленно, тебя начинают есть сзади. А если ты плывешь слишком быстро, то тебя менеджер сожрет", — так сказал мне один из сотрудников Uber. Это было до известного скандала.

У меня местный друг решил открывать в Украине офис разработки. И вот он рассказывает, как нанимает сотрудников и предлагает долю в компании и зарплату, а ему говорят — нет, не интересно, давай только деньги. Так это же отлично для фаундера! Инвесторы его спрашивают: "Сколько у тебя сотрудников в доле?" Ноль! Они были в приятном шоке, больше бабок владельцам и инвесторам».

https://dou.ua/lenta/interviews/grozian/

Джим Росс написал, как давать рекомендации по улучшению UX.

Надо понять, кто будет их читать. От этого зависит восприятие и список дополнительных вопросов, ответы на которые надо дать.

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

Если вы не останетесь в проекте после исследования, убедитесь, что рекомендации понятны, конкретны и выполнимы. Для этого потребуется обсудить решения с исполнителями.

Рекомендации должны быть:
— Понятными, лаконичными (разбейте на подпункты) и в должной мере конкретными (иногда имеет смысл обозначить общее направление решения);
— Правдоподобными (рекомендация естественно исходит из исследования);
— Авторитетными;
— Требующими конкретных действий (что сделать, в каком направлении подумать, что дополнительно исследовать);
— Осуществимыми (но это не значит, что максимально простыми в реализации);
— Гибкими;
— Ранжированными по силе воздействия на пользователей.

https://medium.com/grifer163/bcf959e6a4c7

Документальный фильм Сергея Шановича «Современный русский дизайн» — о последних 20 годах развития индустрии дизайна в России.

Леонид Фейгин и Дмитрий Перишков: «Этим календарём мы гордимся. Он сделан так, что визуальный дизайн практически незаметен, но в нём заложен классный дизайн смысла.

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

Год в основном получается жёлтый. У нас не было ни одного человека, который сказал бы, что год у него был плохой. Люди, которым мы дарили календари, могли по-другому оценить свою собственную жизнь. Очень простая бытовая психотерапия. Это очень позитивный мотиватор, и это — дизайн».

https://www.youtube.com/watch?v=DTBhvB3EOpU

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

На примере двери:
— Размещение дверной ручки не слишком высоко для ребёнка и не слишком низко для взрослого;
— Автоматическое открытие — лучше открытия двери с помощью ручки;
— Ширина — достаточно большая для людей на инвалидных колясках.

Принципы:
— Проектировать так, чтобы пользователь с ограниченными возможностями не испытывал дискомфорта от «особого отношения»;
— Обеспечивать гибкость, чтобы пользователь мог контролировать темп и точность использования;
— Передавать информацию разными способами: изобразительными, словесными и тактильными;
— Допускать ошибки: минимизировать вред и неблагоприятные последствия, которые могут возникнуть из-за непреднамеренных действий;
— Уменьшить физические усилия, необходимые для взаимодействия;
— Дать больше пространства для манипуляций.

https://ux.pub/principy-universalnogo-dizajna-v-povsednevno-ispolzuemyx-produktax/

Я рассказал о функциональных спецификациях к интерфейсу: зачем нужны и как их писать.

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

На записи плохо видно слайды, ссылка на презентацию есть в описании видео.

https://www.youtube.com/watch?v=XaRymaGcPXM

Илья Бирман на нескольких примерах объяснил принцип «дай нажать».

Например, пользователь должен указать хотя бы 1 способ уведомления из 4. Если он выключает 3 чекбокса, нельзя блокировать оставшийся 4-й включённый чекбокс. Надо дать возможность выключить и его тоже. При этом система может автоматически включить один из трёх ранее выключенных чекбоксов.

Или при выборе даты: «Чтобы не дать пользователю ввести несуществующую дату, некоторые разработчики убирают из поля дня несуществующие дни. То есть если выбран месяц июнь, то дня «31» просто не будет в выпадайке. Но что, если у меня день рождения 31 августа? Я хочу ткнуть в 31, а потом выбрать август. Дай нажать!»

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

https://ilyabirman.ru/meanwhile/all/let-me-click/

Павел Шерер написал об использовании состояния потока для увеличения времени пребывания пользователя на сайте или в мобильном приложении.

Состояние потока обычно свойственно играм. Чем оно характеризуется:
— Игрок понимает игровые механики и максимально контролирует ситуацию внутри игры;
— Оказывается полностью погружен в процесс, начинает жить своим персонажем;
— Теряет чувство времени.

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

https://zen.yandex.ru/media/id/5a8249f94826772d3da82e8c/5afe67059b403c5bc1dd4651

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

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

В компании «Сибирикс» подготовили примеры цепочек прототип → мудборд → дизайн и объяснения, которые помогают клиентам перестать беспокоиться и начать думать над стратегическими вопросами.

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

https://blog.sibirix.ru/2018/10/23/proto-design/