Обновить
32K+

Веб-дизайн *

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

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

Проверяем промышленный интерфейс на прочность: шпаргалка для UX‑дизайнеров

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

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

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

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

Читать далее

Новости

Новый интерфейс для ВК Видео

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

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

Читать далее

Умрёт ли профессия дизайнера из‑за ИИ? Реальная ситуация в индустрии

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

Что на самом деле происходит с наймом дизайнеров: кого ищут корпорации и заменяет ли их искусственный интеллект

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

Я решил опросить 8 крупных дизайн‑лидов и арт‑директоров из корпораций, чтобы вообще понять, стоит ли вам продолжать стучаться в большие корпоративные машины. Подборочка компаний знатная — Альфа‑Банк, ВКонтакте, Билайн, Dodo Pizza, Digital‑агентство Realweb (входит в группу RW+), Флаувау, Финтабло и ещё один банк из топ-10, который очень попросил его не называть [будет просто «один банк», как договаривались].

Читать далее

Юридические документы на сайте: что и как размещаем?

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

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

Как же должен быть оформлен ваш сайт и что должно на нем быть? Вот вам небольшой чек-лист.

Читать далее

Топ нейросетей для кода и генерации сайтов: тестируем на одном ТЗ

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

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

В этой статье мы проведём практическое тестирование инструментов на одном конкретном ТЗ. Наша методика не претендует на научную работу, ведь результат работы нейросети недетерминированный и различается от случая к случаю. В этой статье мы разберём модели GPT-6, Claude 5.5, DeepSeek V4.1, Qwen 3.8 и GLM 5.3. Мы также изучим замеры бенчмарков, хоть и фокус будет на наш практический тест.

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

Читать далее

Делаем веб-дизайнерские референсы с помощью ИИ

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

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

Читать далее

CSS Anchor Positioning в картинках

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

Большой визуальный гайд по CSS Anchor Positioning: от базовой привязки элементов до создания прочных соединителей и цепочек якорей.

Читать далее

Дизайн-тренажер: куда ведет кнопка «Назад»

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

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

Читать далее

BMC на разных экранах: как мы делали адаптив без готовых макетов

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

Привет, Хабр! Меня зовут Настя, я фронтенд-разработчик в OpenYard и занимаюсь веб-интерфейсом BMC (Baseboard Management Controller) — системы, через которую можно управлять сервером и следить за его состоянием.

Узнать больше

Klark, часть 2: новый интерфейс, исправление существующих ошибок и аудит собственных прав

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

Неделю назад я рассказывал про Klark + Klara: корпоративный мессенджер и таск‑менеджер, которые живут на нашем сервере. В той статье было про устройство: каналы, звонки, расшифровку голосовых, связку «задача из сообщения». Эта статья расскажет вам более подробно о том как продукт выглядит " сейчас " и что в дальнейшей перспективе мы планируем реализовать.

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

Читать далее

Почему хорошего UX недостаточно: дизайнеру нужно уметь объяснять свои решения

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

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

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

И для меня здесь есть несколько важных выводов.

Читать далее

Как писать стили в 2026: CSS Modules, CSS‑in‑JS, Tailwind и zero‑runtime

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

Всем привет! Меня зовут Даниил Николаев и я frontend-разработчик в компании "Исходный Код"

На каждом kickoff нового проекта всплывает один и тот же сценарий: один разработчик топит за утилиты Tailwind, второй отстаивает чистоту и надежность CSS Modules, третий по привычке тянет проверенный CSS-in-JS, а кто-то просто молча открывает .scss и выходит из созвона.

В этой статье мы опустим споры о «красивом синтаксисе» и разберем инженерную сторону вопроса: кто на самом деле платит за динамику — сборка или браузер клиента.

Заглянем под капот ключевым подходам в мире React (для уровня middle и middle+): разберем классические CSS Modules, ушедший в maintenance mode styled-components, Emotion, современный Tailwind v4 на движке Oxide и перспективный zero-runtime (Linaria, Vanilla Extract). Посмотрим, что реально происходит с CSSOM, reflow и рендером в браузере, а в конце — соберем практическую матрицу выбора без фанатизма и хайпа месяца.

Читать далее

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

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

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

Подробнее →

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

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

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

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

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

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

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

Читать далее

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

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

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

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

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

Читать далее

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

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

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

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

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

Не верю!
1
23 ...