Веб-дизайн *

В рамках данной статьи рассказываю об очередных нововведениях в законодательстве о персональных данных.

С 30 мая 2025 вступил в силу Федеральный закон от 30.11.2024 № 420-ФЗ «О внесении изменений в КоАП РФ», пунктом 10 которого установлена ответственность за невыполнение или несвоевременное выполнение оператором персональных данных обязанности по уведомлению уполномоченного органа по защите прав субъектов персональных данных о намерении осуществлять обработку персональных данных.

А теперь перевожу с юридического на человеческий все важные нюансы указанного нововведения ↓

Пока все в погоне за всё более универсальными ИИ-агентами пытаясь создать тот самый AGI по нашему подобию, мне кажется полезным спуститься на уровень ниже и посмотреть на более приземлённую инженерную проблему.

Мы неплохо научили модели работать с текстом, кодом, изображениями и инструментами. Мы научили их вызывать функции, научили эти ИИ писать собственные инструменты каждый раз для задач которые повторяются миллионы раз, видеть как мы(фото), думать как мы(рассуждения). Мы научились – дообучать их под новые сценарии через fine-tuning.

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

Сегодня у модели есть два типовых способа "увидеть" сайт. Первый – читать код: HTML, CSS, JS, и серверную логику (если вы предоставили модели доступ). Второй – смотреть на скриншоты, а в более дорогом варианте – на видео (хоть и таких решений я не видел, и скорее не видео, а слайд-шоу, но считаю логичным внедрением для некоторых сценариев).

И эти оба подхода неудобны. А обучать модель внутреннему представлению через имеющиеся виды зрения – как правильно, – как распознать кнопку итд – дорого, требует ещё больших данных, больше вычислений. А банально небольшое отклонение стиля уже ломает верстку. Да с бэкендом мы можем строить среду в которой благодаря RL обучению модель научится решать задачу.

Но как быть с интерфейсом? Фото дает слишком много шума в виде пикселей, а код дает много лишнего шума в виде разметки, скриптов. Когда обычному пользователю: не нужно смотреть на каждый серый пиксель фона кнопки, или изучать все стили, js и html разметку сайта, он видит овал на котором написано "войти" – и понимает что это – кнопка, особенно, если при наведении или нажатии цвет фона кнопки меняется.

О чём дизайн сегодня? Про украшение? Про управление вниманием или про помощь и заботу? Разберём чем мы занимались когда я работал в Лабсе, а именно главной страницей Госуслуг. Хоть со стороны и не заметно что изменения внушительны, когда ты находишься внутри этой структуры становится понятно что всё совсем не так.

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

Но чтобы понять, где эта грань, стоит сначала разобраться: а что вообще происходит, когда модальное окно появляется на экране?

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

Думаешь, анализируешь, ищешь вариант, генерируешь идеи… Но всё не то. И каждый раз сталкиваешься с тем, что это уже кто-то реализовал. Да ещё и так круто, что подступиться страшно.

В этой статье я расскажу о проектировании мобильного приложения "Balance" по методу колеса жизненного баланса — от выбора идеи до кликабельных прототипов и тестирования.

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

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

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

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

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

Стартовый гайд, для тех, кто хочет на простом примере научиться генерировать из Figma как минимум веб-страницу, которая: сделана по дизайну, адаптивна под разные размеры экрана, учитывает retina и non-retina дисплеи, поддерживает локализацию с динамическим переключением языков и позволяет реализовать другие свои хотелки

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

Информационный мусор может содержаться: в тексте, в навигационных структурах, в колористике, в формах и в избыточности визуальных метафор (иконок) внутри интерфейса.

Привет, я — Александра, юрист для digital-агентств и фрилансеров! Специально для всех владельцев сайтов я подготовила подробную статью о том, какие юридические документы должны быть на каждом сайте в зависимости от его вида и наполнения. Прочитав её, вы точно всё поймёте.

Когда ты дизайн-директор и берёшься за то, чего раньше не делал, тебя ждёт много интересного: нейросеть выдаёт голубя с переломанными лапами, модель здания не влезает в браузер, а Spline отказывается фиксировать частоту кадров. 

Привет! Меня зовут Алексей Нибо, я дизайн-директор в Атвинте. Это история о том, как я собирал интерактивные 3D-модели для сайта архитектурного бюро.

