Геосистемы — это сложно, но красиво
Разработка сайта
Брендинг
Аналитика
Исходные данные
Ольга Токмакова
Менеджер проекта
Компания обратилась к нам с целью разработать
новый сайт. У них уже было собрано предварительное ТЗ, проведен сравнительный анализ в разных
аспектах, примерная структура сайта и примерное понимание, какой результат они хотят получить.
01
Информировать клиента о компании, компетенциях, продуктах, установке и эксплуатации продуктов, опыте
02
Валидировать компанию и специалистов за счёт статей и отзывов
03
Собирать лиды для продуктов через форму — проконсультироваться, посмотреть демо, обратиться к сейлзу
04
Сформировать базу заинтересованных через подписки на новостную и тематическую рассылку
05
Собрать лиды «тёплых», «органических», клиентов через форму
06
Отработать начальные возражения
07
Быть лицом бренда работодателя
08
Размещать информацию о вакансиях и иметь форму подачи резюме
Поставленные задачи
О компании
Нефтегазовая отрасль, сельское хозяйство, городское хозяйство, промышленность, строительство, экологический мониторинг.
Программа является веб приложением, формирующем единое информационное пространство для сбора, хранения, обработкии моделирования пространственных данных и связанной с ними атрибутивной информации, содержащее картографические материалы и аналитические данные.
Компания NeoStackTechnology занимается разработкой геоинформационного ПО и IT-консалтингом.
01
Оптимизировать бизнес-процессы предприятия по работе с картографическими материалами
02
Упорядочить и систематизировать
объекты
картографии
03
Обеспечить доступность геоданных
всем
заинтересованным лицам
04
Создать единую цифровую информационную среду
Цели продукта
Основные функции
01
Приём и визуализация пространственных и картографических данных
02
Разграничение прав доступа и авторизация пользователей
03
Анализ работы пользователей
06
Управление слоями, управление картой
05
Получение и визуализация информации об объектах
04
Обзор, навигация и масштабирование по карте
07
Измерение расстояний и площадей, построение маршрутов
08
Итеграция со сторонними системами
Аналитика
Изучили полученные данные по требованиям, метрикам, целевой аудитории от заказчика
01
Провели еще пару брифингов для уточнения деталей и адаптации материала для нас
02
Мари Стародубцева
Системный аналитик
Исходя из дополненных вводных, обсудили с командой
и согласовали итоговый вариант структуры с заказчиком.
После перешли к прототипированию страниц сайта.
Дизайн
Прототипирование
Ориентировались на цели и задачи
клиента, поэтому некоторые страницы требовали разработки нескольких вариантов прототипа.
Мы продумывали и проектировали каждую
страницу, а затем обсуждали результат с заказчиком. Обсуждали множество вариантов
решений и вносили правки.
UX/UI дизайнер
Евгений Гальцов
Чтобы синхронизироваться с заказчиком по направлению стилевого решения мы разработали стайлборд, где рассмотрели две концепции.
Стайлборд
В данной концепции предлагали использовать большую типографику, сочные цвета и разбавлять всё это микро-анимациями (интерактивные элементы).
В этой концепции предлагали использовать тени, яркие цвета и их оттенки для создания объема и гармоничного сочетания. За счёт теней мы создадим эффект того, что сайт «многослойный».
Собранный фидбек
Минимализм смотрится хорошо, а вот черные концепции точно не рассматриваем
01
Интересна идея вынесения меню в левую часть экрана, крупные элементы
02
Можно использовать фирменный треугольный, анимировать его
03
Крупный растровый контент можно использовать на странице о компании или в каких-то дополнительных, в странице продукта это не особо применимо
04
Многие концепции не понравились и для нас это
было хорошей обратной связью — мы точно поняли какие решения не стоит использовать в итоговых
дизайн концепциях.
UX/UI дизайнер
Евгений Гальцов
Определили с заказчиком цвета, в порядке приоритетности.
После этого пересобрали концепцию в мудборде, внесли правки и отправили на согласование.
Стайлборд и прототипы согласованы, остаётся задать
цветовые и стилевые решения сайта.
Разработку дизайна начинаем с главной страницы, согласовываем
всю концепцию сайта. Создаём моушн главной страницы, чтобы заказчику было проще представить, как
страница будет выглядеть в реализации.
Дизайн–концепция
Главная задача – разработать современный
дизайн-концепт, который бы пришёлся по вкусу и тёртым инженерам, и техническим директорам, и
потенциальным сотрудникам компании. Поэтому выбор пал на строгие формы, крупную типографику и
порционную подачу информации.
Арт–директор
Олег Гумилевский
Утвердили дизайн-концепцию главной страницы и начали разрабатывать остальные.
Вторая задача — отстроиться от конкурентов. Поэтому задействовали полноэкранный контейнер для контента, кастомные лэйауты и декоративные разделители.
Каждую страницу согласовывали с заказчиком в
десктопной версии, в разрешении 1920x1080. Вносили правки, доводили до конечного варианта и
анимировали.
После согласования страниц аналитик разрабатывал техническое задание уже для
разработки системы.
Разработка
Слаженная работа команды
Для заказчика была важна быстрая реализация проекта, поэтому мы решили вести процессы в разработке параллельно.
После — передаём на полное тестирование.
04
03
После того, как готовы и согласованы адаптивные макеты – адаптируем уже готовую страницу и добавляем анимацию.
После фронтенда нескольких страниц — отдаём страницу на бэкенд (админ.система и интеграция).
02
Пока frontend разрабатывали декстопную версию — в дизайне шла отрисовка адаптивных макетов.
01
Почти все специалисты работали параллельно над
проектом. И это очень сильно ускорило процесс.
Менеджер проекта
Ольга Токмакова
В работке использовали стек, который соответствует, проекту с базовым наполнением, но нетривиальной анимацией.
Фронтенд разработка
Проекты такого типа привычны для нас,
поэтому вначале делали фронтенд страницы, затем анимировали страницу и отдавали на ревью
дизайнерам. После ревью вносили правки и передавали страницу на интеграцию.
Развернули проект, сделали все настройки и начали
разработку.
Frontend–разработчик
Ярослава Пантелеева
На бэкенде Студия переходила на новый фрэйэмворк —
Laravel 8. До этого использовался Yii2.
Мы предложили заказчику написать проект на новейшем
фрейморке и наше предложение поддержали.
Бэкенд разработка
Мы подключили к проекту сразу несколько разработчиков и определили дедлайн, после которого подводим итог и если понимаем, что не укладываемся — бросаем и быстро делаем на Yii2.
Хотя это оба MVC-фреймворка на PHP, среди рисков перехода была задержка сроков из-за новых и непривычных технологий, плюс на Yii2 у нас оставалось огромное множество наработок.
В итоге мы успели сделать на Laravel и получили
отличный опыт. Теперь все проекты Студии разрабатываются на этом фреймворке.
Backend–разработчик
Валерий Бовгира
Мультиязычность
Сайт предполагает две языковые версии, так как заказчики у компании могут быть с разных стран, то в заполняемых формах, при смене языка на английский убрали маску для заполнения номера телефона.
После того как собрали весь сайт, протестировали и разработали мультиязычность.
Тестирование и релиз
Финальное тестирование и правки
После демонстрации заказчикам финального результата начали работать над правками, иногда даже над багами.
Каждая страница вначале проходила несколько итераций функционального тестирования, затем кроссбраузерного и кроссплатформенного.
Много внимания и времени уделили анимации
сайта. Углублялись в тонкости и делали появления блоков, правили милисекунды появления
блоков, и в результате пришли к рабочему продукту готовому к релизу.
Тестировщик
Михаил Труфанов
Релиз проекта
После согласования итоговой версии сайта, закрытия документов – перенесли и запустили сайт на сервере заказчика.
Наши заказчики хорошо знают о текущих возможностях devops-инструментов. Поэтому мы сошлись на решении отдавать-принимать сайт в docker-контейнере. Для нас это был первый опыт релиза в docker-контейнере.
В итоге мы уложились в сроки. Перед релизом еще
внесли пулл правок и зарелизили сайт. Опыт получился хороший. Перешли на новые технологии,
улучшили процессы разработки в сжатые сроки и сделали красивый сайт.
Менеджер проекта
Ольга Токмакова
Над проектом работали
Если вы хотите заказать разработку сайта или
у вас остались вопросы, то заполните форму обратной связи
Олег Гумилевский
Арт-директор
