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

Часто это сложнее, чем привирать с помощью красивых графиков.

Поэтому я собрал несколько базовых принципов визуализации, которые применяю в работе (список источников в конце). Пригодится, если вы пишете отчеты, готовитесь к презентации или просто хотите донести смысл каких-то цифр. Главное: чтобы сделать хороший график, не нужно быть талантливым художником или виртуозно владеть matplotlib/ggplot2. Поехали.

Typographic UI – новая концепция дизайна, философия которой выражается тремя словами: интерфейс есть текст.

До последнего времени все концепции пользовательских интерфейсов

В предыдущей статье на тему дизайна таблиц в Фигме мы выяснили, что базовый элемент создания любого data grid — это компонент ячейки, внутри которого спрятано все необходимое для того, чтобы оставаться в одном экземпляре и строить таблицы ячейка-за-ячейкой. Теперь поговорим о её структуре: какие элементы вложены, случаи использования, рассмотрим темификацию таблиц через токены-цвета. И напоследок расскажу о передаче спецификаций разработчикам и интеграцию таблиц в React/Angular фреймворки прямиком из Figma дизайн-системы. Пока руками, ибо будущее всё еще где-то рядом.

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

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

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

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

1. Структура и схема.
2. Представление и доступность.
3. Выбор используемых графиков.
4. Усовершенствование контекста.

Часть 1. Структура и схема

Давайте для начала остановимся и зададим себе два вопроса: кто наша целевая аудитория и каковы её цели?

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

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

Недавно мы написали на Хабр колонку о том, как выпустили собственную онлайн-игрушку. Одной из фишек, над которой мы серьезно заморочились, стала AI-генерация аватарок для своего персонажа «на лету» по фотографии (пока работает в прототипе и частью игры не является). При этом технология сама по себе интересна и может быть применима далеко не только у нас. Как обещали, рассказываем про неё подробнее и даем пощупать прототип вживую!

Под катом также можно найти: почему сделали выбор в пользу нетипичной системы обучения ИИ — без разметки данных, и почему считаем это научной инновацией; наши факапы при создании AI-аватаров, которые не нужно повторять; как и где сегодня используется Domain Adaptation.

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

Осторожно! Много картинок и трафика!

Гиперсмысл — это «смысл, упакованный в архив». Скрытый в тех или иных символьных конструкциях так, чтобы выполнялось правило: чем больше всматриваешься, тем больше видишь. Для чего это нужно?

Assembler – мой любимый язык, … но жизнь так коротка.

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

Зная себя, я уверен, что игра едва получит своё воплощение, но возможно кого-то из общественности заинтересуют мои наработки на этом тернистом пути. И так приступим.

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

В своей предыдущей статье How To Make Low Poly Look Good я говорил, что главная цель низкополигонального (low poly) дизайна — донести сообщение через наименьшее количество форм.

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

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

---

Я буду работать в Blender. В Maya, Max и других 3D-редакторах есть похожие инструменты, так что не беспокойтесь об этом.

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

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

1. вводят в заблуждение;
   
2. сбивают с толку;
   
3. не могут довести смысл.

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

Заметил, что многие продуктовые дизайнеры задаются вопросом «Как организовывать разные состояния компонентов?». Весь дизайнерский мир делится на 2 части. Первые делают один компонент, в котором несколько папок для всех состояний. Вторые делают для каждого состояния элемента отдельный компонент.

Сначала разберу преимущества и недостатки каждого из них, а потом рискну предложить еще один вариант. Рассказываю о реализации в Фигме. Возможно, в других редакторах что-то не применимо.

1. Один компонент со множеством состояний

Преимущества

• Библиотека компонентов выглядит компактнее.
• В панели компонентов меньше элементов и поэтому меньше скролишь в поиске нужного. В этом случае спасает поиск по имени.

Недостатки

• Где-то нужно все таки показать верстальщику все возможные состояния, потому что он не видит скрытые слои.
• Приходится тратить время на поиск нужного состояния: его показ и скрытие ненужного. Особенно это утомляет, если структура компонента сложная.

Школа дизайна Bang Bang Education начала сбор средств на фильм-исследование «33 слова о дизайне», который будет посвящен современному дизайну в России. В нем каждый из 33 героев за две минуты попытается ответить на вопрос, что такое русская культура и эстетика. Основную сумму школа собирает у себя на сайте, а часть — на краудсорсинговом сервисе Планета. В прошлом году эта же команда сняла киноальманах «100 лет дизайна», в котором за полтора часа рассказывают о ключевых объектах и явлениях в мировом дизайне за последний век.



На вопросы Хабра о новом фильме и о том, каково было работать над предыдущим проектом, ответили Наташа Климчук, Тим Черный и Оля Морозова — сооснователи школы и создатели обоих фильмов.

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

01. Мондрианизм

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

---

02. Серендипность

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

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

Вы спросите: зачем нужна серендипность? Здесь все просто. С ее помощью можно сделать пользователя счастливее, а сайт/приложение – эффективнее, представляя пользователю возможность потреблять более релевантный контент и чувствовать себя в своей тарелке.

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

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

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

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

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

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

Работа творческого руководителя

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

Вот палитра нашего сервиса Envoy. Как и многие цветовые схемы в вебе, она включает фирменный цвет (красный), информационный цвет (синий), цвет успешной операции (зелёный), цвет предупреждений (жёлтый) и разные оттенки серого.

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

Руководитель отдела проектирования интерфейсов в Контуре Сергей Соловьёв и IT-рекрутёр в IT-People.ru Рушана Каюмова на прошлогодней конференции DUMP рассказали про ошибки в резюме и портфолио, которые допускают даже самые опытные дизайнеры, как сделать правильное тестовое, как пройти собеседование и не довести до слез рекрутёра и арт-директора.

Доклад нисколько не потерял своей актуальности за год, поэтому под катом публикуем его видео и текстовую версию.

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

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



Куда смотрели разработчики, художники, дизайнеры… Или это просто очередной маркетинговый ход, ибо человек воспринимает происходящее на подсознательном уровне, вот так и с логотипом… вызвало эмоции (неважно какие главное сильные) и вот уже сложно выбросить из какой-то ячейки памяти это «изобразительное искусство», надпись. И так, оказалось, а таких уникальных логотипов не мало). Вот о них и будем рассуждать в теле этой статьи-обзора.

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