Дизайн

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

Привет, Хабр! Меня зовут Виктория Марухняк, я дизайнер интерфейса продукта Polymatica Dashboards. Мы разрабатываем BI-платформу, и нам критически важно проектировать простой и удобный интерфейс, чтобы пользователи могли легко строить и читать аналитические отчеты. В этой статье поделюсь своим первым опытом рефакторинга и обновления дизайн-системы и тем, как это помогло нам наладить общение между дизайнерами и разработчиками. Без прикрас и розовых пони.

Привет всем любителям size coding, сегодня я расскажу о чём-то потрясающем: крошечном движке трассировки лучей (raycasting) и генераторе города, умещающихся в автономном файле HTML размером 256 байтов.

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

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

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

Вы знали, что первая компьютерная стратегия появилась ещё в 1964 году? А сможете ответить на вопрос, когда состоялся первый чемпионат мира по StarCraft II? 

Поговорим сегодня о зарождении стратегий, о том, какие настольные игры адаптировали на Apple II и TRS-80, о влиянии жанра на киберспорт, о проектах, реализованных российскими разработчиками. 

А в комментариях просьба писать, в какие именно стратегии вы любите играть сейчас, в какие играли раньше и какие проекты вы считаете самыми интересными. 

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

Исходный код к этой статье выложен на GitHub.

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

Не утихающая в последние годы мода на различного рода ремастеры не обошла и титана игровой индустрии в лице Blizzard. Неоднозначный ремастер Warcraft III: Regorged (2020) собрал вокруг себя много шума, в то время как другой релиз, как мне показалось, прошёл не столь замеченным, в особенности его дополненный вариант. Сегодня хотелось бы кратко остановиться на сборнике Blizzard Arcade Collection (2021) и впечатлениях от такового.

Салют, хабр! Сегодня стартовали продажи SberBox 2 — обновленной ТВ-приставки от SberDevices. В SberBox 2 мы учли отзывы пользователей и реализовали ряд улучшений, которые делают его еще более удобным и стабильным. Так, например, за стабильное соединение теперь отвечает разъем LAN, устройство не болтается на проводе, а надёжно крепится к телевизору с помощью велкро-липучки, а провод зарядки больше не упирается в стену.

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

В череде дней «длинных» майских праздников решил развернуть голосовой помощник на сервере домашней автоматизации Home Assistant. Мой домашний сервер работает под управлением ОС Ubuntu Server 23.10 и не имеет никаких предустановленных источников или приемников аудио и видео информации. В Ubuntu были установлены аудиосервер PipeWire и менеджер сеансов WirePlumber. Такой выбор был продиктован тем, что эти приложения являются стандартным ПО по обработке аудио и видео потоков в Linux. В сети мне не удалось обнаружить какого-либо полного описания процесса настройки, и эта статья, в некоторой степени, восполняет этот пробел.

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

В статье покажу:

• что влияет на внешний вид клавиатур,

• виды нативных клавиатур и их поведение,

• как отличается применение клавиатур для одних и тех же команд.

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

Всем привет!

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

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

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

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

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

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

Сегодня мы рассмотрим следующие аспекты:

• какие скрытые проблемы с паттерном «visually-hidden» нас ждут;
• в каких ситуациях кнопка «Закрыть» указывает на выход;
• чем вредно значение contents у свойства display;
• почему подсказка с помощью атрибута aria-label вызывает недоумение.

Давайте начнём!

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

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

Привет, Хабр! Меня зовут Артём Поморцев. Я фронтенд-разработчик компании «Криптонит» и хочу поделиться своим опытом создания набора иконок (icon pack).

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

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

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

Существуют ли альтернативы Figma? Обзор основных конкурентов. Есть ли те, которые способны потеснить дизайн-гегемона с первого места?

От переводчика. Привет! Цель перевода этой статьи проста - провести четкие границы между обозначенными выше терминами. При проектировании новых сценариев для B2B CRM я столкнулся с тем, что каждый человек в команде понимал "макет" или "прототип" по-своему. Также выяснилось разное понимание, кто в команде за какие технологии прототипирования должен отвечать. Я провел исследование материалов по теме и хочу поделиться тем материалом, после которого для меня "все встало по полочкам".