Дизайн

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

Если в вашем коде и макетах до сих пор живут значения типа #0055FF — вы копите технический долг, ведь если понадобится изменить этот цвет на другой, придется менять и все компоненты, где используется это значение. А про разные темы вообще можете забыть...

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

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

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

Художники открыли эту логику первыми, когда наносили на холст сетку, пытались управлять светом через темную комнату – она же камера-обскура, а позднее превратили дискретность в художественный принцип. Затем пришла цифровая революция: пиксель стал матрицей чисел, стандартом тестирования и языком видеоигр. А сегодня пиксель вернулся туда, откуда появился, – в материальный мир, но уже как культурный феномен. Теперь пиксель можно держать в руках: это кубик Рубика или кирпичик LEGO. В этой статье мы пройдём путь от аналоговой сетки к цифровому пикселю и обратно… к кубику Рубика.

1.       Преамбула

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

В разработке системы взаимодействующих движков на Elixir, о которой я писал в статье https://habr.com/ru/articles/1002748/, я как раз подошёл к вопросу отображения поступающих данных телеметрии на экран. Когда были готовы соответствующие базовые модули, я воодушевился идеей повторить знаменитый пример из учебника Кернигана и Ритчи. В результате у меня получилось следующее.

2.       Замысел

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

Термин сток заимствован из событийно-ориентированная архитектуры (EDA). Если угодно, то по-русски это будут выходные отверстий, куда данные "утекают". Напоминаю, что мы разрабатываем систему потоковой обработки данных, где данные находятся постоянно в движении.

3.       Систематизация аппаратных средств

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

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

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

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

Всё началось с принтера. Точнее — с 1700 рублей, типографии на Театральной и фотографии моря в Абхазии. Кадр был невероятный: бирюзовая вода, низкое солнце, плачущие эвкалипты, и такой цвет, что хотелось окунуться в дисплей. Я выбрал баритовую бумагу, хотел потом вставить в рамку. Прождал сорок минут в очереди и... На выходе грязно-голубая лужа.

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

Меня зовут Ксюша Новосёлова, я отвечаю за направление обучения и развития UX-исследователей в Контуре. 

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

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

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

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

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

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

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

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

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

Множество Мандельброта. 80-бит FPU x87. OpenMP - параллельным программированием на уровне многопоточности. Синий, зеленый и красный - синусоидальными и косинусоидальными волнами: 127 + 127 cos(2 PI a / 255) и 127 + 127 sin(2 PI a / 255). DwmFlush - синхронизация с монитором 60 fps. Суперсэмплинг 2x2 (4 прохода). Делал я. Посмотрите - движется! Я сделал на g++. Свободно распространяемого компилятора языка C++. Скачайте и посмотрите! Это экзешник, в ГитХаб.

github: Download Latest Version Windows And Source code

Самое полезное - это увеличиваем / уменьшаем и центрируем. Вы на экран любое из множество Мандельброта. Какое вам нравится? Какое интересное? Вы можете все! И потом запишется в файл Mandelbrot.txt - три строки из файла. Вещественная часть центра и мнимая часть центра и ширина видимой области. Потом другая программа читает Mandelbrot.txt и создает Mandelbrot.bmp и уже не суперсэмплинг 2x2 (4 прохода) а 8x8 (64 прохода)!

Интернет постепенно «поглощают» видео с танцами и разговорами от ИИ, и каждому рано или поздно хочется тоже проявить свои творческие задатки и познакомиться с генераторами видео поближе. Однако, сервисов настолько много, что приходится тратить уйму времени на поиск подходящего, а потом выясняется, что он требует ввода данных карты после регистрации, а еще и не все принимает… В этой публикации постараюсь просто и доходчиво объяснить как заставить любое фото говорить с помощью ИИ на русском языке, и без танцев с бубном. А если все‑таки решите попробовать топовые модели самостоятельно, то расскажу, как это сделать. 

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

От английского lip sync означает синхронизация губ. Это техника, при которой движения губ человека синхронизируются с заранее записанным звуком (речью, пением или другим аудио).

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

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

В этой части наших цветовых хроник Ученик Пиксель вместе с Трёхликим Буддой продолжат разбирать завалы терминологического навоза, в котором тонут и профи, и дилетанты. Сложная терминология цифрового цвета, будучи пропущенной через призму гайдуковского абсурда, — как белый свет раскладывается стеклянной призмой на спектральных парней, — рассыпается в такие же понятные составляющие: вопросы, ответы и сюжеты про уже знакомых вам по первой части героев. Вопросы становятся сложнее, а ответы — как всегда, просты и циничны. Заваривайте чай (желательно трёхкомпонентный) и ныряйте в глитчи 11-19.

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

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

