Редизайн: Сайт «Студии Артемия Лебедева» на современный лад

ЦП продолжает цикл материалов, посвященных редизайну сайтов и приложений крупнейших компаний. В новом выпуске рубрики ЦП попросил UX-экспертов digital-агентства Uprock провести редизайн представительства «Студии Артемия Лебедева».

«Студия Лебедева» — это первая веб-студия в России. Именно они задали большое количество трендов, которые актуальны до сих пор — резиновая верстка (постепенно трансформирующийся адаптивный дизайн), использование «крошек» и прочее. Они сформировали свой уникальный, неповторимый стиль. Именно поэтому было интересно посмотреть на редизайн их сайта с нашей точки зрения и в свете динамичных современных тенденций.

Первым делом изучим аналогичные сайты коллег: фестивальные проекты, проекты других агентств, западных и российских.

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

Шаг 1: Анализ сайта

Первым делом мы изучаем все страницы artlebedev.ru и формируем структуру — строим связь между всеми элементами сайта. Это один из самых скучных, но необходимых этапов анализа сайта. Здесь возникает понимание проекта, связей между страницами и идеи, которые можно внедрить.

Одна из первых гипотез — объединение разделов «Инвентарь» и «Ководство» в один большой самостоятельный раздел, посвященный всему полезному, интересному, некоммерческому. Из раздела «Компания» можно туда же вытащить «Гарнитура Артемиус», «Смесь»; из раздела портфолио «Наше все», «Бизнес-линч», «Фото дня», «Мозг», «Техдизайн», «Идиотека», «Закулисы», «Музей клонов» — то есть объединить всё, что представляет интерес для пользователей в большой трафикогенерирующий раздел. Он будет полезен для профильной среды — дизайнеров, копирайтеров, разработчиков.

Подготовка сетки

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

Главная страница

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

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

Выделим пять ключевых рубрик, ради которых многие приходят на сайт — «Бизнес-линч», «Фото дня», и акцентируем на них внимание с помощью визуальной подачи. Также добавляем динамический раздел «Новости» и «Ководство», так как он постоянно пополняется интересными гайдами.

Добавляем раздел «Магазин» — но мы тоже сделали бы его более динамическим, учитывая огромное количество интересных девайсов. Было бы классно, если бы демонстрируемые позиции магазина менялись при каждом заходе. Сейчас акцент сделан на клавиатуре, и только при анализе сайта я узнал, как много других девайсов производит студия — это стоило бы вынести наружу.

В подвале у нас дублируется вся структура сайта и контактная информация.

Раздел «Компания»

Учитывая большое количество содержащейся в разделе информации, было бы разумно сделать его большим проморазделом, повествующем о компании в интересной, увлекательной форме. Мы сделали навигацию некой адаптацией классического меню и «крошек», разбив его на понятные блоки и тем самым задав четкую структуру.

Первым блоком мы сделали бы видеоролик, наглядно показывающий работу студии изнутри: лица сотрудников, рабочий процесс и самого Артемия Лебедева. Далее в интересной подаче рассказываем о студии.

Контакты

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

Наше все

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

У проектов появились карточки, они акцентированы, выделены темно-серым цветом и выдают информацию о названии проекта, датировке и команде. Рядом с карточкой мы разместили отзыв — практически у каждого проекта есть сторонние отзывы, и они положительны, а это важный аспект доверия к студии.

Выкладываем все проекты в блочной верстке, с возможностью перехода на следующий проект — удобно тем, кто зашел на сайт изучить работы компании.

Также добавили список работ для конкретного клиента.

Адаптировали страницы для мобильных устройств.

Магазин

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

В разделе «Кафе» пользователь с большой долей вероятности захочет узнать их местоположение — делаем акцент на этом.

Полезности

Это большой и интересный раздел. Мы реализовали его как один большой агрегатор полезных материалов, имеющихся в студии.

Заключение

Это наше видение того, как бы мы работали над таким большим и интересным проектом. Все исходники можно скачать по ссылке. Будем рады услышать ваше критическое мнение.

