Ксения

Как менялись крупные российские интернет-сайты

Зачем делали редизайны ведущие российские поисковик, социальная сеть и информационные порталы и как это повлияло на их работу


Причина смены дизайна известных сайтов продиктована не столько эстетическими, сколько вполне рационалистическими изображениями: акцентирование внимания пользователя на определенных разделах, удобство работы с ресурсом и так далее. За время своей работы многие "ветераны" Рунета пережили редизайн (а кто-то и не единожды). Обновив собственный дизайн, RB.ru вспомнил, как раньше выглядели известные сайты.



Lenta.ru

Редизайн Lenta.ru, который произошел при главном редакторе Галине Тимченко в январе 2013 года, эксперты называют одним из самых успешных в истории российского интернета.


Первый дизайн Lenta.ru

"Когда я задумалась по поводу того, что Lenta.ru до такой степени страшна и монструозна, сначала у меня была одна история: в Lenta.ru 23 открытых рубрики и 100 скрытых. Как облегчить путь по сайту для людей? Перед моим коллегой и сотрудником Сашей Амзиным, который работал вместе со мной над редизайном, я поставила задачу: думай, как мы будем укрупнять Ленту и делать ее из более крупных блоков, чем сейчас", - рассказала об изначальной причине смены дизайна Галина Тимченко в ходе своего мастер-класса в Школе новых медиа в марте 2014 года.

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


Lenta.ru в новом дизайне

В результате вместо того, чтобы пролистывать сайт, как это было раньше, пользователи стали кликать, чтобы получить нужную информацию. Разумеется, отмечает, Галина Тимченко, редизайн вызвал проседание аудитории (по ее словам, проседание неминуемо - "даже если он [редизайн] самый прекрасный, даже если вы лучше всех на свете, особенно если у вас большое ядро").
"В первые недели всегда происходит отток лояльных пользователей. И все инвесторы, директора или еще кто-то должны отдавать себе в этом отчет. Другое дело, сможете ли вы его вернуть. Мы закладывались на проседание до 12% в течение 3-4 месяцев. Мы просели на 7-9%, и к 22 апреля мы вышли на декабрьские показатели. То есть провал мы преодолели за 2 месяца", - говорит Галина Тимченко.

В результате получился совсем другой сайт - в том числе, с точки зрения системы рубрикации. Создатель Lenta.ru Антон Носик отнесся к редизайну достаточно скептически, но все равно похвалил сотрудников за проделанную работу.

Газета.ru

Первую версию сайта Газета.ru издавал Фонд эффективной политики. Тогда ее издателем был Антон Носик. В феврале 1999 года сайт был обновлен, над дизайном работали специалисты студии Артемия Лебедева.

Через полтора года издатель сменился. У Газета.ru после был черно-белый дизайн, за ним - синий. В 2005 году проект вновь обращается к услугам студии Лебедева, которая работает над новым (четвертым по счету) дизайном почти два года. В 2007 году увидела свет обновленная версия сайта.

В 2012 году дизайн обновился снова, сайт обзавелся и новым логотипом. Основной причиной для перезапуска стала необходимость сделать портал более удобным для читателей и рекламодателей. Среди других причин было увеличение узнаваемости бренда. Предыдущий макет, по словам главного редактора Михаила Котова, предыдущий макет из-за большого объема информации стал "слишком тесным, запутанным и архаичным". Новый макет, по его словам, стал более прозрачным и интуитивно понятным. "Его гибкость позволяет нам подавать больше актуальной информации, чаще обновлять первую полосу, акцентировать именно те материалы, которые мы считаем наиболее интересными", - процитировал тогда Михаила Котова Sostav.ru. Новый макет разработал Сергей Максимов, среди работ которого - сайты "Маркер" и Time Out. Также дизайнер сотрудничал с Life News.



Версия 2012 года

Бордовый логотип в виде стилизованной под перо латинской буквы "g" был создан студией Артемия Лебедева. Этот логотип вызвал массу обсуждений и шуток - самым безобидным сравнением была поднимающая голову змея. Творческий директор и партнер DEFA Вадим Игонин сказал, что логотип - "нечто извивающееся, шипящее, винтажное и абсолютно непродвинутое технологически". Бордовый (почти коричневый) цвет логотипа и его форма вызывали у некоторых пользователей и крайне неаппетитные ассоциации. Кроме того, дизайнеров студии Лебедева обвиняли в плагиате - слишком уж похожим новый логотип Газета.ru казался на фирменный знак издания The Guardian.


Так Газета.ru выглядит сейчас

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

"Яндекс"

Главный российский поисковик претерпел 12(!) изменений - над всеми работали дизайнеры студии Артемия Лебедева (а также над рекламными кампаниями, промо-сайтами, логотипами и фирменными стилями для проектов - сотрудничеству "Яндекса" и студии Лебедева уже 17 лет).


