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

Правила игры

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

Лотерея без лототрона

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

Лотерейный билет «Секунда Удачи»

Много графики vs. быстрая загрузка: спрайты

Одна из сложностей этого проекта состояла в том, что билет должен был нормально выглядеть во всех браузерах, в том числе устаревших (это специфика целевой аудитории Национальной Лотереи). Чтобы сделать билет красивым, мы использовали градиенты, блики, скругленные углы, тени. В новых браузерах эти свойства можно описать в коде страницы, а старые таких кодов не понимают.

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

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

Спрайт для электронного билета «Секунда удачи»

Поскольку в этом лотерейном билете было много интерактивных элементов, которые взаимодействовали друг с другом (кнопки выбора комбинации, кнопка запуска/остановки секундомера, табло, и т.д.), нельзя было использовать готовые решения для JavaScript, приходилось все писать самим с нуля. 

И о логотипе

От исходного УНЛ-овского дизайна в этом билете сохранился только логотип:

Логотип лотерейного билета «Секунда Удачи»

Как можно видеть, в нем остались элементы все той же символики с лототроном, да и секундомер не очень похож на секундомер. Уж скорее на барометр или амперметр…

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

Черновой набросок нашего варианта логотипа

Лотерейный билет «Секунда Удачи» уже запущен в эксплуатацию, если хотите, можете и вы попробовать поймать свою счастливую секунду. Удачи!