Дизайн

Еще раз о дизайн-системах

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

Из чего состоит дизайн-система?

Дизайнеры создают UI Kit (набор готовых дизайн-решений) → Разработчики переводят UI Kit в код → Код помещают в репозитории

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

Когда и кому нужна дизайн-система

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

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

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

• У вас несколько команд, которые работают над одним продуктом, и им нужно поддерживать консистентность.

Однако есть и ложка дегтя

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

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

P. S. Го к нам в канал о дизайне :)

Самый слабый босс в игре, 6х30, монохром, 3 кадра, постобработка - реально мало пикселей

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

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

Мало пикселей + вытянутая форма - пришлось повозиться. На анимации: исходные пиксели, постобработка и двое с эффектом. Собрал демку - нормально, таких бить можно.

Эффект Хичкока в игре

Добавил в игру эффект (на переход в режим "Матрицы"), который впервые использовался в фильме Альфреда Хичкока "Головокружение" (Vertigo), 1958. Эффект называют по разному: эффект "раздвигающегося пространства", "обратный трекинг", "контр-зум", и т.д.

В кино этот эффект достигается так:

1. Камера приближается к объекту

2. Одновременно вращается кольцо масштабирования

Причем (1) и (2) синхронизируются так, чтобы размеры объекта съемки оставались неизменными.

Я же пытаюсь повторить этот эффект у себя в игре путем хитрого манипулирования параметрами параллакса. Почти получилось (не совсем, конечно). Как сморится в игре? Интересно?

OpenAI обновила интерфейс приложения ChatGPT, сделав его минималистичным. Теперь пользователь общается с большим чёрным кругом, который изменяет свои формы и размеры в зависимости от происходящих событий. Когда ИИ говорит, то круг меняется, визуально усиливая ощущение диалога и взаимодействия.

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

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

В настоящее время обновлённый интерфейс ChatGPT доступен только для настольных и мобильных приложений ChatGPT. В веб-версии сервиса по-прежнему используется стандартный текстовый интерфейс.

Чувак с дробовиком, 24х30, монохром, 2 кадра, постобработка.

Почти все текстуры спрайтов у меня в игре создаются программно во время загрузки. Вот несколько этапов: Изначальный => Постобработка под эффект CRT монитора => Динамическая постобработка для эффектов игры (появился, побегал, умер, выдал лут).

Apple Pencil Pro будут продаваться в персонализированных упаковках с художественным оформлением. Дизайнеры компании подготовили пять иллюстраций со словом «Pro». При заказе онлайн не будет возможности выбрать оформление коробки, поэтому коллекционерам придётся покупать устройства в магазине.

Apple добавила рамки новых iPad в библиотеку шаблонов для Sketch. Разработчики и дизайнеры могут использовать их для оформления скриншотов и мокапов. Рамки доступны в файле All Product Bezels.

Привет! 14 сентября мы вновь проведём Practical ML Conf — ежегодную конференцию Яндекса, посвящённую практическим аспектам применения ML-технологий. Сегодня мы открыли приём заявок для тех, кто хотел бы поделиться своим опытом и выступить с докладом.

Ключевые темы конференции в этом году: CV, RecSys, MLOps, NLP, Speech и Analytics. Мы ожидаем глубокие технические доклады и хотим поговорить о прикладных решениях, которые уже сейчас приносят пользу. Сбор заявок завершится 13 июля. Программный комитет примет решение об участии на основании критериев «полезность», «новизна», «сложность» и «практичность».

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

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

Фанаты создали мод, который преобразует Helldivers 2 во вселенную Star Wars. В игру добавлены клоны, персонажи Рекса, Коди и головорезов из истории The Bad Batch (Звёздные войны: Бракованная партия). Также автоматоны заменены дроидами и заменены модели космических кораблей.

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

Nike выпустила для Тима Кука специальную версию кроссовок Air Max, дизайн которых сделали на новом iPad.

В Nike пояснили, что это уникальная модель Nike Air Max 1 ’86s, разработанная специально к презентации Apple. Примечательно, что на язычке обуви от руки написано Made on iPad.

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

7 мая 2024 года Apple провела презентацию, полностью посвящённую обновлению линейки iPad.

Apple подготовила свой сайт к предстоящему «специальному мероприятию» под названием Let loose, которое состоится 7 мая и сопровождается рисунком Apple Pencil, что позволяет предположить, что в центре внимания будет обновлённые iPad Air, iPad Pro и аксессуары для планшетов, включая Magic Keyboard и стилус Apple Pencil с новым жестом сжатия с тактильной обратной связью.

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

Apple пополнила свою библиотеку макетов для Figma. Дизайнерам стали доступны следующие шаблоны:

• TipKit;

• Wallet;

• Tap to Pay on iPhone;

• Siri & App Shortcuts;

• Sign in with Apple;

• Messages;

• Live Activities;

• Apple Pay;

• App Clips.

Чек-аут

В интерфейсах интернет-магазинов это экран, который пользователь видит перед тем, как перейти на страницу оплаты.

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

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

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

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

Я бы предположил, что это всё и так очевидно, однако сам начал убирать шапки с подвалами со страниц чек-аутов года два-три назад. А ведь, казалось бы, опытный специалист.

Вообще подобные страницы уже давно спроектированы и оттестированы в любом крупном маркетплейсе и как две капли воды похожи друг на друга.

В код проекта открытого мультимедиа-пакета FFmpeg добавлена начальная поддержка Dolby Vision.

Dolby Vision — это набор видеотехнологий с расширенным динамическим диапазоном (HDR) от Dolby, который был одним из первых широко доступных форматов HDR. Dolby Vision — альтернатива формату HDR10+.

