Изучение ТЗ, анализ рынка. Текстовый прототип
Первый этап | 11 дней
Классика жанра — без глубокого погружения в тему не бывает сильного результата. Мы детально разобрались в продукте и контексте задачи с учетом, что проект ориентирован на B2B-аудиторию пищевой промышленности: директоров и специалистов производств, для которых важны стабильные процессы, качество и безопасность, повышение квалификации и автоматизация.
При этом при разработке прототипа, нам важно было донести ценность продуктов и услуг простым и понятным языком, без перегрузки терминами и сложными формулировками.
В ходе анализа конкурентов мы также заметили, что большинство из них не показывают продукт в работе или показывают но скриншотами, которые ни очем не говорят. Этот инсайт мы взяли в основу и на следующем созвоне предложили заказчику усилить подачу и дополнять сильные стороны продукта короткими видеоинструкциями, наглядно демонстрирующими возможности сервиса.
Выстроили структуру
После изучения, определили необходимые страницы, для каждой выстроили логичную структуру, емко, но точно расскрывающую и представляющую продукт или услугу.
Написали текст
При написании текста ориентировались на целевую аудиторию, простым языком раскрывали суть каждой услуги и продукта, подчеркивая выгоды и функциональность.
Дизайн-концепты
второй этап | 6 дней
Мы начали работу над дизайном не с главной страницы, а со страницы продукта Q-CHECK. Главная в этом проекте выполняет навигационную функцию между продуктами и услугами и остаётся компактной, поэтому старт с неё не позволил бы полностью раскрыть идею визуала. Сначала мы сфокусировались на ключевом продукте — Q-CHECK.
У каждого продукта и услуги был свой фирменный цвет, и мы использовали это в дизайне отдельных страниц, чтобы пользователю было проще ориентироваться на сайте и легче запоминать продукты и услуги.
Дизайн-концепт 1
Идея проекта строилась на создании уникальных векторных иллюстраций, которые наглядно отражают суть продуктов и услуг. В качестве стилистического решения мы выбрали bento-стиль в сочетании с flat-иллюстрациями — универсальный и современный подход, который легко считывается, вызывает доверие и формирует лояльность к продукту.
Дизайн-концепт 2
В этом варианте мы сделали акцент на ощущении технологичности и прогрессивности продукта. Эффект достигался за счёт hi-tech-стилистики: минималистичной и абстрактной графики, чистых форм и аккуратных визуальных акцентов. Такой подход подчёркивает инновационный характер сервиса, создаёт ощущение надёжной цифровой среды.
Доработка дизайн-концепта
Созвонились с заказчиком, провели презентацию. Выбор пал на первый вариант с иллюстрациями. Но…
Совместный мозговой штурм помог найти более точные решения. Мы пришли к выводу, что на главном экране важно сразу показать ключевые выгоды продукта — он новый, и сначала нужно сформировать понимание его ценности. В ходе обсуждения также появились идеи, как усилить иллюстрацию и сделать её более осмысленной. Чтобы она точно отражала суть продукта и не вызывала ассоциаций с ручным трудом, мы отказались от изображения людей и сосредоточились на визуальном образе автоматизации.
Идея одна, отрисовка разная
Иллюстрация наглядно показывает повседневные сложности, с которыми сталкиваются сотрудники предприятий при ручном заполнении бумажных журналов: постоянные исправления, зачёркивания и переписывания данных, снижающие эффективность работы.
На визуале журналы буквально «переходят» внутрь приложения, символизируя процесс цифровизации документооборота. Пунктирная стрелка подчёркивает простоту и наглядность перехода от бумажного формата к цифровым данным.
Галочки в интерфейсе приложения становятся символом порядка и контроля: информация структурирована, легко доступна и быстро обновляется, а рабочие процессы — проще и эффективнее.
На выбор заказчику предложили три варианта визуального решения отрисовки иллюстрации: в 2D-формате, изометрии и 3D-графике.
Дизайн-концепт 1.1
Дизайн-концепт 1.2
Дизайн-концепт 1.3
Выбор заказчика
Презентовали на созвоне 3 новых варианта, и...
Заказчик выбрал дизайн-концепт 1.1, но попросил внести небольшие доработки. Рукописные элементы на журналах создавали ощущение визуального шума, поэтому мы приняли решение упростить их отображение. Также доработали цветовые акценты в иллюстрации и по всей странице, усилив присутствие основного брендового ярко-зелёного цвета.
Дизайн всех страниц
Третий этап | 16 дней
В итоге мы сначала разработали дизайн страницы продукта Q-CHECK, а затем перешли к остальным страницам — услугам, продукту Q-VISION и главной. Для каждой страницы была проделана большая работа по созданию и проработке смысловых иллюстраций.
Иллюстрации для главных экранов страниц
Заказчик был так же вовлечён в процесс, как и мы. Нам было важно создать действительно осмысленные иллюстрации, поэтому в тесном сотрудничестве мы уточняли ключевые нюансы и детали — ведь именно заказчик лучше всех знает специфику своего бизнеса. Все вопросы и особенности мы последовательно прорабатывали и снимали совместно в ходе обсуждений.
29 иллюстраций для обложек
И ещё столько же демонстрационных роликов приложения Q-CHECK, консалтинговых услуг и образовательных программ
Не поленились и отрисовали уникальные иллюстрации под каждое видео, услугу и программу обучения. Результатом остались довольны, в общем как и сам заказчик.
Дизайн Главной
Так как основной акцент был на продуктовых страницах и страницах об услугах компании, главная страница выполняла роль разводящий между ними. Сделали страницу емкой, содержащей только самую важную информацию о компании, разместили в главном экране 4 карточки с продуктами и услугами компании.
Адаптивы и подготовка к верстке
Четвертый этап | 3 дня
Оставался последний, но очень важный этап со стороны дизайнеров. От него зависит, насколько легко верстальщику будет работать и насколько продуманной получится вёрстка. Мы адаптировали дизайн всех страниц под мобильные устройства, продумали анимации и эффекты, подготовили все материалы, составили ТЗ и передали проект в вёрстку.
Верстка и оптимизация
Пятый этап | 20 дней
Сверстали сайт. Провели работу по оптимизации изображений для быстрой загрузки и SEO-оптимизации для правильной индексации поисковиками. Ускорили загрузку страниц сайта.
Добились идеальных показателей загрузки страниц и технической оптимизации, что положительно повлияет в дальнейшем на "оценку" сайта поисковыми системами.
Данные с pagespeed.web.dev:
Тестирование. Проверка. Передача
Заключительный этап | 3 дня
Тестирование сайта
Проверили готовый сайт на корректную работу в разных браузерах и на мобильных устройствах IOS и Android.
Проверка дизайна
Проверили итоговую верстку на наличие визуальных ошибок, сравнили с дизайн-макетами.
Проверка текста
Вычитали текст, перепроверили его на наличие ошибок и опечаток.
Итог
Передача заказчику
Полностью готовый сайт, выгрузили на хостинг заказчика, подключили необходимый домен, и передали проект заказчику.
На выходе заказчик получил корпоративный сайт, который позволяет целевой аудитории ознакомиться с продуктами и услугами компании, запросить консультацию или получить пробный период.