ссылки не подчеркнуты

Даже консервативный Google отказался от подчеркнутых ссылок.

Неподчеркнутые ссылки достаточно распространенное явление в последнее время. Выделяют цветом. Помню, где-то в статье о трендах 2014 года это говорилось.

Главная страница - лютый АД

Стало намного хуже же.

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

Именно они задали большое количество трендов, которые актуальны до сих пор — резиновая верстка (постепенно трансформирующийся адаптивный дизайн), использование «крошек» и прочее.

Ахахах.. хахах. уахахахаа.. вахахахаха. хаххахха. уууу.. хех.. хахах. Нет.

А че не знали что-ли, что CSS и все браузеры в мире Тема придумал? И даже "крошки" перевел на инглиш "breadcrumbs" и сделал трендом на загнивающем Западе!

Шапка хрень полная.

Ребята, зачем вы всё это делаете? Какой смысл? Какая цель?

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

Сделать мир лучше

Сапожнику никогда не хватает времени на пошив своих сапог.

Если Лебедеву (или любому другому) понравится, то для него оставили исходники. Использование для любых целей безвозмездное.

по моему ху@ня получилась

Ждём линч от Тёмы

glavnaya.ai — все сразу понятно)

Рад, что вы открыли исходники и поблагодарили нас за их использование.

Главная страница - набор банальностей. Кроме шапки. А шапка - да, адище.

И как всегда, в комментариях собрались самые матёрые дизайнеры и профессионалы.

Люблю эту рубрику.

как же любят все дизайнеры дрочить на всякие фейки, нарисовал красоту и давай всем дрочить, детские понты, большинство не юзабельны и кроме дизайнеров они никому не интересны ))

Юзабилити? Ой, вас сейчас заклюют. Забудьте это слово. В 2014 году главное, чтобы было плоско, не информативно, желательно поменьше текста и картинки на всю рабочую область экрана, вам ведь не терпится что-нибудь попрокручивать.

Главная страница - трэш и угар. В остальном получилось ничем не примечательное унылое г.

а с каких это пор UX-эксперты делают дизайн? У нас что дизигнеров всех перевешали уже?

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

А поиграться с фотошопом и первоклассник может - тоже мне чудо-чудное.

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

В том, что вы описали это портрет девочки-дизайнера, которая рисует "красивый" дизайн.

На современный АДъ.

Каждый дизайнер считает, что он сделал лучше. Хотя все совсем наоборот.

Это уже решать пользователям. Мы только делаем свою работу и следим за актуальной ситуацией в индустрии.

К сожалению, получился обычный, безликий сайт.

Что сказал сам Лебедев?

Он сказал, что так верстают только мудаки (с) )))

Комментарий удален модератором

Не слишком ли он безликий?

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

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

Слишком поверхностно. Получился сайт в стиле Студии Артемия Лебедева, но не сайт Студии Артемия Лебедева. Как Американцы изображают Россию с медведями и водкой, тоже самое и тут.

-Алло, это вы главный эксперт по дизайну? -Да. -Что вы скажете о редизайне сайта студии Лебедева? -Я не могу сейчас говорить, я его пока не видел, я сейчас на алгебре, но скажу сразу- говно

Да что с вами такое? Нет там никакого "адища" и глаза вырвать не хочется. Для чего вы так усердно пытаетесь полить чужую работу говном? Неужели общение должно проходить в режиме: "всё говно, жри шляпу" - "я не говно, сам жри". Просто какое-то стадное помешательство. Вам будет достаточно одного положительного отзыва известного человека, чтоб задать себе вопрос: "А может всё не так плохо?"

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

Расскажите подробнее о привлекательных шрифтах.

Получилось нормально, просто объект редизайна сам по себе привлекает любителей подчёркнутых ссылок. Думаю, на такой срач и был расчёт.

а можно свой сайт на редизайн предложить? :)

Цукерберг позвонит с мясом вырвал протухшую развлекуху у лукэтмишечки. Только там был трэш-шапито в исполнении Шнайдера, а тут какое-то унылое говно, простите мое оценочное мнение.

