Сайты создают, чтобы они приносили прибыль — генерировали трафик, продавали товары, услуги или идеи. Обычно в разработку вкладывают деньги, но есть способы сделать сайт и без вложений. Расскажем, как бесплатно создать сайт, который будет нормально выполнять свои задачи.
Создать сайт стоит в среднем 50 000 ₽. Мы расскажем, как сделать это бесплатно. Ну, почти бесплатно — в некоторых случаях придется заплатить за домен, хостинг и красивый шаблон, хотя это необязательно.
Выберите платформу
Платформа нужна, чтобы управлять сайтом. От нее зависит, сколько времени понадобится на разработку, насколько удобно будет менять информацию на сайте и насколько легко продвигать в поисковых системах.
Есть три варианта: использовать конструкторы, CMS или разрабатывать на коде.
Конструктор. Конструкторы предлагают шаблонные решения или отдельные блоки, из которых строят сайт. Знания кода не нужно, все настраивается мышкой и клавиатурой. В визуальном редакторе можно написать нужный текст, выстроить структуру сайта, изменить размер блока, выбрать шрифт, фон модуля и так далее.
Есть много конструкторов: например, Wix, Tilda, uKit. Некоторые сервисы предназначены для разработки определенных типов сайтов: так, в LPgenerator создают только лендинги.
Если вам важна скорость, выбирайте шаблонные решения. Например, у Tilda есть готовые шаблоны для бизнеса, событий, анкет, блогов и других типов сайтов. Обычно такие стандартные решения разработаны специалистами, в них нет ничего лишнего. Если хотите сделать сайт, непохожий на другие, измените шаблон до неузнаваемости или создайте страницу с нуля.
.png)
Лендинг банка «Точка» сделан на Tilda
_140x140_ae5.png)
CMS. Бесплатных CMS — систем управления контентом — больше пятидесяти. Согласно исследованию W3Techs, самая популярная система — WordPress: она установлена на 32,9% отслеживаемых сайтов и занимает 59,9% рынка. Популярность платформы говорит о ее качестве и удобстве. Кроме того, в интернете легко найти инструкции и шаблоны по настройке WordPress.
Использовать CMS сложнее, чем конструкторы. Придется разобраться в установке и настройке плагинов, загружать картинки в отдельные папки, копаться в папках, чтобы добавить, удалить, изменить нужный файл. Визуального редактора нет, но возможности систем управления контентом шире, чем у конструкторов. А чтобы облегчить процесс разработки, существуют готовые шаблоны: бесплатные и платные.
Шаблоны для сайтов на WordPress
Код. Собирать сайт без конструктора и CMS, на чистом коде — самый сложный способ, требующий навыков и знаний. На разработку уйдет много времени, а каждое изменение на сайте — например, добавление новой страницы или обновление существующего текста — потребует вмешательства в код. Зато так можно создать что-то действительно уникальное.
Например, этот уникальный сайт для игры на пианино создан на чистом HTML
Проработайте структуру сайта
Структура помогает пользователю ориентироваться на сайте, а вам — правильно распределить ключевые слова по страницам. Составляя структуру, ориентируйтесь на логику:
- Делаете интернет-магазин — создайте каталог с удобной иерархией. Например, разбейте товары на три главных раздела: сумки, кошельки, портфели. Все эти разделы можно разбить на дополнительные категории: женскую и мужскую. Помимо самого каталога, можно добавить страницы с описанием доставки, оплаты, блог.
- Предоставляете несколько услуг — объедините похожие. Например, включите в раздел строительства возведение домов, дач и бань. В раздел отделочных работ — отделку под ключ, оформление фасада, внутренние работы.
- Создаете блог — сделайте так, чтобы посетители смогли быстро найти нужные им публикации. Сделайте поиск по ключевым словам и разбейте все посты по тематическим категориям: о бизнесе, об отдыхе, о сервисах.
Чтобы быстрее разработать понятную пользователям структуру, зайдите на сайты конкурентов, сравните их структуры и используйте как отправную точку для разработки своей. Или посмотрите, что ищут люди в вашей нише в Яндекс.Вордстате — запросы можно использовать в качестве названий страниц, это же поможет увеличить посещаемость сайта в будущем. Но не создавайте слишком сложную иерархию: чем больше уровень вложенности страницы, тем дольше она будет индексироваться: об этом написано в рекомендациях Яндекса.
На сайте Сбербанка много разделов, но структура построена так, что пользователь легко найдет нужный
_140x140_ae5.png)
Сделайте удобный и привлекательный дизайн
Согласно исследованию Microsoft, время концентрации среднестатистического пользователя снизилось до 8 секунд. Значит, нужно заинтересовать его за этот промежуток времени. Хорошее оформление поможет в этом. Обращайте внимание на то, как расположены элементы на страницах, какие цвета и шрифты используете.
Расположение элементов на страницах. Пользователи просматривают сайты сверху вниз, уделяя больше всего внимания первому экрану. Расположите все важные элементы на первом экране, чтобы посетители сайта заметили их.
Обычно сверху располагают:
- Меню сайта — ссылки на 5–6 страниц или, если оно большое, меню с выпадающими списками.
- Слайды с информацией о действующих скидках, акциях.
- Главный оффер — предложение посетителю сайта с описанием выгоды.
- Сведения о компании — чем занимается, что предлагает.
- Демонстрацию продукта — фотографии товаров с коротким описанием, описание услуг.
Текст рассказывает о фирме, а не о продукте. Поэтому не сразу понятно, что предлагает компания
Видно предложение скидки, название сайта, ассортимент — понятно, что предлагает компания
Цветовое оформление. У пользователей разные предпочтения: кому-то нравится желтый, кому-то черный. Но не стоит пытаться понравиться всем: если хотите использовать яркие оттенки, достаточно будет 1–3 тонов. Обычно акцентами подчеркивают что-то важное: оффер или кнопку с призывом заказать, купить, подписаться.
Мешанина из цветов отвлекает, раздражает и снижает конверсию. Используйте палитру Тобиаса ван Шнайдера, чтобы подобрать удачные сочетания цветов.
Оба сайта предлагают выбрать: первый — проекты в портфолио, второй — товары. На каком вам легче ориентироваться?
Шрифт. Чем сложнее и заковыристее шрифт, тем дольше мозг будет обрабатывать информацию и тем сложнее донести смысл. Лучше использовать общепринятые шрифты. Исследование Yieldmo показывает, что привычным шрифтам Times New Roman, Arial и Georgia верят больше всего.
Какое из двух предложений вы прочитаете быстрее: правое или левое?
Еще один фактор, влияющий на удобочитаемость, — фон. Черный текст на белом фоне читать легче, чем, например, синий текст на черном фоне. Используйте темные тона для текста, спокойные — для фона.
Какой текст вам легче читать?
Напишите понятный текст
Чтобы сайт продавал, нужно правильно донести информацию до пользователя, объяснить выгоду от покупки. Текст очень помогает в этом. Уделите ему особое внимание.
Откажитесь от штампов, не несущих конкретики. Например, не стоит писать «высококвалифицированные специалисты» — лучше расскажите, что в клинике работают врачи высшей категории или что бригада уже построила 17 домов.
| Непонятно, какие заслуги у врачей | Теперь понятно, уже пошел записываться |
| В нашем штате работают высококвалифицированные специалисты с многолетним опытом работы. | У нас работают врачи с опытом от 5 лет высшей, первой категорий. За 2018 год они вылечили 1700 пациентов. |
Не используйте качественные прилагательные: «красивый», «недорогой», «превосходный». У каждого свое понятие красоты, качества, дороговизны. Лучше покажите товар, назовите стоимость, расскажите о характеристиках и гарантиях — читатель сам решит, хорошо это или плохо.
| Непонятно, как работает компания, сколько стоит продукт | Все ясно |
| Работаем качественно, на современном оборудовании, предлагаем недорогие и красивые смартфоны. | Каждый этап производства контролирует технолог. Тестируем телефоны после сборки. Цена — от 15 000 ₽. |
Используйте вместе с сухими характеристиками пользу для клиента. Читатель не поймет, хорошо ли, что емкость батареи смартфона — 2050 мАч. Переведите эту характеристику в пользу: скажите, что телефон не разряжается 1,5 суток при активном использовании.
| И что? | Читатель понимает пользу |
| Емкость батареи — 2050 мАч. | Батарея емкостью 2050 мАч не будет разряжаться 1,5 суток, даже если постоянно сидеть в интернете и фотографировать. |
| Диагональ экрана — 5 дюймов. | Смартфон диагональю 5 дюймов помещается в руке. Можно работать одним пальцем. |
| Камера с оптической стабилизацией. | Оптическая стабилизация камеры снижает процент смазанных фотографий. |
Говорите на одном языке с читателями. Например, если продаете что-то строителям, бухгалтерам, программистам, вполне уместно использовать профессиональный жаргон. А если целевая аудитория широкая, лучше отказаться от жаргонизмов: пишите просто и понятно.
| Читателям без медицинского образования сложно сразу понять смысл | Все понятно даже бабушкам у подъезда |
| Анорексия — это психическое расстройство, которое относится к группе нарушений пищевого поведения, характеризуется неприятием телесного образа, отказом от пищи, созданием препятствий к ее усвоению и стимуляцией метаболизма с целью снижения веса. | Анорексия — психическое расстройство, при котором человек не принимает свое тело и стремится похудеть любыми способами, в том числе голоданием. |
Закрывайте одну задачу одним текстом. Каждое предложение на странице должно работать на одну цель. Если продаете какой-то товар — не нужно рассказывать, какая хорошая у вас компания. Пишите только то, что важно для закрытия задачи.
| Смешано несколько целей | Текст решает одну задачу |
| Рассказано о товаре, способах его применения, опыте компании. Есть предложение о партнерстве. | Текст рассказывает о пользе товара, его характеристиках, выгодах от приобретения именно в этой компании. |
Лучше написать меньше, но по существу, чем тратить время пользователя на прочтение бессмысленного текста.
Старайтесь не только рассказывать, но и показывать. Добавляйте к тексту фотографии, видео, инфографику: на их изучение пользователи потратят меньше времени. Например, можно сфотографировать товар, снять видео с места оказания услуг, рассказать в инфографике о главных преимуществах. Кто захочет — прочитает текст, кто не захочет — посмотрит фото или видео.
Пример: описание авто Renault DUSTER Dakar на официальном сайте дополнено фотографиями — читатель может не только представить опции, но и увидеть их
Оставьте контакты
Обязательно поместите на видное место контакты или предоставьте возможность связаться с вами: виджет онлайн-чата, форму обратной связи, кнопку «Заказать обратный звонок». Идеально, если пользователь может связаться с вами в любой момент, на какой бы странице он ни находился. Если «спрятать» контакты слишком глубоко, посетители могут просто уйти с сайта.
Хорошее решение — чат в оптовом магазине доступен на любой странице: посетитель всегда может связаться с менеджером
Подумайте об адаптивности
Чтобы сайт работал хорошо, нужно сделать его адаптивным: на него будут заходить пользователи с разных устройств. Проверьте, как страницы отображаются на компьютере, планшете, смартфоне. Если плохо — едет верстка или текст выходит за пределы страницы — это делает сайт неудобным. Часть посетителей могут сразу же уйти с него.
Неадаптивные сайты, с которыми сложно работать на смартфонах
На конструкторах большинство шаблонов уже адаптированы под обычную и мобильную версии. А если создаете сайт на CMS или чистом коде, над этим придется поработать.
На всякий случай проверьте, как сайт смотрится в разных браузерах, на устройствах с разными экранами. Может быть, он нормально открывается через Chrome, но плохо через Firefox.
Повторим этапы: что делать, чтобы сайт получился хорошо
- Выберите платформу: конструктор, CMS, чистый код. Легче всего делать на конструкторе, CMS дает больше возможностей, использовать чистый код — самый сложный способ.
- Проработайте структуру. Она должна облегчать пользователю навигацию — сделайте ее логичной.
- Не забывайте про дизайн. Откажитесь от мешанины цветов, используйте привычные шрифты, располагайте важные элементы на первом экране.
- Напишите текст. Расскажите о преимуществах продукта через пользу для покупателей. Пишите кратко, емко и по делу.
- Оставьте контакты. Желательно там, где пользователь может воспользоваться ими в любой момент.
- Подумайте об адаптивности: сделайте так, чтобы сайт нормально отображался на ПК, смартфонах, планшетах в разных браузерах.
