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

@pishiii_suda_da_bot — быстрая связь и мгновенные ответы в любое время.
Download 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

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


#композиция

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


#иконки #форма

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


#web #промо #интерактив

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