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

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

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

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

Автор проекта: @kirillgreen
Download Telegram
Тренд: Россыпь графических элементов на главном экране лендинга

Чжунхан Сим наткнулся на тенденцию, когда фоном на главном экране лендинга служит «россыпь» тематических графических элементов. Это могут быть 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
🙂 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 оттенков размытия

Продуктовый дизайнер Иван Емелюшкин написал статью о том, как дизайнеру передавать элементы с размытием разработчику, чтобы на выходе получить предсказуемый результат

В статье автор:
— Рассказал, как сделать размытие на 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
This media is not supported in your browser
VIEW IN TELEGRAM
На сайте daylightcomputer.com очень кайфово применили скролл, чтобы показать суть и пользу устройства

#awd_web #awd_site