Веб-дизайн *

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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