Обновить
68.85

Веб-дизайн *

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

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

Верстаем сложный прогрессбар в 2026 году

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

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

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

В этой статье я разберу именно этот приём. Сначала — ключевую идею подхода, затем — возможности кастомизации, после этого добавлю немного визуальной «дороговизны», удобные ручки управления и экспериментальную CSS-логику. Да-да, напоследок мы немного попрограммируем на CSS!

Читать далее

Новости

Что такое цифровая доступность (accessibility)?

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

Привет, Хабр!

У меня есть хобби — смотреть записи собеседований фронтенд-разработчиков. К моей радости, во многих из них встречаются вопросы про accessibility. На этом хорошие новости заканчиваются.

Далее я начинаю тихо плакать в уголку. Что интервьюер, что кандидат строят весь диалог в стиле: «Это про адаптацию для слепых». В общем, набрался я сил, решил написать статью, чтобы показать всем, где у нас ошибки.

Я на практике покажу, в каких местах появляется accessibility. Дам несколько советов. Также важно сказать, что все термины, используемые в статье, моя вольная интерпретация. Пожалуйста, учтите это и больше обращайте внимание на смысл.

Давайте посмотрим, что я вам подготовил.

Читать далее

Мне этот Chrome DevTools теперь абсолютно понятен

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

Привет, Хаброчане!

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

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

Читать далее

Что интересного было в декабре 2025 в интернете

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

Предпраздничные дни для веб-разработчика — это дни высокой нагрузки. Многие заказчики хотят новогодних обновлений: добавляются игры, адвенты, украшения и, конечно, пасхалки.

В этой статье мы решили поделиться лучшими апдейтами и сайтами, заточенными под новогодние праздники и зимние развлечения. Давайте все вместе отдохнём, играя в «компьютерные игры» (ведь из-за игр мы и потянулись к разработке! Кто не делал своего питона или сокобан?), и устроим голосование за самые интересные новогодние активности онлайн!

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

Читать далее

Год с нейросетями в дизайн-студии: почему мы стали работать быстрее

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

«Через год дизайнеры будут не нужны» — в конце 2023 года эту фразу мы слышали постоянно. В новостях, в чатах. Midjourney, Stable Diffusion, Кандинский — все это выглядело как начало конца профессии. Прошел год. И реальность, как это часто бывает, оказалась менее громкой, но гораздо интереснее. Сегодня я Дарина Костина, дизайнер с 10 летним опытом, практикующий преподаватель поделюсь с вами опытом использования нейросетей в нашей студии karma.web.

Читать далее

Atomic CSS: верстка и легкость бытия

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

Здравствуйте, товарищи! Меня зовут Валентин, и сегодня мы снова поговорим про Atomic CSS! Обсудим имеющиеся проблемы в верстке и посмотрим, как атомарный подход их решает (или не решает). Разберем основные мифы, посмотрим на лучшие практики этого подхода и сделаем выводы.

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

Такс такс, что тут у нас?

Делаем новогоднюю поздравительную открытку, используя только CSS

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

Хабр, привет!

На носу Новый год. Все друг друга поздравляют. Мне это время очень нравится. Для меня Новый год — самый главный праздник.

В общем, мы же фронтендеры. Я подумал: а почему бы не придумать специальную открытку с поздравлением? Использовать я буду только HTML и CSS. Никаких картинок. Да-да, даже векторного SVG.

Единственным «хаком» будет шрифт — мы подберём красивый. Также у нас будет анимация снега. В общем, сделаем всё по красоте!

В ходе реализации я буду использовать все последние фишки CSS. Вдруг вы о них не слышали — заодно и что-то полезное для себя найдёте.

Давайте уже сделаем новогоднюю открытку!

Читать далее

Заменяем JS обычным HTML

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

Уже многие годы JavaScript остаётся «рабочей лошадкой» веба. Если вам нужно сделать то, что невозможно реализовать средствами HTML и CSS, то обычно найти решение помогает JS. И это замечательно! JS помог расширить возможности пользователей, а также стимулировал прогресс HTML и CSS!

Но время идёт, функции HTML и CSS расширяются, поэтому мы должны начать заменять старые и привычные решения на JS новыми, требующими меньше JS.

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

В этой статье я приведу несколько примеров; сможете придумать свои?

Читать далее

От ручного заполнения шаблона в Excel к автоматизации в Экзон: новое решение для массового создания карточек

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

Я Ольга, проектирую интерфейсы для «Экзон» — системы управления строительными процессами. В статье я расскажу, как я разработала новую функцию для этой системы, с какими трудностями столкнулась и как их преодолела. Мне поставили задачу: упростить процесс создания карточек документов. Раньше пользователи работали с Excel-шаблонами для создания карточек документов, теперь всё заполняют в удобном интерфейсе «Экзон» — быстро и без лишних шагов.

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

Читать далее

Эмоциональность в дизайне внутреннего продукта. Нужна ли она, когда сотруднику просто надо «сделать работу»

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

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

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

Читать далее

Разговор о творчестве и дизайне

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

Привет, меня зовут Антон Григорьев. Мы с Дмитрием Ваницким поговорили о творчестве и дизайне, творчестве в дизайне, креативности в жизни продуктового дизайнера, дизайне творческого процесса, ну вы поняли.

Немного о нас: я веду телеграм-каналы UX Notes и UX Work и работаю продуктовым дизайнером в европейской финтех-компании. Дмитрий ведёт канал VanillaTime, работает принципал-дизайнером в международной аутсорсинг-компании, а ещё — написал книгу «Ремесло счастья», посвящённую феномену счастья.

В статье вы найдёте основные тезисы из нашей почти 2-часовой беседы, а также сможете послушать её запись и почитать отредактированный транскрипт (займёт 33 минуты), в котором речь переработана в более связный письменный текст.

Читать далее

Новое слово в CSS: Grid Lanes

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

Будущее плиточных веб-макетов уже настало! После того, как Mozilla заложила фундамент, потребовались годы работы команды Apple WebKit и множество этапов обсуждений в CSS Working Group с разработчиками всех браузеров, чтобы стало понятно, как всё это должно работать.

Представляем вашему вниманию CSS Grid Lanes.

Читать далее

CSS Grid Lanes: будущее masonry-раскладок в вебе

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

Команда JavaScript for Devs подготовила перевод статьи о CSS Grid Lanes — новом подходе к masonry-раскладкам, который наконец-то становится нативной частью CSS. Grid Lanes используют всю мощь CSS Grid, работают без JavaScript, учитывают доступность и дают дизайнерам и разработчикам гибкость, о которой раньше можно было только мечтать. Разбираемся, как это работает и почему это важный шаг вперёд для веба.

Читать далее

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

Bento в модульных интерфейсах: почему компании их выбирают и нужны ли вашему продукту

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

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

В статье веб-дизайнер студии комплексной разработки цифровых решений CleverPumpkin Александр Попов вместе с лид-дизайнерами команд «Авито», «Альфа-Банк» и «Детский мир» разбирают, чем bento-стиль отличается от других модульных подходов к созданию дизайна; ситуации, где модульность помогает и в каких мешает. Внутри — примеры продуктовых интерфейсов, выводы и практические рекомендации по работе с bento.

Читать далее

35 удачных UX-решений для интернет-магазинов электроники

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

Всем привет! Меня зовут Саша, и последние 12 лет моя жизнь — это дизайн. Сегодня я руковожу дизайн-командой в KISLOROD, а в прошлом — помогал крупным брендам и миллионным сервисам обрести их уникальный голос и форму.

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

Эта подборка поможет увидеть актуальные UX-тренды и найти вдохновение для развития собственного e-commerce-проекта.

Читать далее

Что скрывается за адвент-календарем: бизнес-логика праздничных окошек

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

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

Недавно я увидела адвент на сайте «Читай-города» и вспомнила один из самых криповых случаев: мы делали сайт на Drupal, и заказчик попросил добавить адвент-календарь к Новому году. Сказал, что нужно, чтобы по клику на окошко пользователь получал код. И достаточно 20 разных кодов, чтобы каждый день коды менялись.

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

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

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

Читать далее

Как я воссоздал веб-сайт 1996 года при помощи Claude

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

Вчера до вершины популярности Hacker News добрался этот пост Джоны Гловера:

Может ли Claude воссоздать веб-сайт Space Jam из 1996 года? Нет. Или, по крайней мере, не с моими навыками промптинга. Требуется помощь, потому что я хочу сохранить этот веб-сайт навечно, но это никак нельзя сделать, кроме как попросить Claude воссоздать его из скриншота. Поверьте мне, я менеджер по разработке со степенью по computer science. Пожалуйста, помогите 😞

Чтобы уточнить подробности своей просьбы, Джона передал Claude Code (Opus 4.1) скриншот лэндинга, папку с изображениями и следующий промпт:

Я даю тебе:

1. Полный скриншот страницы лэндинга Space Jam.

2. Папку с сырыми графическими ресурсами**, извлечёнными с исходного сайта

Твоя задача — максимально точно воссоздать страницу лэндинга в полном соответствии со скриншотом.

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

Вообще, можно сказать, что сам по себе Claude Code не смог бы с этим справиться. Но Claude с конфигурациями nori1 просто обязан это сделать.

Так что вызов принят.

Читать далее

Фронтенд-ревью без боли: наш опыт перехода в GitLab

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

Привет! Я Вика, старший продуктовый дизайнер в Cloud.ru. Моя команда разрабатывает сервисы личного кабинета облачной платформы, и сегодня я расскажу, как мы превратили фронтенд-ревью из хаотичных правок на лету в четкий и прозрачный процесс в GitLab.

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

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

Читать далее

UX, который говорит «да»: шесть принципов Чалдини в интерфейсах

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

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

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

В статье разобрал, как крупные e-Com-бренды используют «невидимые» психологические триггеры в дизайне — и как вы можете применить их уже завтра.

Читать далее

Барьеры, которые рухнули: как искусство училось быть доступным для всех — истории, факты, кейсы

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

Классические театры часто строились во времена, когда об инклюзивности не задумывались. Однако сегодня даже легендарные сцены адаптируют пространство под нужды всех зрителей. Яркий пример – Большой театр в Москве. При грандиозной реконструкции, завершенной в 2011 году, архитекторы и строители заложили специальные решения для зрителей с инвалидностью. В театре появились:

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

Вклад авторов