Когда я приезжаю в новый город или страну, у меня включается режим повышенной внимательности к деталям.
Я обращаю внимание на всё, что попадается на глаза: вывески, наружную рекламу, одежду людей, их обувь, шрифты, урны, остановки, автобусы — и отмечаю детали, цвета, сходства и различия, необычные решения, ищу закономерности.
В первых поездках я делал это насильно, заставлял себя смотреть, учился вычленять детали. Со временем это приём превратился в навык, который постоянно в режиме сна, но в нужный момент включается сам.
Благодаря этому навыку, я регулярно нахожу новые детали, которые меня удивляют. Даже если иду по той же улице, что и вчера.
У Зума отвратительный интерфейс. Каждый раз, когда я им пользуюсь, я страдаю.
Первое, что бесит: кликаешь по ссылке на встречу и вместо самого Зума сначала открывается страница в браузере. Зачем, если у меня уже установлен Зум на компе? Почему на айфоне сразу кидает в приложку, а на десктопе меня заставляют делать лишние телодвижения?
Попасть на созвон и сразу начать говорить не получится. Сначала появляется картинка, но нет звука, потому что нужно подтвердить доступ к микрофону. Бля, а почему нельзя это спросить один раз и больше никогда не спрашивать? Оказывается можно, но из-за хуёвых формулировок, эта возможность неочевидна.
Каждый раз, когда я хочу поделиться ссылкой на комнату, я не могу найти, где эта ссылка спрятана. Ёпта, это же самая важная кнопка, почему она не на виду? Гугл Мит, например, сразу выводит всплывающее окошко с возможностью скопировать его содержимое одним кликом.
Интерфейс Зума настолько отсталый, что ещё год назад Зум прятал в меню кнопку «Поделиться экраном». То есть её тупо не было на панели управления звонком. Но видимо мимо проходил какой-то русский дизайнер и объяснил, что это совсем мрак и нельзя так издеваться над людьми.
Я веду рассылку о редактуре, дизайне и управлении c 2017 года. За это время внешний вид шапки менялся несколько раз, а в этом году рассылка переехала на Сабстэк. Я решил показать эволюцию дизайна писем за разные годы.
2017
Первые письма: пьяный редактор, поездка в Иран, приветствия на разных языках.
Эксперименты с цветами и контрастом
2018
Первые неуверенные попытки брендинга
Неплохой вариант, но подбирать картинки к каждому выпуску было муторно. Поэтому такое решение не прижилось.
Этот дизайн продержался дольше всех. Менялись цвета и фотка, но композиция в целом оставалась такой же целый год.
2019
Неудачная попытка брендинга. Сейчас я бы добавил какой-нибудь акцентный цвет. Тогда я ощущал: что-то не так — но не мог понять что именно.
Последний дизайн писем на Майлерлайте — без дизайна. Лучшее решение для рассылки.
2020
Так письма выглядят сейчас, после переезда на Сабстэк.
Бывает заходишь на сайт какой-нибудь компании, идёшь в раздел команда, а там вот так. Понимаешь, что дизайнер или заказчик хотел скреативить, но получилось странно.
Всё потому, что это решение никак не связано с другими решениями дизайнера на этом сайте. Ни в названии, ни в цветах, ни в позиционировании нет ничего детского. Из-за этого фото команды в детстве выглядит натянуто и фальшиво.
Проявлять смекалку и показывать свою креативную прыть надо в другом: типографике, вёрстке, анимации, иллюстрации. Хороший пример — оформление сайта и аваторок у команды Ноушена. Их иллюстратор, Роман Мурадов, нарисовал всю команду продукта и сделал иллюстрации для сайта в одном стиле. Благодаря этому иллюстрации воспринимаются не как локальное решение или «затычка», а как айдентика.
Чтобы сайт выглядел цельным, сначала нужно определить, на чём будет строиться визуальное повествование. Иначе всё развалится.
Вчера мы с коллегами запустили новый сайт Анимы. Изначально я должен был только помочь со структурой и текстами, но в итоге сделал дизайн и сверстал сайт на Тильде в нулевых блоках. Вот как это было.
Контекст
В январе руководство компании отказалась от сторонних проектов и сделала Аниму основным продуктом. На февраль запланировали обучение по продажам, а с марта — активное продвижение в соцсетях. Стало ясно: вести людей на старый сайт нельзя, нужен новый.
Задачу поручили другому сотруднику, но в итоге она скатилась в мою сторону. Я человек простой: вижу задачу, беру и несу. Так эта задача стала моей. И хотя я не люблю делать большие задачи в одиночку, именно они помогают расти и развиваться.
Расти можно только через боль.
Проблема: не видно продукта
Старый сайт был скучным и малоинформативным. На нём был всего лишь один экран с интерфейсом Анимы, пару этажей с описанием функций, справочная и краткий блок про услугу внедрения. Этот сайт мы собрали за неделю в ноябре, и он кое-как выполнял свои функции.
Такой сайт не привлечёт людей: глаз ни за что не цепляется, и что самое хреновое: пользователь не видит продукта. Единственный скриншот продукта выглядит скудно, особенно в мобильной версии. Неясно, как это работает.
Проблема: неинформативное описание функций
Тексты в предыдущей версия сайта не были плохими. Но в той вёрстке пользователю пришлось бы прочитать текст целиком, чтобы понять суть функции. Читать каждый абзац — утомительно, да и времени на это ни у кого нет.
Проблема: высокая нагрузка на поддержку
На старом сайте не было информации о демо-версии, условиях внедрения системы и обучении сотрудников. Из-за этого в поддержку и менеджерам продаж приходилось отвечать на одни и те же вопросы, даже если человек уже посещал сайт и был более менее знаком с продуктом.
Решение: показать функции крупным планом и сократить текст
Первая итерация нового сайта оказалась неудачной, я не буду показывать её здесь, дабы не тратить время. После неё я попросил помощи у Артёма Скворцва, арт-директора Анимы. Он указал на ошибки и привёл примеры того, как можно сделать хороший сайт о продукте.
Артём собрал несколько референсов и разобрал их для меня на составляющие. В итоге, было несколько идей, вокруг которых можно сделать сайт о продукте.
Сам продукт: его интерфейс, фотографии или изображение. Такой вариант был самым простым. Продукт уже готов, сделать скриншоты или отрисовать нужные экраны — это пару дней работы.
Иллюстрации: комикс или история в картинках. Для неё нужен иллюстратор и много времени. Нам этот вариант не подходил.
Продукт в использовании: гифки, видео и анимация. Самый красивый и эффектный вариант, но и самый трудозатратный. Поэтому мы сразу отправили его в корзину.
Решили, что главным на сайте будет интерфейс продукта, а текст будет лишь сопровождать его, пояснять функцию, которая изображена на экране.
Я отредактировал текст, и начал экспериментировать с компоновкой элементов на экране. Стало лучше, но здесь сразу две проблемы: цветная плашка выделяет скриншот и одновременно перетягивет внимание пользователя на себя, а текст на их фоне — теряется. Хотя польза уже стала заметнее.
Отдельной проблемой были разные цвета в каждом блоке. Это сбивало с толку, пользователю пришлось бы привыкать к каждому экрану заново и разбираться, что есть что. Это особенно заметно по чёрному блоку про внедрение ЦРМ-системы. Три картинки, внезапный зелёный цвет — такое никуда не годится.
Вдобавок, такое решение по-прежнему заставляло человека читать весь абзац, чтобы понять суть каждой функции. Помог один из референсов. На сайте Эпла нам понравился один приём, когда текст увеличивают, делают серым, а чёрным — выделяют самое главное.
Так мы привели все блоки к единообразию. А чтобы пользователь не устал и не заскучал, мы разнообразили каждый этаж, работая с сеткой. Этого легко добиться, например: поменять положение скриншотов, добавить фактоиды. От цветных плашек под интерфейсом мы отказались. Получилось то, что нужно.
Посмотреть весь процесс редизайна можно в Фигме. Там видно, как мы шли от проблемы в решению и как с каждой итерацией макет становился чище, понятнее и информативнее.
Тезисно
У нас была проблема: неинформативный сайт о ЦРМ-системе. Чтобы исправить это, мы вынесли продукт на первый план.
Показали интерфейс Анимы крупным планом, сделали его якорным элементом на всех экранах.
Сократили и переписали все тексты, выделили главное, чтобы не пришлось читать весь абзац.
Проиллюстрировали раздел о внедрении ЦРМ.
Ответили на частые вопросы клиентов.
Теперь все, кто придёт на сайт, смогут познакомиться с продуктом за несколько минут и понять его пользу для своего бизнеса. Именно в этом и заключается работа редактора. Не в каких-то волшебных формулах копирайтинга, а умении структурировать информацию, правильно расставлять акценты и провести читателя за ручку от проблемы в решению. Результат работы редактора — работающий продукт.
Ничто не бесит так сильно, как чат с онлайн-консультантом, который открывается, как только вы попали на сайт. Можно стерпеть неудачное сочетание шрифтов или плохой интерлиньяж, но эти все всплывающие консультанты, звонилки, чаты и таймеры — никогда.
Непонятно, почему после двух секунд на сайте мне может понадобиться помощь консультанта или подписка на новости компании
Если вы хотите сделать хороший сайт, на котором люди будут проводить время, не позволяйте ни одному маркетологу засрать вам мозги. Никакой чат не повысит ваши продажи, никакой бот или мигающая иконка телефона не заставит человека оставить номер, если сайт не решает его проблему.
Ни один чат или звонилка ещё никому не помогли вывести продажи на новый уровень. Иначе почему у всех этих компаний такие хуёвые сайты? Видимо консультант плохо помогает. Надо ещё одного добавить.
Самое идиотское, что можно сделать в навигации сайта: в одни пункты поставить якорные ссылки на этой же странице, а в другие — ссылки на другие страницы сайта.
Пользователь тыкает на «Решения», и его перекидывает к другому блоку на этой странице. В голове пользователя щёлкает: «Ага, это лендинг». Кликает на «Кейсы», и вдруг его куда-то перекидывает. У пользователя начинается паника и раздражение. Он ожидал одного, а случилось другое.
Это называется проекция. Самый простой пример проекции — управление автомобилем. Когда мы крутим руль вправо, машина поворачивает вправо, когда крутим влево, машина сворачивает влево.
Навигация должна быть такой же понятной и предсказуемой, как процесс руления. Должно быть сразу ясно, что произойдёт дальше, какая страница откроется, куда человек попадёт. И так не только с сайтами: с любыми интерфейсами.
Контраст — основой элемент дизайна. Он используется в графическом дизайне, иллюстрациях и вебе, в продуктовом и промышленном дизайне. Контраст помогает управлять внимание человека, и потому играет важную роль в создании сильного дизайна.
Фотография или иллюстрация
Фотографии, рисунки, схемы, гифки, 3D-анимация, иллюстрации создают наиболее сильный контраст. Даже если это чёрно-белая фотография, контраст по-прежнему остаётся достаточно сильным, чтобы перетянуть внимание с чёрного круга на фото.
Цвет
Контраст с помощью цвета, пожалуй, второй по силе и значимости. Чтобы правильно его использовать, изучите теорию цвета и прочтите книгу Иоганнеса Иттена «»Искусство цвета».
Размер
Контраст по размеру один из самых простых способов задать иерархию в дизайне. Этот метод применяется во всех текстовых блоках, документах, на сайтах и лендингах.
Заголовки в этом блоге набраны Гельветикой 36 кегля, а основной текст — 16. Этого достаточно, чтобы визуально создать структуру и донести до читателя, какой элемент документа важнее.
Форма
Контраст по форме тоже довольно сильный приём. Его стоит применять, когда нужно выделить элемент среди других, показать его уникальность, современность. Например, форма бутылок, в которые разливают Кока-колу. Её все знают и без этикетки.
Микрорешение
Это, пожалуй, наиболее сложный и потому менее распространённый вид контраста. Хорошо подходит, когда нужно локально выделить конкретную деталь на сайте, странице книги или в приложении. Микрорешения помогают улучшить дизайн в целом за счёт мелких и малозаметных доработок, улучшений.
Тень
Самый неконтрастный способ создать контраст. Следует использовать аккуратно и локально, чтобы не перегрузить общую композицию.
Хорошо работает в паре с фотографиями, помогает выделить элемент, с которым работает пользователь. Также подходит для того, чтоб выделить плашку от общего фона сайта, если нужно создать эффект воздушности или парения.
Меня тут снова пытались развести на деньги. На почту пришло вот такое письмо.
В июне я продлил все домены на год вперёд, а сейчас декабрь. Год ещё не прошёл. Насторожило и то, что на оплату отвели всего один день. Обычно хостинг-провайдеры присылают такие письма за месяц-два до даты, когда закончится срок аренды домена.
Я решил перейти по ссылке, кликнул на кнопку и попал на форму «Яндекс.Денег». Мошенники рассчитывают на то, что текст в письме и страх потерять домен заставят человека паниковать и поскорее заплатить. И первое интуитивное желание — заполнить данные и нажать «Продолжить».
Я закрыл форму и снова заглянул в почту. Письмо было подписано официально — REG.RU. Именно так они подписывают все свои письма. Если раскрыть подробную информацию об отправителе, то мы увидим обычный имейл-адрес на совершенно другом домене.
В общем, чем дальше, тем изощрённее схемы по разводу. Главное правило: не паниковать, отключить эмоции и включить критическое мышление. Сложно, но по-другому от такой хуйни не защититься.
Я заметил, что ни одна успешная дизайн-студия не продвигает свои услуги в соцсетях или контекстной рекламе. Понятно, почему: дизайн это не помидоры, он никому здесь и сейчас не нужен. Поэтому какой смысл его предлагать потенциальным клиентам, ведь вероятность, что они купят будет бесконечно стремится к нулю.
Тем не менее, эти же студии продвигают себя. Вместо рекламы они постоянно что-то делают. Нет заказов? Так, в России у городов нет нормальных логотипов, и почтовые ящики в стране уебанские, подумал Артемий Лебедев. А назавтра сделал логотип Перми и задизайнил почтовые ящики — об этом он рассказал в недавнем интервью Ирине Шихман. В итоге, все обсуждают новый логотип Перми, а через какое-то время к Лебедеву обратилась «Почта России» и купила ящики. Просто потому, что не нашла других.
То есть, для дизайнера самый эффективный способ рассказать о себе — находить ниши и заполнять их. К счастью, в России таких ниш — больших, средних и маленьких — очень много. Возьмите любую сферу и вы увидите: конкуренция практически на нуле. Это одновременно причина того, что у нас всё довольно медленно развивается. Но для дизайнера — это возможность проявить себя.
В дополнение к моим мыслям, вот вам отрывок из очень честного интервью с шрифтовым дизайнером и арт-директором Димой Барбанелем.
— А как добиться такой свободы? Ведь чаще приходится иметь дело с уже готовым брифом?
— Бриф — это вообще ничто. Ты делаешь не по брифу, ты делаешь то, что работает, то, что отвечает реальным потребностям и чаяниям клиента. Тебе нужно прорваться сквозь всю идиотскую писанину и добраться до того, что на самом деле клиенту нужно. И переписать этот бриф полностью для внутреннего использования.
— Но вы известный дизайнер, можете себе позволить выбирать заказы. А как быть молодым, у которых нет особого пространства для маневров?
— Я никогда не работал с тем, кто мне не нравился. Поэтому я ни одной рекламы в жизни не сделал. Я когда-то решил, что я это ненавижу. Понятное дело, у меня семья, дети, обязательства. Но я лучше пойду заниматься чем-то другим и не буду делать рекламу.
