This media is not supported in your browser
VIEW IN TELEGRAM
Залипательная анимация при выборе количества людей во время размещения жилья на Airbnb 👭🏡
❤92🔥49👍7
#UX_исследования | Sticky-элементы: когда они помогают, а когда мешают
💡Сегодня вместе разберёмся, когда фиксированные кнопки, меню и фильтры действительно улучшают UX, а когда начинают перегружать экран и раздражать пользователя.
Sticky-элементы — это элементы интерфейса, которые остаются закреплёнными на экране при прокрутке: хедеры, CTA-кнопки, навигация, фильтры или панели действий. Их главная задача — сохранять доступ к ключевым функциям без необходимости возвращаться вверх страницы.
В интерфейсах sticky-элементы особенно полезны там, где важно поддерживать контекст или ускорять целевое действие. Например, закреплённая кнопка «Добавить в корзину» в интернет-магазине помогает принять решение в любой момент просмотра.
Однако проблема начинается тогда, когда закрепляют слишком много: хедер + меню + баннер + CTA. На мобильных устройствах это «съедает» полезное пространство и создаёт ощущение давления.
Например, на сайте Apple на страницах продуктов закреплён верхний навбар — это упрощает навигацию и сохраняет быстрый доступ к ключевому действию (покупке). А в мобильном Airbnb при просмотре жилья закреплена кнопка переключения на карту, а таб-бар ведёт себя динамично — это помогает быстро менять способ просмотра и освобождает больше пространства для полезного контента.
Советы:
🟡 Закрепляйте только одно приоритетное действие на экран — не создавайте конкуренцию элементов;
🟡 Следите за высотой sticky-блоков, особенно на мобильных — они не должны занимать значительную часть экрана;
🟡 Используйте динамику: скрывайте хедер при прокрутке вниз и возвращайте при скролле вверх;
🟡 Не закрепляйте второстепенные функции — sticky усиливает важность элемента.
Лично я всегда задаю вопрос: «Действительно ли это действие настолько важно, чтобы быть перед глазами постоянно?». Sticky работает только тогда, когда усиливает сценарий, а не просто занимает место❤️
---
Было полезно? Тогда жду ваши 👍 для моего вдохновения на разбор новых тем.
А если хочешь создавать вместе со мной крутые интерфейсы для сайтов и приложений — Тебе сюда. Программа курса
💡Сегодня вместе разберёмся, когда фиксированные кнопки, меню и фильтры действительно улучшают UX, а когда начинают перегружать экран и раздражать пользователя.
Sticky-элементы — это элементы интерфейса, которые остаются закреплёнными на экране при прокрутке: хедеры, CTA-кнопки, навигация, фильтры или панели действий. Их главная задача — сохранять доступ к ключевым функциям без необходимости возвращаться вверх страницы.
В интерфейсах sticky-элементы особенно полезны там, где важно поддерживать контекст или ускорять целевое действие. Например, закреплённая кнопка «Добавить в корзину» в интернет-магазине помогает принять решение в любой момент просмотра.
Однако проблема начинается тогда, когда закрепляют слишком много: хедер + меню + баннер + CTA. На мобильных устройствах это «съедает» полезное пространство и создаёт ощущение давления.
Например, на сайте Apple на страницах продуктов закреплён верхний навбар — это упрощает навигацию и сохраняет быстрый доступ к ключевому действию (покупке). А в мобильном Airbnb при просмотре жилья закреплена кнопка переключения на карту, а таб-бар ведёт себя динамично — это помогает быстро менять способ просмотра и освобождает больше пространства для полезного контента.
Советы:
🟡 Закрепляйте только одно приоритетное действие на экран — не создавайте конкуренцию элементов;
🟡 Следите за высотой sticky-блоков, особенно на мобильных — они не должны занимать значительную часть экрана;
🟡 Используйте динамику: скрывайте хедер при прокрутке вниз и возвращайте при скролле вверх;
🟡 Не закрепляйте второстепенные функции — sticky усиливает важность элемента.
Лично я всегда задаю вопрос: «Действительно ли это действие настолько важно, чтобы быть перед глазами постоянно?». Sticky работает только тогда, когда усиливает сценарий, а не просто занимает место❤️
---
Было полезно? Тогда жду ваши 👍 для моего вдохновения на разбор новых тем.
А если хочешь создавать вместе со мной крутые интерфейсы для сайтов и приложений — Тебе сюда. Программа курса
❤38👍9🔥7
Мои любимые, поздравляю вас с нашим праздником! Улыбок, добра и море вдохновения!
--
😻 И для девочек до 13 марта действует особенное предложение для обучения UX/UI дизайну сайтов и приложений + нейросети.
За подробностями пишите: @alicek_design
--
😻 И для девочек до 13 марта действует особенное предложение для обучения UX/UI дизайну сайтов и приложений + нейросети.
За подробностями пишите: @alicek_design
🔥80❤40🥰8❤🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
#отзывы_работы_учеников
Vitaio — приложение для отслеживания здоровья и поддержания хорошего самочувствия, разработанное для того, чтобы помочь пользователям следить за своим телом и привычками.
Проведено комплексное исследование от идеи, решения проблемы до интерактивного прототипа.
А подробнее можно посмотреть на behance:
https://www.behance.net/gallery/245483183/Vitaio-Health-Tracking-Mobile-App-UX-UI-Design
Давайте поддержим работу ❤️ и комментарием.
Vitaio — приложение для отслеживания здоровья и поддержания хорошего самочувствия, разработанное для того, чтобы помочь пользователям следить за своим телом и привычками.
Проведено комплексное исследование от идеи, решения проблемы до интерактивного прототипа.
А подробнее можно посмотреть на behance:
https://www.behance.net/gallery/245483183/Vitaio-Health-Tracking-Mobile-App-UX-UI-Design
Давайте поддержим работу ❤️ и комментарием.
❤94🔥9🥰3🎉2
Что такое Sticky header?
Anonymous Quiz
89%
Шапка фиксируется при скролле и всегда видна
5%
Шапка появляется в конце страницы
4%
Это тип шапки с тенью
2%
Шапка, которая намазана мёдом
🤣2
This media is not supported in your browser
VIEW IN TELEGRAM
Увидела потрясающую новость от Adobe. В Photoshop Beta добавили функцию Rotate Object! 😍
Представьте: теперь можно взять любое 2D-изображение объекта и просто… повернуть его в пространстве. Это не обычный плоский поворот, к которому мы привыкли, а полноценная 3D-трансформация. Photoshop сам достраивает невидимые части объекта, сохраняя перспективу и глубину. Что можно делать с Rotate Object:
🔹 Менять ракурс: Поворачивайте объект (наклон, вращение), чтобы он идеально вписался в вашу композицию.
🔹 Адаптировать под окружение: После поворота можно нажать кнопку «Harmonize», и объект автоматически подстроится под освещение и цвета вашего фона.
---
Функция уже доступна в Photoshop Beta. Настоящий must-have для дизайнеров, согласны? 🔥
#в_мире_дизайна
Представьте: теперь можно взять любое 2D-изображение объекта и просто… повернуть его в пространстве. Это не обычный плоский поворот, к которому мы привыкли, а полноценная 3D-трансформация. Photoshop сам достраивает невидимые части объекта, сохраняя перспективу и глубину. Что можно делать с Rotate Object:
🔹 Менять ракурс: Поворачивайте объект (наклон, вращение), чтобы он идеально вписался в вашу композицию.
🔹 Адаптировать под окружение: После поворота можно нажать кнопку «Harmonize», и объект автоматически подстроится под освещение и цвета вашего фона.
---
Функция уже доступна в Photoshop Beta. Настоящий must-have для дизайнеров, согласны? 🔥
#в_мире_дизайна
🔥116❤10🥰6
Делюсь с вами стильным набором 3d текстурных цветов, в вазочках 🌷
Используйте с радостью в ваших проектах.
• 17 уникальных объектов
• PNG
• в высоком качестве
Скачать ниже⬇️
Используйте с радостью в ваших проектах.
• 17 уникальных объектов
• PNG
• в высоком качестве
Скачать ниже⬇️
Please open Telegram to view this post
VIEW IN TELEGRAM
❤94🔥10😍8
Айдентика в розовых тонах пекарни Beiked 🎀
Дизайн построен на яркой палитре в розовых тонах и современной, выразительной типографике. Здесь нет лишних деталей — весь упор сделан на шрифты, композицию и минимализм, благодаря чему айдентика выглядит актальной и очень стильной.
Советую взять на заметку, как с минимальным количеством деталей можно сделать кричащий и яркий визуал. Не забудь поставить 👍
#в_мире_дизайна
Дизайн построен на яркой палитре в розовых тонах и современной, выразительной типографике. Здесь нет лишних деталей — весь упор сделан на шрифты, композицию и минимализм, благодаря чему айдентика выглядит актальной и очень стильной.
Советую взять на заметку, как с минимальным количеством деталей можно сделать кричащий и яркий визуал. Не забудь поставить 👍
#в_мире_дизайна
❤89🔥8👍6