Dolby Vision является запатентованным проектом, но ведётся постоянная работа для его реализации с открытым исходным кодом, например, над библиотекой VideoLAN libplacebo, кодировщиком x265, MPV и так далее.

В проект FFmpeg добавлены блоки расширения Dovi для Dolby Vision и выполнены другие подготовительные работы по добавлению нового инструмента. Также запланировано добавление кодирование Dolby Vision для FFmpeg с помощью libx265, libaomenc для AV1 и libsvtav1 для кодировщика AV1 от Intel SVT-AV1.

5 апреля 2024 года состоялся релиз открытого мультимедиа-пакета FFmpeg 7.0 под кодовым названием Dijkstra для Linux, Windows и macOS.

В FFmpeg 7.0 входит набор приложений и коллекция библиотек для операций над различными мультимедиа-форматами (запись, преобразование и декодирование звуковых и видеоформатов). Исходный код проекта распространяется под лицензиями LGPL и GPL. Разработка FFmpeg ведётся сообществом смежно с проектом MPlayer.

Фантастический уикенд с 18 по 21 апреля прошёл на конференции «Дизайн‑выходные»! Этот проект, организованный российским дизайн‑сообществом, приносит нам полезные знания, новые знакомства и удивительные впечатления уже 13 лет подряд.

На этот раз мы собрались в Нижнем Новгороде, послушали лекции, приняли участие в дискуссиях и мастер‑классах. Целых 9 залов, 150+ спикеров и 190+ часов активностей — это отличная возможность погрузиться в каждую нишу индустрии. И хотя мы не успели посетить все мероприятия, каждый из нас остался в восторге от атмосферы встречи и обмена опытом.

Большое спасибо организаторам и спикерам этого события! Их труд и преданность делу позволили нам получить удовольствие и открыть для себя что‑то новое. А чтобы вы могли продолжить вдохновляться и изучать дизайн — смотрите материалы, которыми поделились спикеры и организаторы:

• Дизайн-выходные: официальный сайт, канал в Telegram, чатик в Telegram

• Программа и материалы в Figma

• Видео «Главный зал»: 2 день, 3 день

• Видео «Зал Дизайн‑центричность»: 1 день, 2 день

• Фотографии: 1 день, 2 день, 3 день, фотографии от Dprofile

• Презентации спикеров

• Материалы от спикеров, которые не смогли приехать/выступить

• Любительская съёмка

Indika – сверхъестественное в нашей жизни

Поговорили с Дмитрием Светловым, основателем студии Odd-Meter, о разработке, смыслах, заложенных в Indika, и искусственном интеллекте.

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

Indika выйдет уже 2 мая, добавляйте в вишлисты.

Попробовать получить работу в студии Odd-meter можно через их сайт.

Играйте игры и приходите к нам в гости.

Подкаст в аудиоформате доступен на платформах:

• Apple Podcasts,

• Яндекс.Музыка,

• Spotify,

• Castbox,

• Ссылки на все другие платформы

Почему я не делаю публичных разборов

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

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

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

Ещё причина. Я стараюсь не лезть в чужие монастыри со своими уставами. И стараюсь не давать советов там, где у меня их не спрашивали. Стараюсь — и не всегда у меня это получается. Так зачем же мне ещё больше усугублять своё положение какими-то «разносами»?

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

В продолжение моего поста от 20.12.2023... Да, я до сих пор пытался продолжать пользоваться Evernote... Но сегодня понял, что:

• моя десктоп‑версия не синхронизируется уже как минимум месяц(!) — из‑за какой‑то ошибки синхронизации, которую даже не понятно где смотреть (просто восклицательный знак на кнопке синхронизации)

• меня достало постоянное напоминание каждый день об очередном обновлении (и ладно бы хотя бы ушла ошибка синхронизации — нет, обновляется каждый день. а что‑то полезное не появляется)

• из всего Evernote я по факту пользуюсь WebClipper, потому что из‑за ошибок синхронизации и тормознутости десктопный клиент почти бесполезен (особенно, когда что‑то нужно найти)

• оказалось, что и веб‑клиент Evernote теперь жутко тормозит даже просто чтобы вывести список заметок

Ну и понял, что уже все совсем созрело для перехода на Obsidian...
И что же ? Перейти можно сейчас только через десктоп-версию (потому что загрузить в Obsidian можно через enex-файл, а он выгружается только из десктопа Evernote). Т.е. новые заметки, созданные за последний месяц, нужно переносить "ручками".

В общем ладно - запустил я выгрузку из десктоп-версии в enex... и думаю - проверю, а место у меня хватит ? Иду в папку с данными evernote, и вижу, что она занимает 20ГБ (думаю - ничего так я за 10+ лет насобирал)... потом погружаюсь внутрь и понимаю, что сама база занимает ~5ГБ, а остальные ~14ГБ - это папка с копиями установочных пакетов (см. скрин ниже)... В общем адьос Evernote - десктоп удаляю!

Приходит потенциальный клиент к разработчику…

— Мне бы сайт разработать! Можете сказать, сколько это будет стоить?
— А проектная документация у вас есть?
— Не-а.
— Она нужна для оценки. Попробуйте сходить к проектировщику интерфейсов. Возвращайтесь с проектной документацией — и я оценю разработку.

И клиент идёт к проектировщику интерфейсов. Например, ко мне.

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

Вот примерно так я обычно и создаю документы под названием «Функциональные требования» (ФТ). По ним я могу оценить объём работ по проектированию. Вот вам видеоролик, в котором показываю пример такого документа и рассказываю о некоторых нюансах его подготовки.