Тренд: голографические эффекты
Просматривая новые дизайн-проекты, мы заметили ещё один визуальный тренд в вебе, айдентике и дизайне упаковки — голографические эффекты. Хотим показать несколько характерных примеров
🙂️️️️️️ Добавляйте примеры в свою коллекцию референсов: 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
👍22
Приём в вебе: сочетание горизонтального и вертикального скролла на сайтах
Мы подметили ещё один приём в веб-дизайне — сочетание горизонтальной и вертикальной прокрутки. Переходы из горизонтального скролла в вертикальный, и наоборот, вносят разнообразие в изучение контента и добавляют эффект неожиданности. Особенно актуален этот приём в длинных лендингах, чтобы при прокрутке пользователь точно не заскучал
🙂️️️️️️ Предлагаем посмотреть девять примеров его реализации: 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
🐳8🙈6👍4⚡1
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
👍10🎃2
Приём в вебе: выбор юзернейма в качестве 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
👍27
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
❤🔥8👍3⚡1
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
👍10🔥2
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
👍30💩10💘4⚡3🔥1
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
👍10🔥5👀1
Коллекция годных примеров интерактивной анимации элементов сайта
На сайте 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
👍15
Продуктовый дизайнер Иван Емелюшкин написал статью о том, как дизайнеру передавать элементы с размытием разработчику, чтобы на выходе получить предсказуемый результат
В статье автор:
— Рассказал, как сделать размытие на 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 оттенков размытия — Оди. О дизайне
Как выбрать нужное и заслужить благодарность разработчиков
👍10💩3
Продуктовый дизайнер Иван Емелюшкин написал статью о том, как дизайнеру передавать элементы с размытием разработчику, чтобы на выходе получить предсказуемый результат
В статье автор:
— Рассказал, как сделать размытие на 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 оттенков размытия — Оди. О дизайне
Как выбрать нужное и заслужить благодарность разработчиков
👍7❤🔥6
This media is not supported in your browser
VIEW IN TELEGRAM
На сайте daylightcomputer.com очень кайфово применили скролл, чтобы показать суть и пользу устройства
#awd_web #awd_site
#awd_web #awd_site
2🔥35
Тренд: вёрстка лендингов в одну колонку
Подметил новый и набирающий популярность ход в дизайне лендингов. Их верстают в одну, часто узкую, колонку
Смотрится свежо, упрощает адаптацию к разным устройствам, проще управлять вниманием зрителя
Примеры, которые я нашёл:
— 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
🔥36👍12💩3🤡2💘2
Как правильно реализовать эффект матового стекла на сайтах
Популярный эффект матового или «замёрзшего» стекла почти на всех сайтах, что я встречал, реализован с заметными недостатками: дрожанием, мерцанием и тому подобными дефектами
Джош Комо написал кайфовую статью с разбором всех таких недостатков и, главное, с примерами его грамотной реализации в CSS
Например, он показал, как сделать так, чтобы блюр захватывал элементы, находящиеся рядом с плашкой, как избежать мерцания, как сделать прозрачную фаску, как правильно добавить стеклу визуальной толщины и другие хитрости
В статье есть фрагменты готового кода и интерактивные примеры
В общем, читайте, добавляйте в закладки и отправляйте своим технологам: joshwcomeau.com/css/backdrop-filter
#awd_article #awd_web
Популярный эффект матового или «замёрзшего» стекла почти на всех сайтах, что я встречал, реализован с заметными недостатками: дрожанием, мерцанием и тому подобными дефектами
Джош Комо написал кайфовую статью с разбором всех таких недостатков и, главное, с примерами его грамотной реализации в CSS
Например, он показал, как сделать так, чтобы блюр захватывал элементы, находящиеся рядом с плашкой, как избежать мерцания, как сделать прозрачную фаску, как правильно добавить стеклу визуальной толщины и другие хитрости
В статье есть фрагменты готового кода и интерактивные примеры
В общем, читайте, добавляйте в закладки и отправляйте своим технологам: joshwcomeau.com/css/backdrop-filter
#awd_article #awd_web
🔥20
Продуктовый дизайнер Иван Емелюшкин написал статью о том, как дизайнеру передавать элементы с размытием разработчику, чтобы на выходе получить предсказуемый результат
В статье автор:
— Рассказал, как сделать размытие на 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 оттенков размытия — Оди. О дизайне
Как выбрать нужное и заслужить благодарность разработчиков
🔥5👍1
Шикарные интерактивные концепты сайтов, которые Амин Анквард делает при помощи ThreeJS
#awd_web #awd_code via x.com/Amin_Ankward
#awd_web #awd_code via x.com/Amin_Ankward
🔥50
This media is not supported in your browser
VIEW IN TELEGRAM
Очень нравится сайт и приложение Hourly — этакий гимн швейцарской вёрстке, где всё оформлено минимумом выразительных средств
И хотя сайту уже лет пять, он не выглядит устаревшим. Возможно, хочется обновить форму рамок телефонов, и на этом всё. Отличный пример timless-дизайна
hourly-app.com
#awd_web #awd_ui
И хотя сайту уже лет пять, он не выглядит устаревшим. Возможно, хочется обновить форму рамок телефонов, и на этом всё. Отличный пример timless-дизайна
hourly-app.com
#awd_web #awd_ui
🔥14
Media is too big
VIEW IN TELEGRAM
Зацените сайт Antimetal
Классный пример сторителлинга на лендинге. Лендинг рассказывает про новый продукт, который обещает помочь разработчикам строить и поддерживать надёжную IT-инфраструктуру для своих проектов
antimetal.com
#awd_web #awd_site
Классный пример сторителлинга на лендинге. Лендинг рассказывает про новый продукт, который обещает помочь разработчикам строить и поддерживать надёжную IT-инфраструктуру для своих проектов
antimetal.com
#awd_web #awd_site
🔥17
Media is too big
VIEW IN TELEGRAM
И ещё один впечатляющий сайт из свежего: Adaline
Лендинг платформы для разработки и управления LLM‑приложениями. Нетривиальные анимации и эффектные трёхмерные пролёты
www.adaline.ai
#awd_web #awd_site
Лендинг платформы для разработки и управления LLM‑приложениями. Нетривиальные анимации и эффектные трёхмерные пролёты
www.adaline.ai
#awd_web #awd_site
🔥7😱7💘1