Обновить
64K+

Веб-дизайн *

Дизайн спасет мир

26,2
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Новая отечественная Figma — Linia

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели5.4K

Не так давно меня приглашали тестировать Figma-like редактор от Ростелекома. Тогда он был всё-таки сильно сырой. Оказалось, что другие команды не дремлют и тоже готовят свои решения. Сегодня у нас на обзоре новый кандидат на импортозамещение Figma. Называется linia.pro. Сервис около года разрабатывается командой из Москвы.

Подробнее →

Новости

Штрафы от Роскомнадзора и ФАС за нарушения, допускаемые на сайте

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели4.7K

Большинство экспертов, наставников, онлайн‑школ при запуске своего курса/обучения думают о том, как получить ту конверсию заявок и учеников, которые они поставили себе как цель. Думают также о своем продукте и его качестве, чтобы ученики получили и были довольны своими результатами. И совсем забывают обезопасить свой запуск с юридической стороны. Как итог: несут колоссальные убытки.

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

Читать далее

Как я пыталась разобраться в Claude Code, а в итоге сделала плагин для Figma

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели5.5K

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

А в итоге разобрала файлы проектов Claude Design по кусочкам, потратила месяц на отладку и сделала плагин, который переносит готовый проект из Claude Design прямо в Figma — с редактируемыми слоями, auto‑layout, текстами и данными.

Читать далее

Шрифт — это не просто буквы: как устроен шрифтовой дизайн, что изменят нейросети и за что на самом деле платят

Уровень сложностиСредний
Время на прочтение26 мин
Охват и читатели5.9K

Почему логотип Coca-Cola — не шрифт, зачем одной гарнитуре сотни знаков, почему хороший веб-шрифт надо проверять на плохом мониторе и что именно нейросети уже могут забрать у шрифтового дизайнера?

Я, Александр, автор телеграм-канала «Shulepov Code», поговорил с Александрой Корольковой — арт-директором Paratype, автором книги «Живая типографика» и YouTube-канала «Шрифтовой видеоблог», соавтором PT Sans, PT Serif и других известных шрифтовых систем. Обсудили историю профессии от металлических литер до веб-шрифтов, устройство работы шрифтовой студии, лицензии и цены, роль кириллицы, инструменты, заказные проекты, ИИ и довольно практичный ответ на вопрос, сколько шрифтов действительно нужно одному сайту. 

Читать далее

Извлечение генома стиля в Chat GPT: от референса до готового скила

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели7.6K

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

Подробнее о геноме стиля

Можно ли собрать работающий интерфейс на ИИ за час?

Уровень сложностиПростой
Время на прочтение12 мин
Охват и читатели12K

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

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

Забыла представиться: меня зовут Камила, я проектировщик интерфейсов в Selectel. Вместе с бумом ИИ коллеги чаще начали ко мне приходить с вопросами такого рода: «Мне ИИшка макет сделала, сделай ревью, пожалуйста». Так что я решила разобраться со своей дизайн-колокольни — где ИИ может помочь, а где создает привлекательную, но не самую работающую концепцию. 

Читать далее

Задача со звёздочкой для фронтенда: выравниваем иконки с текстом

Уровень сложностиСредний
Время на прочтение16 мин
Охват и читатели6.8K

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

Тогда почему с ней не могут справиться ни Apple, ни Microsoft, ни Google, ни другие техногиганты? 

Меня зовут Армен Аллахвердян, я фронтенд-разработчик из команды дизайн-системы Авито. В статье разберёмся, почему простая на первый взгляд задача вызывает столько проблем, и выясним, как надо и как не надо выравнивать иконки.

Читать далее

Скроллбар в 2k26

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели8.8K

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

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

Что, если я скажу вам, что в 2026 году JavaScript для всего этого нам больше не нужен?

Не верю!

Я попросил Claude Code собрать макеты сайтов и выяснил, на что уходят токены

Уровень сложностиПростой
Время на прочтение10 мин
Охват и читатели17K

В конце марта 2026 года Figma открыла канвас для AI-агентов. Claude Code, Codex и подобные инструменты получили возможность создавать и редактировать макеты через MCP-сервер Figma.

Я решил проверить, насколько хорошо Claude Code сможет перенести дизайн сайтов в макет и сколько это будет стоить. Для этого я выбрал несколько лендингов и попросил агента перенести их на канвас - пробовал давать ему либо скриншот, либо ссылку на сайт. Каждый раз я смотрел, какие шаги выполняет агент, сколько раз обращается к инструментам и сколько токенов (то есть денег) тратит.

Читать далее

Почему фирменный стиль ломается внутри интерфейса

Уровень сложностиСредний
Время на прочтение11 мин
Охват и читатели11K

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

Читать далее

Как виджет для интернет‑магазина чуть не спалил мой iPhone: Lottie vs видео‑спрайты на телефонах

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели7.9K

Казалось бы, что может пойти не так с легковесными векторными анимациями? Вектор в Lottie, JSON весит копейки. Но тестирование на реальном телефоне закончилось фиаско: через пару минут скролла чип раскалился до 42 °C, а интерфейс ушёл в троттлинг.

Оказалось, что покадровый пересчёт кривых Безье в JS на мобильных экранах быстро превращает телефон в печку.

В кейсе разбор того, как мы перешли на аппаратно декодируемые видео‑спрайты, почему IntersectionObserver втихую крутил видео под непрозрачными модалками и как в итоге удалось сбить температуру обратно до стабильных 30 °C.