Дизайн Студииа устарел? Да. Работает ли он? Да. В редизайне нету консистенции, с первого взгляда выглядит, как набор разных приемов и клише которые визуально не работают друг с другом. В результате, получилась «еще одна дизайн студия с блекджеком и паралаксами». В какой-то мере вы правильно мыслите, но с визуальной точки зрения – мимо.

И стало мне интересно. Прочел я внимательно почти все отзывы на новый логотип «. ». Очень много прочел. И стало мне интересно: откуда это бешенство? Почему масса людей бросились обсирать эту простую картинку? В ней нет абсолютно ничего, к чему может придраться непрофессионал. Ну, профессионалы, понятно, готовы поспорить о расстояниях между буквами, потому что о них всегда можно поспорить, ибо это не точная наука. Но остальные-то? Должна быть причина, по которой человек вдруг разражается гневными тирадами, бросается писать жалобы, выходит на улицу с факелом и прочее. Причины не может не быть. И она заключается, конечно, не в надписи «. », даже если б последняя была действительно уродливой. Глупость какая — беситься из-за простой надписи. И причина не в том, что люди, дескать, не любят непривычного или нового. Ничего непривычного в слове «. » нет, как его ни напиши. А новое люди любят. Люди любят новое. Новый телефон, новый пиджак, новое авто. Отсмеявшись над отзывами («верните Times New Roman»), пора задуматься, что не так с новыми логотипами. Пора, пора задуматься. Новые логотипы (точнее, новые версии популярных логотипов) всегда встречают в штыки. Всегда. С чего бы, интересно. . . . С чего бы. . Да, так вот. Есть теория, которая, похоже, объясняет феномен. Она называется «меня не спросили». Да-да-да. Дело-то не в том, что вы логотип поменяли, а в том, что поменяли его без моего ведома, без моего согласия, без моего участия. Я ведь тоже умею в фотошопе, я ведь тоже пользователь, у меня, черт возьми, тоже есть мнение! А вы его проигнорировали. Вы мне дали понять, что я дурак, непрофессионал, быдло. А на самом деле я умный, я угадал, что это шрифт Myriad Pro, я могу сам сделать лучше гораздо — но сделал кто-то другой, и получил, наверное, кучу бабла. А я не получил. И поэтому я сейчас докажу вам, что вы зря, ох, зря меня не спросили. Сейчас я вам все расскажу, все, что я думаю и о логотипе, и о том, кто его вам за миллион евро нарисовал.

По-моему, это все объясняет.

Если бы авторы отзывов участвовали в создании логотипа, ну или хотя бы выбирали его голосованием, потока ругани просто не было бы. Ощущение причастности помешало бы.

Но с легкостью могу представить, какое феерически чудовищное вышло бы пиздец-говно.

Что вы хотели показать? Что не смогли сделать лучше, чем сделала Студия в 2003 году? Это провал.

Мы можем бесконечно долго дискутировать о том, что сайт САЛа немного «устал». Но у него есть одна крутая особенность — он доставляет результат работы дизайнеров. Без хуйни.

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

Подумайте о том, что сайту 12-летней давности в 2014 году продолжают подражать Горбунов, Бирман & Co. А Горбунову и Бирману подражают сотни неокрепших умов. Похоже на тренд? А теперь снова взгляните на то, что вы сделали, и подумайте: как это будет выглядеть через год, через два, через пять? Отвечу за вас: это выглядит плохо уже сегодня. Завтра это будет выглядеть еще хуже.

Вдруг вы по-серьезному хотели переделать сайт САЛа? Стоило бы избавиться от «бликов» в шапке, а потом, подумав, и от самой «шапки». А потом и от блока с «Оптимусом». А потом и от блока с новостями, знаками и «Ководством». И от блока с говнищем вроде «линча». Футер там в порядок привести, это всё. Даю подсказку: сделайте плагин для популярных браузеров, который станет удалять все ненужное.

А за попытку заявить о себе и привлечь трафик на сайт — зачет. Это мощный вброс.