Номер один, или как Игорь Манн взорвал Рейтинг Рунета

C чего все началось

Однажды, около года назад, Игорь Манн обратился к нам с просьбой переделать его сайт. Формулировка задачи была простая и короткая, но в то же время размытая и типично-клиентская: «Нужно, чтобы было круче всех. Хочу, чтобы сайт брал награды».

Обычно клиенты приходят и говорят: "Мы хотим, чтобы у нас выросла конверсия". Ну, как-то так. И здесь все понятно. Нужно провести анализ старого сайта, выявить точки роста, и при разработке нового сайта сделать на них упор. В случае с сайтом Игоря все было совсем не так…

Но, обо всем по-порядку.

Неудачные попытки

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

Первым делом мы провели аналитику старого сайта: изучили метрики, составили портреты целевой аудитории. При проектировании нового сайта мы попытались отталкиваться от решения проблем пользователей. В итоге, мы решили сделать новый сайт на основе шаблона. Игорь расстроился, да и мы к тому моменту поняли ошибочность выбранного подхода. Мало того, что от нас требовали совершенно другое. Так еще и получалось, что мы меняем шило на мыло — делаем то же самое, просто чуть-чуть по-другому. А это полная ерунда.

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

Сергей Чикин: Каждый раз, когда мы пытались обсуждать: «А что это вообще? Это блог? Или мы должны о самом Игоре Манне рассказывать?» Да, первая цель — это блог. Но все равно, рано или поздно, все скатывалось к тому, что «нет, нам нужно круче всех!». Это самая главная задача.

И мы сконцентрировались на том, чтобы придумать идею, которая взорвет.

Первый макет, который мы подготовили, выглядел вот так:

Как видите, здесь привычная всем этажная система. Сначала идет блог; потом сайт рассказывает про книги Игоря Манна (здесь мы хотели предлагать прочитать отрывки из книг); затем рассказ о самом Игоре; а потом все остальное: проекты и т.д. и т.п.

Фишка этого макета была в следующем. Этаж, на котором рассказывалось об Игоре Манне, был анимированный — пока проматываешь этот этаж, Игорь поворачивает голову.

Александр Вьюшков: В анимированном Игоре Манне что-то было, что-то интересное. Идея с книжками была не крутой — книги это все-таки второстепенная история. В остальном, макет был очень... обычный.

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

Блестящая идея

Через некоторое время идея с анимацией обросла "мясом" и трансформировалась в более глобальную.

Личная страница — дом в Интернете. А когда приходишь к кому-то домой в гости, тебя встречают. Вот и Игорь Манн должен был встречать посетителей на своей странице.

Сначала Сергей Чикин обкатал идею на себе:

После того, как мы решили, что это будет анимированный сайт, и все этажи будут связаны с какой-то анимацией, нам нужно было придумать: а о чем вообще нужно рассказать на Главной странице? Решили так:

• Сначала мы рассказываем о том, кто такой Игорь Манн;
• Затем про блог Игоря Манна (собственно, это главная тема);
• Следом идет информация о выступлениях (где, когда и что он будет делать);
• Ну и последнее — информация о проектах.

Затем мы придумали, как будут анимированы переходы между этажами для переходов между этажами. Соответственно, анимация раздела «Проекты» — Игорь смотрит на них ("Это мои детища"). На «Выступления» Игорь поднимает микрофон. А когда на экране этаж с блогом, Игорь Манн поправляет очки.

Сергей Чикин: сложность была в том, что анимации должны были быть предельно простыми и всегда возвращаться в одну и ту же точку.

Реализация

Тимур Азизов: Для блога Игоря Манна мы выбрали систему управления WordPress, потому что старый блог Игоря тоже был на WordPress, и нам было важно синхронизировать базы, чтобы перенос контента прошел безболезненно.

А потом настал самый сложный и интересный этап — съемки.

Предварительно договорившись с Игорем, мы приехали в Москву. Нам нужно было отснять три действия: Игорь поправляет очки, поднимает микрофон и поворачивает голову. Съемки всего трех действий заняли у нас порядка 4 часов!

Это был одним из самых тяжелых этапов для нас всех. А Игоря так мы вообще достали. Он нервничал, бегал, разговаривал по телефону. А мы в это время смотрели отснятые фотографии и обсуждали: подойдут они или нет. А потом мы звали Игоря, снова начинали фотографировать, и он негодовал.

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

Итак, съемки закончились и оставалось всего-ничего — вклеить фотографии на сайт и запустить его. Но не тут-то было.

Оказалось, что фон, на котором мы отсняли Игоря, вообще не соответствует задуманному. Он был ужасно темный, и текст на нем был незаметен. У нас было два варианта: либо затемнять этот фон и делать текст белым, либо высветлять фон. Но оба варианта не подходили, потому что картинка становилась совсем не такой. Однозначно, нужно было Манна из этого фона вырезать. В итоге, еще около двух недель мы потратили на обтравку фотографий. Следы сейчас уже почти невозможно заметить.

Но, несмотря на все преграды и неприятности, мы успели закончить и запустить сайт к 26 марта, ко дню рождения Игоря Манна. Вот такой приятный подарок!

Если хотите посмотреть, как все это выглядит в действии — посетите сайт.

[EPSB]Хотите классный сайт? Посмотрите сайты, которые мы создаём для своих Клиентов.[/EPSB]

Рейтинг Рунета

Мы так долго провозились с обтравливанием фотографий и сведением их в анимацию, что совсем забыли о главной цели — участии и победе в Рейтинге Рунета. Спохватились в последний день регистрации, когда Сергей Чикин прибежал в офис и спросил: «Ребята, а почему мы до сих пор не выложили все это в рейтинг Рунета?!»

Как видите, успели :)

А самое главное — Игорь Манн остался доволен: