Симметрия — самый скучный визуальный приём. И тем не менее, все начинающие дизайнеры выравнивают все элементы макета по центру. Такой сайт или плакат всегда выглядит уныло и безжизненно.
Откуда такая любовь к симметрии и центрированию всего, я не знаю. Возможно, этому учат в дизайн-школах, что вызывает большие сомнения об уровне образования и преподавателей этих школ. На деле же симметрия — это противоестественный визуальный приём, который присущ лишь людям.
Если мы обратим внимание, то очень быстро обнаружим, что в природе нет ничего идеально симметричного. Кроны деревьев, окраска животных, горы, цветы — всё имеет ассиметричную форму. Разрез глаз и уши у людей всегда разной формы и разного размера. Один склон у горы всегда круче, чем другой, более пологий. Продолжать список можно долго.
Людям нравится разнообразие, глазу приятно разглядывать детали и изучать нюансы в ландшафте, интерьере и других людях. И дизайн сайтов, плакатов здесь не исключение. Лучший пример сферы, где важна ассиметрия и оптическая компенсация — создание шрифтов. Многие буквы, которые кажутся круглыми или идеально симметричными, на деле оказываются овальными, а их элементы как правило смещены относительно одной из осей.
Ассиметрия — главная причина красоты. Хороший дизайнер знает это и грамотно её использует. Чтобы сделать ваш макет чуть лучше уже сейчас, откажитесь от выравнивания по центру и добавьте в него ассиметрии.
Нет никакого смысла сверять свою работу с трендами, дрочить на цвет года и смотреть очередную подборку шрифтов на 2135 год. Никто из тех, кто следовал трендам, никогда не изобретал ничего нового и интересного.
Тренды — это ментальная ловушка. Они ограничивают дизайнеров спектром удобных и безопасных решений, которые ни у кого не вызывают эмоций. Иначе как объяснить сотни тысяч одинаковых сайтов, унылых логотипов и картинок. Всё это результат следования трендам.
Единственный способ создать что-то стоящее — мыслить самостоятельно, развивать насмотренность, которая сформирует ваш характер, ваше видение и позволит вам выдавать идеи диаметрально противоположные тому, что диктуют тренды.
Идеи и решения рождаются в голове, а не на экране ноутбука. Ограничения и контекст решают куда больше, чем преходящая мода на технологии и отдельные визуальные приёмы. А потому никогда не стоит следовать трендам.
Я публично заявляю, что тренды — хуйня, и разрешаю на них забить.
⌘ ⌘ ⌘
Это был старый добрый пост, а ещё есть выпуск студийного подкаста на эту тему. Там мы с Настей душним на тему трендов и всяких дурацких приставок и слов в профессиях.
Представляю набор дерзких стикеров для тех, кто не понаслышке знает, как делаются проекты в айти, дизайне и не только. Каждая фраза здесь — отдельная единица смысла, и может быть использована в самых разных ситуациях.
Стикеры можно лепить на ноутбук, на рабочее место, чтобы издалека было видно: это менеджер. Отдельные стикеры можно использовать как оценку и реакцию на низкие кипиа́йи ваших коллег. Это незаменимый инструмент в работе менеджеров любого уровня и любой сферы деятельности.
Наш стикер на ноутбуке у Тёмы Лебедева — лучшее признание!
Технические характеристики
Стикеры с ламинацией, прочные. Легко клеятся и снимаются, не оставляют следов. Есть в двух видах: белые и чёрные, с разными фразами.
Ответы на вопросы
Сколько штук в одном наборе? Цена указана за один лист формата А5. На нём умещается 8−9 стикеров.
Сколько стоят? Самовывоз в Тюмени — 299 ₽ С доставкой по России — 449 ₽
Стоимость доставки включена в цену, потому что так проще.
Как получить стикеры, если я не из России? Напишите на почту evgeny@lepekhin.ru. В сообщении расскажите, куда нужно прислать стикеры. Я изучу варианты и предложу наиболее оптимальный по цене и срокам.
Сроки и условия доставки Для доставки мы используем Почту России. После отправки заказа мы пришлём трек-номер для отслеживания отправления и сообщим примерный срок.
Сроки доставки зависят от исполнителя услуг, но кажется, по России любая посылка сейчас доставляется за 7−10 дней.
Что с возвратом и обменом? Кому в голову может прийти идея вернуть такие стикеры? Они же охуенные!
Если стикеры пострадают по вине транспортной компании или Почты России, вышлем вам новых за свой счёт.
Досудебный порядок урегулирования споров обязателен. Все споры — по эл. почте, переписка юридически значима. Права по договору уступке не подлежат. Акты не подписываем.
Когда я приезжаю в новый город или страну, у меня включается режим повышенной внимательности к деталям.
Я обращаю внимание на всё, что попадается на глаза: вывески, наружную рекламу, одежду людей, их обувь, шрифты, урны, остановки, автобусы — и отмечаю детали, цвета, сходства и различия, необычные решения, ищу закономерности.
В первых поездках я делал это насильно, заставлял себя смотреть, учился вычленять детали. Со временем это приём превратился в навык, который постоянно в режиме сна, но в нужный момент включается сам.
Благодаря этому навыку, я регулярно нахожу новые детали, которые меня удивляют. Даже если иду по той же улице, что и вчера.
У Зума отвратительный интерфейс. Каждый раз, когда я им пользуюсь, я страдаю.
Первое, что бесит: кликаешь по ссылке на встречу и вместо самого Зума сначала открывается страница в браузере. Зачем, если у меня уже установлен Зум на компе? Почему на айфоне сразу кидает в приложку, а на десктопе меня заставляют делать лишние телодвижения?
Попасть на созвон и сразу начать говорить не получится. Сначала появляется картинка, но нет звука, потому что нужно подтвердить доступ к микрофону. Бля, а почему нельзя это спросить один раз и больше никогда не спрашивать? Оказывается можно, но из-за хуёвых формулировок, эта возможность неочевидна.
Каждый раз, когда я хочу поделиться ссылкой на комнату, я не могу найти, где эта ссылка спрятана. Ёпта, это же самая важная кнопка, почему она не на виду? Гугл Мит, например, сразу выводит всплывающее окошко с возможностью скопировать его содержимое одним кликом.
Интерфейс Зума настолько отсталый, что ещё год назад Зум прятал в меню кнопку «Поделиться экраном». То есть её тупо не было на панели управления звонком. Но видимо мимо проходил какой-то русский дизайнер и объяснил, что это совсем мрак и нельзя так издеваться над людьми.
Я веду рассылку о редактуре, дизайне и управлении c 2017 года. За это время внешний вид шапки менялся несколько раз, а в этом году рассылка переехала на Сабстэк. Я решил показать эволюцию дизайна писем за разные годы.
2017
Первые письма: пьяный редактор, поездка в Иран, приветствия на разных языках.
Эксперименты с цветами и контрастом
2018
Первые неуверенные попытки брендинга
Неплохой вариант, но подбирать картинки к каждому выпуску было муторно. Поэтому такое решение не прижилось.
Этот дизайн продержался дольше всех. Менялись цвета и фотка, но композиция в целом оставалась такой же целый год.
2019
Неудачная попытка брендинга. Сейчас я бы добавил какой-нибудь акцентный цвет. Тогда я ощущал: что-то не так — но не мог понять что именно.
Последний дизайн писем на Майлерлайте — без дизайна. Лучшее решение для рассылки.
2020
Так письма выглядят сейчас, после переезда на Сабстэк.
Бывает заходишь на сайт какой-нибудь компании, идёшь в раздел команда, а там вот так. Понимаешь, что дизайнер или заказчик хотел скреативить, но получилось странно.
Всё потому, что это решение никак не связано с другими решениями дизайнера на этом сайте. Ни в названии, ни в цветах, ни в позиционировании нет ничего детского. Из-за этого фото команды в детстве выглядит натянуто и фальшиво.
Проявлять смекалку и показывать свою креативную прыть надо в другом: типографике, вёрстке, анимации, иллюстрации. Хороший пример — оформление сайта и аваторок у команды Ноушена. Их иллюстратор, Роман Мурадов, нарисовал всю команду продукта и сделал иллюстрации для сайта в одном стиле. Благодаря этому иллюстрации воспринимаются не как локальное решение или «затычка», а как айдентика.
Чтобы сайт выглядел цельным, сначала нужно определить, на чём будет строиться визуальное повествование. Иначе всё развалится.
Вчера мы с коллегами запустили новый сайт Анимы. Изначально я должен был только помочь со структурой и текстами, но в итоге сделал дизайн и сверстал сайт на Тильде в нулевых блоках. Вот как это было.
Контекст
В январе руководство компании отказалась от сторонних проектов и сделала Аниму основным продуктом. На февраль запланировали обучение по продажам, а с марта — активное продвижение в соцсетях. Стало ясно: вести людей на старый сайт нельзя, нужен новый.
Задачу поручили другому сотруднику, но в итоге она скатилась в мою сторону. Я человек простой: вижу задачу, беру и несу. Так эта задача стала моей. И хотя я не люблю делать большие задачи в одиночку, именно они помогают расти и развиваться.
Расти можно только через боль.
Проблема: не видно продукта
Старый сайт был скучным и малоинформативным. На нём был всего лишь один экран с интерфейсом Анимы, пару этажей с описанием функций, справочная и краткий блок про услугу внедрения. Этот сайт мы собрали за неделю в ноябре, и он кое-как выполнял свои функции.
Такой сайт не привлечёт людей: глаз ни за что не цепляется, и что самое хреновое: пользователь не видит продукта. Единственный скриншот продукта выглядит скудно, особенно в мобильной версии. Неясно, как это работает.
Проблема: неинформативное описание функций
Тексты в предыдущей версия сайта не были плохими. Но в той вёрстке пользователю пришлось бы прочитать текст целиком, чтобы понять суть функции. Читать каждый абзац — утомительно, да и времени на это ни у кого нет.
Проблема: высокая нагрузка на поддержку
На старом сайте не было информации о демо-версии, условиях внедрения системы и обучении сотрудников. Из-за этого в поддержку и менеджерам продаж приходилось отвечать на одни и те же вопросы, даже если человек уже посещал сайт и был более менее знаком с продуктом.
Решение: показать функции крупным планом и сократить текст
Первая итерация нового сайта оказалась неудачной, я не буду показывать её здесь, дабы не тратить время. После неё я попросил помощи у Артёма Скворцва, арт-директора Анимы. Он указал на ошибки и привёл примеры того, как можно сделать хороший сайт о продукте.
Артём собрал несколько референсов и разобрал их для меня на составляющие. В итоге, было несколько идей, вокруг которых можно сделать сайт о продукте.
Сам продукт: его интерфейс, фотографии или изображение. Такой вариант был самым простым. Продукт уже готов, сделать скриншоты или отрисовать нужные экраны — это пару дней работы.
Иллюстрации: комикс или история в картинках. Для неё нужен иллюстратор и много времени. Нам этот вариант не подходил.
Продукт в использовании: гифки, видео и анимация. Самый красивый и эффектный вариант, но и самый трудозатратный. Поэтому мы сразу отправили его в корзину.
Решили, что главным на сайте будет интерфейс продукта, а текст будет лишь сопровождать его, пояснять функцию, которая изображена на экране.
Я отредактировал текст, и начал экспериментировать с компоновкой элементов на экране. Стало лучше, но здесь сразу две проблемы: цветная плашка выделяет скриншот и одновременно перетягивет внимание пользователя на себя, а текст на их фоне — теряется. Хотя польза уже стала заметнее.
Отдельной проблемой были разные цвета в каждом блоке. Это сбивало с толку, пользователю пришлось бы привыкать к каждому экрану заново и разбираться, что есть что. Это особенно заметно по чёрному блоку про внедрение ЦРМ-системы. Три картинки, внезапный зелёный цвет — такое никуда не годится.
Вдобавок, такое решение по-прежнему заставляло человека читать весь абзац, чтобы понять суть каждой функции. Помог один из референсов. На сайте Эпла нам понравился один приём, когда текст увеличивают, делают серым, а чёрным — выделяют самое главное.
Так мы привели все блоки к единообразию. А чтобы пользователь не устал и не заскучал, мы разнообразили каждый этаж, работая с сеткой. Этого легко добиться, например: поменять положение скриншотов, добавить фактоиды. От цветных плашек под интерфейсом мы отказались. Получилось то, что нужно.
Посмотреть весь процесс редизайна можно в Фигме. Там видно, как мы шли от проблемы в решению и как с каждой итерацией макет становился чище, понятнее и информативнее.
Тезисно
У нас была проблема: неинформативный сайт о ЦРМ-системе. Чтобы исправить это, мы вынесли продукт на первый план.
Показали интерфейс Анимы крупным планом, сделали его якорным элементом на всех экранах.
Сократили и переписали все тексты, выделили главное, чтобы не пришлось читать весь абзац.
Проиллюстрировали раздел о внедрении ЦРМ.
Ответили на частые вопросы клиентов.
Теперь все, кто придёт на сайт, смогут познакомиться с продуктом за несколько минут и понять его пользу для своего бизнеса. Именно в этом и заключается работа редактора. Не в каких-то волшебных формулах копирайтинга, а умении структурировать информацию, правильно расставлять акценты и провести читателя за ручку от проблемы в решению. Результат работы редактора — работающий продукт.
Ничто не бесит так сильно, как чат с онлайн-консультантом, который открывается, как только вы попали на сайт. Можно стерпеть неудачное сочетание шрифтов или плохой интерлиньяж, но эти все всплывающие консультанты, звонилки, чаты и таймеры — никогда.
Непонятно, почему после двух секунд на сайте мне может понадобиться помощь консультанта или подписка на новости компании
Если вы хотите сделать хороший сайт, на котором люди будут проводить время, не позволяйте ни одному маркетологу засрать вам мозги. Никакой чат не повысит ваши продажи, никакой бот или мигающая иконка телефона не заставит человека оставить номер, если сайт не решает его проблему.
Ни один чат или звонилка ещё никому не помогли вывести продажи на новый уровень. Иначе почему у всех этих компаний такие хуёвые сайты? Видимо консультант плохо помогает. Надо ещё одного добавить.
Самое идиотское, что можно сделать в навигации сайта: в одни пункты поставить якорные ссылки на этой же странице, а в другие — ссылки на другие страницы сайта.
Пользователь тыкает на «Решения», и его перекидывает к другому блоку на этой странице. В голове пользователя щёлкает: «Ага, это лендинг». Кликает на «Кейсы», и вдруг его куда-то перекидывает. У пользователя начинается паника и раздражение. Он ожидал одного, а случилось другое.
Это называется проекция. Самый простой пример проекции — управление автомобилем. Когда мы крутим руль вправо, машина поворачивает вправо, когда крутим влево, машина сворачивает влево.
Навигация должна быть такой же понятной и предсказуемой, как процесс руления. Должно быть сразу ясно, что произойдёт дальше, какая страница откроется, куда человек попадёт. И так не только с сайтами: с любыми интерфейсами.
