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

В 2011 году наш предыдущий сайт занял 3-е место в номинации «Дизайн и реклама» на Рейтинге Рунета. 

Мы решили, что высказывание «Сапожник без сапог» не про нас, и начали работу.

Задачи

Конкретной маркетинговой задачи перед нами не стояло. У нас не было мыслей о снижении отказов, увеличении конверсии в заявки на разработку или других KPI. Но был набор проблем старого сайта, которые предстояло решить: 

• На предыдущей версии пользователи не понимали, что наше портфолио можно листать. Необходимо было решить проблему неправильного восприятия количества сделанных проектов и дать пользователю возможность перейти на страницу с выбранным проектом.
• Более того, пользователи иногда думали, что за яркой картинкой (например, букет цветов с медведем) скрывается организация по продаже этих самых цветов и медведей. И они звонили нам с заказами. Приходилось перенаправлять их на клиентов.
• Упростить добавление работ в портфолио. На прошлой версии сайта для выкладывания 1 проекта нам приходилось не только верстать под него страницу, но и делать иллюстрацию, что чрезмерно перегружало дизайнера. Поэтому многие наши проекты не попадали в портфолио.
• Сделать сайт более динамичным. Обилие динамики – это наша фишка, и за 2 года мы научились делать много всего крутого, что необходимо было показать.
• Обкатать новые технологии и попробовать сделать все без использования JQuery, чтобы сайт работал быстрее.
• Сделать хороший адаптив. Продумать не только «перестраивания экранов», но и разобраться с технической начинкой. Оптимизировать верстку и скрипты под мобильные устройства, чтобы они не перегружали GPU, и сайт нормально скроллился и работал на телефоне и планшете. 

Мы начали работу в ноябре 2013. За время до запуска обновленной версии мы сделали 3 варианта дизайна. Только с третьей попытки нам удалось сделать то, что удовлетворяло нас самих. В последнем варианте осталась только одна идея из первой версии, но она претерпела достаточное количество изменений.

Как это было

Начали мы конечно с логики. Мы подумали, что бы пользователь хотел увидеть, составили список и начали распределять приоритеты. 

На самом деле, список этот довольно прост:

• Вид деятельности (Что это за сайт?)
• Услуги (Что делаем?)
• Портфолио (Что сделали?)
• Цены (Сколько стоит?)
• Отзывы (Что говорят клиенты?)
• Награды (Что говорят коллеги?)
• Команда (Кто все это делает?)
• Контакты (Как связаться?)

Позиционирование

Для первого экрана лучшим образом подходило описание вида деятельности компании (позиционирование). Мы решили, что сможем убить сразу нескольких зайцев на первом экране: показать команду, позиционирование и технологичность. Для этого решили сделать набор фотографий и обработать их для сайта в едином стиле. Мы выбрали тематику ретро-футуризма для этих целей. 

Эффект снега

Чтобы немного оживить первый слайд, решили написать эффект снега, идущего за окном. Для этого создается множество объектов-частиц, которые каждые 16.7 мс (частота обновления окна браузера) перерисовываются на canvas-е с новыми координатами. Сам эффект не очень сложный, но довольно тяжелый для устройств со слабым GPU. Поэтому перерисовка отключается, когда главный слайд выходит из поля видимости, а количество частиц понижается в зависимости от ширины экрана. Таким образом на ноутбуках эффект получается существенно легче.

Чтобы спрятать снег за окно изначально рассматривалось два варианта: обрезать его прямо на canvas-e с помощью маски или загружать дополнительно картинку с передним планом и прозрачным фоном. Однако первый вариант сильно усложнял перерисовки и как следствие увеличивал нагрузку, а большая картинка для второго весила около 3 Мб. В результате пришли к третьему варианту - загружается маска размером 140 Кб и, используя уже загруженную основную картинку, на клиентской стороне создается картинка с передним планом и прозрачным фоном. В результате мы получили экономию траффика и не повлияли на скорость выполнения скрипта.

Blur-эффект

Далее при скролле создается эффект размытия переднего плана картинки. Это сделано простым подкладыванием размытой картинки и плавным изменением прозрачности при прокрутке. Это так же вызвало бы многочисленные полноэкранные перерисовки, но браузеры на базе движков blink и webkit позволяют нам управлять созданием слоев, которые уже будут совмещаться GPU. А для GPU плавно изменить прозрачность - простейшая задача, не требующая много ресурсов. Все остальные не фиксированные блоки принудительно выделили в отдельный слой, иначе это могло бы привести к непредвиденным последствиям вроде выделения множества отдельных элементов сайта в подобный слой. А экономия памяти GPU - довольно критичная, особенно для мобильных устройств, проблема.

Услуги

Услуги решено было разместить на втором месте. Но уделять большого внимания им мы не хотели, так как наша практика показала – чем лаконичнее, тем лучше.

Выполненные работы

Слайд с нашим портфолио оказался одним из самых интересных.

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

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

Для отображения проектов мы реализовали сложную сетку, где изображения могут быть различных размеров, а сама сетка перестраивается, адаптируясь под различные экраны. Соответственно, у некоторых проектов есть два варианта картинок, которые могут быть загружены. 

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

Отзывы клиентов

После проектов решено было расположить отзывы клиентов. Высоту блока с отзывом зафиксировали и добавили кнопку «прочитать полностью», если отзыв длинный.

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

Ниже расположили логотипы наших клиентов.

Видеоролик

Как показать ролик, но сделать это максимально аккуратно и не привлекать слишком много внимания? Очень просто – рисуем картинку в стиле сайта и используем ее как фон для значка “play”. При клике на который открывается видео во весь экран.

Награды и дипломы

Команда

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

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

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

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

О компании и новости

Вся текстовая информация расположена на фоне обработанного в стилистике сайта изображения с падающим снегом. 

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

Контактная информация

Немного об эффектах

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

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

Все крупные картинки на сайте загружаются скриптами в зависимости от ширины экрана. Это сделано для экономии траффика на мобильных устройствах.

Все сложные эффекты отключаются на мобильных устройствах, чтобы не нагружать слабый GPU.

Так же использовался скрипт от Financial Times, убирающий задержку в 300 мс при клике на элементы на iPhone-ах и старых устройствах на базе андроида.

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

Как делались фотки

Перейти на сайт