Задача
Разработка корпоративного сайта для Angels IT Group — группы компаний с широким спектром услуг в сфере разработки программных решений и Digital-продуктов, в состав которой входит и ARJay. Главная задача сайта — знакомить клиентов с брендом и обеспечить комфортную возможность заказывать услуги.
Этапы работ
- Брифование клиента
- Изучение конкурентов
- Формирование требований
- Разработка структуры сайта
- Проработка структуры главной страницы
- Формирование креативной концепции и прототипа
- Разработка адаптивной версии дизайна сайта
- Разработка графических материалов
- Разработка UI Kit
- Верстка страниц по готовому дизайну
- Подключение и настройка CMS
- Тестирование
- Наполнение сайта контентом
- Интеграция с CRM «Битрикс 24»
- Сдача клиенту и поддержка
Аналитика и проектирование
Первоначально у руководства компании не было конкретных идей и жестких требований по дизайну, поэтому на первом этапе решили тщательно изучить рынок в нашей сфере и собрать референсы по лучшим проектам. Главной задачей было подобрать оптимальную механику работы сайта, чтобы разместить всю необходимую информацию без создания большого числа страниц.
Мы собрали большую базу конкурентов и сформировали мудборд проекта, опираясь на фирменный стиль Angels IT и ожидаемое количество контента. Для удобства восприятия сформировали креативную концепцию контента и создали видео-прототип главной страницы в After Effects для презентации идей руководству, которое осталось довольно презентацией и внесло собственные правки, которые мы учитывали в дальнейшей работе наравне с первоначальным ТЗ.
Возможности для мебельных компаний:
Wireframe слайдера главной страницы
Разработка дизайна и верстка
В соответствии с утвержденной концепцией приступили к созданию дизайна главной и 3 внутренних страниц. Чтобы выделить сайт Angels IT на фоне десятков конкурентов, решили разработать собственный визуальный язык.
Подключили к работе 3D-художника, который занялся разработкой десятков уникальных моделей для эффектной презентации услуг компании.
Тизеры основных услуг
Для наглядного и эффектного отображения всех услуг решили доработать обычный слайдер. Разработали уникальный дизайн для каждого направления с собственными 3D-моделями и понятными тегами.
Отдельное внимание уделили обеспечению читабельности всей представленной информации. Выбрали максимально легкую типографику без крупных текстовых пятен.
Готовый дизайн согласовали с руководством, получили добро на дальнейшую разработку и передали проект программистам, которые собрали из макетов и многочисленных элементов единый функциональный сайт.
Специально для мобильной версии стартовый блок главной страницы разработали с использованием интерактивных Web GL элементов (3D-элементы, которые реагируют на гироскоп устройств).
На последнем этапе провели тестирование и запустили проект, а впоследствии занимались полной его поддержкой (и занимаемся по сей день).
Тизеры основных услуг
С учетом необходимости комфортного использования сайта на любых устройствах, разработали 3 брейкпоинта:
- 12 колонок / 1440 пикселей — для отображения на ПК;
- 12 колонок / 768 пикселей — для планшетов;
- 4 колонки / 375 пикселей — для смартфонов.
Сложности и ограничения
Увеличение количества страниц на этапах разработки дизайна
Изначально планировалось, что на сайте будет 10-12 страниц, в итоге на этапах разработки и поддержки их количество увеличилось в несколько раз, и мы столкнулись с необходимостью их наполнения целостным и однородным контентом. Для решения пришлось разрабатывать дополнительные дизайн элементы и тексты, соответствующие основной концепции
Слишком высокая нагрузка от 3D-моделей и анимаций
На разработку повлияли чисто технические ограничения, которые не позволили добавить на сайт больше анимаций, особенно на главном экране стартовой страницы. Планировали сделать анимацию из png секвенций, чтобы рендеры в слайдере оживали, однако пришлось отказаться от этой идее в угоду скорости работы
Результаты
Сделали для компании функциональный сайт в уникальном дизайне с большим количеством 3D-элементов. Задача несколько раз менялась на этапах разработки, но мы сумели адаптировать изначально принятые и презентованные руководству решения под новые условия таким образом, чтобы результат нравился всем. Продолжаем работу, обеспечиваем полную поддержку сайту и стабильное развитие.