Главная страница
Рассказывает Илья Бирман
В первом подходе модули были без просветов между ними, а главный модуль вверху сам был фоном для логотипа. Варианты с чёрным и белым фоном:
Cначала под передовицей был этажик с новостью, турниром и приглашением поиграть. Передовицы могло и не быть, и тогда этот этажик нормально работал в качестве начала страницы:
Элементы этого дизайна в итоге уехали вообще на другую страницу сайта.
Жёлтому модулю для новости захотелось налепить блямбу‑звезду. Случайно заметили, что слово NEWS состоит из букв, которыми обозначаются стороны света — так что превращаем блямбу в компас:
Потом она даже стала немного вращаться при прокрутке сайта.
Сразу же появились перебивки, чтобы блоки из модулей не были бесконечными и можно было за что‑то зацепиться глазом. Перебивки отличались заголовками по центру:
Первый подход к мобильной версии:
Начало систематизации видов и состояний модулей:
После обсуждения с клиентом дизайн страницы без просветов признаётся непрактичным, и мы переходим к дизайну с просветами и полями. Клиент также предлагает добавить бегущую строку для быстрых новостей в самом верху:
Кажется, что новостей будет ещё больше, так что заменяем этаж под передовицей на полностью новостной:
Придумываем информативный вариант передовицы для трансляций с календариком, текущими позициями и кнопкой «Смотреть», а ещё делаем вёрстку новостей поинтереснее:
Через год окажется, что мы даже не представляли, насколько больше новостей будет, и страницу придётся переделать.
Продолжаем систематизацию и описания поведения модулей:
Широкий экран:
Рисуем кучу вариантов оформления передовицы с вариациями для новости и трансляции:
Изобретаем раскрывашечку сверху и вообще допиливаем верх:
Собираем все варианты и описания всего в одну кучу, передаём разработчикам, помогаем запустить: