Тренд: Антиквы в вебе
Антиквы отлично подходят для заголовков, подзаголовков, логотипов и даже для основного текста, если речь идёт о том, чтобы подчеркнуть изысканность, премиальность или историческую преемственность продукта. Мы заметили много примеров использования исключительно антикв в вебе. Это и интернет-магазины, и сайты-портфолио, и промосайты. Все они выглядят элегантно и транслируют премиальность
Несколько примеров этого тренда: awdee.ru/trend-antiquas-on-the-web
#awd_web #awd_site #awd_trend
Антиквы отлично подходят для заголовков, подзаголовков, логотипов и даже для основного текста, если речь идёт о том, чтобы подчеркнуть изысканность, премиальность или историческую преемственность продукта. Мы заметили много примеров использования исключительно антикв в вебе. Это и интернет-магазины, и сайты-портфолио, и промосайты. Все они выглядят элегантно и транслируют премиальность
Несколько примеров этого тренда: awdee.ru/trend-antiquas-on-the-web
#awd_web #awd_site #awd_trend
Media is too big
VIEW IN TELEGRAM
Лендинг умного косметологического приложения Lovi
Приложение работает на базе ИИ. С помощью сканирования лица камерой пользователи могут узнать о состоянии своей кожи и возможных проблемах: акне, пигментных пятнах, морщинах и прочих. После сканирования приложение составляет программу ухода, предлагает средства без привязки к брендам, проверяет косметику на безопасность ингредиентов и при необходимости показывает альтернативы. В дальнейшем путём сканирования лица человек может отслеживать, есть ли прогресс от ухода
Сайт приложения — приятный и аккуратный. Он выполнен в бенто-стилистике с отлично подобранным шрифтовым сочетанием и большим количеством «воздуха». Особенно хочется отметить классную демонстрацию функций приложения, которая позволяет моментально в них разобраться
lovi.care
Скриншоты сайта: awdee.ru/lovi-smart-cosmetology-app
#awd_web #awd_site
Приложение работает на базе ИИ. С помощью сканирования лица камерой пользователи могут узнать о состоянии своей кожи и возможных проблемах: акне, пигментных пятнах, морщинах и прочих. После сканирования приложение составляет программу ухода, предлагает средства без привязки к брендам, проверяет косметику на безопасность ингредиентов и при необходимости показывает альтернативы. В дальнейшем путём сканирования лица человек может отслеживать, есть ли прогресс от ухода
Сайт приложения — приятный и аккуратный. Он выполнен в бенто-стилистике с отлично подобранным шрифтовым сочетанием и большим количеством «воздуха». Особенно хочется отметить классную демонстрацию функций приложения, которая позволяет моментально в них разобраться
lovi.care
Скриншоты сайта: awdee.ru/lovi-smart-cosmetology-app
#awd_web #awd_site
Тренд: 3D-анимация по скроллу
3D-анимация по скроллу добавляет сайту динамику и глубину. Интерактивность и вау-эффекты позволяют выделиться и явно цепляют лучше статичных картинок
Мы нашли девять впечатляющих сайтов разной тематики с классной реализацией этого интерактивного приёма
🙂️️ Примеры: awdee.ru/trend-3d-scroll-animation
#awd_web #awd_site #awd_trend
3D-анимация по скроллу добавляет сайту динамику и глубину. Интерактивность и вау-эффекты позволяют выделиться и явно цепляют лучше статичных картинок
Мы нашли девять впечатляющих сайтов разной тематики с классной реализацией этого интерактивного приёма
#awd_web #awd_site #awd_trend
Please open Telegram to view this post
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
Сайт французского дизайн-агентства Pam
Интересно смотрится контраст между плотной вёрсткой блоков с обложками проектов и свободным пространством вокруг них. А интерактивная подача кейсов и эффект изменения белого фона на цветной при наведении оживляют сдержанную стилистику сайта
thisispam.com
Больше скриншотов: awdee.ru/website-of-the-french-design-agency-pam
#awd_web #awd_site
Интересно смотрится контраст между плотной вёрсткой блоков с обложками проектов и свободным пространством вокруг них. А интерактивная подача кейсов и эффект изменения белого фона на цветной при наведении оживляют сдержанную стилистику сайта
thisispam.com
Больше скриншотов: awdee.ru/website-of-the-french-design-agency-pam
#awd_web #awd_site
Тренд: голографические эффекты
Просматривая новые дизайн-проекты, мы заметили ещё один визуальный тренд в вебе, айдентике и дизайне упаковки — голографические эффекты. Хотим показать несколько характерных примеров
🙂️️️️️️ Добавляйте примеры в свою коллекцию референсов: awdee.ru/trend-holographic-effects
#awd_web #awd_site #awd_trend #awd_identity #awd_pack
Просматривая новые дизайн-проекты, мы заметили ещё один визуальный тренд в вебе, айдентике и дизайне упаковки — голографические эффекты. Хотим показать несколько характерных примеров
#awd_web #awd_site #awd_trend #awd_identity #awd_pack
Please open Telegram to view this post
VIEW IN TELEGRAM
Приём в вебе: сочетание горизонтального и вертикального скролла на сайтах
Мы подметили ещё один приём в веб-дизайне — сочетание горизонтальной и вертикальной прокрутки. Переходы из горизонтального скролла в вертикальный, и наоборот, вносят разнообразие в изучение контента и добавляют эффект неожиданности. Особенно актуален этот приём в длинных лендингах, чтобы при прокрутке пользователь точно не заскучал
🙂️️️️️️ Предлагаем посмотреть девять примеров его реализации: awdee.ru/combining-horizontal-and-vertical-scrolling-on-websites
#awd_web #awd_site #awd_technique
Мы подметили ещё один приём в веб-дизайне — сочетание горизонтальной и вертикальной прокрутки. Переходы из горизонтального скролла в вертикальный, и наоборот, вносят разнообразие в изучение контента и добавляют эффект неожиданности. Особенно актуален этот приём в длинных лендингах, чтобы при прокрутке пользователь точно не заскучал
#awd_web #awd_site #awd_technique
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Лендинг сервиса для обмена файлами Shuttle
Небольшой лендинг, который выделяется аккуратностью и чёткой структурой. Отдельно хочется отметить небольшие детали, из которых складывается гармоничная композиция. Это карточки в эстетике глассморфизма, скругленные углы и хорошо продуманные яркие акценты
shuttle.zip
Больше скриншотов: awdee.ru/shuttle-file-sharing-service-lendings
#awd_web #awd_site
Небольшой лендинг, который выделяется аккуратностью и чёткой структурой. Отдельно хочется отметить небольшие детали, из которых складывается гармоничная композиция. Это карточки в эстетике глассморфизма, скругленные углы и хорошо продуманные яркие акценты
shuttle.zip
Больше скриншотов: awdee.ru/shuttle-file-sharing-service-lendings
#awd_web #awd_site
Приём в вебе: выбор юзернейма в качестве CTA
Мы подметили интересный приём повышения конверсии на сайтах некоторых платформ. В качестве призыва к действию (CTA) они предлагают не призыв к надоевшей уже регистрации, а конкретно занять свой юзернейм, пока это не сделал кто-то другой. Кажется, что это должно отлично работать, ведь всем нравится использовать свой любимый юзернейм на всех сервисах в интернете
🙂️️️️️️ Вот два примера: awdee.ru/a-new-trick-on-the-web-choosing-a-username-at-the-registration-stage
Если вы знаете ещё примеры такого приёма, присылайте в комментарии
#awd_web #awd_site #awd_technique
Мы подметили интересный приём повышения конверсии на сайтах некоторых платформ. В качестве призыва к действию (CTA) они предлагают не призыв к надоевшей уже регистрации, а конкретно занять свой юзернейм, пока это не сделал кто-то другой. Кажется, что это должно отлично работать, ведь всем нравится использовать свой любимый юзернейм на всех сервисах в интернете
Если вы знаете ещё примеры такого приёма, присылайте в комментарии
#awd_web #awd_site #awd_technique
Please open Telegram to view this post
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
Unicorn Studio — лендинг инструмента для создания WebGL-эффектов
Компактный лендинг с динамичными роликами о том, какие вау-эффекты могут сделать дизайнеры с помощью Unicorn. Видео отлично дополняют необычные визуальные элементы на сайте, которые прикольно мерцают, двигаются и переливаются при наведении
unicorn.studio
Скриншоты: awdee.ru/unicorn-studio
#awd_web #awd_site
Компактный лендинг с динамичными роликами о том, какие вау-эффекты могут сделать дизайнеры с помощью Unicorn. Видео отлично дополняют необычные визуальные элементы на сайте, которые прикольно мерцают, двигаются и переливаются при наведении
unicorn.studio
Скриншоты: awdee.ru/unicorn-studio
#awd_web #awd_site
This media is not supported in your browser
VIEW IN TELEGRAM
Flox — сайт сервиса для создания виртуальных сред разработки
Эстетичный сайт с приятной гаммой, продуманными анимациями и элементами геймификации
Скриншоты: awdee.ru/flox-site-of-a-service-for-creating-virtual-development-environments
flox.dev
#awd_web #awd_site
Эстетичный сайт с приятной гаммой, продуманными анимациями и элементами геймификации
Скриншоты: awdee.ru/flox-site-of-a-service-for-creating-virtual-development-environments
flox.dev
#awd_web #awd_site
This media is not supported in your browser
VIEW IN TELEGRAM
Приём: блюр на тексте
Кайфовый приём на сайтах и в айдентике — размытие текста, заголовков и надписей. Он не новый, но всё ещё выглядит свежо и оригинально. Особенно, если использовать его в динамике. Например, как ховер-эффект или эффект загрузки
🙂️️️️️️ Го смотреть: awdee.ru/reception-blur-on-the-text
#awd_technique #awd_identity #awd_site #awd_web
Кайфовый приём на сайтах и в айдентике — размытие текста, заголовков и надписей. Он не новый, но всё ещё выглядит свежо и оригинально. Особенно, если использовать его в динамике. Например, как ховер-эффект или эффект загрузки
#awd_technique #awd_identity #awd_site #awd_web
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Сайт почтового клиента Tatem
Сайт выглядит стильным и проработанным за счёт аккуратной вёрстки, а продуманные анимации по скроллу делают демонстрацию продукта более осмысленной
tatem.com
Больше скриншотов: awdee.ru/tatem-email-client-website
#awd_web #awd_site
Сайт выглядит стильным и проработанным за счёт аккуратной вёрстки, а продуманные анимации по скроллу делают демонстрацию продукта более осмысленной
tatem.com
Больше скриншотов: awdee.ru/tatem-email-client-website
#awd_web #awd_site
Коллекция годных примеров интерактивной анимации элементов сайта
На сайте Web Interactions Gallery собраны хорошие примеры реализации переходов между страницами, индикаторов загрузки, появления секций и меню сайта. Сейчас в коллекции порядка 120 примеров, они разбиты на типы и сопровождаются коротким видео
webinteractions.gallery
#awd_web #awd_site #awd_collection #awd_ui
На сайте Web Interactions Gallery собраны хорошие примеры реализации переходов между страницами, индикаторов загрузки, появления секций и меню сайта. Сейчас в коллекции порядка 120 примеров, они разбиты на типы и сопровождаются коротким видео
webinteractions.gallery
#awd_web #awd_site #awd_collection #awd_ui
Продуктовый дизайнер Иван Емелюшкин написал статью о том, как дизайнеру передавать элементы с размытием разработчику, чтобы на выходе получить предсказуемый результат
В статье автор:
— Рассказал, как сделать размытие на Android
— Перечислил все 11 размытий на iOS с указанием особенностей каждого
— Затронул тему стилей текста и заливок для иконок на iOS
— Объяснил, как правильно передавать информацию о размытии разработчику
В конце статьи вы найдёте шаблон со всеми размытиями в Figma, чтобы быстро применять их в своих дизайн-проектах
awdee.ru/11-ways-of-blurring
#awd_article #awd_web #awd_ui #awd_figma
Please open Telegram to view this post
VIEW IN TELEGRAM
Оди. О дизайне
11 оттенков размытия — Оди. О дизайне
Как выбрать нужное и заслужить благодарность разработчиков
Продуктовый дизайнер Иван Емелюшкин написал статью о том, как дизайнеру передавать элементы с размытием разработчику, чтобы на выходе получить предсказуемый результат
В статье автор:
— Рассказал, как сделать размытие на Android
— Перечислил все 11 размытий на iOS с указанием особенностей каждого
— Затронул тему стилей текста и заливок для иконок на iOS
— Объяснил, как правильно передавать информацию о размытии разработчику
В конце статьи вы найдёте шаблон со всеми размытиями в Figma, чтобы быстро применять их в своих дизайн-проектах
awdee.ru/11-ways-of-blurring
#awd_article #awd_web #awd_ui #awd_figma
Please open Telegram to view this post
VIEW IN TELEGRAM
Оди. О дизайне
11 оттенков размытия — Оди. О дизайне
Как выбрать нужное и заслужить благодарность разработчиков
This media is not supported in your browser
VIEW IN TELEGRAM
На сайте daylightcomputer.com очень кайфово применили скролл, чтобы показать суть и пользу устройства
#awd_web #awd_site
#awd_web #awd_site
Тренд: вёрстка лендингов в одну колонку
Подметил новый и набирающий популярность ход в дизайне лендингов. Их верстают в одну, часто узкую, колонку
Смотрится свежо, упрощает адаптацию к разным устройствам, проще управлять вниманием зрителя
Примеры, которые я нашёл:
— alexandersandberg.com/balance
— spoil.me
— sfcompute.com
— supertape.com (почти, но не совсем)
Если знаете другие примеры, присылайте в комментарии
#awd_web #awd_trend #awd_site
Подметил новый и набирающий популярность ход в дизайне лендингов. Их верстают в одну, часто узкую, колонку
Смотрится свежо, упрощает адаптацию к разным устройствам, проще управлять вниманием зрителя
Примеры, которые я нашёл:
— alexandersandberg.com/balance
— spoil.me
— sfcompute.com
— supertape.com (почти, но не совсем)
Если знаете другие примеры, присылайте в комментарии
#awd_web #awd_trend #awd_site
Как правильно реализовать эффект матового стекла на сайтах
Популярный эффект матового или «замёрзшего» стекла почти на всех сайтах, что я встречал, реализован с заметными недостатками: дрожанием, мерцанием и тому подобными дефектами
Джош Комо написал кайфовую статью с разбором всех таких недостатков и, главное, с примерами его грамотной реализации в CSS
Например, он показал, как сделать так, чтобы блюр захватывал элементы, находящиеся рядом с плашкой, как избежать мерцания, как сделать прозрачную фаску, как правильно добавить стеклу визуальной толщины и другие хитрости
В статье есть фрагменты готового кода и интерактивные примеры
В общем, читайте, добавляйте в закладки и отправляйте своим технологам: joshwcomeau.com/css/backdrop-filter
#awd_article #awd_web
Популярный эффект матового или «замёрзшего» стекла почти на всех сайтах, что я встречал, реализован с заметными недостатками: дрожанием, мерцанием и тому подобными дефектами
Джош Комо написал кайфовую статью с разбором всех таких недостатков и, главное, с примерами его грамотной реализации в CSS
Например, он показал, как сделать так, чтобы блюр захватывал элементы, находящиеся рядом с плашкой, как избежать мерцания, как сделать прозрачную фаску, как правильно добавить стеклу визуальной толщины и другие хитрости
В статье есть фрагменты готового кода и интерактивные примеры
В общем, читайте, добавляйте в закладки и отправляйте своим технологам: joshwcomeau.com/css/backdrop-filter
#awd_article #awd_web
Продуктовый дизайнер Иван Емелюшкин написал статью о том, как дизайнеру передавать элементы с размытием разработчику, чтобы на выходе получить предсказуемый результат
В статье автор:
— Рассказал, как сделать размытие на Android
— Перечислил все 11 размытий на iOS с указанием особенностей каждого
— Затронул тему стилей текста и заливок для иконок на iOS
— Объяснил, как правильно передавать информацию о размытии разработчику
В конце статьи вы найдёте шаблон со всеми размытиями в Figma, чтобы быстро применять их в своих дизайн-проектах
awdee.ru/11-ways-of-blurring
#awd_article #awd_web #awd_ui #awd_figma
Please open Telegram to view this post
VIEW IN TELEGRAM
Оди. О дизайне
11 оттенков размытия — Оди. О дизайне
Как выбрать нужное и заслужить благодарность разработчиков