Три недели назад я с друзьями запустил проект, который мы делали почти два года — Карту становления Беларуси. Забегая вперед скажу, что никто из нас не подозревал, что делает сайт, который увидит каждый 180-й житель страны. Кажется, это неплохая метрика для проекта ради фана. Я хочу рассказать о том, как мы это делали, и что из этого вышло. Первая часть — небольшая заметка о процессе.
Моя учительница по истории очень хотела привить мне интерес к предмету, но каждый параграф учебника превращался в пытку. Наверное, кое-что получилось у Елены Викторовны, потому что через 10 лет я сам пришел к мысли занырнуть в историю своей страны. Ко мне в руки попала прекрасная книга Владимира Орлова «Ілюстарваная гісторыя Беларусі», которая зашла как вода в сухую землю. По ходу чтения я не переставал удивляться невероятным фактам. Бьюсь об заклад, про них забыли и уже не подозревают большинство моих друзей.
Дизайн и веб-технологии — это некий рупор, который позволит донести это сообщение до них. Сработал триггер профессиональной деформации: видишь массив интересных данных — визуализируй, найди неочевидные моменты и расскажи всем.
Я умышленно нарвался на две огромные задачи: перелопатить историю Беларуси и придумать, как это все лаконично показать. Главное — не пытаться залезть глубоко в дебри. Я не историк, и стоит это сразу обозначить: будущий результат — это любительский подбор фактов, на который не стоит ссылаться студентам и школьникам. Скорее, это шпаргалка, для спорящих в баре поддатых интеллектуалов. У меня была возможность пригласить на проект профессиональных историков, но это бы поменяло первоначальную идею.
map.letapis.by
Отбор фактов
Возьмите Крым. Случился 2 года назад, а до сих пор никто не знает, чей он. А Мапа — это попытка разобраться в фактах, которые были 800 лет назад. Ну, вы поняли. Все ангажировано, субъективно и не может быть иначе. Это только кажется, что история — это уже сформированный ряд фактов. Но когда ты вещаешь сам, за тобой встает выбор: какие факты упомянуть, какие замолчать. Из этого набора фактов и будет состоять твоя позиция.
Для меня было важно все равно попытаться остаться нейтральным. Я придумал себе признак нейтральности — присутствие факта в учебниках и на Википедии. Кажется, что это такие источники, где нет места провокации и набросам.
Дизайн
При первом подходе к снаряду я попытался уместить все на один экран. И это был провал. Я собирался делать течение времени слева направо. У меня было задумано много информационных слоев: правители с указанием рода, религии, названия и степени консолидации государства, ключевые события и так далее.
Даже, если бы мне удалось все вбить в один экран, это не дало бы никакого профита. Одновременно следует показывать лишь только то, между чем возможна корреляция.
А какая может быть корреляция, например, между границами Великого княжества Литовского в XIII веке и советской республикой в XX. Короче, фейл. И я отложил это дело до лучших времен.
Первые наброски. Красная плашка — одно конкретное состояние границ. Высоты плашек должны были соотносится как их площади.
Но не забил. Рано или поздно придется отрисовать все состояния границ, собрать пул фактов, разобраться, кто за кем правил. Почти год у меня ушел на изучение фактов и отрисовку границ.
Чем старше карты, тем сложнее понять, как их положить на современные границы. Кстати, именно поэтому я решил искусственно ограничиться 1240 годом и не лезть в более ранний период. Из-за этого ограничения я получил больше всего писем, ведь история белорусской державности начинается раньше на несколько столетий. Надеюсь, когда-нибудь у меня наберется на то терпение, или найдется человек, который придет и поможет, и на Мапе появится Полоцкое, Туровское и Смоленское княжества.
Через год я понял, что нужно использовать самый простой и естественный способ перемещения в экранном пространстве — скроллинг. Мотаешь мышку, а у тебя перед глазами 8 веков пролетают.
А теперь лирическое отступление про скроллинг: очевидно для дальновидных и невероятно для самонадеянных дизайнеров типа меня. Судя по тепловой карте кликов и фидбеку, не все пользователи догадались о том, что нужно просто скроллить. Поэтому некоторые пользователи предпочли кликать по датам ниже текущих, чтобы продвигаться вперед.
Тогда еще в InDesign. Сейчас работаю в Sketch. В этом макете еще жива идея связывать события с местами на карте: например, связать Брэскці мір с Брестом.
Сделал эскиз. Вроде как на новый дизайн ложатся все кейсы, можно уместить любое количество данных и даже есть место для дополнительных информационных слоев на случай новых идей.
Источники
Основным источником стала Википедия: в ней все есть, а больше мне не нужно было по определению проекта. Ну и еще много карт было взято с hist-geo.net.
Структура данных
Границы
Описание границ напрямую связаны с целой папкой отрисованных карт. Помимо самих границ в картах еще показаны красной или синей штриховкой их изменения. Немного жалею, что не сделали по ховеру на такие штриховки какой-нибудь хинт с причиной этого изменения.
Всего вышло 63 состояния границ. Конечно же, их было больше. Но эти — основные, как мне показалось.
20-ый век
События
Собрали 170 ключевых событий. Я попробовал брать только те факты, которые широко известны в Беларуси, упомянуты в учебниках или еще не успели зарасти мхом истории. Проблематику отбора я описал выше.
Города
Решил брать для Беларуси все города, для соседних стран — крупные города и столицы, для остальных стран только столицы.
Метки городов дифференцируются не только размером, но и прозрачностью — это дало объем картинке.
А еще для крупных городов я заморочился и описал смену их названий. Например, Берестье → Брест-Литовский → Брест-над-Бугом → Брест. Конечно, тут можно было еще больше заморочиться: смена статуса города, герб. Но дорого. Забил.
Короче, вот оно — волшебное чувство, когда модель данных готова, и, кажется, сейчас просто отрендерить надо, и всё.
Фронт
Лайфхак. Если ваш пет-проект вам надоел, и вы опустили руки — найдите чувака, который под подъездом вашего дома глубоко за полночь объяснит, что вы не правы, возьмёт на себе менеджерские обязательства, привлечет нужных людей и реанимирует проект. Так Виктор Якунин однажды вернул Мапу к жизни и привлек к проекту Женю Шпилевского и Анну Ширяеву.
Так вот. Сначала я, наивный албанский парень, сверстал таймлайн, подумал, что дело за малым — отрендерить карту, 63 состояния которой уже были отрисованы к тому моменту. И тут начались сюрпризы, которые я бы один не поборол. Пришёл Женя Шпилевский, посмотрел на мою связку JSON + PHP, поржал и все переписал на Handlebars так, чтобы сайт генерировался в статику. Теперь с высоты пережитого пика посещений, я понимаю, насколько дальновидный был Женя и как он спас мой дроплет на Digital Ocean.
Для рендеринга самой карты Женя предпочел canvas. Не могу сказать, что с canvas получилось все гладко, но с SVG было бы все сильно хуже с точки зрения перфоманса.
Короче, пришел Женя и порешал на canvas всю мою боль.
Тачи
К черту. Дорого и никакого профита. Проще будет захардкодить вьюпорт, чтобы открывалась десктопная версия.
UPD. 22% заходов — смартфоны.
Белорусскость
Буквально за неделю до планируемого запуска я показал Мапу Денису Серебрякову и получил от него совет, который принес все волшебство. Денис посоветовал использовать ленточную антикву. В узких местных кругах она считается прототипом для национального шрифта. И шрифт Оптима неплохо подходит для этого.
Мапа заиграла. Интонация совпала с сообщением.
Что можно было улучшить, и я об этом знаю
- Хотелось переделать подсветку диффов: при наведении на диффы показывать причину этого изменения.
- Клик по персоне или событию: хотя бы провязать с Википедией.
- Связывать геолокацию события с точкой на карте.