{"id":11244,"title":"\u0420\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f, \u043b\u043e\u043f\u043d\u0435\u0442 \u043b\u0438 \u0440\u044b\u043d\u043e\u043a \u0418\u0422 \r\n ","url":"\/redirect?component=advertising&id=11244&url=https:\/\/vc.ru\/promo\/353949-razbiraemsya-lopnet-li-rynok-it&placeBit=1&hash=d208029863fe4571a57bd41458f0ed509048b262392aaffae456a4ea928923a5","isPaidAndBannersEnabled":false}
Дизайн
Repina branding

Как мы решили соединить лучшие фичи 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 раз, а пользование системой не требует никакого обучения. Гибкость и хороший код позволят нам развивать сайт без костылей и внедрять наши многочисленные идеи в будущем.

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

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

0
7 комментариев
Популярные
По порядку
Написать комментарий...
Александр Львов

Реализация классная, но не хватает деталей о том, как технически реализован этот редактор контента и сколько часов разработки на всё ушло. 

Ответить
6
Развернуть ветку
Repina branding

Спасибо!) Фреймворк angular 11 + angular universal ssr. Для редактирования текстов — contenteditable с доработкой для markdown. Все картинки/видео отображаются по мере видимости с использованием IntersectionObserver. Стили, включая анимации контента, написаны на SASS. Для больших анимаций в услугах использован lottie.
Часов много, учитывая, что мы тут не все показали. Для этого одной статьи не хватит)

Ответить
2
Развернуть ветку
Aleksey Anisin

https://www.nimax.ru
— Дашь списать домашку?
— Да, только не списывай точь-в-точь

Ответить
0
Развернуть ветку
Yaroslav Tugolukovskiy

Так и не списали же.

Ответить
1
Развернуть ветку
Alex Dzenin

Кому-то может показаться, что такие вложения в сайт бесмысленны и не окупаемы

Такие, это какие? 

Ответить
1
Развернуть ветку
Artemida Svet

ну ТАК и на чем вы это собрали ?
вот прям черное пятно - умалчивание )))

Ответить
0
Развернуть ветку
Roman Sergeevich

решили соединить vc.ru и Behance
Комитет очобу дал поюзать)

Ответить
1
Развернуть ветку
Читать все 7 комментариев
Обман "Озона" с акцией "баллы за отзывы" (заблокировали аккаунт с 3000+ баллами)

Несколько месяцев мной старательно делались видеообзоры на купленные товары. За каждый отзыв с видео и фото начислялись разные деньги (100-150 баллов было обычно). А как захотелось использовать эти баллы и были созданы заказы с ними - "Озон" аккаунт заблокировал (объяснять причины и разблокировать отказывается). 46890080-0775 - один из последних…

Просмотр сетки ордеров
Как и почему я переехал в Иннополис: плюсы и минусы

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

Скоро выйдут: сериалы про WeWork, Theranos, Uber и Spotify Статьи редакции

Три из них можно будет посмотреть уже весной 2022 года.

Биржевой стакан в мобильном приложении БКС Мир инвестиций
Хакеры взломали DeFi-платформу Qubit Finance и украли криптовалюту на $80 млн Статьи редакции

Команда проекта предложила вернуть деньги за награду — но им пока не ответили.

Доходы Yota от роуминга выросли в 1,6 раз

Ковидные ограничения стали испытанием для мобильных операторов, которые недополучили доход от роуминга в 2020 году. В Yota в 2020 году выручка от роуминга сократилась в два раза по сравнению с 2019 годом.

Что посмотреть про ИТ в TikTok? Рассказываем, как снимаются шутки про работу айтишников

Делимся кейсом: как найти свою аудиторию в TikTok и зачем это нужно крупной ИТ-компании.

null