Как сделать сайт с нуля бесплатно? 7 Простых шагов + советы от дизайнеров, как сделать сайт самому

«Это нереально, если я не программист!» — скажете вы. Я вас обрадую. Не обязательно писать код, чтобы сделать сайт!

Вам всего лишь нужно запастись желанием, компьютером с выходом в Интернет и сделать первый шаг. Начните с этой статьи. Дочитайте её до конца. Может, она станет вашим билетом в новую жизнь?

Веб-разработчик и руководитель частной мастерской сайтов с опытом работы 6 лет Дарья Вовкодав и генеральный директор компании Progress Engine по разработке веб- и мобильных проектов для стартапов и корпораций Алексей Поимцев рассказали обо всём, что нужно знать, чтобы сделать сайт!

Зачем нужен сайт?

Компания без сайта теряет потенциальных клиентов, а значит, прибыль. Она не сможет найти новых покупателей и продавать людям из разных уголков планеты.

Согласитесь, за ответами мы все бежим в Интернет. Заказать пиццу? Купить курс? Записаться в школу французского? Два клика, и мы на нужном сайте. Мы неосознанно оцениваем качество сайта и решаем: купить продукт или закрыть страницу.

Если сайт удобный, красивый, в нём есть ответы на наши вопросы, мы доверяем компании и кликаем на кнопку «заказать».

Останется клиент на сайте или уйдёт, зависит не только от продукта, но и от веб-разработчика.

Какой конструктор сайтов выбрать?

Вы можете сделать сайт двумя способами: самостоятельно писать код или собирать сайт на конструкторе. Главное отличие — функции и возможности. Сайты, которые делают с помощью кода, имеют широкий функционал.

Программы, которые потребуются, чтобы сделать сайт с помощью кода:

1. Редактор кода. Именно в нём происходит работа над сайтом. Пробуйте и выбирайте любой из 6 лучших редакторов кода: Sublime, Notepadd++, NetBeans, Visual Studio Code, Brackets.
2. Браузеры: Chrome, Safari, Mozilla Firefox. С их помощью вы проверите, как отображается и загружается сайт на разных браузерах.
3. Графический редактор для создания макета сайта: Photoshop или Figma.

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

Последнее отличие конструкторов от программ для записи кода — типы сайтов, которые можно сделать. На конструкторах легко собрать лендинг, но сделать сайт многостраничным не получится.

Топ-3 конструктора сайтов

1.Tilda — конструктор, который поможет сделать сайт.

В чём особенность? Главный плюс — простота использования. Даже если вы открываете конструктор впервые, вы сможете сразу собрать свой дизайн лендинга. В нём уже есть и шаблоны, и готовые блоки, и возможность сделать сайт с чистого листа.

Сколько стоит сделать сайт? Вы можете пользоваться бесплатной версией с ограниченным функционалом, а можете купить расширенную за 750-1 250 рублей в месяц.

2. Wix — платформа, чтобы сделать сайт и опубликовать его.

В чём особенность? Яркие шаблоны, интерактивные элементы, анимация, формы опроса и обратного отсчёта — всё это есть на Wix. Однако он не так прост в освоении, как Tilda. Вам потребуется чуть больше усидчивости и времени.

Сколько стоит сделать сайт? Сделать сайт самому на Wix можно бесплатно, но если вы хотите получить доступ ко всем функциям и подключить свой домен (придумать свой адрес сайта), придётся заплатить от 90 до 1 000 рублей в месяц.

3. LPgenerator — самый мощный конструктор для создания лендингов.

В чём особенность? В нём есть дополнительные функции, например, инструменты раскрутки, подключение скриптов, интеграция с другими приложениями. Всё это поможет сделать сайт ещё качественнее.

Однако новичкам лучше начинать с конструктора попроще — есть риск заблудиться в множестве функций. Но если вы уже «продвинутый» в создании сайтов, LPgenerator станет отличным вариантом.

Сколько стоит сделать сайт? В LPgenerator бесплатно поработать можно только 7 дней. Цена подписки — 799-15 730 рублей в месяц.

Сделать сайт на конструкторах проще и быстрее, чем писать код. Этот способ прекрасно подойдёт для новичков! Но если вы решили заниматься сайтами всерьёз, не бойтесь учиться новому. Писать код — это навык, который вы легко освоите, если захотите.

Что такое лендинг?

Лендинг — это одностраничный продающий сайт. Он переводится как «посадочная страница», то есть лендинг призывает сделать одно действие: заказать химчистку, оставить контакты или забронировать билет на выставку.

Лендинг эффективен потому, что клиент сфокусирован на главном. В нём нет ссылок на другие сайты, длинных рассказов и предложений нескольких услуг.

Задача лендинга – убедить клиента сделать действие.

Лендинг состоит из нескольких блоков, но все они располагаются на одной странице. На первом экране мы показываем услугу или продукт и сразу предлагаем совершить действие.

