Тег «вёрстка»

Консультация. Семён Иноземцев, руководитель АКМ «Стратегия»

В середине июля ко мне обратился Семён Иноземцев, руководитель агентства контент-маркетинга «Стратегия» с такой задачей:

Я согласился, но прежде чем проводить консультацию, постарался разобраться в ситуации настолько, насколько было возможно. Вот что я сделал:

  1. Задал вопросы Семёну и договорился о вознаграждении. Мои стандартные условия не подходили, поэтому пришлось флексить.
  2. Взял контакт Наташи, руководителя проекта, запросил у неё материалы: брендбук, макет в фигме и скринкаст, который она записала специально для меня.
  3. Изучил материалы, задал уточняющие вопросы. Спрашивал до тех пор, пока не упёрся в стену однотипных ответов: «Заказчик не даёт никакой конкретики по этому вопросу». Было ясно, что дальше копать некуда.
  4. Составил финальное понимание задачи и принялся искать решение.

Подготовка

Заказчиком, для которого предстояло решить задачу, была немецкая комания «Зиге́ния». У таких компаний множество корпоративных ограничений и требований, которым нужно соответствовать. Я понимал, что вариантов у нас мало, но они есть, и при грамотном подходе эту задачу решить можно.

Первым делом я определил ограничения. Их было немного, но все они были критическими:

  1. Дизайн обложен должен соответствовать брендбуку компании. Нельзя отступать от него слишком сильно.
  2. Бюджета на обложки нет. Важно, чтобы их можно было собирать быстро, за 15−30 минут, и не вовлекать в процесс других людей: авторов, редакторов, руководителя проекта и др.
  3. Обложки будет делать дизайнер с небольшим опытом, который не умеет предлагать решения и учитывать ограничения.
  4. Заказчик не даёт конкретики, что он хочет увидеть. Непонятно, как быть в такой ситуации и как предлагать решения, которые подойдут.

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

Главная проблема

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

Цель консультации

За час нужно было успеть многое:

  1. Подобрать нормальный стиль и компоновку элементов для обложек. По факту требовалось сделать что-то вроде дизайн-концепта руками дизайнера. При этом не было никаких вводных о том, что такое «нормальный стиль».
  2. Объяснить дизайнеру, как работать с подобными задачами в будущем, дать готовый подход к решению таких комплексных задач.
  3. Научить дизайнера самостоятельно находить осмысленные решения с учётом большого количества ограничений и неизвестных.
  4. Научить дизайнера выцеплять смыслы и находить метафоры для создания обложек. Темы в блоге сильно похожи, и у ребят было опасение, что будут проблемы с поиском идей для обложек.

Результат

По итогу у Семёна и его команды получилось решить задачу клиента и защитить дизайн-концепцию с первого раза. Кроме этого ребята получили:

  1. Запись встречи в Зуме
  2. Список задач по итогу консультации
  3. Доступ к заметкам и файлу Фигмы с вариантами решений на три дня
  4. Замечания и комментарии к новым обложкам в формате скринкаста

А так выглядел файл в Фигме с референсами и вариантами обложек, которые я подготовил ко встрече. Очень хочется показать дизайн-макет блога в формате «было-стало», но не могу.

Отзывы

Семён Иноземцев, руководитель АКМ «Стратегия»:
«Мы обратились к Жене с запросом на помощь в редизайне блога для одного из ключевых клиентов. Дизайн — не основное наше направление, поэтому своими силами решит эту задачу не удавалось. Руководитель проекта видел, что с нашим вариантом редизайна что-то не так, но не мог правильно донести это до специалистов.

Женя погрузился в задачу, а затем организовал встречу с нашим дизайнером. В рамках часовой консультации дал все необходимые вводные, чтобы довести редизайн до нужного результата. Онлайн-встречу записали, чтобы использовать ее как внутреннюю инструкцию для схожих задач на других проектах. Благодарю Женю за консультацию».

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

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

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

К Жене Лепехину обратились за помощью в этом конкретном затыке. Нужен был мастер-класс для наших ребят, чтобы они решили задачу. И поняли, как работать над подобными задачами в будущем.

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

На деле мы сделали не то, что я хотела. Сделали намного лучше!

С клиентом до этого момента было много жарких споров о том, как все должно выглядеть. Концепт, который мы выработали с помощью Жени, клиент принял с восторгом. Уже на консультации было понятно, что именно это нам и нужно, именно это хотел клиент — но как и я, не мог объяснить.

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

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

Благодарим Женю, мы все очень рады этому новому опыту) Мне как проджекту было полезно не только само решение, но и подсказки Жени о том, как правильно донести это клиенту. Спасибо!»

