Оди
34.7K subscribers
24K photos
1.08K videos
143 files
5.11K links
Журнал о дизайне и для дизайнеров. Вдохновение, обучение, инструменты.

Чат канала: @awdeechat

Сайт с полным архивом: https://awdee.ru

По рекламе: @kgreenmedia

Автор проекта: @kirillgreen
Download Telegram
Тренд: «поплывшие/заплывшие» шрифты

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

Этот тренд — противоположность моде на ловушки для чернил в шрифтах, который был популярен в 2022 году

🙂️️️️️️ Примеры: awdee.ru/trend-floated-blotched-fonts

#awd_web #awd_site #awd_ui #awd_trend
Please open Telegram to view this post
VIEW IN TELEGRAM
Тренд: гармоничное сочетание цвета текста и фона

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

Примеры: awdee.ru/trend-harmonious-combination-of-text-and-background-color

#awd_web #awd_site #awd_trend
Media is too big
VIEW IN TELEGRAM
Сайт онлайн-календаря Amie

Уверенная презентация цифрового продукта с приятной стилистикой и множеством интересных деталей. Здесь и аккуратная вёрстка, и грамотная работа со слоями, и отличная проработка визуального контента с уместными вкраплениями 3D-элементов. А за счёт грамотного использования интерактивных анимаций и видеоконтента лендинг выглядит динамичным и запоминающимся своей подачей

Само приложение тоже отличное, советуем оставить заявку на доступ

amie.so

Больше скриншотов: awdee.ru/amies-online-calendar-site

#awd_web #awd_site
Тренд: Россыпь графических элементов на главном экране лендинга

Чжунхан Сим наткнулся на тенденцию, когда фоном на главном экране лендинга служит «россыпь» тематических графических элементов. Это могут быть 3D-объекты, логотипы, геометрические фигуры, паттерны, рисунки, стикеры, отдельные блоки сайта, фотки и многое другое

Такой приём помогает эффективно передать суть продукта и настроение бренда. Плюс выглядит неизбито и прикольно

🙂️️️️️️ 10 отличных примеров: awdee.ru/trend-scatter-of-graphic-elements-in-the-landing-page-header

#awd_web #awd_site #awd_trend
Please open Telegram to view this post
VIEW IN TELEGRAM
Тренд: Прямые углы без скруглений

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

Вот несколько примеров этого тренда: awdee.ru/trend-right-angles-without-rounding

#awd_web #awd_site #awd_trend
Media is too big
VIEW IN TELEGRAM
Сайт о маринованных огурчиках Thick Pickle

Ироничный дизайн-проект от американской студии Study Hall, где дизайнеры экспериментируют с разными дизайн-решениями

Небольшой, но запоминающийся сайт, где сразу бросаются в глаза сочные 3D-визуализации, стильная болдовая типографика и разнообразие анимаций по скроллу

thickpickle.com

#awd_web #awd_site
Простое руководство по Webflow для начинающих

Если вы зарабатываете дизайном корпсайтов, лендингов, блогов и магазинов — внимательно присмотритесь. Использование в работе Webflow даёт вам конкурентное преимущество, потому что вы отдаёте клиенту не макеты в Фигме или Иксди, а готовую адаптивную вёрстку, которую клиент может использовать или сразу, или с минимальной доработкой разработчиками. Такой подход сокращает затраты клиента и повышает цену вашей работы

По ссылке ниже переводная статья для тех, кто хочет ознакомиться с этим инструментом. Содержание:
— Что такое WF
— Почему это должно быть вам интересно
— Блочная модель — ЕДИНСТВЕННАЯ техническая вещь, которую нужно знать
— Глубокое погружение в основной интерфейс
— Обзор самых важных элементов и маленькие хитрости
— Первый проект
— Ресурсы и курсы

ux.pub/prostoe-rukovodstvo-po-webflow-dlya-nachinayuschih

#awd_article #awd_tool #awd_webflow #awd_web
Тренд: Антиквы в вебе

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

Несколько примеров этого тренда: 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
Тренд: 3D-анимация по скроллу

3D-анимация по скроллу добавляет сайту динамику и глубину. Интерактивность и вау-эффекты позволяют выделиться и явно цепляют лучше статичных картинок

Мы нашли девять впечатляющих сайтов разной тематики с классной реализацией этого интерактивного приёма

🙂️ Примеры: awdee.ru/trend-3d-scroll-animation

#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
Тренд: голографические эффекты

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

🙂️️️️️️ Добавляйте примеры в свою коллекцию референсов: awdee.ru/trend-holographic-effects

#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
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
Приём в вебе: выбор юзернейма в качестве CTA

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

🙂️️️️️️Вот два примера: awdee.ru/a-new-trick-on-the-web-choosing-a-username-at-the-registration-stage

Если вы знаете ещё примеры такого приёма, присылайте в комментарии

#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
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
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
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
Коллекция годных примеров интерактивной анимации элементов сайта

На сайте Web Interactions Gallery собраны хорошие примеры реализации переходов между страницами, индикаторов загрузки, появления секций и меню сайта. Сейчас в коллекции порядка 120 примеров, они разбиты на типы и сопровождаются коротким видео

webinteractions.gallery

#awd_web #awd_site #awd_collection #awd_ui