«Хмм… интересно! Но почему я должен обратиться именно к ним?» — думает клиент и листает вниз, чтобы найти ответы на свой вопрос. Блоки рассказывают о продукте подробнее. В чём преимущества продукта? Чем вы лучше других? Сколько стоит? Вам точно можно верить?

Приведу пример. На первой странице лендинга мы предлагаем бесплатно скачать чек-лист «10 правил, без которых вы не выучите английский». Загвоздка в том, что клиент взамен оставляет свои контакты.

Менеджеры школы английского набирают номер клиента и предлагают купить курс. Вуаля! Лендинг решил свою задачу: собрал контакты, и компания продала услугу.

Чтобы определиться с наполнением сайта, блоками и призывом к действию, решите, какую потребность клиента будет закрывать ваш сайт.

В зависимости от потребности клиента, лендинги делятся на 2 типа:

1. Коммерческие. Это могут быть лендинги, где продаётся один товар или одна услуга, а может быть лендинг с каталогом товаров. 
2. Информационные. На таких лендингах клиент узнаёт информацию о продукте.

Как сделать сайт самому?

6 советов, которые помогут сделать сайт

Совет 1. Составьте портрет потенциального клиента.

Веб-разработчик должен встать на место покупателя и научиться мыслить, как он. Представьте, что вы — это клиент. Какой вы? Какой у вас возраст? Какую сумму вы сможете заплатить?

Чем ярче вы представите клиента, тем больше шансов попасть в яблочко! Задавайте себе вопросы от лица клиента, чтобы разместить на сайте самое важное.

Какие вопросы задать себе, прежде чем сделать сайт?

1. Чего боится клиент?
2. Какие могут возникнуть вопросы о продукте или услуге?
3. Как вызвать доверие?
4. Какие термины поймёт потенциальный покупатель?

Чтобы понять потребности, составьте портрет потенциальных клиентов.

Совет 2. Проанализируйте конкурентов.

Анализ конкурентов поможет понять структуру лендинга, учесть все сильные и слабые стороны других сайтов и сделать лучший сайт в тематике.

Ловите лайфхак, как легко провести конкурентный анализ! Откройте Яндекс и Google и просмотрите ТОП-5 сайтов из каждого поисковика, которые подходят вам по теме.

Затем проанализируйте сайты конкурентов по 5 критериям:

1. Какие блоки используют конкуренты?
2. В какой последовательности располагаются блоки и что это даёт?
3. Как звучит призыв к действию?
4. Удобен ли сайт? Что делает его удобным, а что усложняет?
5. Какие крутые фишки используют конкуренты?

В конце статьи мы оставим ссылку на видео, как правильно располагать блоки на сайте, поэтому дочитайте статью до конца.

Совет 3. Пишите кратко, но сильно.

Если вы откроете сайт, а на нём бескрайнее полотно текста, вы его тут же закроете. Клиент не будет напрягаться и вычитывать текст. Во-первых, у него мало времени. Во-вторых, он за 2 секунды может просто зайти на другой сайт — к конкуренту.

Умеете писать ярко и ёмко, но грамматика хромает, а правила пунктуации вы не вспоминали со времён школы? Воспользуйтесь бесплатным сервисом по проверке текста на грамотность и оригинальность.

Совет 4. Сфокусируйте внимание в одной точке.

Задача лендинга — убедить клиента сделать действие. Помните? Ключевое слово: действие.

3 правила, как сделать сайт призывом к действию:

1. Чтобы клиент не отвлекался от сайта, не размещайте ссылки на другие продукты.
2. Напоминайте о действии. Вставляйте кнопки с призывом не только на первом экране, но и между блоков сайта.
3. Не размещайте кнопки с разными призывами к действию, чтобы клиент не запутался.

Совет 5. Первый экран — лицо сайта.

Увидев первый экран, клиент решает, остаться на сайте или нет, поэтому над первым экраном нужно особенно постараться.

«Где я? Что я должен сделать?» — первые вопросы клиента, когда он открывает сайт. На них должен ответить первый экран. Название магазина, адрес, конкретное предложение и призыв к действию — разместите всё это на первом экране.

Совет 6. Наполняйте сайт со вкусом.

Сайт должен быть одним целым. Кнопки, фотографии, шрифты, цвета, формы — всё должно гармонично сочетаться и дополнять друг друга. Элементы сайта, словно ноты, которые вместе превращаются в красивую мелодию, только если стоят в нужном месте. Люди любят глазами, поэтому подбирайте качественные картинки в одном стиле.

Не опускайте руки, если вы не дизайнер! Вкус можно развить, например, записаться на курсы. Программ множество — свой курс найдёт и новичок, и даже продвинутый программист. Стоимость обучения начинается с 4 000 и доходит до 50 000 рублей. Всё зависит от длительности и насыщенности курса.

Смотрите хорошие сайты, анализируйте цветовые решения и элементы, запоминайте фишки. Поверьте, вкус в сайтах зависит от насмотренности. Зарегистрируйтесь на Behance или Pinterest и вдохновляйтесь!

