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

Since the beginning of the war, more than 2000 civilians have been killed by Russian missiles, according to official data. Help us protect Ukrainians from missiles - provide max military assisstance to Ukraine #Ukraine. #StandWithUkraine

Объявление про канал Возможно, вы могли заметить, что посты в этом канале больше не выходят так часто, как раньше. Сегодня я пришла покаяться и рассказать про планы на будущее. Дело в том, что за 7 лет, что я веду канал (а «Визуальные приёмы» появились аж в 2017 году), мой интерес к разного рода ярким презентационным приёмам несколько поугас. В 2017 году я — Даша Почекуева @pochekueva, автор канала, — работала арт-директором в агентстве. Сейчас — дизайн-лидом в продуктовой компании с довольно техничными внутренними продуктами. Я всё ещё посматриваю за интересными ходами в графическом дизайне, но, будем честны, в сложных внутренних продуктах область их применения здорово ограничена, поэтому и канал уже не зажигает меня так, как раньше. Зажигает совсем другое, а как превратить это в новый канал (и нужно ли?), я и сама пока не поняла. Пишу об этом, чтобы не создавать ложных ожиданий у новых (и старых) подписчиков и снять груз с собственной души: увы, «Визуальные приёмы» вряд ли оживут с новой силой. Периодически я буду (или не буду) продолжать кидать сюда мелкие наблюдения, канал не исчезнет и не перейдёт в другие руки, но, вероятно, потихоньку превратится в архив. Спасибо вам за то, что следили за «Визуальными приёмами» — все семь лет я искренне кайфовала, пока вела канал, и радовалась каждому единомышленнику. Грустить не надо, потому что не прощаемся. Если я придумаю что-то новенькое, вы узнаете об этом первыми. Обнимаю каждого, шлю лучи добра и вдохновения.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Свечение Иногда передача объёма может интересно усиливаться свечением. В примере с 3d-графиками дизайнер намеренно добавляет свечение объектам, чтобы они выглядели более выпукло. Причём в тёмной теме эффект заметнее. Кстати, и сама карточка свёрстана приятно. Источник #объём

Росчерк Текстовый блок по форме росчерка. Красота спонтанности и экспрессии. Источник #типографика

Стопка Несколько сообщений объединяются в тред с помощью приятной анимации «складывания» в стопку, верхнее сообщение при этом становится главным, и подводится какой-то микроитог разговора. Саму анимацию в рабочем продукте вряд ли сделали прям такой — приём явно презентационный. Но понравилось исполнение и простота метафоры: тред — это стопка сообщений. Источник #интерфейс

Смена текстов Не совсем визуальный, а скорее продуктовый приём, но очень уж классно: сайт шрифтового дизайнера, на котором можно по клику поменять любую строчку. Работает не идеально, а всё равно радует. Приём в том, что тематика сайта становится не просто темой рассказа на сайте, а влияет на сам инструментарий, интерактив, способ взаимодействия с этим сайтом. За наводку спасибо @okirillooova Источник #web #типографика

Витрина Понравилось, как сконструирована витрина в мобильном приложении Дринкита. На главной — зрелищные видео с продуктами, превращающие кофе и лимонады в объекты желания, под ними — карточки-миниатюры смежных продуктов, а по клику на открывается более простой экран, куда упаковываются все возможные опции. Очень простой приём в классной реализации — чем глубже копаешь в приложение, тем меньше зрелищности и «продающести», и это сделано классно и уместно. Источник #mobile

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

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

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

Слайдер Возвращаемся после перерыва с новыми силами. Сегодня глаз зацепился за интересный слайдер-таскалку — обычно в инпутах слайдеры делают в виде кружочка, прилипающего к нижнему краю, а здесь дизайнер разошёлся и превратил всё поле в слайдер, а для обозначения действия поставил иконку, которую обычно используют для обозначения «перетаскиваемости» объектов. Смотрится интересно и смело. За ссылку спасибо @artemfedorov Источник #web #интерфейс

Маска на видео Старый добрый приём для зрелищного первого экрана. Выглядит эффектно, но в реализации на самом деле не так сложно: свгшная маска накладывается на обе части экрана, в одной половине фото, в другой зацепленное видео на фоне, и по ховеру маску сдвигаем, масштабируем или трансформируем. За наводку спасибо @yesiwannado Источник #web #анимация

Книги на полке Приятный приём на сайте: при скролле книги искажаются, аккуратно имитируя реальный опыт взаимодействия с книжной полкой. За наводку спасибо @sergej_petrov Источник #web #анимация

Образ рыбы Понравилось, как в айдентике рыболовной компании дизайнеры передают образ рыбы — полуабстрактными формами, размытыми линиями, искажениями, фигуративным упрощением. И как классно этот образ может собраться в фирменный паттерн. Источник #айдентика