Визуальный код
5.03K subscribers
1.51K photos
633 videos
2 files
2.27K links
🌈 Всё лучшее из мира визуального дизайна без лишнего шума и рекламы. 💡 Вдохновляйтесь, изучайте, творите! 👩‍🎨

@pishiii_suda_da_bot — быстрая связь и мгновенные ответы в любое время.
Download Telegram
Куб
Грань куба как пространство для вариативности.

Визуальный код
This media is not supported in your browser
VIEW IN TELEGRAM
Скролл как приём
Классная презентация вариативного шрифта: жирность меняется по скроллу. Просто и наглядно.


#web #типографика

Визуальный код
Колд брю
Роскошное сочетание цветов: пастельно-кофейный оттенок колд брю и насыщенно-синяя, сочная этикетка с примесью фиолетового.


#цвет

Визуальный код
This media is not supported in your browser
VIEW IN TELEGRAM
Диалог
Интересный способ задействовать панораму в проекте «Музей принятия». Это истории матерей, которые приняли своих ЛГБТ+ детей. Диалог показан с помощью круговой видеопанорамы: переключаясь между точками, можно посмотреть на сына глазами матери и мать глазами сына.

#web #панорама

Визуальный код
Иллюстрации с подтекстом
Классный стиль иллюстраций в мобильном приложении: с одной стороны, сразу ясно, что про секс, с другой стороны — с аккуратными метафорами, без буквального воспроизведения тематики. Визуал живой, непосредственный, самоироничный и гибкий в использовании. За наводку спасибо @kirillooova


#mobile #иллюстрации

Визуальный код
Фильтры-лента
Фильтры событий спрятаны в ленту; каждая сопровождается иконкой, и за счёт специфических пропорций (не совсем «кнопочных») здорово смотрится. Так можно оформлять сортировку, выбор параметров в интернет-магазине или на сайте недвижки.


#кнопки #лента

Визуальный код
Стикеры
Ещё один приятный пример айдентики, в которой главным приёмом становятся стикеры, беспорядочные налепленные на холст и друг на друга.

Визуальный код
Объём в кронах
На новой троллейбусной схеме Ялты замечательно всё, но особо хороша природа. Иконки прорисованы не плоскими, а с небольшим объёмом в кронах. Получается очень няшно за счёт приглушённых цветов, сглаженных форм и мягких градиентов.


#градиент #объём #иконки

Визуальный код
Media is too big
VIEW IN TELEGRAM
Диагональ
Приём-игра: все посты в ленте подогнаны под диагональ, всё повёрнуто на 45 градусов. Для восприятия сложновато, зато зрелищно и остроумно. За наводку спасибо @tim_or_timofey


#композиция

Визуальный код
Движение
Классный способ придать композиции динамику. Это разворот о том, как готовить яйца. Иллюстрация разбита на две части — наверху руки разбивают яйцо, внизу подставлен ковшичек. Между ними две колонки текста, размещённые так, чтобы яйцо «пролетало» в отступ между ними.
Очень просто, динамично и забавно: дизайнер как бы не показывает само действие, но расчищает на макете путь для него.


#композиция

Визуальный код
This media is not supported in your browser
VIEW IN TELEGRAM
Простейший интерактив на Редимаге
Бывает, нужно сделать наглядную схему, а ресурсов на вёрстку, маски и админку нет. В таких случаях спасает Редимаг с его функцией анимации по ховеру: можно нафигачить несколько картинок одна поверх другой и на каждую навесить появление по ховеру на другой элемент — легенду.

(лонгрид вашей покорной слуги)
#анимация #схемы #интерактив

Визуальный код
Трогательное излишество
Бывает такой антиутилитарный дизайн, дорогущий, избыточный, неудобный в производстве, не продиктованный никакими запросами клиентов и маркетинговыми исследованиями, но вызывающий бескрайнее умиление.
Допустим, сахар в форме облачков, который нужно тереть на тёрочке, встроенной в крышку, чтобы пошёл снег. Ни один потребитель в супермаркете никогда не скажет, что ему нужен кусок сахара в форме облачка со встроенной тёркой. Это чисто фан дизайнера. И иногда так тоже можно.
За наводку спасибо дайджесту Оди.



#упаковка

Визуальный код
This media is not supported in your browser
VIEW IN TELEGRAM
Модуль-свитчер
Частая история: в приложении есть набор опций, которые можно включать/отключать, но сами по себе они не очень понятные и «продающие». А штука нужная. Приходится выкручиваться, добавляя к элементу управления подсказки и мелкие подписи.
В этом примере автор выкрутился иначе: сделал из переключателей отдельные модули с иконками, поясняющим текстом и дополнительными ссылками. Получилось просто, понятно и заметно.


#mobile #UI

Визуальный код
This media is not supported in your browser
VIEW IN TELEGRAM
Курсор
Неожиданный размытый курсор, меняющий цвет. Деликатная финтифлюшка для строгого сайта, чтоб эту строгость как-то разбавить. Кажется, было бы особо классно, если бы похожий приём использовался на промо-сайте оптики или офтальмологической клиники. За наводку спасибо @Vika_Gerasina


#анимация

Визуальный код
Деликатный глитч
Очень аккуратный и деликатный глитч в типографике, выступающий как главный приём стиля. Участки букв смещаются лишь чуть-чуть и как бы разбиваются по пикселям.
Приём требует мастерства и вкуса, но технически сделать его очень просто: можно создать в шрифте несколько искажённых букв и заменять ими основные символы в отдельных случаях.


#типографика

Визуальный код
Альтернатива
Приём из клиентоориентированнного мира. На карточке отсутствующего продукта в интернет-магазине Demeter показывается доступная альтернатива: мол, нет апельсинового скраба — возьми черносмородиновый, он тоже ничего. Похожий приём «Предложить альтернативу» ещё используется в интернет-магазине «Перекрёстка».


#web

Визуальный код
Рифма
Буква C в логотипе (необычные смещённые утолщения штрихов) рифмуется с обводками знаков на упаковке.


#типографика

Визуальный код
Повторение
Классная метафора стука в дверь, воплощённая в типографическом приёме.


#типографика

Визуальный код
Зеркало
Бугристая поверхность зеркала, искажая предметы вокруг, порождает интересный визуальный приём — роскошный, таинственный, слегка декадентский. За наводку спасибо классному каналу «Заметки на полях».


#поверхность #искажения

Визуальный код
Острые предметы
На упаковке латексных перчаток изображается, как острые предметы пытаются прорвать материал, а он держится. Классный способ показать прочность товара. За наводку спасибо Оди.


#упаковка #айдентика

Визуальный код
This media is not supported in your browser
VIEW IN TELEGRAM
Спрятанная картинка
Картинка спрятана под основным фоном страницы и иногда проглядывает, если наводишь на края. Классный приём для демонстрации намёков, создания атмосферы таинственности и оформления спецпроектов про заговоры.


#картинка #анимация

Визуальный код