Кейс по созданию интернет-магазина для компании «Медсистемс»
Кратко о проекте
Клиент: компания «Медсистемс» поставляет полимерные медицинские изделия и средства реабилитации от ведущих производителей. Занимая лидирующие позиции в своей сфере, компания работает на благо людей с медицинскими потребностями деликатного характера.
Задача: создание интернет-магазина «под ключ» по продаже полимерных медицинских изделий.
Сайт: medsystems.pro
Сроки: 25 рабочих дней
Стоимость: 72 700 руб.
Включено в стоимость:лицензия СS-Cart (19 500 руб.), работы по прототипированию и дизайну основных страниц сайта, вёрстка макетов, установка и настройка системы управления CS-Cart и обучение администрированию интернет-магазина.
Проектная группа
Дмитрий Егоров технический директор |
Елена Демакова дизайнер сайтов |
Илья Микшиев интернет-маркетолог |
Максим Морозов верстальщик сайтов |
Этап 1. Сбор информации. Первое приближение
На первом этапе мы погружаемся в сферу деятельности Заказчика, чтобы понять:
- чем занимается компания;
- чем она выгодно отличается от конкурентов;
- кто является потенциальным клиентом кампании (портрет клиента);
- особенности продукта или услуги и многое другое.
Для всего этого, кстати, нами был внедрён детальный бриф (анкета) на создание сайта, в которой мы задаём правильные вопросы, а Заказчик, отвечая на них, предоставляет нам ценную информацию для старта проекта.
Конечно, исследование рынка ещё никто не отменял. Изучив сайты конкурентов (и иные материалы по интересующей нас тематике) и сопоставив эти данные с данными из брифа, мы делаем выводы и переходим к следующему этапу разработки сайта.
Этап 2. Прототипирование страниц
На втором этапе, когда у нас уже есть вся необходимая информация по проекту, мы приступаем к прототипированию, а точнее - к проработке структурных схем страниц. Об этом подробнее чуть ниже, а пока мы предлагаем Вашему вниманию один из набросков, на основании которого был создан прототип Главной страницы будущего интернет-магазина.
Подобные наброски помогают в визуализации структуры и расположению элементов страницы. По ходу, конечно, мы можем что-то менять и привносить, но без кардинальных изменений. Подобных набросков бывает достаточно много, перед тем как утверждается рабочий вариант, на основе которого делается прототип страницы.
Прототип разрабатывается в специальной программе и предоставляется Заказчику, как правило, в формате изображения, либо, если прототип интерактивный, - в формате HTML. Вот пример конечного прототипа для сайта компании «Медсистемс»:
Как Вы видите, подобное схематичное изображение основных элементов сайта позволяет и Заказчику и Исполнителю видеть «скелет» каждой конкретной страницы будущего сайта. Можно при согласовании прототипа внести необходимые правки, дополнить или убрать что-то лишнее и т. д. Что позволит в дальнейшем избежать ситуации, когда при сдаче готового на 95% проекта начинаются доделки и переделки, которые могут привести к удорожанию проекта и к сдвижению сроков по его сдаче.
Этап 3. Дизайн
На данном этапе проект обретает свой внешний вид, цвета и настроение. Как известно, даже хороший продукт без привлекательной и продуманной упаковки продать будет довольно сложно. А дизайн интернет-магазина должен, с одной стороны, отражать суть реализуемой продукции и помогать посетителю ориентироваться на сайте, а с другой стороны – не мешать посетителю выбирать и не отвлекать его от покупки.
В любом случае дизайн строится на основе определенных ассоциаций. И в данном случае в дизайне необходимо было воплотить заботу о людях с определёнными деликатными проблемами. За основу были взяты светлые сдержанные цвета и изображения людей на фоне природы.
Вот пример подборки изображений:
После переработки собранного материала наш дизайнер подготовил для Заказчика макет Главной страницы. В ходе согласования макета были произведены некоторые дополнительные работы и внесены правки. В итоге, вот такой дизайн-макет Главной страницы был полностью согласован и отправлен в вёрстку:
Затем, после сдачи Главной страницы, последовал дизайн типовой страницы категории товаров, карточки товара и оформления заказа. Плюс отдельно мы предоставили страницу с типографикой, то есть начертанием элементов сайта: заголовков, списков, текста, выделений и сносок. Примеры макетов смотрите ниже:
Макет страницы категории товаров | Макет страницы карточки товара |
Макет страницы оформления заказа | Страница с типографикой сайта |
Этап 4. Вёрстка и настройка системы управления
Вёрстка макета, обычно, осуществляется на основе какой-либо системы управления. И, конечно, ещё до начала работ по проекту, мы определились с её выбором. В данном случае мы однозначно рекомендовали CS-Cart – передовую систему управления для электронной торговли. К тому же она очень простая в администрировании, имеет богатый функционал в базовой версии и широкую поддержку в России и зарубежом. Подробнее о системе CS-Cart читайте здесь.
Этап 5. Домен и хостинг
На заключительном этапе мы:
- регистрируем домен и хостинг (рекомендуем Beget);
- затем готовый сайт, наполненный тестовой информацией, мы выкладываем на наш тестовый хостинг;
- далее мы вместе с Заказчиком тестируем сайт, проверяем его работоспособность;
- после чего выкладываем сайт на хостинг Заказчика и предоставляем все данные для доступа к сайту.