Клиент пришел с запросом создания «корпоративного сайта», совершенно не знал как позиционировать продукт и что нужно для сайта в целом. Небыло ничего, ни логотипа, ни фирменного цвета. Только готовый продукт, который клиент готов транслировать своему клиенту. Перед нами стала задача сделать не просто корпоративный сайт, а сервис с информационной базой для клиента. Бала принята основная задача сделать «модель продаж» которая будет визуально отличаться от большнства платформ. Но при этом упор сделать только на экспертностью, на основные услуги, которые поделены на сектора, а так же большой медиа центр, который будет в сете содержать четыре направления.
Медиа центр с динамическим контентом:
Статьи
Видео
Обучающие видео материалы и статьи
Центр знаний с базой знаний для изучания программы
Задача созранить доступность к материалу, разделить его через рубрикатор с быстрым доступом в 2 шага, что позволяет сделать доступ проще. Сам же основной «Медиа центр» является динамическим блогом компании. В котором можно менять разные сценария контента, размещать при этом не только текстовый контент, но и видео контант в любой зоне. Проработана внутреняя страница материаоа, в которой есть воспроизведение 4 источников видер, с описание контента, для статей сделана возможность вставлять видео контент, галереи и фото материалы, наполняя онсовные статьи данными.
Дополнительно реализована система тэгирования, которая позволяет связывать похожий материаал, и использовать тэгирование, как связывающий поиск, что дает плюс в переленковки страниц.
Мобильная версия, что если сделать иначе?
Новая задача, которую я практикую в проетах это полное изменение мобильной версии. За частую мы привыгки видеть стандартную мобильную версию проекта, которую мы свайпаем, как рулог информации. Я решил полностью переделать подход к мобильной версии.
Основая идея:
Сделать мобильную версию, как приложения, чтобы контент могли изучать в одном окне. Меню при этом делим на верхнуюю и нижнюю зону. Что позволяет управлять пальцем в доступной хоне и не перекрывает доступ к контенту. Важно было сохранить визуальный код и спроектировать зоны взаимодествия — меню управляются отдельно кааждое и не зависят от десктопной версии сайта. то позволяет вывести только те разделы, которые хорошо интегрируются с мобильной версией или к примеру если есть цель скрыть какие то разделы с мобильной версии. Так появились такие кнопки взаимодествия с переходами внизу, а верху появились кнопки тригиры.
Фокусировка внимания — как заставить взаимодействовать с тригером:
Изначально была идея сделать функционал «первичного знакомства» — спроектированы экраны первичного касания, которые вели клиента по шагам к регистрации, это позволяет трегирить клиента на регистрацию в проекте. Такой функциона сделали с возможностью отключать «первичные экраны» — что позволит управлять их очередностью и наполнением так как нужно клиенту. Это может пригодиться тогда когда будет поток клиентов на сайт. Основная задача возможность выбора — новый клиент видит выбор между регистрацией и пропуском этого шага, с загрузкой главной страницы. История эта не прижилась сразу и было много негатива в эту сторону со стороны клиента. Но когда к тебе будет идти по 500 — 1 000 посетителей, часть из них не готова регистрироваться и это могут быть как раз те клиенты, которые могут в дальнейшем отказаться. А те кто пройдут регистрацию это те клиенты, которые готовы приобретать — такои мобразом мы жестко дистансируем кликнта на мобильной версии.
Почему проект требует тчательной переработки структуры даже на этапе готово сайта.
Данный проект мы реализовывали год и далее модернизировали в течении пол года. Мы меняли многое и дорабатывали. От взаимодествия с контентом, до переработки мобильной версии с новым меню. пробовали разные сценарии взаимодействия с контетом. Педелывали выгрузру материалов в Центре знаний. Отказались анимации в пользу производительности сайта. Сформировали основной стиль сайта. Сделали AI аватара, который стал основным лицом бренда. Реализация основного стиля блога, с последующим переносом данного визуального стиля на другие носитили, разработка фирменного стиля, переарботали основной экран сайта и сделали динамическую навигацию с трансляцией основных направлений. Вывели димострационную версию, переделали интерфейс основной программы, которая стала выделяться своим удобством и визуальной частью. Я уже не говорюю о большом количестве маткриала для комуникационного дизайна. Коснцлсь и SEO проекта: сбор семантики, добавление и генерация контента,оптимизация под запросы и работы, перенос центра знаний полностью всей базы. А в нутри сайта находится ракета «Байканур»- об этом чуть ниже. Это новая практика, которую мы не делали раньше, есть и минусы и плюсы такого подхода.
Задача проекта
Разработка «корпоративного сайта под ключ» с построением модели продаж в сторону экспертности. Реализация идет через персонализацию услуги и разделения большими блоками информации на циклы с выделением информационной части, как отдельным блоком, а так же документационный раздел по взаимодействию с программным обеспечением «Битрекер». Разделение услуг на блоки с концентрацией на стоимости в генерации тарифов и решений. В целом получается «Сервис» — который совмещает в себе «корпоративный сайт» и «информационный сервис». Реализация не станлартного решения мобильной версии в виде «приложения». Реализации проекта заняло 1 год и 6 месяцев с этапом модернизации, оптимизации и наполнением контента.
Результат
Результат полностью готовый «корпоративный сайт» с полнофункциональным внедрением сервисов, ключивые моменты проекта:
Динамического управления проектом полностью из админ панели любой опласти сайта
Построение визуального кода проекта
Разработка интеректуального персонажа как лица проекта
Разработка коммуникационных материалов для проекта (дизайин обложек, иллюстрации, логотипа, презентации, оформление социальных каналов и многое другое)
Внедрение CRM
Внедрение оплаты и формирование счета
Внедрение css внуттри админ панели для управления визульными частяи сайта и размерами
Реализация более 60 страниц включая прототирование и алдаптацию дизайна сайта
Модернизация основных разделов
Нарисание и оптимизация контента под SEO
Оптимизация кода и устранение задерэек в загрузки страниц (особенно учитывая такую длинную главную страницу с насыщенными динамическими блоками)
Организация воспроизведения видео контента на 4 плащадках одновлеменно с возможностью размещение ссылок с видео хостингов
Динамический калькулятор с формированием основных тарифов и дополнительных услуг — с возможностью создавать свои комбинационные решения
Упаковка инфографики для разделов и переработка крафических материалов сайта по всем разделам
Реализация центра знаний с возможностью размещения и скрытия контента.
Реализация оплаты платного контента и скрытие контента в медеа центре
Нестандартная мобильная версия — с стилизацией в виде приложения
Стилизация элементов и блоков после конечного запуска сайта
Это основные задачи, которые мы реализовали за 1,5 года работы. Мы продолжаем поддержку данного проекта и работу с компанией дальше. Поэтому это редкий кейс, на котором очень много сил и времени потрачено на реализацию. Хотите такой же сайт для своей компании? Отправьте заявку или напишите в телеграм @duosds — я лично проконсультирую по любому вопросу. Ваш проект будет еще интереснее. Мы не повторяемся, а реализуем в каждом проекте что то интересное.
Все проекты растут в стоимости, когда ты начинаешь их реализировать и внедрять дополнительный функционал. Этап модернизации, не планируемый этап, за частую улучшения просит внести клиент, потому, как проект был реализован качественно. Теперь начнем с этапов.
Модернизация визуальной части основных страниц:
Подложки для разделения контента:
Клиент поставил задачу визуально разделмть контент - основная проблема в том, что проект выглядел легко, но принято решения обвещать блоки подложками, для концентрации внимания на эти блоки. Да, вы скажите, "А что изменилось, ведь это допониткльная нагрузка для страницы" и будете правы! Когда начинаешь долго проводить на сайте времени, создается ощущение, что подложек сильно много, но пока ты не привыкаешь и не начинешь читать контент, тогда понимаешь, что плашки начинают делать свое дело и глаз не устает. Практично, но бьет по производительности. А потом мне в коментариях пишут, "А что так проект перегружен?" - теперь вы понимаете, что иногда переубедить клиента ну никак нельзя. Вроде бы сделал хорошо и главное клиенту нравиться, но не нравиться тебе. А что делать? Это жизнь!
А на вкусное что?
Создание визуального ряда - самое вкусное для дизайнера. "Ох я сейчас разойдусь" - обычно так думают дизайнеры, которые голодные до работы. Размахнись плечо и открой Figma, Photoshop, кучу нейонок - И погнали! А теперь загибаем пальцы:
Реализация более 130 обложек для статей (этого хватило на месяц) - не попали в желаемый визуал, увы
Реализация нового визуала для обложек - 100 % попадение! Разделение визуала на 4 раздела, которые будут выделяться цветом, клиенты начнут привыкать к виду контента по цвету обложек. (Важно! Не нести это в другие ресурсы, иначе вы будете выглядеть как радуга во всех платформах) - для данного сайта это приемлемо и визуально подчеркивает контент. Это более 160 обложек.
Создание 2 комплекта иконок - которые в итоге практически не пригодились
Создание иллюстрации более 150 штук
Создание AI аватара - персонаж стал брендовым лицом. Создание инфографики, видео контента, фото для разделов
Создание реалистичного контента под обложек
Упаковка социальных каналов
Упаковка бизнес презентации
Ну и на сладенькое! Научил клиента делать лого в Figma
И кто бы сказал - "А начиналось то все с "Погнали!" - теперь представляете сколько об]ема контента надо сделать, и когда ты по 50 обложек сделал, они уже не кажутся такими класными и ты хоть и вдумчиво, но на автомате начинаешь штамповать как конвеер. О комуникационном дизайне читайте в другой статье "Концептуальный дизайн для Битрекер"
А при чем здесь ракета "Байканур" - полетели в космос?
Вы когда нибудь видели Мерседес, а нет Тесла? Много электронники, а вот под капотом либо много, либо один мотор, в нашем случае там много всего.
Реализация каждого блока и вывод его в админ панель
Скрытие блоков, когда они не нужны
Вывод все возможных настроек сайта
Вывод CSS для управления стилями блоков - это наверное 20 % стилей
Так вот мы открыли для себя новый подход, теперь каждый проект будет с настройками стилей и основными настройками темы для удобства проекта. Но не 20 % стилей, потому что если ты заходишь в этот раздел раз в пол года, второй раз уже забываешь где что, даже если это подписано. И клиент снова бежит к вам, спрашивает, а где что? А ты уже сам не помнишь, где там что. Поэтому есть такой момент, если делать такие настройки css, то только самый минимум. Хотя бы действительно те, что нужно, а не все подряд, которыми ты не будешь пользоваться или будешь, но раз в год! Плюсы такого подхода, все настраивает сам клиент - и клиент радостный и ты можешь быстро менять настройки. Поэтому это отличный опыт, который мы берем на ваоружение в другие проекты.
Алаптивность сайта - как решить вопрос сегодня, чтобы не переплачивать завтра
Основной момент с адаптивностью данного сайта решается просто, нужно выбрать основные устроиства, которые будут использоваться, в данном случае мы доработали адптивность в процессе.
Основные брейк поинты перед началом работы над проектом:
1920 px
1600px
1240 px
375 px
Дополнительные брейк поинты
1500 px
355 px
В современном сайте важно закрывать от 4 разрешений экранов. Можно выбирать 1920, 1500, 1110, 375 - и тогда вы получаете вообще идеальный вариант и под технику Appel и под разный Китай Папа устроиства, клиент в процессе работы попросил добавить 2 брейк поинта и получил 6 разрешений для адаптивности сайта. Да, цена проекта в этом случае растет, но можно сделать 4 точки, что описаны выше и тогда вы закроете все основные разрешения. Если есть потребности в других разрешениях это можно сделать дополнительно
Модернизация главной страницы
Модернизация Медиа
Модернизация Статьи
Модернизация Услуга
Правильное разделение визуального кода:
Визуал это основная часть восприятия вашего сайта, если оно скучное или не дотягивает до основной концепции - это минус и плюс для ваших конкурентов. В медиа центре есть 4 основных направления, статьи, видео, обучающий материал, контент для центра знаний. Самый простой способ разделить цветовым кодом. Но не просто выбрать фон, а стилизовать это в стильную концепцию. Что позволит пользователю привыкнуть к разделению данных по цветовому спектру, так делали многие компании: M'n'Ms, KitKat, Lay’s, Lipton и Greenfield, Tikkurila, Colgate, Nivea. Поэтому это интересный эксперемент, который всегда интересно реализовать. Это самый интересный этап проекта, это не редкость, редкость в том, что ты с первого раза попадаешь в 100 % ожиданий клиента.
Обучающий материал
Правовая документация
Статья
Центр знаний
Прототипирование: важная роль в создании сайта или приложения
Прототипирование это самое ключевое в начале проекта. Вы сделали на основные разделы, которые были важны для клиента. Проработали "структуру" для решения основных целей проекта, таких целей три: заявка на консультацию или обратный звонок, покупака платного контента, покупка основного программного обеспечения. Результат можете посмотреть ниже. Подробнее о прототипах мы рассказываем в данной статье "Прототипирование сайтов: почему это экономит миллионы" - вы можете более дитально разобрать этот вопрос.
Главная
Кейсы
Услуги
Статья
Как цветовой код влияет на контент?
В маркетинге есть деление на «основной контент» и и «спиральный контент»
1. Категории контента (Контент-маркетинг)
«Зеленый» контент (Evergreen content): Это публикации, которые остаются актуальными годами. Он стабильно приносит трафик и новых клиентов (например: обучающие статьи, чек-листы, FAQ, базовые руководства).
«Новостной/трендовый» контент: Статьи или посты, которые имеют пик популярности, но быстро устаревают (например: горячие новости индустрии, скидки на сезонные товары, ситуативный маркетинг).
2. Спиральная динамика (Управление компаниями)
Авторы систем управления (например, Фредерик Лалу) делят сами организации на «цветные» типы в зависимости от корпоративной культуры и подхода к работе с информацией:
«Красные»: Власть вождя и подчинение через страх. Контент здесь часто агрессивный, продающий «в лоб».
«Янтарные»: Строгая иерархия, жесткие регламенты. Контент публикуется только по правилам и через одобрение руководства.
«Оранжевые»: Ориентированы на результат, успех и конкуренцию. Контент строится на метриках, кейсах и демонстрации превосходства над конкурентами.
«Зеленые»: Фокус на командной работе, ценностях, корпоративной культуре и комфорте сотрудников.
«Бирюзовые»: Самоуправляемые организации, где сотрудники объединены общей эволюционной целью. Контент максимально открытый, прозрачный и экспертный.
Но, есть не только деление контента по сигменту бизнеса, но и по цвету контента, этот цвет транслируют везде, такие компании как: Тилькофф, МТС, Мегафон, До До Пицца, Кока Кола, Золотое Яблоко. Многие компании вкладывают в это большие стрества, но на самом деле выделение цвета — это три основных цвета, редко используют 5 цветов. Мультибрендовые компании не используют цветовой коод и больше упор делают на визуал за счет 3 цветов, которые выбираются по цветовому спетру и один бренд не пересикается по цвету с другим, это повышает пупулизацию направления.
Отзыв заказчика
Сервис на высоте, работаем больше года. Есть постоянная поддержка. Я доволен результатом и проделанной работой. DUOS DIGITAL STUDIO сделали не только сайт, интерфейс приложения, но и упаковку материалов. Мы продолжаем сотрудничество дальше. Спасибо. Рекомендую!