Ниже скриншоты отзывов:

Как попасть на консультацию

Ознакомьтесь с условиями и напишите мне на почту evgeny@lepekhin.ru или выберите свободное время в Окошках.

Новый сайт Анимы

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

Контекст

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

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

Расти можно только через боль.

Проблема: не видно продукта

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

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

Проблема: неинформативное описание функций

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

Проблема: высокая нагрузка на поддержку

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

Решение: показать функции крупным планом и сократить текст

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

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

Сам продукт: его интерфейс, фотографии или изображение. Такой вариант был самым простым. Продукт уже готов, сделать скриншоты или отрисовать нужные экраны — это пару дней работы.

Иллюстрации: комикс или история в картинках. Для неё нужен иллюстратор и много времени. Нам этот вариант не подходил.

Продукт в использовании: гифки, видео и анимация. Самый красивый и эффектный вариант, но и самый трудозатратный. Поэтому мы сразу отправили его в корзину.

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

Я отредактировал текст, и начал экспериментировать с компоновкой элементов на экране. Стало лучше, но здесь сразу две проблемы: цветная плашка выделяет скриншот и одновременно перетягивет внимание пользователя на себя, а текст на их фоне — теряется. Хотя польза уже стала заметнее.

Отдельной проблемой были разные цвета в каждом блоке. Это сбивало с толку, пользователю пришлось бы привыкать к каждому экрану заново и разбираться, что есть что. Это особенно заметно по чёрному блоку про внедрение ЦРМ-системы. Три картинки, внезапный зелёный цвет — такое никуда не годится.

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

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

Посмотреть весь процесс редизайна можно в Фигме. Там видно, как мы шли от проблемы в решению и как с каждой итерацией макет становился чище, понятнее и информативнее.

Тезисно

У нас была проблема: неинформативный сайт о ЦРМ-системе. Чтобы исправить это, мы вынесли продукт на первый план.

  1. Показали интерфейс Анимы крупным планом, сделали его якорным элементом на всех экранах.
  2. Сократили и переписали все тексты, выделили главное, чтобы не пришлось читать весь абзац.
  3. Проиллюстрировали раздел о внедрении ЦРМ.
  4. Ответили на частые вопросы клиентов.

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

Редактор отвечает за продукт, а не за текстики.

Заценить новый сайта Анимы →

Знак процента: ставить пробел или нет

Как-то в тексте мне понадобилось поставить знак %, и я засомневался: нужно ли его отбивать пробелом от числа или нет. Вот что я узнал.

Из книги М. В. Шульмейстера «Ручной набор», 1967 г.:

  • Знак процента применяется только после цифр, можно набирать 5%, но нельзя — пять %.
  • Как исключение, знак процента без цифр может быть применен в заголовках таблиц и выводов. Например, «исчисляется в %».
  • Знак процента никогда не отбивают от цифр, к которым он относится. От текста его отбивают обычным междусловным пробелом.
  • Если знак относится к нескольким числам в перечислении, его ставят лишь с последним числом. Например, в 5, 7, 10 и 15%, а не в 5%, 7%, 10% и 15%.
  • Все вышеперечисленные правила относятся и к знаку промилле ‰.

В более свежем справочнике П. Г. Гиленсона 1988 года, автор также не рекомендует отбивать знак процента.

  • Знаки процента (%), градуса (°), минуты (′), секунды (″) нельзя отбивать от цифры, к которой они относятся.
  • Следует писать так: 5%; 36°; 2′; 31″; 16° 15′ 3″.

Новая типографика, Ян Чихольд

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

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

• Широкие полосы, линии, точки и т. д. должны быть функционально необходимы. Декоративные формы, характерные для старой типографики, всегда были дополнением. Полоски и т. д. в Новой типографике только тогда необходимы и важны, когда создают и подчёркивают нужный контраст.

• …Нужно признать, что подавляющее число предметов повседневного потребления гораздо в большей степени подчиняется закону чистой целесообразности, чем требованиям индивидуального вкуса.

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

• Использование орнамента (неважно, какого стиля и качества) — это всегда наивное ребячество. Человек, который не довольствуется четкой конструкцией предмета и начинает его украшать, тем самым оказывается во власти примитивных представлений (что, в сущности, свидетельствует о том, что он боится неприукрашенного предмета).

• Чем ниже в своём развитии народ, тем роскошней его орнаменты и украшения.

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

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

• Сегодня мы поняли, что искусство состоит не во внешнем подражании природе, а в формотворчестве, которое выводит свои законы из тектоники природы, а не из внешних её проявлений.

• Конструктивно, рационально, экономно (= красиво).

• Некоструктивно, нерационально, неэкономно (= некрасиво).