Веб-дизайн *

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

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

Что, если бы дизайн-система умела не просто менять язык, а адаптироваться под культуру, направление чтения, шрифты и даже знаки препинания? А если бы она делала это автоматически — без боли, костылей и ручной работы?

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

Я разработала интерактивный макет для создания композиций цветов. Проблема свелась к задаче упаковки кругов в круг и её автоматизированному решению методом отжига. Расскажу теорию и математически обосную практику с визуальными пояснениями.

Помните, одно время тематические площадки заполонили статьи вида: «Я устал от [плохих] приложений для изучения английского, поэтому сделал своё» или «Я устал от [неправильных] трекеров продуктивности, поэтому создал собственный»? В реалиях современных аппсторов заголовок можно сократить до: «Я устал».

Статистика говорит, что app fatigue is real. А мы в Beeline Cloud решили посмотреть, как менялось отношение к приложениям — от «эры пост-ПК» до настоящего времени.

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

Привет! Меня зовут Богдан, я дизайн-директор в ВТБ. Перед тем, как мы продолжим разбираться с активацией и онбордингом подпишитесь на мой тг-канал https://t.me/designfintech — тут я делюсь полезными материалами по дизайн-менеджменту, коомуникации и продуктовым кейсам.

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

Меня зовут Маша, я дизайнер в Selectel. В этой статье расскажу, как создать сложную анимацию с использованием Lottie и After Effects. Будет полезно дизайнерам и начинающим разработчикам.

Анимация уже давно стала стандартным инструментом в дизайне и способна выполнять самые разные задачи: обеспечивает плавность и приятную отзывчивость — как в современных ОС (например, дизайн-система Android Material 3 или Apple, которые используют принципы Springs), транслирует голос бренда и становится частью айдентики (CashMoney, Instagram, Plex), добавляет продуктовым сценариям эмоциональность и значимость. Недавно и перед нашей командой встала задача «оживить» некоторые из них. 

Меня зовут Саша Гончаров, я моушен-дизайнер в 2ГИС. По просьбе продуктовых дизайнеров я подключился к работе над анимацией интерфейсов. В этой статье вместе с разработчиком Сергеем Львовым расскажем, на что стоит обращать внимание при создании интерфейсных анимаций, какие технические нюансы важно учитывать и как мы достигаем желаемых эффектов. Материал будет полезен моушен-дизайнерам, которые хотят работать с интерфейсами, а также разработчикам, интересующимся особенностями рендеринга объектов на карте.

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

Я разработчик в компании bpm (ранее “ЛАНИТ - Би Пи Эм”). Столкнувшись с хаосом в интерфейсах и постоянными правками, я решила изучить, как можно организовать процесс создания дизайн-системы самостоятельно. Результат вы видите в этой статье. Очень надеюсь, что описанные правила помогут вам сделать первые шаги в создании дизайна для вашего проекта.

26 августа 2025 года Google представила новую preview-модель под кодовым названием Nano Banana — это часть экосистемы Gemini 2.5 Flash Image, ориентированной на генерацию и редактирование изображений с помощью текстовых и мультимодальных запросов. Несмотря на шутливое название, перед нами — серьёзный инструмент с претензией на роль нового стандарта в визуальном ИИ.

Привет! Меня зовут Анна, я маркетолог команды цифровой трансформации Ареал.

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

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

Мы работаем в Figma, но систему можно организовать в любом редакторе.

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

В то же время за последние годы набрал большую популярность Lottie — новый формат векторной анимации, легковесная альтернатива анимированным GIF и APNG. Он основан на JSON и содержит текстовые описания элементов объектов и движений, с поддержкой растровых картинок, динамических скриптов и интерактивных элементов.

Мы — команда «Дизайн и клиентский сервис» в ИТ-команде «Северстали» – задались целью провести анализ трендов и тенденций в дизайне интерфейсов и мире и приземлить это на реалии UX/UI, с которыми работаем. Тема большая и сложная, поэтому:

1. Начнём с того, что такое тренды и как они появляются.

2. Разберём жизненный цикл тренда.

3. Изучим виды трендов.

4. Завершим разбором потребителей трендов и намекнём на наше ещё более глобальное исследование :-)

С ростом популярности в 1997 году технологий Flash и CSS возникло три философии веб-дизайна. Дэвид Сигел продвигал «хаки», Джейкоб Нильсен стремился к простоте, а Джеффри Зельдман комбинировал элегантность с удобством пользования.

Как и многие из первой волны веб-дизайнеров, Джеффри Зельдман, которому в начале 1997 года исполнилось 42 года, начинал свою карьеру в совершенно другой профессии. Изначально он был автором художественных книг, недолго поработал журналистом, пробовал себя в качестве разъездного музыканта, а потом десять лет посвятил рекламному бизнесу. «Сочинение текстов билбордов с цепляющей графикой — хорошая практика для веба, потому что в нём нужно доносить информацию мгновенно», — рассказывал он позже в интервью.

Творческих людей наподобие Зельдмана привлекло в веб развитие мультимедиа; сам он создал свой первый веб-сайт в 1995 году. «Благодаря гипертексту появился веб, благодаря графике он стал игровой площадкой для потребителей», — писал он на своём личном веб-сайте в конце 1996 года.

В B2B-системах и корпоративных интерфейсах фильтры — не «приятный бонус», а спасательный круг в работе пользователя. Когда у вас таблица на 10 000 строк и 100+ колонок, обычным поиском или сортировкой не обойтись. Тут уже нужны сложные фильтры: с несколькими условиями, каскадными зависимостями, сохранёнными пресетами и продуманной логикой применения.

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

Свойство CSS corner-shape — это одно из самых захватывающих нововведений в геометрический инструментарий веб-дизайна за последние годы. Оно расширяет наши возможности по управлению внешним видом углов, выходя за рамки привычных скруглений с помощью border-radius. Это на первый взгляд небольшое дополнение открывает целый мир новых возможностей, которые раньше требовали сложных реализаций на основе SVG или решений с использованием изображений.

В статье хочу рассказать, как я проходила путь от Junior до Middle дизайнера, и зачем развивать насмотренность, качать UI и участвовать в хакатонах и стартапах, даже если есть основная работа.

В первой части я рассказывал об основах LESS: переменных, миксинах, и некоторых приёмах. А сегодня мы поговорим о вещах, оставшихся в прошлый раз нераскрытыми...

Разбираемся, почему при заполнении формы возникают ошибки, почему они раздражают, как снизить это раздражение и помочь пользователю не застрять в сценарии

Привет, Habr! Продолжаем серию статей о LVGL в ESPHome. В третьей части статьи речь пойдет о создании своего пользовательского виджета, который может быть подключен к проекту. И не только к данному проекту, а вообще даст небольшое представление как делать виджеты в ESPHome. Итак, Создавать будем виджет умной розетки с индикацией мощности, напряжения и силы тока. Поехали...

На просторах сети немало сайтов, и у значительной их части на главной странице находится ОН — Самый Главный Слайдер.

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

А самое главное — зачастую, часть его слайдов... нечитаема. И это очень коварная проблема, ведь поначалу ничто не предвещает беды. Дизайнер делает красивый дизайн, верстальщик - качественную вёрстку. Всё идёт отлично!

А спустя время заказчик начинает вводить текст, загружает картинку, иии... Оказывается, что картинка подходит совсем не любая. На самом деле, даже не любая картинка зачастую тоже не подходит!

А ещё есть разные... кхм... разрешения... кхм... экрана... Простите, слеза в горле застряла.