Как мы решили соединить лучшие фичи vc.ru и Behance на сайте нашего агентства и что из этого получилось

Разработать внешне симпатичный сайт сейчас может почти каждый, а вот сделать его удобным внутри, заточить его под свой бизнес и особенности работы с контентом — задача несколько сложнее. История про обновление сайта Repina branding: страдания, путь к решению и развязка.

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

Последние 7 лет наш сайт глобально не менялся, точнее менялся, но это были постоянные надстройки и костыли, которые превратили его в чудовищного Франкенштейна. И да, он был на Битриксе. Все, кто сталкивался с этой CMS, знают, что для простого добавления картинки придется пройти тернистый путь по многочисленным рубрикам и папкам. Есть много бизнесов, которым подходит Битрикс, но это не мы. Нам нужно было интуитивное и не побоимся этого слова, эстетичное решение, которое не будет вызывать отвращение при работе с сайтом.

Но что это может быть? Wordpress? Joomla? Drupal? Принцип загрузки контента везде примерно одинаковый. Тильду мы очень любим, но нам бы ее не хватило для наших грандиозных планов. Хотелось сэкономить, но нет. Стало очевидно, что нужно создавать все с нуля, только кастом, только хардкор.

• Повысить скорость работы с контентом. Мы хотели быстро менять заголовки и текст, добавлять любые изображения, а не лезть за ними в непроходимые дебри.
• Свободно редактировать портфолио: работать с изображениями и надписями внутри проектов, менять расположение кейсов в ленте. Мы любим Behance и хотели похожий конструктор на своем сайте.
• Встраивать видео. Vimeo тормозил с автоматическим проигрыванием. Мы перешли на тяжелые GIF-ки, но с ними тоже работать неудобно. Хотелось иметь собственный плеер, который бы быстро проигрывал видео в нужном качестве — автоматически или после нажатия кнопки.
• Удобно верстать статьи. Нам нужен был визуальный редактор со всеми инструментами, как на vc.ru — чтобы еще до публикации видеть, как будет выглядеть текст.

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

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

Администратор может переходить на разные страницы сайта так же, как обычный пользователь. Все работает по принципу WYSIWYG (What You See Is What You Get). Кликаем по иконке с карандашом, и можно править все что угодно в один клик. Например, отредактировать заголовок. А нижняя строчка под заголовком меняет нашу позицию в Рейтинге Креативности АКАР. Кстати, в этом году мы переместились с 7-го на 5-е место.

Используем Drag-and-drop, чтобы проще управлять расположением элементов — просто перетаскивая их. Так можно поменять местами разделы сайта, а чтобы разложить кейсы в портфолио в нужном порядке, их тоже достаточно просто перетащить:

Главный раздел сайта любого брендингового агентства — это портфолио. У нас до этого уже был свой конструктор проектов, но назвать его неудобным, это не сказать ничего. Например, чтобы переставить блоки местами, нужно было менять нумерацию каждого из них. И это лишь малая часть квеста. Мысль о том, что на сайт надо залить новую работу, вызывала грусть. А ведь релиз нового кейса — это важное событие для нас, которое должно приносить радость и удовлетворение. Как, например, на Behance — гибко, красиво и быстро. И мы захотели так же.

Теперь мы можем загружать картинки в галереи, легко менять местами блоки, добавлять фон и текст любого цвета:

У нас получилось 5 видов сетки, они покрывают все потребности для демонстрации работ:

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

А еще мы встроили собственный плеер — теперь можем спокойно проигрывать видео без сторонних элементов интерфейса автоматически или с кнопки.

И вишенка на торте — отсутствие «висячих» предлогов. В классическом дизайне «висячие» предлоги — это «мовэ тон», а в вебе они все-таки прижились. Но на них же невыносимо смотреть! На старом сайте мы переносили их вручную, проставляя «&нбсп;» после каждого предлога. На новом мы избавлены от этих страданий навсегда.

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

Верстать текст мы теперь можем в визуальном редакторе, и видеть его именно так, как он будет опубликован:

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

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

А как вы бы решили эти задачи?

Ну и, наконец, заходите на сайт: