Разработка автошаблона для создания лендинга по продаже аксессуаров

1.1 Лендинг: понятия, особенности создания и основные отличия
Лендинг (landing page, «посадочная страница») – одностраничный сайт в сети, главная задача которого заключается в том, чтобы заставить его посетителей выполнить некоторое активное действие:
• Звонок консультантам;
• Сделать заказ;
• Оставить заявку;
• Приобрести товар;
• Оформить подписку;
• Зарегистрироваться на сайте.
Из всех существующих разновидностей веб-ресурсов лендинг больше остальных ориентирован именно на продажи. Такая страница сводит информацию к минимуму, и имеет всего один посыл – побудить клиента к совершению необходимых действий. По сути, лэндинг – это инструмент интернет-маркетинга, ориентированный на увеличение продаж товаров или услуг в сети.
Главная цель лендинга – привлечь максимально возможное количество клиентов (лидов).
Основные отличия лендинга от обычных интернет-ресурсов, даже продающих, таких, как интернет-магазин:
1. Минимум информации.
…

1.2 Обзор типичных лендингов, основные моменты.
Как уже говорилось в разделе 1.1, типичность дизайна делает сайт более привлекательным. Оригинальность дизайна, необычность и яркость не является залогом успеха сайта. Если раньше сложный, креативный дизайн, нестандартное оформление, обилие анимации и подобные эффектные приемы был признаком серьезности ресурса, компании, то теперь внимание дизайнеров направлено на создание общего привлекательного восприятия. Дизайн стал более эффективным инструментом для манипулирования поведением пользователя. Особенно это правило действует в сферах, связанных с продажами. Структура сайтов стала все сильно унифицированной, а дизайн – более спокойным и менее оригинальным.
Существует схема создания лендинга, которой более или менее следуют абсолютно все создатели посадочных страниц (рис. 1.1).
Приведенная на рис.1.
…

1.3 Этапы построения лендинга
Создание лендинга – это информационно-технологический процесс, которых включает в себя все стадии жизненного цикла информационного продукта. В целом процесс абсолютно схож с запуском нового сайта и содержит те же части разработки, однако имеется ряд специфических особенностей, которые относятся только к лендингу.
Рассмотрим основные этапы разработки лендинг-пейдж [15]:
1. Заполнение брифа;
2. Заключение договора (реального или устного)
3. Написание продающего текста
4. Разработка прототипа лендинга
5. Разработка дизайна
6. Верстка
7. Загрузка на хостинг и получение домена
8. Подключение Google Analytics и Яндекс.Метрики
9. Подключение CRM-системы
10. Тестирование работы всего лендинга

Рассмотрим этапы, связанные непосредственно с реализацией, более подробно.
Заполнение брифа подразумевает работу с клиентом.
…

1.4 Постановка задачи разработки шаблона для создания лендинга
Создание хорошего лендинга – непростая задача, над которой работает команда: маркетологи, дизайнеры, верстальщики и копирайтеры. Описывать товар или услугу необходимо кратко и четко, не перегружая читателя, привлечение в виде бонусов и акций должны быть убедительными, ведь именно они подталкивают потенциального клиента предпринять необходимое действие.
Однако, как уже было рассмотрено в п.1.1-1.3, при всей сложности дизайнерских и маркетинговых решений, состав лендинга достаточно шаблонный: одни и те же виды, формы, блоки, которые можно собирать в одну страницу.
Есть хорошие сервисы для создания лендингов. В этих сервисах есть готовые компоненты, блоки, которые добавляются друг за другом. По отзывам экспертов [12], составлять страницу из уже готовых модулей (текст, картинки и т.д.) гораздо удобнее, чем конструктор.
…

