Визуальный код
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
Наглядные размеры
Хороший пример наглядной демонстрации размеров. Кликаешь на размеры стикеров — видишь их на знакомой поверхности макбука и можешь сравнить друг с другом. За наводку спасибо @angnu


#демонстрация #web #стикеры

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


#композиция

Визуальный код
Христианские мотивы
Как здорово иногда обыгрываются традиционные христианские культурные тропы в современном дизайне.
Например, эта арка с тремя «якорями» и дамой на фоне явно отсылает к образу девы Марии (традиционно у неё на накидке изображаются три звезды — одна на лбу, две на плечах). Стиль современный, отсылка древняя (и, возможно, даже неосознанная).
За наводку спасибо @vladkorobov


#символы #композиция

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


#навигация #web

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


#персонаж #web

Визуальный код
Игра с формой
Понравилось, как дизайнер работает с формой: элементы логотипа, напоминающие игрушки, становятся самостоятельными формами, вписываются в набор, используются как контейнеры для изображений и иллюстрации. За наводку спасибо каналу spark.


#композиция #форма

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

: личные фото

#композиция #упаковка

Визуальный код
Чёткость и размытость
Сегодня опять приём без какой-либо практической пользы, но про красоту :)
Контраст на максималках: понравилось сочетание размытого яркого фона с чётким контуром тёмного овала, как бы разрезающего холст.


#композиция

Визуальный код
This media is not supported in your browser
VIEW IN TELEGRAM
Ховер
Ещё один пример смелого и несложного ховера: наводишь на объект — он превращается в ленту, а сама страница резко меняет состояние.


#анимация #web

Визуальный код
Скрины + иллюстрации
Классно представленные скрины приложения на лендинге стартапа. Удачная иллюстративная обёртка делает презентацию информативной и нескучной.


#web

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


#цвет #mobile

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


#композиция

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