Веб-дизайн *

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Я даю тебе:

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

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

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

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

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

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

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

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

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

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

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

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

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