Создание и продвижение сайта для бизнеса
Всем привет! Меня зовут Роман. С 2016 я года занимаюсь созданием, продвижением и поддержкой сайтов. И в этой статье я хочу поделиться с Вами своим опытом и рассказать о том, как правильно создавать и продвигать сайты для бизнеса.
В первую очередь моя статья будет полезна малому бизнесу и индивидуальным предпринимателям, которые хотят самостоятельно принимать участие или контролировать веб-разработку и продвижение своего бизнеса в интернете. А так же начинающим веб-разработчикам и маркетологам.
Я буду рад ответить на все возникающие у Вас вопросы, а так же обсудить конструктивную критику своих способов разработки и продвижения.
Забегая вперед, следует сказать, что успех продвижения сайта зависит равнозначно от обоих компонентов, как от создания сайта, так и от его продвижения. Нельзя сделать хороший сайт, а продвижением заниматься спустя рукава и ждать хорошего результата. Или наоборот, хоть как ты не продвигай не качественный сайт, результат не будет хорошим. По этому созданием и продвижением сайта нужно комплексно.
Создание сайта для бизнеса.
С точки зрения исполнителя, сайт для бизнеса можно создать:
- самостоятельно;
- с помощью фрилансера;
- с помощью веб-студии.
С точки зрения технологии, сайт для бизнеса можно создать:
- с помощью конструктора сайтов;
- с помощью CMS (системы управления сайтом);
- создать сайт с нуля.
Рассмотрим все варианты подробнее.
Создание сайта для бизнеса самостоятельно.
Лично я скептически отношусь к варианту создания сайта для бизнеса самостоятельно, т.к. для создания по настоящему эффективного сайта необходимы знания больше, чем просто пользователь ПК, и чем больше знаний и опыта в веб-разработке имеет исполнитель, тем более эффективный он может создать сайт. Если же у Вас нет таких знаний и опыта, Вы можете просто потерять время, которое могли бы уделить непосредственному развитию Вашего бизнеса. Из опыта скажу, что люди, которые начинают делать сайт самостоятельно «наигравшись», потеряв время, а иногда и деньги, все-таки решают обратиться к профессионалам. Из плюсов могу отметить лишь весьма сомнительную материальную сторону вопроса. По этому я не рекомендую создавать сайт для бизнеса самостоятельно.
Создание сайта для бизнеса с помощью фрилансера.
Вариант создания сайта для бизнеса с помощью фрилансера, наверное, самый распространенный. Это и понятно, потому что главными преимуществами этого способа являются минимальная стоимость и вполне приемлемое качество. Это оптимальный вариант для малого и микро бизнеса. Недостатком здесь может быть то, что при выборе фрилансера нужно быть осторожным и не нанять фрилансера с опытом и знаниями не на много больше, чем у Вас. Чтобы избежать этой ошибки, могу порекомендовать посмотреть портфолио работ фрилансера, почитать отзывы о нем, пообщаться с ним лично.
Создание сайта для бизнеса с помощью веб-студии.
Третий вариант создания сайта для бизнеса — это обратиться за помощью в веб-студию. Этот вариант подойдет для среднего и крупного бизнеса, с большими финансовыми оборотами, объемными и сложными задачами, которые необходимо решать в кратчайшие сроки. Благодаря большому количеству сотрудников, такие возможности и являются преимуществом веб-студий. Но количество — не всегда качество и в совокупности со стоимостью работ это является недостатком веб-студий.
Создание сайта для бизнеса с помощью конструктора сайтов.
В последнее время появилось и продолжает появляться большое количество разнообразных конструкторов сайтов. При создании сайта с помощью конструктора Вы собираете сайт как бы из уже готовых частей, заранее придуманных и созданных. Такой вариант подойдет для создания несложных одностраничных сайтов. Преимуществом этого способа является его максимально простое и понятное взаимодействие с человеком, рассчитанное, в основном, на людей совсем не знакомых с основами веб-разработки. Недостатками такого способа являются его дальнейшее развитие и продвижение, связанное с достаточно большими ограниченными функционалом и другими возможностями, а так же, в большинстве своем, регулярная плата за пользование конструктором.
Наиболее распространенные конструкторы сайтов и ссылки на официальный сайты:
Создание сайта для бизнеса на основе CMS.
Создание сайта для бизнеса на основе CMS.
Наиболее распространенным и не дорогим вариантом создания сайта для бизнеса будет вариант, при котором Вы просто покупаете (или даже скачиваете бесплатно) готовый сайт или шаблон сайта для определенной CMS и заменяете контент скаченного сайта на свой контент (тексты, изображения, контакты). Так как CMS существуют достаточно давно и некоторые из них (например, WordPress) очень популярны, в интернете очень легко найти сотни, если не тысячи, готовых сайтов или шаблонов на любой вкус и цвет. Для того, чтобы найти сайт с нужной темой и заменить имеющейся контент на свой, достаточно минимальных знаний. Если имеются более глубокие знания, сайт можно полностью изменить до неузнаваемости.
Наиболее распространенные CMS и ссылки на официальный сайты:
- WordPress (наиболее популярная и универсальная CMS);
- Drupal;
- Joomla!;
- MODX;
- Opencart (подходит для интернет-магазина);
- 1С-Битрикс (дорогая в обслуживании т. к. мало специалистов).
Создание сайта для бизнеса полностью с нуля.
Третьим вариантом создания сайта для бизнеса является создание сайта полностью с нуля: создание дизайна, верстка и программирование. Это только часть этапов. В общем достаточно сложный, долгий и дорогой процесс. Предполагается, что недостатки в виде высокой стоимости и длительных сроков разработки окупятся за счет высокой эффективности, но, к сожалению, это не всегда так. К преимуществам данного способа относятся индивидуальность и уникальность сайта. К недостаткам можно отнести высокую стоимость и длительные сроки разработки.
Какой способ создания сайта для бизнеса лучше?
В каждом конкретном случае наилучшим образом подойдет свой способ создания сайта. Например, для крупных компаний, с большими рекламными бюджетами, наверное, лучше обратиться в известную веб-студию с хорошей репутацией, которая сделает сайт полностью с нуля: проведет маркетинговые исследования, создаст уникальный и продающий дизайн и контент, сверстает, установит свою или одну из наиболее популярных CMS, настроит все под ключ и займется продвижением.
Небольшим компаниям и индивидуальным предпринимателям лучше подойдет способ создания сайтом у частных веб-разработчиков и фрилансеров. Так же в этом случае я бы рекомендовал создавать сайта на основе популярной CMS. Стоимость при таком варианте, как правило, небольшая, а сам сайт при необходимых знаниях и опыте, легко и эффективно поддается дальнейшему развитию и продвижению. В любом случае выбор остается за Вами.
Контент сайта для бизнеса.
В первую очередь, сайт создается для Ваших потенциальных клиентов, которые могли бы узнать о Ваших товарах или услугах, ознакомиться с ними, узнать их характеристики, преимущества и при желании купить или заказать. Поэтому, создавая контент сайта для бизнеса, нужно подумать за клиентов, чтобы им хотелось узнать о Вашем продукте или услуге, какие вопросы их интересуют, какие у них сомнения, т.е. провести маркетинговых анализ. И уже на основании этого анализа создать контент, который будет максимально полно отвечать на потребности Ваших потенциальных клиентов. Одно это уже даст Вам большое преимущество перед Вашими конкурентами, сайты которых зачастую создаются один на примере другого.
Пример контента сайта для бизнеса:
Пример контента сайта для бизнеса.
Как Вы считаете, на каком сайте скорее всего сделает покупку потенциальный покупатель? По-моему, ответ очевиден! А вам?
Также важно, чтобы на сайте было как можно больше способов связи с Вами: телефон, электронная почта, WhatsApp, Viber, Telegram, кнопка обратного звонка и онлайн чат.
Тоже самое можно сказать и обо всех популярных социальных сетях, способах оплаты и доставки. Думаю, это все можно не перечислять.
Качественные изображения для создания сайта.
Люди — визуальные существа. Мы обрабатываем изображения за 1/10 секунды и понимаем визуальную информацию в 60 000 раз быстрее, чем слова. С этой естественной тенденцией к визуальным эффектам, изображения продукта производят сильное, немедленное впечатление на Ваших потенциальных клиентов. Очень важно использовать четкие фотографии с высоким разрешением, которые подчеркивают детали продукта, чтобы быстро привлечь покупателей, не теряя их внимания.
Покажите несколько ракурсов вашего продукта с фотографиями, чтобы покупатели могли полностью представить себе товар и знать все его детали. Не имея возможности увидеть продукт лично, покупатели будут чувствовать себя более защищенными при покупке в интернете, если у них есть полное визуальное представление о товаре.
Вы можете добавить 360-градусный фото инструмент на страницах продукта, чтобы покупатели могли видеть весь вид продукта. Или включите функцию масштабирования на фотографиях продуктов, чтобы покупатели могли рассмотреть ваши товары более подробно.
Подробное описание Ваших товаров и услуг.
Покажите продукт изнутри (неочевидные преимущества). Допусти, вы продаете ботинки. Опишите из чего стельк, подошв, застежк, какие технологи, заниженный подъём и тд. Покажите т, что не видно. Расскажите о скрытых преимущества, которые не очевидны вашему клиенту.
Сделайте отличную презентацию или «упаковку” вашего товара или услуги. Посмотрите как это делают коллеги из любого “магазина на диване». Наприме, тут: http://online-red.online/tv/top-shop.html. Они обычную тёрку преподносят та, как будто это технология из будущего.
Тестирование сайта.
После создания сайта его необходимо протестировать. Проверьте, как работает Ваш сайт на разных устройствах и в разных браузерах. Проверьте, как он смотрится. Везде ли он отображается одинаково красиво, ничего ли не съезжает, не искажается. Везде ли контент сайта читается удобно и понятно. Везде ли удобно нажимать на кнопки, ссылки меню. Возможно, есть факторы, мешающие комфортному просмотру контента или что-то совсем не работает. Я знаю о случаях, когда только через несколько месяцев выяснилось, что не работала кнопка заказа товара и люди не могли что-либо заказывать. Проверять работоспособность сайта нужно не только на Вашем домашнем компьютере или Вашем мобильном телефоне. Обязательно проверьте на всех популярных устройствах, таких как телефон, планшет, ноутбук и ПК. А так же во всех популярных браузерах: Яндекс.Браузер, Google Chrome, Opera Browser, Safari, Microsoft Edge, Mozilla Firefox и других.
Как создать сайт для компании
Сайт – это не просто лицо компании. Это площадка, которая является помощником бизнеса в решении различных задач. Сайт позволяет увеличить эффективность продаж, улучшить внутренние и внешние коммуникации, повысить узнаваемость бренда, а также запустить ряд новых рекламных кампаний. Вместе с этим работающий сайт, конечно же, улучшает репутацию организации и привлекает новых клиентов.
Чтобы сделать его эффективным и продающим, следует придерживаться некоторых правил. Что это за правила и как создать сайт для своей компании – поговорим в сегодняшней статье.
Шаг 1: Подбираем референсы
Разработка сайта чаще всего начинается с подбора различных референсов. Благодаря им можно определиться с примерной цветовой схемой, структурой и самим типом сайта.
Референсы – это вспомогательные изображения, в нашем случае макеты сайта, к которым регулярно обращаются дизайнеры во время работы. Примером этому могут быть как готовые веб-ресурсы, так и простые картинки из интернета.
Прежде чем приступать к анализу референсов, определимся, откуда мы будем брать источники для вдохновения. Рекомендую обратить внимание на следующие сервисы:
- Behance;
- Pinterest;
- Google Картинки;
- Yandex Картинки;
- MadeOnTilda.
Возьмем для примера Behance – это профессиональная международная площадка, куда миллионы пользователей ежедневно выгружают свои дизайнерские работы. Там можно найти не только макеты сайтов, но и интерьеры квартир, рукописные картины и многое другое.
- Открываем официальную страницу площадки и вводим в поиске интересующее название. Предположим, что наша компания занимается строительством домов. Референсами этому станут сайты строительной тематики, которые можно найти через запрос «Строительство домов».
- В итоге перед нами отображается список различных макетов выбранной категории. Посмотрим, что под ними скрывается – откроем для примера вариант с корпоративным сайтом.
- После открытия проекта мы видим готовый макет сайта с различными пояснениями, где дизайнер рассказывает о задаче, решении, типографике, цветовой гамме и многих других аспектах, которые были учтены во время разработки сайта.
Особое внимание обратите на цвет сайта, его типографику, количество блоков, их наполненность и расположение. Проанализированные данные лучше всего записать в блокнот либо таблицу – рекомендую описать 3-5 референсов. Такого количества примеров вполне хватит, чтобы определиться с прототипом будущего сайта.
Важно понимать, что референсы – это не готовый шаблон, по которому можно делать сайт. Это лишь пример, показывающий, как можно сделать сайт. Берите во внимание различные дизайнерские решения и пробуйте их в собственном макете, но не копируйте весь макет – такой подход ни к чему не приведет.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Шаг 2: Анализируем конкурентов
Референсы это, конечно, хорошо, но на них одних далеко не уедешь, так как стоит учитывать еще и конкурентов. Предположим, что мы нашли «идеальный» пример макета, на базе которого мы хотим разработать собственный сайт. В этом макете 10 различных блоков, фирменные цвета, все стильно, красиво, но есть одно но: все это уже используется у конкурента. Если сделать такой же сайт, хоть и с другим контентом, о его высокой эффективности мечтать не стоит. Клиент предпочтет конкурента, который уже давно вышел на рынок, нежели вас, только что появившегося в интернете.
Анализ конкурентов поможет избежать копирования блоков, цветовой схемы и прочих элементов. Если у вас уже есть фирменный цвет, то обязательно используйте его, несмотря на то что он есть у конкурентов. Просто добавляйте свои «фишки», дополнительные блоки и больше интерактивности, экспертности.
Найти конкурентов можно через любой поисковик. Например, введем в гугле «Строительство домов в Москве» и увидим кучу различных сайтов компаний:
Тут все точно так же, как и с референсами, – смотрим, анализируем и выписываем все то, на что обратили внимание. Вместе с этим учитываем рассмотренные ранее референсы и подводим итоги. Также можно сделать таблицу с сайтами, которые понравились и не понравились, чтобы к ним можно было легко вернуться при необходимости.
Шаг 3: Создаем сайт для компании
Подобрав референсы и проанализировав конкурентов, можно переходить к разработке сайта. Вы спросите: «А что, сайт можно сделать самому?». Да, это возможно. Ранее создание сайта занимало много времени, требовались программисты, дизайнеры, маркетологи, копирайтеры. Такой подход до сих пор практикуется и очень хорошо себя показывает, но только для тех, у кого есть на это средства. Если же вы ограничены бюджетом, то можно хорошо сэкономить, заплатив лишь за тарифный план онлайн-конструктора.
Конструктор сайтов – это инструмент, позволяющий без знания программирования проектировать и создавать различные сайты: интернет-магазины, лендинги, многостраничники и визитки.
В качестве конструктора возьмем популярный сервис Craftum, позволяющий разрабатывать сайты как на основе шаблонов, так и с помощью особого инструмента «Дизайн-блок». В последний можно добавлять свои элементы сайта и располагать их в любом порядке. В данном руководстве мы будем «собирать» сайт на основе шаблона, но после этого вы всегда сможете изучить дополнительные фишки конструктора самостоятельно.
Воспользуемся инструкцией для создания сайта:
- Переходим на официальную страницу конструктора и жмем на «Создать сайт бесплатно».
- Вводим контактные данные и жмем на «Создать сайт».
- Таким образом, мы попадаем на главную страницу конструктора, откуда и начнем путь разработки. Первым делом давайте определимся с шаблоном, на основе которого будем конструировать собственный сайт. Ранее мы говорили о строительстве домов, поэтому давайте продолжим раскрывать эту тему и возьмем связанный с этим шаблон. Переходим в раздел «Недвижимость» и выбираем «Строительство домов».
- Выбранный шаблон уже хорошо проработан, и нам, по сути, нужно поменять лишь текстовую часть, контактные данные, картинки, а также настроить форму отправки заявок. Давайте это и сделаем – первым делом поменяем заголовок и описание на главном экране. Такая конструкция называется «оффером (предложением)» – это одна из главных конструкций, на которую пользователь обращает внимание в первую очередь. Она позволяет зацепить клиента и рассказать ему, что здесь вообще происходит. Заголовок рассказывает, что на этом сайте можно найти, какую проблему решить, а подзаголовок раскрывает особенности компании, ее преимущества. Например, мы можем сделать так: «Строительство домов в Москве», «Индивидуальный подход к каждому заказчику. Мы занимаемся строительством современных домов бизнес-класса».
- Теперь давайте поменяем фоновое изображение – здесь мы можем загрузить свое либо выбрать фото из галереи сервиса. Рекомендую размещать собственные картинки, так как это добавляет экспертности. Если же фотографий нет, то можно воспользоваться бесплатными стоковыми ресурсами, например Unsplash. Так и поступим – найдем там подходящую под нашу тематику фотографию и скачаем ее на ПК. Чтобы добавить фото на первый экран, для начала откроем окно «Фоновое изображение».
- Загружаем свое изображение и жмем на «Использовать в блоке».
- Как видим, изображение было изменено, теперь давайте отредактируем кнопки таким образом, чтобы они приводили в нужное нас место. Для этого откроем настройки блока:
- Первую кнопку сделаем якорной, чтобы она приводила нас к блоку с проектами. Сделать это можно через раздел «Контент» – находим там кнопку №1 и раскрываем ее настройки. В разделе «Тип ссылки» указываем «Якорная ссылка», а в «Блок» выбираем «Блок goods07».
- Перейдем к следующей кнопке – «Оставить заявку». Она должна открывать всплывающее окно с формой, в которой пользователь сможет оставить заявку для получения консультации. Чтобы так сделать, раскрываем параметры Кнопки №2 и указываем «Тип ссылки» -> «Всплывающее окно». В подразделе «Блок» выбираем «Добавить новый блок».
- Таким образом будет добавлен новый блок с формой. Давайте отредактируем ее под себя через кнопку «Настроить».
- В разделе «Контент» пропишем заголовок «Закажите консультацию» и подзаголовок «Оставьте свои контактные данные, и мы ответим на все интересующие вопросы».
- Также давайте удалим лишние параметры формы – оставим только ввод имени и телефона. Текст кнопки поменяем на «Заказать консультацию» – такое название больше подходит, так как в заголовке формы мы уже призываем пользователя заказать консультацию.
- Последнее, что нам нужно, – указать, куда будут отправляться данные с формы. Сделать это можно через раздел «Форма» -> «Отправка данных с формы» -> «Куда отправлять результаты?».
- На этом редактирование первого экрана завершено. Можно посмотреть, как он будет выглядеть в мобильной версии – для этого предназначены специальные кнопки проверки адаптации, расположенные в верхней части экрана.
- Кликнув по крайней правой кнопке, экран сразу сузится, а весь сайт станет отображаться так, будто мы зашли на него с телефона.
- Как видите, в мобильной версии кнопки довольно крупные. Отредактировать их размер и прочие дизайнерские элементы мы можем в соответствующем разделе настроек блока.
- Аналогичным образом потребуется изменить каждый блок сайта. Если нужно удалить блок, то сделать это можно с помощью специальной кнопки.
- После того как все блоки будут проработаны, потребуется опубликовать сайт, то есть выпустить его в интернет. Для этого предназначена специальная кнопка «Опубликовать».
- Открыть сайт можно сразу после публикации с помощью кнопки «Открыть страницу» либо через кнопку в верхнем правом углу.
Обратите внимание на то, что после публикации сайту назначается тестовое доменное имя. Если вы не планируете развивать свой веб-ресурс, а решили сделать его ради интереса, то такой домен подойдет. Если же для вас сайт – это решение проблем бизнеса, то без хорошего домена вас будет не только сложно найти, но и сама репутация сайта будет страдать.
Оплатив ежегодный тарифный план в конструкторе Craftum, можно получить бесплатный домен в зонах .ru, .рф, .host, .website, .space, .site, .online, .fun.
Конструктор Craftum в Telegram и VK
- Получайте полезные материалы и подборки по созданию сайтов от экспертов
- Обсуждайте тренды дизайна и актуальные вопросы
- Узнавайте первыми об акциях и скидках на конструктор
Подписаться в Telegram:
Подписаться в VK:
Как создать сайт для бизнеса самостоятельно
Электронная коммерция — развивающееся настоящее и предсказуемое будущее торговли в целом. В интернете продаётся всё — от одежды и привычных предметов для дома до самых необычных услуг, например предсказаний астролога.
Залог стабильно высокой прибыли — правильно оформленная торговая онлайн-площадка. При этом не всегда необходима профессиональная разработка за большие деньги. На рынке информтехнологий (ИТ) обширно представлены цифровые инструменты для самостоятельной вёрстки сайта с пошаговыми инструкциями по оформлению коммерческого онлайн-ресурса с нуля.
Изображение на Unsplash
Нужен домен и хостинг
К любому способу разработки обращаются только тогда, когда сформулирована теория: концепция, понимание будущего контента, цели и задачи. Первый технический вопрос, который необходимо решить, это подбор доменного имени и персонального виртуального места в сети. Сайт начинается с домена и хостинга, как театр с вешалки.
Домен — это понятный адрес в интернете. Интернет, как и города, поделён на «кварталы», или области. Доменные имена бывают разных уровней:
- первого (.ru, .com и другие);
- второго, или корневого, который расположен перед первым и указывает на название ресурса (например, yookassa.ru);
- третьего, обозначающего дополнительные структуры или подразделы: к примеру, компании для каждого филиала в стране включают в доменное имя веб-страниц краткое название города — msk.site.ru;
- последующие уровни также выделяют подразделы, но их использование усложняет название сайта и его восприятие пользователями.
Есть несколько рекомендаций, которые применимы при регистрации домена. Например, не надо писать слишком длинное имя, а вместо подчёркивания лучше использовать дефис.
Хостинг — это пространство на сервере провайдера и маленькая часть сети в аренду. По той же аналогии с городом — это выделенный земельный участок со всей необходимой инфраструктурой и коммуникациями. Без доменного имени и хостинга пользователи просто не найдут сайт в сети.
Виртуальное пространство арендуется в высокопроизводительных дата-центрах с мощным серверным оборудованием и бесперебойной работой. Для онлайн-продаж лучше выбирать серверы, расположенные в России.
От качества этих услуг зависит стабильность и работоспособность площадки. Они, как правило, платные, но некоторые конструкторы и платформы для разработки сайтов предоставляют их бесплатно в пакетном формате.
Выбор платформы
Чтобы написать сайт с нуля, нужны уверенные навыки работы с кодом или определённый бюджет на оплату услуг разработчиков. Это актуально для крупных компаний с большими оборотами. На старте бизнеса или при его малых формах сайт можно собрать самостоятельно с помощью конструкторов или «движков» CMS (англ. «Content Management System» — система управления контентом сайта).
Конструктор сайта для продажи товаров
Создание происходит на основе готовых блоков, которые нужно собрать в единое целое в желаемом порядке. Сайт собирается из нескольких основных элементов:
- главный экран,
- изображение,
- текст,
- меню,
- каталог,
- навигация и другие.
Их можно комбинировать на своё усмотрение, видоизменять, корректировать дизайн, менять порядок расположения.
Возможности конструирования зависят от платформы и её наполнения. Некоторые содержат готовые тематические шаблоны, в том числе для интернет-магазинов. При этом персонализировать сайт в полной мере не получится, возможности вёрстки ограничены.
Среди преимуществ — в стоимость конструктора обычно уже входят домен и хостинг. Если же необходимо уникальное доменное имя, можно приобрести права на него и подключить к проекту в конструкторе.
Популярные CMS
«Движок» CMS — это многофункциональная система для полноценной вёрстки сайта на основе базовых шаблонов с широкими возможностями для дизайна и персонализации.
Можно попробовать разобраться самостоятельно с помощью инструкций от разработчиков, но для качественного оформления лучше привлечь дизайнера и верстальщика с опытом. Также при работе с CMS домен и хостинг приобретаются отдельно.
Разработанный таким образом сайт можно интегрировать с полезными сервисами:
- платёжными системами,
- агрегаторами доставки,
- социальными сетями,
- мессенджерами,
- системами управления взаимоотношениями с клиентами — CRM (англ. «customer relationship management») и так далее.
На российском рынке среди лидеров такие платформы, как WordPress, Joomla, 1С-Битрикс, MODx, Drupal.
Изображение на Unsplash
Создание структуры сайта
Структура сайта — это его схема, по которой выстроено размещение контента, навигация, перелинковка (взаимосвязь основных внутренних страниц, англ. «link» — связь), путь пользователя.
Сейчас существует четыре вида структур: линейная, линейная с ответвлениями, блочная и древовидная. Но наиболее универсальная и применимая для коммерческих целей — древовидная. Она удобна в восприятии и позволяет разграничивать разделы, создавать ответвления для отдельных товаров или описаний.
В дальнейшем понадобится продвижение площадки, поэтому уже на этапе формирования структуры нужно учитывать требования к ней поисковых систем, например, карту сайта в формате xml.
К основным элементам структуры сайта относятся также: заголовок, меню, кнопки навигации, разделы с контактами, информацией о компании и другие. При этом для коммерческих страниц важно правильно оформить категории товаров и фильтры сортировки.
Категории товаров
Все товары разбиваются на категории в подразделах с дополнительными классификациями. Тут важно отразить их в структуре каталога на сайте. Например, для категории «Верхняя одежда» далее раскрываются подкатегории «Куртки», «Плащи», «Пальто» и так далее. Каждая из подкатегорий также содержит свои подпункты — среди курток могут быть ветровки, пуховики, кожаные куртки и т. п.
Для пользователя вверху страницы размещается строка-подсказка — «хлебные крошки». Она содержит наименование всех открытых категорий и подкатегорий по порядку.
Формат может быть разным, но основная задача — помочь покупателю сориентироваться в ассортименте и быстро найти нужное.
Несколько рекомендаций по оформлению страниц каталога:
- визуализация красивыми изображениями;
- точные и понятные названия категорий;
- логичная разбивка на подкатегории;
- соответствие названия категории и содержащихся в ней товаров.
Учитываются также особенности поисковых систем. В названиях категорий лучше применять слова, которые пользователи чаще всего используют при поиске товаров в сети. Например, «узкие стиральные машины» или «комбинезон для девочки».
Фильтры для сортировки продукции
Сортировка помогает пользователю сузить круг поиска и сэкономить время. Поэтому в каталогах размещают фильтры с разными критериями выборки в зависимости от типа товаров. Для диванов это могут быть конструкция, тип ткани, цвет, вид ножек, способ раскладывания, форма и другие на усмотрение владельца магазина. Сумки можно отфильтровать по длине ручки, материалу, типу замка, стилю и прочим параметрам.
Чтобы точнее подобрать пункты фильтрации, нужно изучить запросы аудитории и максимально полно характеризовать каждый товар с целью найти общие черты.
Изображение на Unsplash
Заполнение карточек товаров
Карточка товара — это его вид на виртуальной витрине, который влияет на мотивацию покупателей. Признаки привлекательно оформленной карточки:
- профессиональные коммерческие фотографии, «продающие» товар;
- грамотный текст;
- подробное описание характеристик;
- подсказки по выбору размера;
- возможность поставить оценку и написать отзыв;
- подборки аксессуаров и похожих товаров;
- понятная цена без кнопок «Запросить цену»;
- информация о доставке и возврате;
- привлекательные дизайн, графика, геометрия;
- кнопки добавления в корзину или в избранное.
Каждая карточка — это уникальное торговое предложение (УТП), которое воздействует на эмоции человека и либо побуждает купить, либо уводит к конкурентам.
Дизайн сайта
Основа хорошего дизайна не только визуальная составляющая, но и удобство (юзабилити) — насколько интерфейс дружелюбен к пользователям.
При наполнении сайта нужно придерживаться правила трёх кликов, согласно которому посетитель должен добраться до нужного товара за три действия. Оптимально, если главная страница содержит строку поиска.
Ещё несколько особенностей дизайна:
- Простые шрифты. Покупатель не станет разбираться в замысловатой каллиграфии, ему нужно быстро найти товар. Поэтому лаконичное отображение букв предпочтительнее, как и использование не более чем двух шрифтов на одной странице.
- Палитра из трёх основных цветов. Избыток красок будет рассеивать внимание и раздражать.
- Мягкая подложка. Не надо использовать для фона пёстрые картинки. В тренде однотонные фоны, мягкие градиенты, трёхмерность.
- Единство стиля. Изображения, шрифты, цвета, графические элементы — всё должно соответствовать общей концепции.
- Размещение элементов и блоков на страницах по спирали «золотого сечения».
- Соблюдение правила трете́й, при котором страница делится на девять равных секторов горизонтальными и вертикальными линиями. Точки пересечения соответствуют зонам внимания посетителей.
- Иконки вместо текста. Всё, что можно обозначить графически, не стоит писать текстом. Например, значок корзины, поиска, линейка вместо фразы «Таблица размеров», иконки соцсетей и прочее.
Правила в дизайне значительно шире. Чтобы всё учесть, можно обратиться к профессиональному веб-дизайнеру. Он не только поможет с оформлением, но и проведёт адаптивную вёрстку, чтобы страница одинаково корректно отображалась на любых устройствах.
Продающие элементы
Продающими называют элементы, способные захватить внимание пользователя, замотивировать на покупку. К ним относятся:
- форма обратной связи;
- лид-магнит (англ. lead magnet — «выгодное предложение») на главной странице, например бесплатный урок или скидка на первый заказ;
- продающие SEO-тексты (англ. search engine optimization — «оптимизация под поисковые системы»);
- истории клиентов об успешном использовании продукции или услуг.
Надо регулярно анализировать рынок, конкурентов и добавлять новые «фишки».
Изображение на Freepik
Подключение онлайн-оплаты
Простая схема оплаты через интернет стимулирует спонтанные покупки. Если пользователь настроен купить здесь и сейчас, сложный алгоритм платежа может оттолкнуть его. Поэтому к сайту нужно подключить популярные способы оплаты.
Например, сервис ЮKassa используют более 120 000 магазинов в России. В основе его работы — интернет-эквайринг. Покупателю достаточно ввести свои платёжные данные и подтвердить покупку кодом из SMS или push-уведомления.
Платформа предлагает лояльные тарифы для бизнеса — для компаний с оборотом до 3 млн рублей в месяц это 3,5% с каждого успешного платежа.
Способы доставки
Покупатели хотят сразу видеть, какими способами может быть доставлен заказ и в какую сумму им это обойдётся. Если цена доставки появится только на последнем этапе оформления, высока вероятность, что клиент прервёт покупку, ведь он рассчитывал на другую сумму.
Рекомендуется включить в карточку товара подробный расчёт разных способов с указанием сроков доставки и дополнительных условий. Это могут быть курьерские службы, почтоматы, отделения «Почты России», транспортные компании.
Аналитика
Без анализа показателей посещаемости сайта сложно оценить его эффективность. Аналитика поможет выявить причины низких продаж, понять, где теряются клиенты и что нужно изменить.
В числе популярных аналитических сервисов метрики от Яндекс и Google. После регистрации в каждой из систем формируются коды счётчиков, которые вставляются на все страницы сайта. С помощью метрик можно отследить:
- поведение пользователей на площадке:
- каналы, которые приводят клиентов;
- ежемесячную статистику по посещениям;
- страницы, на которых обрываются действия.
Все эти показатели помогут сделать сайт лучше и понять, насколько он привлекателен.
Сайту нужна реклама
Как и обычный магазин, интернет-площадку нужно рекламировать, чтобы привлечь покупателей. Для этого можно использовать работающие маркетинговые приёмы:
- контекстная реклама в поисковых ресурсах;
- медийная реклама: баннеры на других сайтах, форумах, в приложениях;
- информирование целевой аудитории в социальных сетях — таргетированная реклама.
В комплексе с метриками реклама продвигает бизнес в сети, без чего невозможно увеличение прибыли.
Эффективный продающий сайт — результат объёмной работы с учётом знаний в маркетинге, дизайне, веб-разработке. Стартапы сначала часто самостоятельно создают страницы, а по мере развития обращаются к фрилансерам или ИТ-компаниям для доработки и выхода на следующую ступень.
Многие параллельно развивают продажи в соцсетях, где применимы те же правила: карточки товаров, аналитика и официальная оплата через платёжные системы.
Как сделать сайт, который поможет повысить продажи
Предприниматель может собрать сайт для своего бизнеса самостоятельно, без помощи дизайнеров и копирайтеров. Рассказываем, как продумать структуру сайта и что написать на главной странице, чтобы повысить продажи
Иван Морозов
Дизайнер конструктора сайтов Тинькофф
Поделиться
Поделиться
Поделиться
Предприниматель может собрать сайт для своего бизнеса самостоятельно, без помощи дизайнеров и копирайтеров. Рассказываем, как продумать структуру сайта и что написать на главной странице, чтобы повысить продажи
Иван Морозов
Дизайнер конструктора сайтов Тинькофф
Поделиться
Предприниматель может собрать простой сайт для своего бизнеса самостоятельно, без помощи дизайнеров и копирайтеров. Иван Морозов, интернет-предприниматель и дизайнер конструктора сайтов Тинькофф Бизнеса поделился советами, как продумать структуру сайта и что написать на главной странице, чтобы повысить продажи.
Статья полезна тем, кто только планирует или недавно запустил бизнес. В качестве примера рассмотрим страницу мастерской Василия Мартынова — это ремонтная мастерская, которая продвигается только в интернете.
Эта статья — подробный конспект вебинара «Как сделать сайт, который поможет повысить продажи». Если вам больше нравится смотреть, чем читать, — запись вебинара доступна на нашем канале на Ютубе.
Подготовка: определите боли клиентов и сформулируйте пользу
Прежде чем создавать сайт, сформулируйте гипотезу о болях клиента. Боль — это ситуация, от которой клиент захочет избавиться сейчас, а не откладывать на потом.
Часто можно спутать боль с желанием или проблемой. Желание — это когда клиент просто чего-то хочет, проблема — это потенциальная боль, но она еще не дозрела: клиент может ее отложить до лучших времен.
Чем сильнее у клиента боль, тем больше вероятность, что он согласится на покупку. Об этом знают стоматологи: пациенты чаще приходят не на профилактические приемы, а тогда, когда зуб начинает активно болеть.
Лучше, когда товары и услуги не просто рассказывают о себе, а предлагают пользу или помогают уменьшить вред. На сайте старайтесь максимально говорить о пользе с точки зрения клиента, как бы его глазами. Клиентам будет проще: они быстрее найдут ответы на вопросы и оставят заявку.
Выберите конструктор сайтов
После того как сформулируете пользу, выберите конструктор, в котором будете создавать сайт.
Конструктор — это программа, в которой вы собираете сайт из готовых блоков, как лего. Все основные элементы сайта уже готовы, поэтому вам не обязательно уметь программировать или работать с дизайном. Самые популярные конструкторы — Tilda, Readymag, WordPress.
Внезапно сайт сломался — продажи кафе встали
Еще вы можете создавать сайты в конструкторе Тинькофф
Он не только простой, но еще и заточен под задачи бизнеса: собирает заявки, отправляет уведомления о заказах, принимает онлайн-оплату.
Разместите меню сайта
Когда клиент попадает на сайт, он видит первый экран сайта. Этот экран состоит из двух частей: меню и обложки сайта. Про обложку расскажем чуть позже, пока рассмотрим меню.
Классическое меню сайта состоит из логотипа, нескольких ссылок и кнопки.
Добавьте в меню логотип. Логотип помогает клиенту запомнить вашу компанию и отличить один сайт от другого. Он может быть любым: квадратным, прямоугольным, круглым, состоять из рисунка или просто слов. Чем проще логотип, тем проще его запомнить.
Рекомендуем размещать логотип слева — так привычнее большинству клиентов. Если клиент быстро переключается между разными сайтами, ему будет проще выцепить взглядом ваш сайт.
Следите за размером логотипа в меню. Чтобы он хорошо смотрелся, не растягивайте его слишком сильно, иначе меню сайта увеличится по высоте и начнет отвлекать клиента.
Добавьте в логотип ссылку на главную страницу сайта. Это важно, если у вас на сайте больше двух страниц: клиент сможет нажать на логотип и вернуться на главную страницу. Если у вас сайт из одной страницы, можете не добавлять ссылку на логотип.
Добавьте в меню ссылки на основные страницы сайта. Ссылки в меню помогают клиенту быстро найти нужную информацию и не заблудиться на сайте. Старайтесь располагать самые важные ссылки поближе к логотипу. В примере с мастерской стало бы лучше, если первой ссылкой шла «Сколько стоит?», а затем — информация «О компании» и «Контакты».
Делайте ссылки самодостаточными, чтобы они читались максимально хорошо в отрыве от всего сайта. Например, ссылка «Сколько стоит?» несамодостаточная: непонятно, о чем именно идет речь. Вроде бы мелочь, но чем чаще клиенту придется останавливаться и додумывать смысл, тем быстрее он устанет от сайта.
Несамодостаточная ссылка может вызвать комичный эффект. Например, если поставить ссылку «Сколько стоит?» сразу после логотипа, клиент может прочитать так: «Мастерская Мартынова — сколько стоит?». Клиент в конце концов разберется, но ему придется напрягаться.
Лучше, когда ссылка учитывает контекст сайта, но не зависит от него и хорошо воспринимается самостоятельно. Например, вместо «Сколько стоит?» можно написать «Стоимость ремонта» — где бы мы ни разместили ссылку, она будет считываться сама по себе.
Из названия ссылки должно быть понятно, о чем раздел
Представьте, что ссылка — это вывеска над полкой магазина. В магазине есть «Овощи», «Фрукты», «Мясо» — здесь все понятно. А бывает, что есть вывеска «Сопутствующие товары». Что это за товары — непонятно, приходится подходить к полке и всматриваться в каждый товар.
То же самое в интернет-магазине: ссылки «Товары» и «Услуги» не помогают понять, что содержит ссылка, — клиенту приходится по ней переходить, а затем возвращаться.
Чтобы помочь клиенту сориентироваться, используйте в ссылках сами названия товаров и услуг. Если продаете запчасти, так и пишите: «Шины», «Масло», «Диски». Если товаров много, можно сделать рубрики: «Для легковых автомобилей», «Для грузовиков».
Добавьте в меню кнопку. Она не перемещает клиента по сайту, а помогает совершить действие: оставить заявку, позвонить, написать на почту. Если вы указываете номер телефона или почту, проверьте, чтобы с телефона открывалась звонилка или email-приложение.
Кнопку лучше всего располагать в правом углу. Углы притягивают взгляд, особенно если вокруг них достаточно пустоты. В примере мастерской Мартынова логотип и кнопка располагаются в противоположных углах и быстро считываются.
Разместите обложку
Обложка идет сразу после меню сайта и встречает клиента. Меню помогает клиенту понять, куда он попал, а обложка — что мы ему предлагаем и чем это полезно.
Не нужно рассказывать в обложке об истории компании или полном ассортименте. Чтобы захватить внимание клиента, все элементы обложки должны сообщать о пользе товара или услуги. Например, в примере мастерской сразу обозначена польза: «Ваша техника будет как новая за 3 часа».
Классическая обложка состоит из трех элементов:
- заголовка и подзаголовка;
- иллюстрации;
- кнопки.
Добавьте заголовок и подзаголовок. Заголовок помогает понять, как называется товар или услуга, а подзаголовок — какая от них польза.
В заголовке спозиционируйте аудиторию: ответьте на вопрос, кому и зачем нужен ваш товар или услуга. Позиционирование важно, потому что у клиентов разные представления об одном и том же товаре и разные ожидания. Чем точнее описан заголовок, тем лучше вы ответите на боли конкретной аудитории.
Поскольку у каждой аудитории свои запросы, вы можете сделать несколько вариантов страниц с разными заголовками. У мастерской есть страница с более конкретным заголовком — для клиентов, которые точно знают, что хотят отремонтировать.
Чтобы разные клиенты увидели правильный вариант страницы, нужно настроить контекстную рекламу. Контекстная реклама — это сложная и большая тема, мы ее разберем в отдельной статье.
Подумайте над иллюстрацией. Когда клиенты смотрят на страницу, они сначала обратят внимание на иллюстрацию, потом на заголовок, в конце — на все остальное. Качественная иллюстрация обогащает текст и помогает привлечь внимание клиента.
Этот термин понимают по-разному: кто-то иллюстрацией считает фотографии, кто-то — абстрактные картинки. На самом деле иллюстрацией будет то, что поможет наглядно продемонстрировать пользу товара:
- иллюстрации для кондитерской — фотографии тортов;
- для адвоката — примеры юридических советов и выигранных дел;
- для актера озвучки — примеры голосовых вырезок из рекламы и передач;
- для инженера — схемы;
- для видеографа — видеоролики с различных мероприятий.
На обложке иллюстрациями часто бывают фотографии, рисунки, видеоролики. В нашем примере иллюстрация — это рисунок девушки со смартфоном.
Старайтесь не ставить на обложку фотографии из фотостоков. Когда клиенты в очередной раз видят знакомого персонажа с неестественной улыбкой, им вся страница может показаться фальшивой, даже если на ней много полезного. В этом случае может быть лучше вообще не ставить иллюстрацию.
Не ставьте на сайт иллюстрации из Яндекса или Гугла. Они помогают найти интересную идею, но если их поставить на сайт, то автор может обратиться в суд.
Вместо стоковых и авторских иллюстраций сделайте свою — никто не предъявит претензии, а у клиентов повысится доверие. В интернете много сервисов, которые помогают собирать коллажи и делать несложные рисунки. Вы можете набросать идею для рисунка и попросить дизайнера ее отрисовать — иллюстрация будет выглядеть свежо, она точно не встретится у конкурентов.
Добавьте кнопку на обложку. Кнопка с призывом к действию — то, что мы хотим, чтобы клиент сделал на нашем сайте. Чтобы клиент обратил внимание на кнопку, выделите ее цветом.
Чтобы побудить клиента к действию, используйте глаголы на всех кнопках. Например, «Узнать стоимость ремонта», «Оставить заявку», «Скачать презентацию», «Оформить заказ», «Проконсультироваться», «Купить». Клиенту станет очевиднее, какое действие он совершит.
Если вы хотите, чтобы у клиента был выбор из двух действий, поместите основное действие на цветную кнопку, а второстепенное действие — на прозрачную.
Расскажите о товарах и услугах
В мастерской Мартынова есть блок с несколькими услугами: ремонт объективов, фотоаппаратов, вспышек и ноутбуков. Если предоставляете разные услуги, попробуйте разместить их похожим образом: клиент сможет выбрать нужную категорию. Если у вас на странице один товар или услуга, этот блок можно пропустить.
В примере мастерской блок оформлен хорошо: фотографии устройств соразмерны, текст короткий. Несколько моментов можно поправить, чтобы стало еще лучше.
Избегайте вопроса в заголовке. Сайт помогает клиенту находить ответы, он должен видеть готовые решения. Вопросы уместны, если у нас есть рубрика частых вопросов от клиентов. Попробуйте произнести вслух эти две фразы с разной интонацией, вы почувствуете разницу: «С чем работаем?» и «С чем работаем».
Если избавиться от вопроса, то заголовок «С чем работаем» можно конкретизировать. В нашем примере у мастерской немного устройств, все эти устройства объединяет то, что они небольшие и относятся к цифровой технике. Заголовок без вопроса мог бы звучать так: «Ремонтируем мелкую цифровую технику».
В подзаголовке усиливайте смысл заголовка. В нашем примере подзаголовок такой: «С тем, в чем хорошо разбираемся. Внутри каждого раздела — список услуг, их цены и сроки». Эта фраза нейтральная: если ее убрать, смысл не изменится.
Чтобы рассказать о товаре, используйте сценарии использования
Сценарии использования — это примеры ситуации, в которых клиенту потребуется товар или услуга. Чтобы придумать сценарий, попробуйте оттолкнуться от технических характеристик. Например, характеристика «камера 20 мегапикселей» может превратиться в сценарий «снимайте ночью при плохом освещении».
Ниже — несколько сценариев конструктора сайтов. Например, вместо «готового интернет-эквайринга» мы рассказываем о том, что «можно принимать оплату, получать уведомления на телефон и смотреть статистику».
Говорите о пользе для клиента
В начале статьи мы определили боли клиентов и пользу от товаров и услуг.
Возьмите пользу и расскажите о ней на сайте. Не так важно, какие блоки вы используете и как рассказываете, главное — чтобы клиент быстро понял пользу. Например, у мастерской Мартынова используется текстовый блок с преимуществами и иконками.
Пробуйте разные форматы
Рассказывать о пользе можно как угодно: текстом, иллюстрациями, схемами, видеороликом. Например, текстовый блок можно переупаковать в схему.
Расскажите о компании
Есть популярный жанр — рассказывать о своей компании на сайте. Это понятно, особенно когда у компании есть опыт, хорошие сотрудники и здоровый подход к работе.
Сильный рассказ о компании — это на самом деле рассказ о преимуществах компании для клиента. Часто компании пишут о себе — так можно, но клиентам это вряд ли будет интересно.
Чтобы сделать хороший текст о компании, сформулируйте, чем занимается компания и какая от нее польза. Затем расскажите об этой пользе с точки зрения клиента. Например, если упоминаем сотрудников, можно рассказать, как клиент будет с ними взаимодействовать.
Даже если не получается придумать сильные преимущества, покажите, что клиенту все равно с вами будет комфортно. Например, у мастерской есть посыл про работу любой сложности. Попробуем сместить акцент на клиента.
Обратите внимание на фразу «Если технику все же нельзя восстановить, поможем подобрать подходящие аналоги». Это очевидное преимущество, но оно показывает отсутствие нужды: мы не даем нереальных обещаний. Клиент понимает, что мы не пытаемся его заманить любой ценой, и начинает больше доверять.
Расскажите о сотрудниках
Рассказ о сотрудниках повышает доверие: клиент видит, что с ним работают настоящие люди. Он еще не позвонил, но уже заочно с вами познакомился.
Рассказ о сотрудниках зависит от вашей сферы деятельности. Попробуйте начать с того, чтобы описать опыт сотрудников кратко и простыми словами. Если чувствуете, что нужно добавлять подробные регалии, — добавляйте.
Постарайтесь сделать так, чтобы сотрудники выглядели как одна команда. Не обязательно устраивать фотосъемку: возьмите готовые фотографии, удалите фон и поставьте на одинаковую цветную плашку — фотографии начнут выглядеть в едином стиле.
Добавьте отзывы клиентов
Отзывы помогают клиенту решиться на покупку: он видит, как вы уже помогли другим людям.
Желательно, чтобы отзывы были настоящими: клиенты мгновенно чувствуют фальшь. Если написать отзыв самостоятельно, можно подорвать доверие: клиент либо не поверит, либо сформирует нереалистичные ожидания от сервиса.
Если отзывы очень подробные, попробуйте резюмировать их одним предложением. Тогда клиент сможет пробежаться по каждому отзыву и быстро уловить суть.
Разместите контактную информацию в конце сайта
Отметьте офис и пункты самовывоза на карте: клиент сможет территориально сориентироваться и проложить маршрут в навигаторе. Телефон и почта помогут быстро связаться.
За основу можете взять пример контактного блока мастерской, здесь вся информация подана кратко и структурированно, особенно хорошо расписано про метро и бесплатную парковку. Приятная деталь: цвет иконок обыгрывает цвет логотипа.
Продайте товар или услугу
Мы помогли клиенту сориентироваться на сайте, рассказали о болях и решениях, повысили доверие. Осталось не забыть самое важное — продать товар или услугу. Для этого используйте контактную форму или форму оплаты — это зависит от специфики бизнеса. Чем меньше полей нужно заполнить клиенту, тем проще ему оставить заявку.
Если собираете контакты клиента для заявки, обязательно добавьте согласие на обработку персональных данных. Также разработайте политику конфиденциальности и укажите ее в форме: она защитит вас от штрафов и блокировки Роскомнадзором.
После формы разместите подвал сайта. В подвале перечислите ссылки на ваши товары и услуги, статьи, соцсети и контактную информацию. Например, если вы прокрутите в самый конец статьи, вы увидите ссылки на другие разделы сайта.
Как выглядит классическая структура сайта
Вот стандартная структура сайта, которую вы можете взять за основу:
- Меню сайта.
- Обложка.
- Блоки с товарами и услугами.
- Рассказ о компании и сотрудниках.
- Отзывы.
- Контакты.
- Форма заявки или оплаты.
- Подвал сайта.
Бесплатный конструктор сайтов
- Создавайте сайты и интернет-магазины без разработчиков
- Принимайте оплату от клиентов
- Собирайте информацию о заказах в личном кабинете конструктора