Кейсы

Chromolab

Многостраничный сайт сети медицинских лабораторий в Москве и Санкт-Петербурге с возможностью оформления заказов на исследования онлайн.

Основные сведения о проекте:

Разработка: 6 месяцев
Платформа: Битрикс
Дизайн: Figma

Этап 1: Дизайн-макет

После составления технического задания и обсуждения проекта мы начали разработку дизайн макета сайта. Создание дизайна началось с составления brand-kit – подбор цветовых решений, шрифтов, размеров.

Следующим этапом мы начали отрисовку главной страницы сайта, чтобы подобрать стилистику, определить что нравится, что точно нет и найти тот самый концепт.

Было нарисовано 2 версии главной страницы и порядка 10-15 вариантов различных элементов, таких как меню, слайдеры, плитки навигации.

После утверждения концепта, мы приступили к разработке макета всех страниц сайта в 3 этапа:

Важные страницы - главная страница, каталог, карточка товара, оформление заказа.
Контентные страницы - информационные страницы, контакты, и тд.
Личные кабинеты - личные кабинеты врача и пациента

Разбивка дизайна на этапы позволяет ускорить процесс разработки макета. Заказчик не ждет полный срок разработки макета, а может видеть процесс и вносить корректировки по контенту на каждом этапе. В дизайне мы не сталкиваемся с проблемой "нужно все нарисовать по другому" потому что на каждом этапе видим изменения и можем их адаптировать на следующие страницы.

За 3 недели было нарисовано 20+ страниц сайта и после утверждения клиентом реализована адаптивная версия дизайн-макета под мобильные устройства. После чего проект перешел к команде разработки и началась верстка макета.

Этап 2: Верстка

На этапе верстки мы создаем макет будущего сайта на основе дизайна. Важнейшая задача — точное воспроизведение дизайна и обеспечение его корректного отображения на всех устройствах и браузерах. Мы используем современные технологии HTML5, CSS3 и JavaScript для создания адаптивной верстки, которая будет выглядеть привлекательно и функционально на любых экранах — от мобильных телефонов до больших мониторов.

Что включает верстка:

Преобразование графического дизайна в HTML-код
Адаптивность и кроссбраузерность
Оптимизация производительности страниц

Этап 2: Разработка

На этом этапе наши разработчики внедряют серверную логику и базу данных, чтобы ваш сайт не только выглядел хорошо, но и работал эффективно. Мы используем лучшие технологии и фреймворки для создания надежных и масштабируемых решений, соответствующих потребностям вашего бизнеса.

Основные процессы разработки:

Подключение серверной части и базы данных
Настройка взаимодействия клиентской и серверной частей
Интеграция API и других сторонних сервисов

Этап 4: Личные кабинеты и тестирование

После разработки основного сайта мы начали реализацию личных кабинетов пациента и врача.
Перед нами стояла задача по созданию 2 личных кабинетов с синхронизацией ЛИС Альфалаб-ЕИП-МИС, с множественными показателями, графиками и данными.

Разработав дизайн-макет будущих кабинетов мы приступили к верстке, разработке и подключению сложных интеграций. Было важно внедрить хорошую систему безопасности, чтобы все данные оставались конфиденциальны. Задача была успешно реализована. Теперь сайт имеет два полноценных личных кабинета со всеми необходимыми данными и информацией для удобства клиента и персонала.

Этап 5: Тестирование

Перед запуском мы проводим тщательное тестирование продукта, чтобы убедиться, что он работает без сбоев и соответствует всем требованиям. Наши тестировщики проверяют каждую деталь: от пользовательского интерфейса до производительности на различных устройствах.

Что проверяем при тестировании:

Функциональность всех элементов, модулей
Кроссбраузерное тестирование
Производительность и нагрузочные испытания
Исправление ошибок и оптимизация

Отзыв клиента о нашей работе

Команда просто супер! Ребята точно знают свое дело. С точки зрения функциональности наша задача по сайту очень сложная и не каждому по силам сделать все интеграции. Ребята все сделали четко и оперативно. По дизайну отдельное спасибо, в нашей нише у нас теперь самый лучший и трендовый сайт. Причем не делают бездумно, а на каждом этапе дают конструктивные комментарии, как сделать оптимально и интуитивно для пользователя. Спасибо большое команде и продолжаем сотрудничество по другим нашим проектам.

_{Лариса, компания Chromolab}