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

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

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

Контекст

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тезисно

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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