Визуальные приёмы

График от руки
Ещё один приём в копилку «Привычное как рандомное»: опросник, где шкалы не единообразны. Это маркетинговый приём с главной страницы продукта — то есть для точных значений и их сверки он точно не подойдёт, но пригодится, если нужно привлечь внимание к графику. За наводку спасибо @nnanefa

Источник
#web

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

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

Источник
#web

Иллюстрация из элементов UI
Понравилась иллюстрация на промо-сайте приложения про семейное здоровье.

Можно написать пять абзацев о том, как именно продукт помогает быть здоровыми: с помощью рецептов, предложений активности, пушей, статей и так далее. А можно сбацать несложную иллюстрацию на весь экран, состоящую из всего этого, — и вот уже пять абзацев не нужны.

За наводку спасибо каналу @blinklinks

Источник
#web #иллюстрации

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

Источник
#типографика

Меланхолия
И ещё один изумительный пример упаковки от авторов, упомянутых вчера (это студия Omsky, за работами которой я очень люблю следить).

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

А ещё здесь используется интересный метод работы (см. фото 3) — на заранее подготовленные фотографии наносятся травы, под действием солнечного света трава и фотография под ней выгорает, и так создаётся неповторимый отпечаток.

Источник
#цвет #свет #упаковка

Вёрстка
В этой упаковке (прекрасной самой по себе) особенно цепляет работа с типографикой — описание продукта свёрстано как стихотворение, в самой форме абзаца угадывается какая-то поэзия быта. За наводку спасибо дайджесту Журналус.

Источник
#типографика

Зрелищная навигация
И ещё один классный приём из вчерашнего источника, соблазнительный для промо и наглядный, когда речь идёт о каком-то вещественном продукте. Вся линейка сразу перед глазами.

Источник
#ui

UI на промо-сайте
Простая, чистая и очень красивая подача интерфейса на промо-сайте. Редко когда реальность позволяет так сделать, а тут весь сайт выдержан в таком духе.

Источник
#ui

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

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

Источник (за ссылку спасибо @sergej_petrov)
#композиция #хаос

Анимация эмоций
Приятная анимация состояний в нативном айфоновском приложении «Дневник». Жаль, такой дофаминовый декор нечасто встречается в вебе.

Источник: личный архив
#анимация #mobile

Графики с паттернами
Очень понравился интеркомовский стиль графиков на продуктовом лендинге: деликатный паттерн из точек, единая палитра и вариативная толщина у линий здорово расставляет акценты и при этом делает график не скучным.

Чисто декоративный приём — конечно, не для отчётов и для глубокого анализа, но для презентаций и лендосов — вполне.

Источник
#ui #паттерн

Игра с номером
Телефонный номер как пространство для игры и брендирования: в цифрах 070 дизайнер увидел велосипед. Запоминающийся приём — увидеть магию в рутине. За наводку спасибо каналу «Дизайн-снайпер».

Источник
#метафора

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

Источник
#метафора

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

Источник
#ui #модули

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

Источник
#схемы #ui

Книга-поток
Первый приём, вдохновивший сегодня: удивительная книжка 1913 года «La Prose du transsibérien et de la petite Jehanne de France» от Сони Терк-Делоне. Примерный перевод: «Проза Транссибирской магистрали и маленькой Жанны из Франции». Это стихотворение в виде книжки-гармошки с иллюстрациями.

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

Источник
#композиция #цвет

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

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

Пока что без рекламы (она не продаётся и не покупается), но если что-то изменится, обязательно сообщу.

Поехали.

Объявление про канал
Возможно, вы могли заметить, что посты в этом канале больше не выходят так часто, как раньше. Сегодня я пришла покаяться и рассказать про планы на будущее.

Дело в том, что за 7 лет, что я веду канал (а «Визуальные приёмы» появились аж в 2017 году), мой интерес к разного рода ярким презентационным приёмам несколько поугас.

В 2017 году я — Даша Почекуева @pochekueva, автор канала, — работала арт-директором в агентстве. Сейчас — дизайн-лидом в продуктовой компании с довольно техничными внутренними продуктами. Я всё ещё посматриваю за интересными ходами в графическом дизайне, но, будем честны, в сложных внутренних продуктах область их применения здорово ограничена, поэтому и канал уже не зажигает меня так, как раньше.

Зажигает совсем другое, а как превратить это в новый канал (и нужно ли?), я и сама пока не поняла.

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

Канал не исчезнет и не перейдёт в другие руки, но, вероятно, потихоньку превратится в архив.

Спасибо вам за то, что следили за «Визуальными приёмами» — все семь лет я искренне кайфовала, пока вела канал, и радовалась каждому единомышленнику. Грустить не надо, потому что не прощаемся. Если я придумаю что-то новенькое, вы узнаете об этом первыми.

Обнимаю каждого, шлю лучи добра и вдохновения.

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

Источник
#плакат #композиция

Табы и скролл
Необычное поведение табов на презентационном сайте: при скролле они перелистываются. Диковато, но интересно, для промо-сайта неплохой приём (в более сервисных интерфейсах, пожалуй, будет ту мач).
Кстати, сам сайт продукта интересен — много приятных и понятных линейных иллюстраций, ненавязчивая анимация, хорошие метафоры AI. За наводку спасибо @vladkorobov

Источник
#web #ui

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

Источник
#web #анимация

Текучие блоки
Интересный приём на сайте — блоки становятся текучими от ховера. Задаёт игривое настроение, которое вдобавок поддерживается сторителлингом-анимацией на первом экране. За наводку спасибо @anna_ze1

Источник
#web #анимация

Разрыв букв
Старая добрая игра с анимацией заголовка по ховеру. Здесь эффект неожиданный, не заезженный и довольно уместный — буквы рассыпаются, но под ними второй слой удерживает конструкцию. За наводку спасибо @iros666

Источник
#web #анимация

Поиски стиля
Как здорово показаны поиски стиля и мимики маскота прямо поверх общей формы: на общей канве меняются несколько деталей, а не всё изображение целиком.

Источник
#персонаж

Картинка внутри буквы
Удачный выбор шрифта позволил встроить иллюстрации в овалы внутри символов. Получилось интересно, многообразно и очень просто, но зрелищно. По таймеру иллюстрации ещё и меняются. За наводку спасибо каналу «Кириллица.дизайн».

Источник
#композиция

Выстрел
В логотипе фильма об убийце убиты даже буквы. Приём максимально в лоб, прямолинейный, как пуля, да и ещё и стиль постера такой старомодный, будто кто-то вдруг решил протащить в двадцатые годы сороковые. Что-то в этом есть дикое, но симпатичное. За наводку спасибо каналу «коты и ящики».

Источник
#плакат

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

Источник
#типографика

Карточки
Ещё один неплохой пример спокойной, но выразительной вёрстки модулей: приятные карточки, графики не спорят с содержимым, от вёрстки не страдает информативность. Разве что страдает единообразие: последние две карточки явно выбиваются из общего стиля и по тону, и по стилю, но, возможно, так задумано продуктово и к ним зачем-то нужно привлечь внимание. За ссылку на оригинал спасибо @mjsnui

Источник
#модули

Сколько пальцев?
Тот случай, когда путаница с количеством пальцев, над которой все смеются, разглядывая работы нейросеток, становится осмысленным дизайнерским приёмом, игрой и формой. Это работа из серии плакатов о кириллице, посвящена букве «Б». Но все прочие работы в подборке тоже очень достойные — настоящий кладезь приёмов и находок.

Источник
#плакат

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

Источник
#mobile

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

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

Источник
#mobile

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

Источник
#композиция #цвет