Чтобы не ограничиваться личным мнением, мы собрали комментарии дизайн-лидов из крупных российских компаний — финтеха, e-Com, экосистемных сервисов. Их ответы показывают: сегодня дизайн — это роль в бизнесе, архитектура продукта и работа с пользовательским восприятием. Разберемся, как AI встроился в практику и какие задачи по-прежнему остаются за человеком.

Привет! Меня зовут Майя, я UX-исследователь в Контур.Экстерне. В этой статье хочу поделиться своим опытом интеграции исследователя в команду. Разберём, когда такой формат необходим, что он меняет в работе команды и как при этом трансформируется роль исследователя.

Каждый год Pinterest выкатывает отчёт Predicts, и каждый год я ловлю себя на мысли: ну ладно, опять набор красивых мудбордов. А потом проходит полгода, и я вижу эти же паттерны у клиентов, в лентах, в брифах. Совпадение? Восемь из десяти прогнозов Pinterest сбываются, и это уже не про удачу, а про данные.

Отчёт построен на анализе поисковых запросов за два года, с сентября 2023 по август 2025. Охвачены все возрастные когорты: Gen Z, миллениалы, Gen X и бумеры. И вот что важно - это не экспертное мнение одного редактора, а срез реального поведения сотен миллионов пользователей. Люди ищут, сохраняют и планируют. Pinterest видит это раньше, чем Instagram или TikTok.

* Организация Meta, а также её продукты Instagram и Facebook, признаны экстремистскими на территории РФ.

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

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

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

Упор здесь будет также сделан на соотношение цена-качество, поэтому выбор софта сделан в пользу бесплатных продуктов, а харда не с самыми лучшими параметрами, но достойного выбора для домашнего использования. Дома у меня стоит операционка Linux Mint, а на рабочих машинках Windows 11, так что адекватность работы могу оценить по работе в этих системах. По поводу MacOS и Android пишите в комментариях.

Компьютер у меня старенький, 15 лет назад покупался как мощный: процессор – Intel Core i5, ОЗУ: 10 GB, ПЗУ: SSD 128 GB для системы, HDD 1.5 TB для хранения, видеокарта: 768 GB. Ноутбук сразу покупался как «печатная машинка» для творчества в командировках, но, на удивление, и на нём всё запускается: процессор: Intel Core i3, ОЗУ: 8 GB, ПЗУ: 320 GB. Один из приятных плюсов бесплатного софта – это скромность в потребляемых ресурсах. Линейка от Adobe большой любитель оперативной памяти, при сегодняшних ценах – агрейд становится «болючим» для кошелька. Минус бесплатного софта – это низкая интеграция. В больших компаниях происходит глубокая интеграция между сотрудниками. Проекты собирают буквально «на лету». Поэтому проект из одной программы, можно открыть в другой, сохранить, передать дальше. С «зоопарком» софта такого не получится. В лучшем случае, вы будете рендерить, а потом с этим рендером ковыряться. Ну, и при желании превратить хобби в профессию, у вас не окажется необходимого опыта, но его можно будет наверстать, поскольку бесплатный софт в последнее время делается с оглядкой на «мастодонтов» бизнеса.

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

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

Сегодня рассказываю как я писал hypetype для macOS, сколько потратил часов, нервов и денег в сравнении с Windows версией, чему научился и какие выводы сделал.

Привет, я — Александра, юрист для digital-агентств и фрилансеров. Сегодня на примере своего кейса расскажу о том, как мой договор спас веб-дизайнера в суде.

➡️ Начнём с небольшой предыстории.

Ко мне обратился основатель и арт-директор студии разработки сайтов & фирменного стиля для бизнеса и людей FRAMELAR[I] с запросом на создание детально проработанного договора на разработку сайта под ключ. Главный запрос на договор — закрыть риск неполучения исполнителем второй части оплаты после полного завершения проекта (студия работает по модели 50% оплаты до начала оказания услуг, 50% после сдачи проекта).

С учётом всех пожеланий был разработан договор, который в совокупности с моей стратегий ведения дела помог получить решение суда в нашу пользу всего за 2 месяца!

➡️ Начало сотрудничества студии с заказчиком или ничего не предвещало беды.

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

Стоимость проекта: 239 000 рублей.

Состав услуг, которые должна была оказать студия поэтапно: