♞ Как мы делали Worldchess.com

Sulliwan Studio
Apr 13, 2016 · 8 min read
Image for post
Image for post

Вступление

Истории шахмат более тысячи лет, и за это время игра пережила множество изменений, взлётов и спадов популярности. В конце прошлого века после игр Каспарова, робота «Deep Blue» и внушительных призовых фондов наступило затишье, и шахматы попали в информационную тень. Сейчас по прошествии двадцати лет их снова начинают называть «спящим гигантом» спортивной индустрии и прочат им новый виток развития. В наши дни в шахматы ежедневно играет более полумиллиарда человек. Игра встроена во многие операционные системы, и даже, как оказалось, в фейсбучный мессенджер. Человек-муравей играет в квантовые шахматы со Стивеном Хокингом, а бывший человек-паук пытается выиграть у Бориса Спасского.

I. Клиент

Высшая шахматная инстанция — ФИДЕ (Fédération Internationale des Échecs, FIDE), основанная в 1924 году в Париже международная организация, которая проводит соревнования, устанавливает правила и определяет будущее шахмат (по сути ФИФА в мире шахмат). В 2012 году в ФИДЕ начали следующий этап развития и заключили партнёрство с компанией «Agon», которая стала заниматься организацией чемпионатов, поиском спонсоров и популяризацией шахмат.

II. Ребрендинг шахмат

Два года назад «Agon» создала бренд «World Chess», который должен был стать новым лицом шахмат и своего рода их департаментом развития.
В 2014 году студия «Pentagram» разработала фирменный стиль и дизайн шахматного набора для «World Chess». Затем настала очередь портала для нового бренда, на котором и профессионалы, и любители смогут узнавать о новостях в мире шахмат, следить за рейтингами и смотреть трансляции. Существующие на тот момент шахматные ресурсы пахли нафталином и всем своим видом показывали, что шахматы находятся в жопе. «Agon» поставила перед нами задачу эту ситуацию изменить. Challenge accepted.

Image for post
Image for post
Одни из самых популярных шахматных ресурсов на момент начала работ

III. Подготовка к проекту

В начале мы встретились с несколькими шахматистами из топ-100, издателем проекта, а также новым главным редактором портала — Диланом МакКлейном, который до этого писал о шахматах для «The New York Times». Узнали, что будет интересно шахматистам (больше всего их волновала аналитика игр с разбором стратегии и ходов), обсудили формат, архитектуру проекта.

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

IV. Процесс

1. Структура сайта

Древо проекта строили с помощью «Mindmeister» вместе с клиентом. Достаточно удобный онлайн инструмент для совместного построения структуры. Правда, к концу проекта многие разделы изменились, объединились или вообще отвалились, но первые пару недель работы «паучок» красиво повисел на стене в студии.

Image for post
Image for post
Первоначальная структура

2. Проектирование

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

Image for post
Image for post

Затем рулоны оцифровывались в рабочие варфреймы, и уже с ними шла работа по внутренностям будущего сайта. В определённый момент подключили отдел рекламных продаж, чтобы заранее согласовать рекламные места и форматы (выделено оранжевым) и не лепить горбатого по готовому сайту. Согласованные варфреймы сразу оживлялись вёрсткой, либо для быстрого прототипирования использовали новый и бодрый инструмент MarvelApp.

Image for post
Image for post
Этапы проектирования главной, трансляции и статьи
Image for post
Image for post
Для сетки использовался двенадцатиколонник и микромодуль в 20 пикселей

3. Колоризация и шлифовка

После подтверждения проектировки начинаем любимую игру в раскраску, а заодно перекомпоновываем всё ни один раз. А затем ещё. И ещё. Всего было сделано 9 вариантов компоновки главной страницы, а внутри каждого варианта — ещё по 4–6 итераций.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Выбираем хедеры

В конце концов файл сhess_home_7–5_1–2_news_block-2-dev.sketch уходит на сборку. Кстати, именно на этом проекте мы окончательно переехали с фотошопа на скетч, потому что файл главной страницы в псд стал весить 100 МБ, а аналогичный файл в скетче 15 МБ и к тому же летал как ракета. Так легко и непринуждённо иконка алмаза заняла в доке первое место.

Image for post
Image for post
Chess_home_7–5_1–2_news_block-2-dev.sketch

Вносим 281 правку по итогам сборки первой версии.

Image for post
Image for post
Баг-лист в 3000 пикселей

Параллельным курсом запиливаем спецраздел о грядущем чемпионате мира в Нью-Йорке.

Image for post
Image for post

4. Элементы

Компонуем варианты главного тизера: трансляция, важная новость, сюжет.

Image for post
Image for post

Продумываем режим быстрого ознакомления с новостями и пробуем запасной вариант переноса ленты новостей повыше.

Image for post
Image for post

Работаем над адаптивом.

Image for post
Image for post

Делаем сборку интерфейсных элементов и палитру для разработчиков.

Image for post
Image for post

Готовим комплект свг-пиктограмм.

Image for post
Image for post

Кстати, пиктограмма юзера на сайте создаётся из портрета текущего чемпиона мира (на момент написания — норвежец Магнус Карлсен). Как только место чемпиона занимает другой, дефолтный юзер меняется на победителя. Для наиболее перспективных игроков заготовки сделаны заранее.

Image for post
Image for post

5. Типографика

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

— В крупных заголовках тон задаёт «Superior Title».

Image for post
Image for post

— Для текстовых блоков статей — отечественный «PT Serif». Именно он на тестах показал максимальное удобство для чтения шахматистами, треть которых носит очки.

Image for post
Image for post

— Для служебной информации и подписей — «Helvetica Neue».

Image for post
Image for post

6. Иллюстрации

Четыре недели, два гигабайта фотографий, одна Лера Базанкова — и в итоге у нас появились портреты всех шахматистов топ-100 в единой стилистике. Даже популярные шахматисты не любители фотосессий, из-за чего пришлось буквально по крупицам выискивать нормальные кадры для отрисовки и запрашивать их в ФИДЕ. Теперь Лера знает всех игроков в лицо лучше, чем судья шахматной федерации :)

Image for post
Image for post
Эволюция портрета чемпиона мира Магнуса Карлсена
Image for post
Image for post
Сотня смелых и умелых

Объём переписки с иллюстратором в работе над рейтингом — 319 писем.

Image for post
Image for post

V. Главные функции

1. Рейтинг

Один из самых важных разделов, данные для которого приходят с серверов ФИДЕ. Сервера немного отстали от жизни — отдавали данные в экселевских таблицах, медленно, а иногда вообще никак. Пришлось многое перенастроить, зато теперь рейтинг обновляется раз в десять секунд.

На данный момент мы запустили самые важные категории рейтинга:

— Статистика каждого игрока по партиям различных типов игр (классика, блиц, рапид). Можно сравнивать с другими игроками. Кстати, привязанность шахматистов к цвету фигур — не легенда. Поэтому в каждом пироге можно сравнить, как шахматист играл белыми и как — чёрными.

— Самый главный — рейтинг ФИДЕ, на основе которого, собственно, игрок и получает своё место в топ-100. Помимо общего рейтинга в профиле каждого игрока есть график, который показывает изменения позиции игрока на временной шкале.

Image for post
Image for post
Страница игрока, общий рейтинг и экран сравнения игроков

2. Плеер партий

Любую шахматную партию можно сохранить в текстовом формате PGN (portable game notation), по-русски — «нотация». Мы разработали специальный плеер для проигрывания партий, который переваривает нотацию и визуализирует её на сайте в виде шахматной доски. Можно «прокликать» все ходы игры с комментариями шахматного аналитика и получить полный разбор партии по полочкам. Забавно, что аналитики практически как комментаторы футбольных игр иногда подписывают особо впечатляющие ходы:
No!!!!!!
So unusual for him!
WTF??

Image for post
Image for post
Файл нотации (слева) превращается в доску с комментариями (справа)

Шахматные фигуры для плеера рисовались с набора «Стаунтон», который изготовил англичанин Натаниэль Кук в 1849, а прорекламировал их в своём журнале сильнейший шахматист 19 века Говард Стаунтон, за что они и получили своё название. Данный набор является классическим и им играют на официальных соревнованиях ФИДЕ.

Image for post
Image for post
Эволюция фигур для плеера

3. Трансляции соревнований

Право на трансляцию игр есть только у ФИДЕ. Чего не было у ФИДЕ, так это возможности транслировать ходы быстро. Процесс устроен так: во время соревнований используются специальные шахматные доски «DGT e-Board» (стоимость под 1000$ за набор) с электронными датчиками, которые фиксируют передвижения фигур. От доски по ком-кабелю информация о ходах передаётся на компьютер администратора соревнования в виде нотации, оттуда — на фтп ФИДЕ. С фтп по специально сделанным для нас шлюзам мы забираем информацию и, наконец, визуализируем ходы игроков на сайте, преобразовывая в привычную доску c фигурами. На начальных тестах разница между ходом игрока и отображением в нашей трансляции составляла 30–60 секунд. После нескольких дней отладки разницу сократили до 4–5 секунд. Нот бэд.

Сама трансляция разделена на два потока. Первый — собственно, сама трансляция с досками и видео, второй — медиапоток, куда сливаются все новости, связанные с соревнованием. Лента формируется с помощью инструмента Waterfall.

Image for post
Image for post
Экран трансляции, попап с отдельной игрой, медиа-поток

И, кстати, приятно, что на кандидатском турнире, на котором мы обкатывали первый раз в боевом режиме трансляцию, победил россиянин Сергей Карякин. Именно он поедет в Нью-Йорк бороться за титул чемпиона мира с Магнусом Карлсеном.

Image for post
Image for post
Сергей Карякин после победы на турнире кандидатов в Москве, март 2016

VI. Технологии

Весь бэкенд написан на Python с использованием фрэймворка Django, за долговременное хранение данных отвечают серверы MySQL с репликацией. Оперативные данные хранятся в Redis, кеш на фронтендах Memcached. Хостинг — Amazon. Статика вынесена на S3. Трансляция игр идет с межсерверным взаимодействием через RabbitMQ, realtime-фронтенды на Tornado.

Image for post
Image for post
Панель управления новостным потоком, создание статьи, управление рейтингом.

Заключение

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

worldchess.com


Титры

Дмитрий Салливан
арт-директор и дизайнер

Макар Богданов
дизайнер

Дмитрий Алексашин (Astroshock)
технический директор

Дмитрий Гущин (Astroshock)
ведущий разработчик

Андрей Мирзоян (Astroshock)
разработчик

Лера Базанкова
иллюстратор

Мария Куница
продюсер

Владимир Кукаев
Роберт Фонтейн
Дилан МакЛейн
консультанты

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store