Сделать сайт стильным помогут бесплатные стоковые фотографии на разные тематики — воспользуйтесь сервисом Depositphotos. Так вы не нарушите ничьё авторское право и получите отличные кадры, чтобы наполнить сайт.

Как сделать сайт: пошаговый план

Шаг 1. Определите задачу сайта.

Шаг 2. Соберите материалы о продукте или услуге, которые хотите продвигать на сайте. Проанализируйте конкурентов.

Шаг 3. Сделайте прототип сайта. На листе бумаги или в заметках компьютера пропишите текст сайта и продумайте его наполнение. Не торопитесь собирать сайт на конструкторе. Правильные смыслы — это 80% успеха.

Шаг 4. Соберите сайт на конструкторе.

Шаг 5. Подключите к сайту Яндекс.Метрику или Google Analytics. Эти сервисы нужны, чтобы отслеживать трафик и конверсию сайта. На них можно посмотреть, как клиент смотрит сайт: на какие кнопки нажимает, какие блоки пролистывает, где останавливается и на каком блоке закрывает сайт.

Хотите посмотреть видео, как подключить Яндекс.Метрику?

Шаг 7. Добавьте сайт в сервисы Яндекс.Вебмастер и Search Console, чтобы поисковики знали о существовании сайта и выдавали его по запросу. Просто зарегистрируйтесь на сервисах, добавьте сайт и подтвердите владением доменом.

Посмотрите видео с полным разбором сервиса Яндекс.Вебмастер:

Шаг 8. Проверьте скорость загрузки сайта.

Если время отображения всех элементов будет дольше 4 секунд, то лендинг не попадёт на первые страницы в Google и Яндекс, а значит, конверсия сайта будет низкой.

Чтобы проверить сайт, загрузите его в сервисы PageSpeed Insights, WebPageTest.org или GTmetrix.com. Эти сервисы покажут, какая картинка много весит и мешает загрузке.

Не используйте больше двух видов шрифтов и сжимайте картинки, прежде чем загрузить их на сайт, чтобы он весил меньше и быстрее загружался.

Сделать сайт самому возможно, но у вас должен быть огромный запас мотивации, терпения и упорства. Вы должны быть готовы тратить время, чтобы изучать информацию, развивать вкус и практиковаться.

Но есть способ проще — записаться на курсы и сделать «путь проб и ошибок» короче в сфере создания сайтов.

На что обратить внимание при выборе курсов?

1. Портфолио преподавателя. Нравятся ли вам сайты, которые он создаёт? Он будет рассказывать только теорию, или покажет, как работать на практике?
2. Ваше портфолио во время обучения. Во время курса вам нужно научиться, как сделать сайт своими руками, а в этом поможет только практика. На хороших курсах на выходе у ученика будет своё портфолио.
3. Программа курса. Вы хотите сделать сайт с помощью кода или на конструкторе? Сколько теоретических и практических уроков будет на курсе? Если вам обещают изучить все программы и темы за короткий срок, будьте осторожны. Там вы узнаете всего по чуть-чуть, но получите лишь поверхностные знания.
4. Отзывы студентов.

Спросите, есть ли в школе пробные бесплатные занятия. Вы посмотрите, подходит ли вам манера преподавания и атмосфера учёбы.

Стоимость курсов по созданию сайтов начинается от 4 000 рублей и доходит до 55 000 рублей. Такое обучение длится от 12 до 75 академических часов.

Посмотрите видео, как правильно располагать блоки на сайте:

Сделать сайт самому — непросто, но очень интересно. Это настоящая свобода творчества, а не только коды и сложные программы. Не бойтесь экспериментировать и пробовать, даже если не получилось сделать сайт с первого раза. Желание и постоянный опыт помогут добиться успеха!

Вам может подойти это обучение:

1. 10 Лучших Курсов Обучения Созданию Сайтов
2. 10 Лучших Онлайн-Курсов Веб-Дизайна
3. Лучшие Курсы Дизайна в Санкт-Петербурге
4. 10 Лучших Онлайн-Курсов Веб-Разработки
5. Лучшие Курсы Обучения Маркетингу от 990 Рублей

Понравилась статья? Ставьте лайки и делайте репост, чтобы не потерять пошаговую инструкцию и сделать сайт самостоятельно!

Читайте также:

1. Как Оформить Сайт? 15 Рабочих Советов, Как Оформить Сайт + Инструкция, Каким Должен Быть Сайт
2. Что Такое Кейс? 10 Экспертных Советов, Как Создать и Оформить Свой Кейс!
3. Как Настроить Таргет? Пошаговая Инструкция + 16 Экспертных Советов, Как Настроить и Запустить таргет
4. Что Такое Цели по SMART? 6 Эффективных Способов, Как Ставить Цели и Достигать Их
5. Как Набрать Подписчиков в Инстаграм? 16 Эффективных Способов, Как Быстро Набрать Подписчиков