mutim digital — дизайн и маркетинг

Сравнил дизайн Пятёрочки и Магнита — новое видео на Ютубе

Пятёрочка и Магнит — самые популярные продуктовые магазины в мире по моим данным. Где выгоднее закупаться, где шире ассортимент и где круче скидки, нас не волнует. А вот чей дизайн заслуживает пятёрочку, и чей дизайн магнитит больше — действительно важные вопросы. Ответы на них я нашёл в новом видео.

Ради видоса мне пришлось написать текст, записать себя на камеру и смонтировать материалы. Ребята, я всё понимаю, но мне кажется, это заслуживает лайка и комментария!

👉 https://youtu.be/SOikvChU3Do

Детальный разбор плашки Магнита

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

Специально вырезал кусок. Кажется, что он получился интересным и полезным. Можете глянуть прям тут, а можете на Ютубе. Но комменты предлагаю писать именно тут.

👉 youtu.be/DnZG6z38ezE

Самая коварная форма плашки

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

На оригинальной плашке «от 2 штук» пришлось расположить так, как пришлось. Я предлагаю закинуть надпись вверх и выровнять по огромному числу. Либо выровнять по диагонали процента. К сожалению, это все возможные варианты, которые сходу пришли в голову. С таким количеством инфы, в принципе, не особо разгуляешься в вёрстке. А с двумя скруглёнными углами тем более.

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

Будильник на Андроиде

Итак, перед вами обновлённый будильник на чистом, эталонном, свежайшем Андроиде. Как думаете, чем отличается плитка «Завтра» и «Сегодня»? Кроме того, что одна про завтра, а вторая про сегодня. Гыы. Главное отличие в надписи «Отключить».

А как думаете, «Отключить» — это отдельная кнопка? Или надпись даёт пояснение переключателю? Ответ удивит. Кнопка «Отключить» отключает будильник, ровно как и переключатель. Почему дополнительная кнопка есть только на одной плитке? Ну, Гугл решил добавить её только на ближайший будильник.

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

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

Моё видео повлияло на дизайн Splat?!

Год назад я делал видео про дизайн зубных паст, где похвалил бренд Splat, а заодно показал, как по моему мнению можно улучшить его упаковку. В основном я критиковал выравнивание текста по центру. Из-за этого решения заголовки на упаковке скакали в размерах, а по бокам появлялись дырки. Я предложил выровнять весь текст по левой стороне.

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

А тут на тебе! На днях заметил, что компания обновила упаковку, да не просто обновила, а наконец-то пульнула текст в левую часть. Внимание! Ни в коем случае не утверждаю, что именно мои правки повлияли на изменения. Но учитывая, что центрирование было лет 10, совпадение любопытное.

В любом случае, компании огромный рэспэкт за смелость. Ну и вообще, рэспэкт зубным пастам за чистоту зубов.

Много элементов — не всегда плохо

Пару недель назад я запилил видос про дизайн номеров авто. Для теста задизайнил сразу 5 обложек, чтобы Ютуб определил лучшую.

Ставил на верхнюю, потому что на ней есть взаимодействие с объектами, крупные номера и подписи с забавным байтом. По итогу у обложки самые низкие показатели. А лучше всего зашла нижняя.

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

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

Что думаете насчёт обложек?

Банальный образ в логотипе

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

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

Однако, останавливаться нельзя. Я предложил усилить безумие знака парой линий и более странным паром. Правки сделаны в экспресс-формате. Но даже так я уже не смогу назвать логотип справа банальным.

ЧатуГПТ не нужны мои деньги

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

Как подобрать цвет текста

Зрительница Людмила прислала буклет с таким комментарием:

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

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

Разные промежутки между буквами

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

Воспользуюсь определением из Вики. Кернинг — избирательное изменение интервала между буквами в зависимости от их формы. Рассмотрим действие на примере Амазона. Уверен, что можно найти вариант нагляднее, но хватит и этого.

В оригинальном логотипе пять промежутков. Одинаковое значение лишь у двух. Да и то, это чистой воды совпадение. Если же сделать все промежутки одинаковыми, буква «o» отвалится, а вместе с ней и буква «n».

Если заказчик задает вопрос, я предпочитаю погрузить в курс дела на реальном примере. А иногда действую на опережение и проясняю какие-то вещи в презентации. Если столкнётесь с подобным вопросом в своей работе, можете пользоваться этой картинкой для объяснения.

Инфа очевидна для дизайнеров, но для людей вне профессии — нет.

Оцениваю номера авто всех стран — новое видео на Ютубе

Вы знаете, как выглядят автомобильные номера в Австралии или, например, в Сан-Марино? А может быть, вы знаете какой цвет номеров второй по популярности после белого? Или какие номера можно назвать самыми короткими и самым длинными?

