Эльдар прислал макет страницы о себе в рубрику «Советы»:
Я посмотрел, заметил ошибки, что‑то поправил. Но главная проблема заключалась в том, что если поменять текст и фотографию, на странице по сути ничего не поменяется:
Это будет страница другого человека. То есть в этом дизайне нет ничего, что помогало бы нам понять стиль, характер Эльдара.
Я поставил свою фотографию, и стало даже более выразительнее, потому что я на фотографии как‑то кривляюсь — и появляются ассоциации со сценой: может быть, я театральный актёр, а не веб‑дизайнер.
Вот из‑за этой проблемы, как это ни обидно, страдают многие дизайнеры, когда делают страницы о себе или дизайны продуктов и товаров.
В качестве примера ещё картинка из «Советов»:
Прислали макет интернет‑магазина суши. В чём здесь проблема?
Комментарий из зала: «Он такой же, как и все остальные миллионы интернет‑магазинов, такой же, как „Яндекс‑маркет“».
Правильно. Страница выглядит настолько нейтрально и настолько не имеет никакого отношения к суши, что если я сюда подставлю что‑нибудь другое, например заменю суши на велосипеды, то ровным счётом ничего не поменяется. Возможно, местами страница даже станет выглядеть уместнее:
Вот ещё один пример из «Советов»:
Прислали промостраницу пилорамы. Ребята пилят лес, превращают его в доски, брёвна, брусья и всё прочее, что может понадобиться для строительства. Когда смотришь на эту страницу, возникает диссонанс: «Что‑то здесь вся такая типографика, модно, технологично, красивые фото. Ребята, вы точно лес пилите, а не „Теслу“ продаёте?»
Почему это важно? Когда такой диссонанс возникает у клиентов и потенциальных пользователей, они задаются вопросом: «А может быть, это какой‑то хренов стартап? Может быть, они вообще не знают, как пилить лес, и мне какую‑то гниль будут продавать?» Сюда пришли модные чуваки и сказали: «Сейчас мы на опушке напилим брёвен, продадим, главное — сделать модный дизайн».
Ваша вёрстка и дизайн должны иметь какое‑то отношение к предметной области для того, чтобы клиенты больше вам доверяли.
Если говорить про суши, было бы гораздо круче задизайнить страницу так, чтобы она не просто сообщала, какие суши у нас можно купить, а ещё возбуждала аппетит, призывала купить суши побольше и подсовывала самое вкусное.
Для сравнения, в настоящем ресторане меню будет выглядеть каким‑то таким образом:
Всё гораздо вкуснее, разнообразнее, интереснее, с большей вероятностью захочется заказать.
Ещё пример — картинка, которую я выхватил в Фейсбуке в разгар выборов в Мосгордуму:
Какой‑то оппозиционный кандидат заснял видео. Я уже не помню, о чём там шла речь. Какие у вас мысли возникают при взгляде на эту картинку?
Комментарий из зала: «Я бы никогда в жизни не поняла бы, что это видео депутата, потому что это просто селфи: шёл по Москве, увидел красивый вид, взял сфотографировался и пошёл дальше».
Комментарий из зала: «Сделано в тёмное время суток. Вызывает неприятное ощущение».
Комментарий из зала: «Очень странный шрифт. Неудобно читается, всё в одну строчку. И вообще нет ассоциации, что это какое‑то официальное обращение».
Комментарий из зала: «Неудачные автоматические субтитры».
А теперь я расскажу вам о своих ассоциациях. Вы правильно рассуждаете: эта штука не вызывает доверия. Возникает ощущение, что кто‑то шёл по мосту и решил снять селфи. Нет здесь никакого депутата Мосгордумы, который хочет что‑то нам рассказать. Ничего подобного.
Но у меня при взгляде на эту штуку возникают другие ассоциации. Сейчас я специально настрою шрифт, чтобы передать мысль, и кое‑что напишу:
У меня ощущение, что я смотрю кадры криминальной хроники.
Некачественное тёмное фото, полумрачное выражение лица, дешёвые титры внизу и главное — оранжевый цвет. Я не знаю, откуда у меня такое воспоминание, но такое ощущение, что где‑то в детстве по НТВ крутили передачи с криминальными хрониками и там что‑то такое было. У меня ощущение, что мне здесь показывают видео с каким‑то уголовником.
А могли бы всё сделать гораздо более стильно — аккуратно написать всё сбоку в узкой контрастной колонке. И даже невзирая на некачественное видео, получилось бы гораздо приятнее. Можно даже попробовать поэкспериментировать:
Не то чтобы я развёл здесь какую‑то суперэстетику, но даже минимальной аккуратной типографики и правильного выбора цвета хватает, чтобы это мерзкое ощущение ушло. Чувствуете?
Комментарий из зала: «Да. Всё равно мрачновато, но уже лучше».
Конечно, это в любом случае какое‑то любительское видео, снятое в конкретный момент времени, с этим уже ничего не поделаешь. Ребята постарались как могли. Но субтитры можно было продумать получше. Когда вы занимаетесь типографикой и вёрсткой, надо на такие вещи обращать внимание, чтобы, не дай бог, не вызвать какие‑то ненужные ассоциации и, наоборот, вызвать нужные.
Следующая история, которой я бы тоже хотел коснуться, — это универсальный стиль. Если посмотреть на многие современные сервисы, особенно облачные айтишные, они все, как это ни обидно, стараются выглядеть на одно лицо. Есть более‑менее универсальный стиль.
Какой‑то сервис «Райк»:
Я уже забыл, чем он занимается. Когда заходишь на его страницу, она выглядит настолько нейтрально, что я могу сюда написать абсолютно что угодно, и будет страница про это. Хотя, казалось бы, какой‑то передовой айтишный продукт.
Вот ещё «Асана» — сервис для оптимизации и организации рабочих процессов:
Здесь появились какие‑то иллюстрации. Вроде бы стало резко веселее. Но если я пойду посмотрю на «Эйртейбл» — то же самое:
Посмотрю на «Интерком»:
Здесь, слава богу, не так давно провели ребрендинг. Сделали специальный стиль, иллюстрации, но в целом не сильно далеко ушли.
А вот, например, «Ноушн» — то же самое, что в «Интеркоме»:
Комментарий из зала: У «Ноушна» иллюстрации другие.
Они очень похожи. Можно, конечно, найти различия, но в целом вся типографика, всё, что мы видим в «Интеркоме» и в «Ноушне», похоже.
Это выглядит довольно обидно, и возникает вопрос, что с этим делать. Как выразить настроение и стиль в том, что вы делаете.
Сейчас я хотел бы об этом поговорить.
У меня есть пять папок, посвящённых кое‑каким приёмам, которые можно использовать в работе, чтобы добиться того или иного эффекта. Причём надо понимать, что это далеко не исчерпывающий список приёмов. Их неизменно гораздо больше. Их можно по‑разному комбинировать между собой, но теми штуками, которые у меня за время работы накопились, я хочу поделиться.