Чего только не сделаешь, когда есть мозги

Чем дольше работаешь с клиентом, тем лучше начинаешь понимать его и «ловить одну волну». Постоянно работая над улучшением сайта, ты выходишь за рамки обычного. И этому у нас есть подтверждение.

В прошлом месяце вместе с клиентом мы расширили техническое задание. Такие компании, как «Мостострой-11», не стоят на месте, и очередной задачей стала разработка новой страницы «о компании», где надо было рассказать о нескольких (точнее — пяти) направлениях деятельности компании. Встал вопрос о динамическом представлении информации — цифры, изображения, тексты – все это должно эффектно говорить посетителю о современных подходах нашего клиента. Думали пойти легким путем, на b2b-сайтах часто можно встретить клише в разделах «контакты», «о нас» или «руководство».

mostostroy_1

 

mostostroy_2

Но на этапе прототипирования клиент сразу «отсек» стандартные варианты и стал ждать от нас чего-то нового. Чего-то, что ни он, ни мы еще не видели.

Решили начать с самой сути. Что символизирует единение, и как показать взаимосвязь разнородных элементов, функционирующих в одной системе? За несколько секунд, которые посетитель сайта потратит на просматривание этого блока, необходимо показать, что «Мостострой-11» — это не только мосты. Мы любим простые и понятные решения, поэтому за основу визуалки мы взяли круг. Обычный круг-слайдер, который объединил в себе описание всех направлений деятельности одной из крупнейших в России диверсифицированных компаний в строительной отрасли.

Untitled-1

Но, как обычно бывает, до самого простого решения мы пошли самым сложным путем. В итоге при верстке оказалось, что наш круг — это квадрат. М-да, такие дела. С технической точки зрения в верстке не бывает круга (html и css точно не поддерживают). На фронт-энде есть, а в бэк-энде не бывает. Нашему Паше (программисту) пришлось потрудиться, чтобы создать индивидуальный модуль на Java. Все высчитано до пикселей, динамический слайдер работает как часы. Даже лучше. У него нет погрешности в секундах, но далось это не за красивые глаза :)

Если вкратце, то надо было высчитать градус круга и градус указателя, синхронизировать их и зациклить серо-голубую закраску окружности. Один круг постоянно серый, а второго круга не существует. Это просто голубая полоска. На вопрос «как она рисуется сама?», Паша только ответил, что «это магия и svg». Поэтому вот вам часть кода:

index.html.erb-—-bookinero.ru-2015-06-18-10-32-12

P.S.: С дизайном все было проще.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *