28/08/2015
Создание сайта интернет магазина. Пошагово.
Всего 9 шагов! Каждый шаг расписан отдельно и подробно, чтобы у вас сложилось базовое понимание процесса создания сайта интернет-магазина.
Статья НЕ для тех, кто хочет за один день открыть сайт на шаблонном дизайне с бесплатным хостингом и еще заплатить за это деньги. Опыт показал, что если у людей такой подход, то они и от бизнеса не ждут особо большой отдачи. Гораздо интереснее рассказать эту информацию людям, которые серьезно подходят к вопросу и хотят досконально разобраться в информации, чтобы их:
- Не обманули;
- Не кинули на деньги;
- Не сорвали сроки;
- Не подсунули левый дизайн, приняв его за уникальный;
- Не подвели с реализацией проекта.
Главная задача любого сайтостроителя – показать открытость всех процессов заказчику, дать ему возможность непосредственно участвовать в создаваемом проекте и не допускать ситуации когда месяц прошел, а результатов нет. Все это достигается разделением всей работы на небольшие участки, на каждом из которых выбирается дальнейшая стратегия развития проекта. Именно такой подход дает наибольшую удовлетворенность от проекта заказчиком, а количество правок после принятия работы сводится к минимуму. И наверняка у большинства нет понимания того как вообще создается сайт интернет-магазина, так ведь? Осознав все этапы создания сайта интернет-магазина, вы обеспечите себе более чуткий контроль за ходом работы на стороне исполнителей, сможете адекватно принимать промежуточную и финальную работу, а также с легкостью позволите себе сразу отсечь недобросовестных исполнителей, которые будут предлагать сделать сайт за 5000 и за 3 дня. НЕ ВЕРЬТЕ ИМ.
Этапов в создании рабочего сайта интернет-магазина всего 9:
1) Заполнение брифа и технического задания;
2) Выбор системы администрирования сайта (движок, CMS);
3) Прототипирование;
4) Подготовка дизайн-макета и его утверждение;
5) Начало подготовки контента для сайта (описание товаров, фото, статьи и пр.);
6) Верстка и подключение сайта к CMS;
7) Начинаем наполнять контентом сайт;
8) Тестирование сайта;
9) Подключение систем статистики и настройка целей;
Введение.
К тому моменту как вы начнете готовить техническое задание, вы уже должны будете примерно определиться с поставщиками, курьерскими службами для интернет-магазина и решить как оформить юридически свой интернет-магазин, так как времени останется совсем немного. При условии создания собственного интернет-магазина с уникальным дизайном и 3-5 дополнительными модулями закладывайте на его разработку в среднем около 1-2 месяцев.
Шаг 1. Заполнение брифа и технического задания.
Несколько советов на этом этапе:
- Не стоит включать в техзадание слишком много работ. Вам главное запуститься;
- Вы можете воспользоваться нашими техзаданиями и просто исключить из них лишнее;
- Не придумывайте себе большое количество дополнительных модулей для CMS интернет-магазина, не усложняйте разработку. Откроетесь, поработаете и поймете чего именно вам не хватает. Тогда и закажете;
- Не стоит пренебрегать техническим заданием в принципе. Вы обезопасите себя от двух проблем. Первая: заранее обговорив объем работ, не получится такого, что исполнитель что-то не сделал и утверждает, что “Мы это не обсуждали”. Вторая: прописав объем работ в ТЗ, гораздо проще согласовать промежуточные и финальный сроки работ.
И напоследок, думайте головой и не ведитесь на поводу у недобросовестных заказчиков, которые говорят, что “Зачем нам ТЗ, ща все быро сделаю за неделю!”. Не ведитесь.
Шаг 2. Выбор системы администрирования (движок, CMS).
CMS
Как известно, нынче создана масса различных платных и бесплатных систем для администрирования сайта интернет магазина. И, на чем начнете работать, на том и продолжите. А перейти будет сложно по многим причинам (перенос контента, сохранение позиций в поисковой выдаче и так далее). Поэтому к выбору CMS отнеситесь со всей осторожностью. Прочитать про бесплатные CMS для интернет-магазина можно здесь: https://vk.com/topic-43251403_28719609.
Платно или бесплатно, спросите вы? Однозначного ответа на этот вопрос нет, так как каждый кто открывает интернет-магазин преследует свои цели. Кому-то будет вполне достаточно бесплатного движка, а кому-то и потребуется дорабатывать платный навороченный движок. Все зависит от целей.
Несколько советов при выборе:
- Имея ТЗ на руках, вы уже будете осознавать планируемый функционал. Сравнивайте платные и бесплатные движки на предмет максимального соответствия базового функционала к вашему ТЗ;
- Когда уже определитесь, старайтесь выбирать программистов и разработчиков, которые уже имели опыт общения с выбранной CMS;
- Обязательно перед выбором тестируйте как внешнюю (для покупателей), так и административную часть движка;
- Иногда, когда выбор почти сделан, имеет смысл пообщаться с владельцами уже существующих интернет-магазинов на предмет удовольствия от работы с выбранным движком. Подобные разговоры не раз приводили к получению бесплатных модулей, которые уже были разработаны интернет-магазином.
Постарайтесь не ошибиться при выборе. Если есть движок, который полностью вас устраивает, но стоит в пределах 10000, лучше купите. Ибо потом можете еще больше потратить на дополнительные разработки для халявной CMS.
Шаг 3. Прототипирование.
Многие даже не понимают зачем это. А зря! А ведь именно эта быстрая и черновая реализация основной базовой функциональности будущего интернет-магазина поможет решить множество проблем.
С помощью прототипа можно сразу расположить основные текстовые, графические и прочие интерактивные элементы. Заказчик сразу понимает как примерно будет выглядеть будущий сайт. Останется лишь наложить поверх все графические элементы и определиться с окончательным набором шрифтов.
Какие задачи позволяет решить прототипирование:
- Подготовка прототипов позволяет решить множество вопросов в плане будущего дизайна;
- Как только прототип будет утвержден, его сразу же можно передавать в верстку и подключение к движку, что позволит наполнять его контентом еще до появления окончательного дизайна. Поисковые машины уже могут начать индексировать контент, что положительно скажется на последующем продвижении интернет-магазина;
- Подготовка прототипов будет отличным “успокоительным” для вас, как для заказчика, так как вы уже на начальном этапе будете примерно понимать как будет выглядеть сайт.
Не ленитесь просить исполнителя подготовить прототипы.
Шаг 4. Подготовка дизайн-макета и его утверждение.
Дизайн-макет это окончательный, завершенный дизайн вашего интернет-магазина. Это набор изображений различных страниц, которые впоследствии передаются на программирование.
Посмотрите на прототип и на готовый дизайн-макет (ниже под текстом). Теперь вы понимаете зачем нужно прототипирование? Да, сходство не 100%, но все равно прототип сильно облегчает работу заказчика, исполнителя и процесс создания сайта интернет магазина в целом.
После того как будет утвержден прототип, вы как раз и сможете приступить к подготовке дизайн-макета, который будет изготовлен на основе ваших пожеланий в бриф листе. Поэтому имеет смысл подробнее излагать свои мысли в нем, ведь дизайнеры не могут оперировать желаниями клиента в стиле “Хочу классный дизайн!”, ведь это весьма субъективное понятие. Для того чтобы ваши ожидания минимально отличались от полученного результата, следуйте простым советам:
Максимально подробно заполните брифлист, поверьте, его читают и даже вчитываются;
Не следует жестко диктовать дизайнерам что именно надо делать, дайте волю их творчеству;
Дабы не делать лишнюю работу и платить за неё впоследствии, ВСЕ ПРАВКИ на дизайн-макете должны быть внесены ДО его утверждения. Что-то править на уже работающем сайте гораздо хуже, дольше и затратнее.
Шаг 5. Начало подготовки контента (описание товаров, фото, статьи и пр.)
Наступил момент, когда уже требуется начинать готовить контент для вашего интернет-магазина.
Что подразумевается под контентом:
- Описания товаров;
- Описания категорий;
- Статьи для вашего магазина на различную тематику;
- Описание условий доставки/оплаты и прочее;
- Подготовка изображений товаров или их запрос у поставщиков.
Для подготовки контента рекомендую использовать копирайтерский сервис Turbotext.ru. Там вы сможете найти себе исполнителя для написания текстов и даже поиска фотографий для ваших товаров и вашего интернет-магазина.
Советы по наполнению контентом сайта:
- Если товаров реально много, закажите тексты у копирайтеров. Средняя стоимость 1000 символов текста (а это около 5-10 товаров) составляет 40-100 рублей в зависимости от уровня копирайтера;
- Ни в коем случае не копируйте тексты или изображения с других сайтов! Это негативно скажется на вашем продвижении;
- Если у вас нет денег на написание новых текстов, вы можете заказать их рерайт. Просто создайте на турботексте задачу с рерайтом и укажите источник данных. Это существенно дешевле (от 20 рублей за тысячу знаков);
- Старайтесь готовить оптимизированные под поисковые машины тексты. Выделяйте основные элементы текста жирным шрифтом.
Шаг 6. Верстка и подключение дизайн-макета к CMS.
Что такое верстка сайта? Это обязательный процесс создания web-страниц по готовому дизайн-макету. В качестве макета обычно используется графический шаблон, созданный посредством Adobe Photoshop. Процесс верстки включает в себя создание на языке HTML кода страницы, который бы легко воспринимался браузерами, и оформление её с помощью каскадных таблиц стилей (CSS).
Простыми словами вы из дизайн-макета (картинки) сможете получить сверстанный сайт, по ссылкам на котором уже можно щелкать мышкой.
Что такое подключение сайта к CMS (движку сайта)? Оттестировав верстку, в руки программисту попадает HTML-документ, представляющий собой некий шаблон стиля, форматирования и разметки. Этот шаблон предусматривает отображение заданной информации в определенном формате в строго указанных местах этого документа. А движок (CMS) умеет хранить в базе информацию о том, какая конкретно информация для какой страницы должна быть выведена. Теперь необходимо «подключить» этот шаблон к CMS-системе. В итоге весь процесс этого этапа создания сайта интернет магазина заключается в модификации шаблона, и указывании в каждом конкретном его поле команды для получения данных из CMS-системы.
Несколько советов на этом этапе:
Ищите программистов, которые уже работали с выбранной вами системой администрирования;
После того как исполнитель отрапортует о готовности сайта, проверьте работоспособность согласно техническому заданию. После подписания акта о приеме работ, все доработки будут уже за деньги.
Шаг 7. Наполнение контентом.
Если вы не начали это делать после этапа прототипирования, то сейчас самое время начать.
Теперь необходимо наполнить интернет-магазин полученной от копирайтеров (или написанной вами) информацией.
Этот небольшой совет сделает вашу жизнь легче:
Вы можете отдать задачу заполнения товаров на сторону. Просто сделайте ограниченный доступ к данным системы администрирования чтобы работник мог только работать с товарами, соберите тексты и передайте задачу. Это сэкономит вам уйму времени.
Шаг 8. Тестирование.
Когда вы будете принимать проект от исполнителей, следуйте как минимум по данному списку тестирования:
Сверить дизайн-макет с работающим сайтом по следующим страницам:
- Главная страница;
- Страница каталога;
- Страница товара;
- Страница корзины;
- Шаги оформления заказа;
- Информационные страницы;
- Прочие страницы, для которых есть свой отдельный дизайн-макет.
Далее откройте раздел ТЗ с функционалом и пройдитесь по каждому пункту, проверяя его работоспособность;
Сделайте несколько тестовых заказов;
Проверьте как работают уведомления о заказе и как отображается информация о заказе в системе администрирования;
Бывает, что глаз уже “замылен”, поэтому пригласите к проверке друзей/родственников.
Только после полного тестирования сайта и получения положительных результатов, подписывайте бумаги о принятии работ.
Шаг 9. Подключение систем статистики и настройка целей.
Системы статистики это:
1. Google Analytics;
2. Яндекс.Метрика ;
3. Live Internet.
Для чего они нужны?
1. Для отслеживания источников траффика;
2. Для подсчета базовой конверсии (соотношение покупателей и посетителей);
3. Для подсчета второстепенных конверсий (посетитель –> зарегистрировавшийся, посетитель –> подписчик на новости и т.д.);
4. Для контроля эффективности рекламы;
5. Для отслеживания страниц входа, выхода и соответствующей корректировки.
На стартовом этапе хватит Google Analytics (предпочтительнее) или Яндекс.Метрики, поэтому не стоит сильно заморачиваться с установкой всех трех счетчиков.
Все, сайт готов к эксплуатации!