Читать кейс

Ошибки ценою в миллионы: как не попасть под штраф за некорректную работу с персональными данными

Уровень сложностиПростой
Время на прочтение8 мин
Охват и читатели8.7K

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

Читать далее

CSS задачи на 200 IQ

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели14K

У вас бывает такое чувство, когда вы при выполнении работы упёрлись в какую-то проблему и что-то внутри подсказывает, что не может такого быть, чтобы у неё не было решения? Когда кажется, что уже всё пропало и мы столкнулись с фундаментальным ограничением реальности, но отказ принять это продолжает вести вас в дебри спецификаций, беседы на Github 10 летней давности и изучение статей гигантов уже прошедших этот путь и поделившихся с нами своими результатами? И вот спустя многие часы напряжённого скрипа извилин вы дописали очередную строчку, обновили страницу и вот оно, то, что вы хотели получить смотрит на вас с экрана? Это ощущение успеха, наверное, в той или иной степени знакомо каждому инженеру. В такие моменты мне, обычно, очень хочется поделиться результатом с коллегами и, по возможности, написать статью если это может быть полезно кому-то ещё. В этой записи я собрал 3 подобных ситуации, где в рамках нашей работы возникли решения, которые, насколько мне известно, довольно уникальны и в полной мере не были описаны раньше. Приглашаю вас разделить со мной радость обнаружения решения, которое казалось невозможным!

Читать далее

Ближайшие события

Бенто‑тест, который проваливают агенты — стресс‑тест для интерфейса в японском стиле

Время на прочтение5 мин
Охват и читатели6.2K

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

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

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

Читать далее

Как перенести навайбкоженный проект в Figma через Claude Code и получить дизайн‑систему

Уровень сложностиПростой
Время на прочтение9 мин
Охват и читатели7.5K

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

Файла нет. 

Есть интерфейс, который существует только в виде кода. Кнопка там называется.btn‑primary,.btn‑add и.button‑save — три класса, одна кнопка, паддинги отличаются на пиксель. Серый цвет записан тремя способами, и один из них, судя по всему, опечатка. Отдать это дизайнеру нельзя. Нарисовать заново — значит выбросить полгода работы и начать спорить про радиусы. 

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

В статье — что из этого вышло, с цифрами и с местами, где всё сломалось.

Читать далее

Сайты, домены, реклама. Все сроки скоро пройдут, придет пора штрафов и отсутствия клиентов

Уровень сложностиСредний
Время на прочтение5 мин
Охват и читатели5.3K

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

Август для меня традиционно пора проведения аудитов сайтов и кабинетов контекстной рекламы Яндекс.Директ. Поток писем и звонков с вопросами идет волнами.

Что интересно, до сих пор довольно большая часть корпоративных сайтов все еще не соответствуют требованиям Федерального закона от 27.07.2006 № 152-ФЗ «О персональных данных». А подавляющая доля тех, кто работает с контекстной рекламой, не знает о том, что Яндекс включает новые опции и инструменты автоматически, и сильно удивляются, почему проседает поток лидов.

Давайте обсудим, на что нужно обратить внимание.

Читать далее

Аптечный e-com: как не перестараться с заботой и не потерять клиента при оформлении заказа

Время на прочтение4 мин
Охват и читатели8.5K

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

О том, как мы в маркетплейсе здоровья «Здравсити.ру», одном из крупнейших аптечных интернет-сервисов, учились на ошибках и перестаралась с заботой о клиентах, но впоследствии смогли исправить ситуацию – в материале ниже.

Читать далее

Почему в Chrome маленькие JPEG выглядят иначе

Время на прочтение4 мин
Охват и читатели12K

Этот значок на компьютере моего коллеги выглядит лучше

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

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

Если прищуриться или отойти подальше, то изображение из Chrome выглядит толще. Это немного странно, но если заменить картинку на SVG, то проблема исчезнет. Однако мне всё равно стало любопытно: почему она вообще так рендерится?

Я провёл исследование и обнаружил в Chrome изящную оптимизацию, используемую для рендеринга JPEG в мелком масштабе.

Читать далее

Разработка возвращает макет: базовая гигиена Figma‑макетов

Уровень сложностиПростой
Время на прочтение12 мин
Охват и читатели7K

Грязный макет — грязный код. Чистый макет — адекватный код и отсутствие вопросов «что тут имелось в виду»: разработка получает то, с чем можно работать.

Элементарщина, про которую забывают/не успевают, ведь это просто, примитивно, но страдают все… В СВОЙ Тех решили написать спецификацию по тому, в каком виде желательно отдавать макеты в разработку. Разработка получила аргументацию для возвращения макета. Потому в «сесть и сделать сразу хорошо» заинтересованы все — но это время, и его надо закладывать в процессы. Внутри — правила, советы, рекомендации и чек‑лист для краш‑теста, которые помогают собраться и сделать хорошо сразу.

Из элементарного строится бо́льшее...

Читать далее

Самый ламповый проект Apple, который с треском провалился

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели8.5K

90-е были для Интернета чем-то вроде эпохи Дикого Фронтира: никаких правил, никакой цензуры и никакого блёклого веб-дизайна от биг-корпов. Стремясь перетянуть на свою сторону ещё не слишком многочисленную онлайн-толпу, компании и стартапы пытались придумать что-то этакое — и порой создавали очень странные, но безумно интересные продукты.

Читать далее
1
23 ...