50 итераций колесом мыши, чтобы просмотреть содержимое одного выпадающего списка. Это не баг — это фича Хабра и десятков других сайтов.

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

В предыдущей части мы разобрали:

С 1 марта 2026 года вступил в силу Федеральный закон №168-ФЗ, где сформулированы поправки к закону о защите прав потребителей, которые обязывают использовать русский язык в публичной информации для потребителей товаров и услуг. Нашу платформу ОНЛАНТА ИИ ХАБ пришлось срочно русифицировать. Делимся опытом в блоге ЛАНИТ, как мы подошли к задаче, как учли юридические риски, что делать с англицизмами и как это влияет на пользовательский опыт и метрики.

Всем привет! Меня зовут Артем Плаксин, я с рождения практически ничего не вижу.

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

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

В этой статья я хочу поделиться с вами своей историей освоения интернета.

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

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

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

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

Чаще это происходит в B2C-продуктах, где аудитория легче адаптируется к новому. В B2B все иначе: интерфейс — рабочий инструмент. Любое изменение влияет на скорость работы и экономику процессов. Поэтому здесь особенно важно понимать, где нововведение действительно улучшает сценарий. 

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

Разница между ними кроется в самом подходе к пространству. Flex создавался для работы в одном измерении, когда вам нужно выстроить элементы в строку или столбец. Grid же мыслит сразу в двух плоскостях, позволяя контролировать и ряды, и колонки одновременно.

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

Под каждым примером есть полный код, который достаточно скопировать в файл и запустить.

Если бы активное отвлечение читателей веб-сайта было олимпийской дисциплиной, то первые места в ней всегда бы занимали новостные источники.

Я зашёл на сайт New York Times, чтобы просмотреть четыре заголовка, но меня встретили 422 сетевых запроса и 49 мегабайт данных. Для полной загрузки страницы понадобилось две минуты. И потом они удивляются, что все мало-мальски владеющие технологиями люди с головой на плечах ставят блокировщики рекламы на компьютеры своих знакомых и родственников.

Эта история повторяется у всех популярных новостных изданий.

Чтобы осознать феномен веб-страницы весом 49 мегабайт, давайте вернёмся в прошлое на несколько десятков лет. Объём этой страницы превышает размер Windows 95 (28 дискет). Операционная система, когда-то управлявшая всем миром, с запасом уместится в современной странице. В 2006 году на пике популярности были iPod и цифровая музыка. Стандартная композиция в MP3 с высоким качеством и битрейтом 192 кбит/с весила примерно 4-5 МБ. Одна страница сегодня эквивалентна 10-12 песням. По сути, чтобы прочитать несколько параграфов текста, я скачал целый альбом. Согласно сведениям International Telecommunication Union, среднемировая скорость Интернета в те времена была примерно равна 1,5 Мбит/с. Пока браузер загружал бы этого бегемота, пользователь вполне бы мог успеть заварить себе чашечку кофе.

За последние двадцать лет оборудование совершило большой шаг вперёд; неужели современный стек фреймворков/рекламных технологий полностью обнулил этот прогресс «благодаря» абстрагированию и плохой архитектуре?

Два года назад рынок обсуждал, заменят ли нейросети дизайнеров. В 2026-й мы вошли с другим вопросом: как изменилась сама профессия и требования к ней.

Чтобы не ограничиваться личным мнением, мы собрали комментарии дизайн-лидов из крупных российских компаний — финтеха, e-Com, экосистемных сервисов. Их ответы показывают: сегодня дизайн — это роль в бизнесе, архитектура продукта и работа с пользовательским восприятием. Разберемся, как AI встроился в практику и какие задачи по-прежнему остаются за человеком.

Стоит начать с боли всех разработчиков Angular: когда начинаешь свой проект, всё чисто и красиво. Но когда проект уже идёт, появляются подписки на подписки, данные из разных запросов нужно объединить, а пользователь начинает нажимать кнопки слишком быстро.

И здесь приходит на помощь RxJS

RxJS часто пугает своей сложностью. Прикол в том, что вам не нужно знать все 100+ операторов. Достаточно освоить базовую пятёрку, которая покроет 80% проблем.