2.1 Требования к коду и верстке
Хотя стандарты в области верстки носят в основном рекомендательный характер, важно, чтобы код был качественным. Качественный код позволяет странице не только правильно отображаться в соответствии с заданным дизайном, но и быстрее грузиться, лучше обрабатываться поисковыми системами. Для этого нужно соблюдать некоторые требования к верстке. Тем более, при создании страницы, которая также может использоваться как шаблон для создания сходных страниц на его основе.
Прежде всего рассмотрим, что нужно делать и чего нельзя допускать в верстке, по мнению экспертов [18, 19]:
1. Всегда закрывать теги;
2. Объявлять правильный DocType.
Doctype идет перед открывающимся тегом наверху страницы и говорит браузеру, содержит ли страница HTML, XHTML, или соединение обоих, так, чтобы это могло правильно интерпретировать расположение.
Большинство выбирает между четырьмя различными doctypes, создавая новые вебсайты.
…

2.2 Реализация лендинга
В дипломной работе разрабатывается лендинг для продажи аксессуаров, а конкретно – часов и портмоне. На основе разработанного по этой теме лендинга будет создан шаблон (раздел 2.3), с взаимозаменяемыми блоками.
Для начала нужно разработать структуру страницы разрабатываемого лендинга. Вначале это общий макет, включающий все основные блоки (рис. 2.1).
Это наиболее полная структура. Все ее элементы можно отключить от создаваемого лендинга. Например, раздел каталог в шаблоне делится на подразделы мужские и женские, так как создается лендинг для продажи мужских и женских часов и портмоне, но также можно создать любые разделы или оставить один. Аналогично, можно сделать меню вверху страницы статичным, изменив соответствующие настройки в css.
Также приведенная на рис. 2.
…

2.3 Шаблон лендинга. Варианты оформления
После того, как все модули сделаны, можно внести дополнения, чтобы использовать проект как шаблон.
Так как мы делаем шаблон, «рыбу» для будущих работ, своих и других верстальщиков, нужно подробно комментировать код страницы и css, оставляя пометки, чтобы можно было быстро разобраться.
Также все разделы шаблона должны быть независимыми, для того, чтобы любой блок можно было безболезненно отключить, при этом полностью сохраняя стиль и соотношение на лендинге.
Еще одно важной частью являются стили. В документы css вписаны комментарии, обозначающие основной, вспомогательный и контрастный цвета шрифтов и элементов. В разработанном шаблоне в роли основного цвета шрифта используется черный и белый, а вспомогательного – синий. Контрастным является оранжевый. Контрастные цвета привлекают внимание к объекту, в нашем случае – это форма заказа.
Также сделаны несколько вариантов подключаемых стилей main1.css, main2.css, main3.
…

2.4 Реализация лендинга и сопровождение шаблона для пользователей
Выше уже упоминались понятие кроссбраузерности разработанного шаблона. Все вышеприведенные рисунки были скриншотами лендинга в базовом браузере разработки Google Chrome. Осталось протестировать его в других основных браузерах: Opera, Mozilla Firefox, Yandex (рис.2.19-21), взяты последние версии браузеров.
Internet Explorer больше не поддерживается производителем, и хотя им иногда пользуются, как правило, современные сайты и лендинги тестируются на него только по желанию заказчика.

Рисунок 2.19 – Кроссбраузерность. Mozilla Firefox

Рисунок 2.20 – Кроссбраузерность. Opera

Рисунок 2.21 – Кроссбраузерность. Yandex

Для запуска шаблона на локальном сервере, его папку avto-shablon нужно поместить на локальный сервер (в папку localhost для Denwer, OpenServer, XAMP и т.д.). Запустив локальный сервер, набрать в адресной строке localhost/avto-shablon/index.html.
…

3.1 Расчет затрат на амортизацию технических средств
Для создания шаблона лендинга применялся ноутбук Lenovo (процессор AMD A10, 8Гб ОЗУ, SSD 120Гб, HDD 500Гб), стоимость которого составляет SТС 42000 руб. Норма амортизации технических средств равна 20 % от их стоимости.
Для создания сайта, являющегося конечным результатом разработки, применялось следующее программное обеспечение:
• операционная система Windows 10;
• Локальный сервер (OpenServer);
• Графический редактор (AdobePhotoshop);
• Редактор для программирования кода (Notepad++);
• Браузеры;
• Инструмент для определения размера (mySize).
Windows 10 поставляется вместе с ноутбуком, и ее стоимость входит в стоимость ноутбука. Практически все программы являются бесплатными или условно-бесплатными, кроме Adobe Photoshop (26000 руб.). Общая стоимость программного обеспечения SПО составляет 26000 руб.
Общая стоимость технических средств и программного обеспечения SО:
, (3.1)
SО = 42000 + 26000 = 68000 руб.
…