Версии "Яндекса" с 1.0 по 4.0

Первой, относительно похожей на привычный "Яндекс", стала версия 7.0. Работая над восьмой версией, дизайнеры провели строгую ревизию. В итоге с главной страницы сайта было убрано много ненужной информации - осталось только самое важное и востребованное. Увидеть основные службы и внутренние страницы стало гораздо легче. Тогда же был разработан и применен единый набор правил построения интерфейсов для всех служб "Яндекса". Универсальной стала строка запроса - поиск стал одинаково удобным во всех приложениях.


Версия 7.0 - крайняя справа

Версия 8.5 подарила "Яндексу" новый каталог, службы и внутренние страницы стали еще доступнее, изменилось верхнее меню страницы. Но предела совершенству, разумеется, нет (хотя на короткое время - после выхода восьмой с половиной версии - в студии Лебедева даже допустили такую мысль). Вышла десятая версия, где "избранные" рекламные места объединились в одно.


Версия 8.5 - в центре, версия 10.0 - крайняя справа

В версии 11.0 была введена иерархия информационных блоков (их на главной странице стало слишком много).


Слева - версия 11.0, справа - 12.0

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

"ВКонтакте"
Социальная сеть "ВКонтакте" за годы своего существования менялась, "обрастала" новыми функциями и сервисами и немного меняла дизайн, но все изменения были в рамках одного узнаваемого стиля.
"Чем меньше дизайна - тем лучше. Но эстетика должна быть выверена. В этом смысле ВКонтакте неплох, все сочетается. Самое главное - фотографии, простота и удобство чтения текста", - говорил об оформлении сайта дизайнер "ВКонтакте" Алексей Добромыслов.

Самое важное изменение в дизайне - логотип для иностранных версий сайта. Было отсмотрено порядка 350 вариантов, в итоге Павел Дуров нарисовал свой эскиз.

В июле этого года, как писал TJournal, "ВКонтакте" объявила конкурс на лучший редизайн сайта. Победителю пообещали работу в компании, обладателям второго и третьего места - поездку на конференцию UX Week 2014 и ноутбук MacBook Pro соответственно. Участникам было предложено нарисовать новый вариант интерфейса веб-версии "ВКонтакте". Согласно видению руководства социальной сети, новая версия дизайна сайта, над которой должны потрудиться конкурсанты, предполагает более широкую страницу - чтобы им было удобно пользоваться на мониторах с минимальной шириной в 1024 пикселя. Еще планируется увеличить шрифты (пользователей не устраивает текущий размер), а также упростить стили. На подобной основе были выбраны, например, стикеры, которые относительно недавно появились в социальной сети.

RB.ru

3 сентября 2014 года деловой портал RB.ru обзавелся новым дизайном (дата начала его работы довольно символична - именно в этот день в 2007 году открылся сайт). О том, какие ресурсы вдохновляли, как выбирали новый дизайн и чем он будет удобен пользователю, рассказала издатель RB.ru и глава Viadeo Russia Наталия Моисеенкова.


Прежняя версия RB.ru

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

Еще одна особенность: наш ресурс отличается тем, что он совмещен с профессиональной соцсетью Viadeo. Регистрация на RB.ru и регистрация на Viadeo дублируют друг друга. Ранее это было реализовано довольно сложным для пользователя способом, а сейчас мы сделали очень естественную и незаметную для пользователя со-регистрацию. Человек, заполняя форму регистрации на RB.ru, автоматически создает себе профиль в профессиональной социальной сети Viadeo. Для пользователя это удобно и значительно более понятно.


Новая версия RB.ru

Следующий этап, над которым мы будем работать, развивая новый дизайн RB.ru, будет связан с проработкой разных интерактивных схем взаимодействия пользователя с ресурсом. Например, чтобы удобнее было работать с любыми пользовательскими материалами - размещать пресс-релизы, вести блог и т. д. Пока эти разделы будут в старом дизайне, но впоследствии они будут изменены.
На разработку нового дизайна нас вдохновили Business Insider, который в принципе является нашим концептуальным вдохновителем с точки зрения подачи материалов, BuzzFeed и Mashsable. Последний вдохновил нас тем, как хорошо он подстраивается под разные устройства, как у него реализована адаптивность. Очень многие ресурсы российского рынка заявляют о том, что они адаптивны, но понимают под этим несколько иное. У нас - настоящая адаптивность, поскольку элементы перестраиваются в зависимости от расширения и размера экрана.

Наши ожидания от нового дизайна - естественно, повысить посещаемость RB.ru и нарастить аудиторию, которая приходит на ресурс из социальных сетей", - комментирует Наталия Моисеенкова.

Комментарии


Подпишитесь на рассылку RUSBASE

Мы будем вам писать только тогда, когда это действительно очень важно