А я вот знаю, потому что для нового видео просмотрел и обработал кучу инфы. Всё для того, чтобы вы наконец-то узнали, как выглядит дизайн автомобильных номеров всех стран мира!

👉 https://youtu.be/zo9OrOQp2Kc

Хотели оскорбить — сделали комплимент

В видео про хоккей не было ни единого упоминания Фотошопа, конечно. Но спасибо, что верите, будто я умею им пользоваться. Если что, один только инструмент «Уровни» достоин целой книги.

Латиница → кириллица

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

Неправильный контраст — на примере Rozetked

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

Зацените табличку с временем работы аккумулятора на разных Айфонах и версиях айОСа. Забудьте про текст. Нас интересует только прогресс-бар. Вроде бы, всего два цвета, но и с ними можно косякнуть.

Чем темнее объект на светлом фоне, тем сильнее он выделяется. Но в оригинале контраст шиворот-навыворот. Получилось так, что неактивная часть прогресс-бара бросается в глаза раньше. В добавок к этому, цвета не особо контрастируют друг с другом. Нужно поменять их местами, а всю длину шкалы сделать светлее.

Понимаю, что для опытных ребят совет может показаться очевидным. Но вам, очевидно, кажется.

Сухарики со вкусом чипсов

Увидел в магазе симпатичную упаковку сырных палочек, которая оказалась симпатичной упаковкой сухариков со вкусом сырных палочек.

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

А в этом случае сложилось бинго. Сырные палочки — отдельный снэк. Так ещё и по цвету и расположению они считываются быстрее сухариков.

Хорошо, что я внимтльный.

Текст упирается

В такую дату я, конечно же, решил послушать новый альбом известного рэпера Жоры Айсгергерта. Площадкой выбрал Ютуб. И к большому сожалению не смог насладиться звуком и текстом в полной мере. Глаза зацепились за упирающийся в края текст на обложке.

Если на композиции «Маршал» обычное построение макета работало, то на «Актрисе» поломалось из-за количества символов. Пришлось уменьшить размер шрифта. Но и этого не хватило — текст всё равно выглядит неаккуратно.

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

Чтобы не попасть в такую ситуацию в своих макетах, заранее определите максимально возможное количество символов в строке.

Незаметный дизайн

Больше всего в дизайне я обожаю думать над незаметными штуками. Рассмотрим на свежем примере. Мне нужно было показать в брендбуке, какие градиентные цвета необходимо использовать для фирменного элемента. Я накидал три варианта визуализации. Кажется, что дело простейшее, но нужно учесть ограничения формата, размер шрифта и колонок. Самое важное — построение градиента должно быть понятно клиенту. В итоге остановился на третьем варианте. Он самый аккуратный, минималистичный и понятный.

Оценит ли клиент эту часть работы? Скорее всего, нет. Это ж просто кусочек брендбука и не более. Но главное, что мне по кайфу!

Безусловно, каждый из вариантов можно погонять с точки зрения скруглений или другой незначительной декоративной фигни, но на базовом уровне — это база. Если знаете иные, варианты, скидывайте в комменты. Глядишь, составим, своеобразную библиотеку шаблонов.

Дизайн Телеграма: iOS vs Android

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

Раньше не замечал, но нижняя и верхняя панели очень разные. На айОСе приоритет отправке файлов и голосовым, а на Андрюше явно голосовым. Если что, синяя подсветка у кнопки стоит по умолчанию. Может на айОСе люди статистически чаще отправляют файлы, а у конкурента голосовухи? Хотя, как по мне, благодаря открытости Андроида, скидывать что-то гораздо проще и удобнее.

Главное, за что стоит ценить версию Андроида — отсутствие ликвид глЭССа и дурацких разделений внутри панелек.

Ну и финал. Не знаю, в чём прикол, но насыщенность цветов на двух системах разная!?! Это ж не фотки экранов, а скрины. Как такое может быть? Видно, что на айОСе насыщеннее не только фон, но и все кнопки. Как в таком случае выглядят скрины на Самсунге или Сяоми?

Давайте без креатива

Мне вот недавно нужно было подписать док, в котором поменяли привычный порядок «фамилия, инициалы» на «инициалы, фамилия». Вместо Петров Иван Васильевич, мне нужно было написать Иван Васильевич Петров. Естественно, я по-привычке заполнил поле классическим вариантом.

Да, русский язык хорош тем, что слова можно переставлять, как угодно. Но это же документ! Хорошо, что его приняли и мне не пришлось заполнять всё заново из-за поломки привычного построения.

К чему этот пост? Кажется, что и работа дизайнера всегда связана с креативными процессами. Но это не так. Есть вещи, которые настолько удобны, привычны и отлажены, что их просто не нужно трогать.