3.3 Расчет заработной платы программиста
Исходя из фактически затраченного на создание шаблона лендинга времени, а именно 20 восьмичасовых рабочих дней, найдем количество фактически отработанного времени:
Тд = 20 · 8 = 160 ч.

Часовая заработная плата рассчитывается по формуле:
ЗПчас = О/(Тср.м ∙ Враб ) , (3.5)
где О – оклад в месяц;
Тср.м – среднемесячное число рабочих дней в году.
Среднемесячное число рабочих дней в 2017 году равно 20,33 дня. При окладе программиста 30000 рублей в месяц часовая заработная плата составит:
30000/ 20,33·8 ≈ 184,43 рублей
Основная заработная плата программиста за время создания шаблона:
ЗОСН = Тд · ЗПчас = 160 · 184 = 29508,2 руб.
Для определения общей суммы расходов на оплату труда необходимо учесть доплаты и надбавки. Доплаты и надбавки составят 10 % от основной заработной платы:
ЗДОП = ЗОСН · 0,1, (3.6)
ЗДОП = 29508,2 · 0,1 = 2950,82 руб.
Общие расходы на оплату труда составят:
Зобщ = ЗОСН + ЗДОП , (3.
…

3.4 Расчет общих затрат на создание пакета программ
Общие затраты на создание шаблона лендинга определяются по формуле:
СПР = ЗАМ + ЗЭ + ЗР + ЗСО, (3.8)

Таким образом, общие расходы на создание шаблона лендинга составят:
1226,23 + 445,12 + 32459,02 + 9737,70 = 43868,07 руб.

В данном разделе рассчитаны затраты на разработку шаблона лендинга. Исходя из проведенного анализа затрат, их сумма составит 43868,07 рублей.

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

2. Заключение договора (реального или устного)
3. Написание продающего текста
4. Разработка прототипа лендинга
5. Разработка дизайна
6. Верстка
7. Загрузка на хостинг и получение домена
8. Подключение Google Analytics и Яндекс.Метрики
9. Подключение CRM-системы
10. Тестирование работы всего лендинга

Рассмотрим этапы, связанные непосредственно с реализацией, более подробно.
Заполнение брифа подразумевает работу с клиентом. Бриф (от английского brief) – небольшая анкета между клиентом и исполнителем, в которой определены различные исходные данные и пожелания заказчика. Несколько отличается от технического задания, поскольку в основном направлен на маркетинг и таргетирование целевой аудитории.
…

Литература
1. Рынок интернет-торговли России. Итоги за первый квартал 2017 года. [Электронный ресурс]: АКИТ, Ассоциация компаний интернет-торговли, 2017. URL: http://www.akit.ru
2. Вирин, Ф. Интернет-торговля в России 2017. Цифры и факты [Электронный ресурс] Data Insight, Исследовательское агентство, 2018. URL: http://datainsight.ru/
3. Alexandre N. Tuch, Eva E. Presslaber, Markus Stocklin, Klaus Opwis, Javier A. Bargas-Avila, The role of visual complexity and prototypicality regarding first impression of websites: Working towards understanding aesthetic judgments. University of Basel, Department of Psychology, Center for Cognitive Psychology and Methodology, Switzerland, 2012.
4. Katharina Reinecke, Tom Yeh, Luke Miratrix, Rahmatri Mardiko, Yuechen Zhao , Jenny Liu, Krzysztof Z. Gajos, Predicting Users’ First Impressions of Website Aesthetics With a Quantification of Perceived Visual Complexity and Colorfulness, 2012. http://www.eecs.harvard.edu/, Harvard.
…