Вот что получается, когда смелый заказчик готов на любые дизайнерские идеи.
Результат Процесс
WOW!-промо-сайт для «Ипек Су»
Сибирикс
WOW!-промо-сайт
для «Ипек Су»
Вот что получается, когда смелый заказчик готов на любые дизайнерские идеи.
Представьте, что вы в жарком Баку. Идете по нагретой до ряби в воздухе мощеной набережной. Солнце припекает, ветерок с моря не дует. Зато в руке у вас — стакан с ледяной водой (урвали из кулера в ближайшем ТЦ). Вы жадно пьёте её, прохладная капелька стекает по вашей шее, и в ней ярко-ярко блестит солнечный лучик. Кайф!

Кстати, вода, которую вы нафантазировали, скорее всего марки «Ипек Су» — половина Баку пьёт именно её. «Ипек Су» — крупнейший поставщик бутилированной воды в столице Азербайджана. Её добывают из природных источников, очищают, разливают и доставляют с 1997 года. А недавно у «Ипек Су» запустился новый сайт — не без нашего участия, конечно :)
Задачи
«Ипек Су» — крутые ребята и могут позволить себе сайт, который выделится на фоне конкурентов. Поэтому основной задачей было сделать «вау». И, раз уж все равно креативим, замутить что-нибудь эвордовое — чтобы сайт мог участвовать в конкурсах и собирать ништяки в виде статуэток, медалек и ленточек.

Поэтому нам нужно было:

  • разработать промо-сайт с интересными фишками;
  • не забыть про пользователей и сделать так, чтобы они чаще заказывали доставку воды на сайте.
Дизайн
Заказчик дал полный карт-бланш, поэтому мы не стали ограничивать воображение. Даже в прототипе:
Мы решили показать, как добывается вода «Ипек Су»: её выкачивают с глубины 200 метров — она проходит сквозь слои известняка, глины, песка и почвы. Когда пользователь скролит страницу, бутылка поднимается вверх и с фонтанчиком воды вылетает на поверхность.
На фоне всей этой феерии — фотографии азербайджанской природы. Их предоставил заказчик — это снимки фотографа из Баку (обязательно зайдите на его сайт — там красота). На горные пейзажи мы наложили анимированную дымку — и стало приятно, спокойно и свежо.

Но растормошенное воображение не успокаивалось, и для следующего экрана у нас родилась ещё одна безумная идея: ДРОНЫ!
Мы хотели сделать съёмку Баку с дрона. Планировали запустить коптер, к нему прикрепить бутылку с водой и GoPro камеру, и чтобы эта конструкция летала над городом и снимала панорамное видео с обзором 360 градусов. Пользователь мог бы повертеть камеру и осмотреть Баку. Но идея отвалилась, потому что над городом нельзя летать дронам — это угроза безопасности.

Тогда придумали альтернативу — запустить не коптер, а чувака на скутере, чтобы уже он ездил по городу с бутылкой и камерой.

Евгений
Арт-директор
Заказчику идея понравилась, но дизайнерские мечты оказались несовместимы с жизнью — не нашлось в Баку человека или компании, которые могли бы сделать такое видео. А покупать GoPro камеру только ради этой цели заказчик не стал — невыгодно.

Поэтому пока на сайте «Ипек Су» в этом месте стоит фотография. У нас же осталась нереализованная потребность встроить на какой-нибудь сайт панорамное видео с дрона. Если вы чувствуете что-то похожее — пишите, обсудим наши больные идеи :)

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

Юлия
Дизайнер
На странице 404 мы сначала хотели поселить водовоза из фильма «Волга, Волга». Помните такой? Если нет, то вы понимаете желание заказчика придумать другой вариант — поэтому теперь на 404-ой «Ипек Су» обезвоженная пустыня. Но водовоз всё равно классный, поэтому оставим-ка его здесь.
Пока мы развлекались с креативными идеями, не забывали про вторую задачу сайта — он должен продавать. Поэтому на каждой странице в правом верхнем углу есть кнопка быстрой покупки для тех, кто зашел по делу.
Разработка
Конечно, анимация бутылки — все эти брызги, подергивания, пузырьки — не просто так делалась.
На этом проекте просто безумная идея анимации главной: скролишь страницу вниз, а тебя выносит вверх потоком чистейшей горной воды. С движущимися пузыриками. А в конце еще и фонтан! Такая задача поначалу казалась просто невыполнимой. Но шаг за шагом, оттачивая каждую деталь, мы сделали это!

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

Воду доставляют в течение дня в разное время, и хотелось, чтобы пользователи могли выбирать, когда им привезут воду. Поэтому на странице оформления заказа предусмотрели выбор времени и даты доставки. Причем интервалы времени зависят от даты: если я заказываю воду в 15:00 и хочу доставку сегодня, то выбрать время, которое уже прошло (интервал 10:00-14:00, например), уже не могу.

По умолчанию выбрана текущая дата и ближайшее подходящее время.

Дарья
QA-менеджер
Разработка шла гладко и приятно. Пока. Шишки и затыки начались, когда сайт нужно было переводить на азербайджанский язык.
В азербайджанском алфавите есть символы, которые встречаются в очень немногих шрифтах, например, в Arial и Times New Roman.

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

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

Екатерина
Руководитель проекта
Когда дорисованные буквы стали выглядеть более-менее прилично, мучения не закончились — начался болезненный деплой. Работать по стандартной схеме «собрали у себя — протестировали — отдали заказчику» было нельзя: пока шла разработка, у «Ипек Су» работал старый сайт, куда сыпались заказы. И их ни в коем случае нельзя было потерять.
Мы переделывали рабочий сайт, поэтому просто взять и перенести базу с тестового сервера на рабочий было нельзя. Приходилось логировать все изменения базы данных относительно рабочего варианта, а при деплое проходиться по списку и вносить изменения в рабочую базу.

Александр
Разработчик
Так ручками были перенесены более ста пунктов.

А сочный промо-сайт, который получилась в итоге, смотрите по ссылке. Только не с мобилок — сайт хоть и адаптивный, анимацию главной на мы на них обрубили. Заботимся о вашем трафике :)
Готовый сайт