Создание сайтов с нуля: Блокнот, Фигма, Zero Block, пустая тема, шаблон — пять стартов и шесть этапов, одинаковых для всех

Создание сайтов с нуля обещают почти все инструкции, но никто не уточняет, где этот ноль находится. Пустой файл в Блокноте, чистый холст в Фигме, Zero Block в конструкторе, голая система управления и готовый шаблон, в котором осталось поменять тексты, — всё это называют «с нуля», хотя между первым и последним лежат недели работы. Ниже — пять разных нулей, страница в Блокноте за десять минут, макет в Фигме по шагам, проверка «насколько ваш сайт с нуля» и шесть этапов, которые одинаковы при любом старте.

Этот вопрос я задаю заказчикам, которые говорят: «хочу сайт с нуля, без шаблонов». Что именно должно быть сделано заново — структура, оформление, код, тексты? Чаще всего оказывается, что человеку важно не отсутствие шаблона, а чтобы сайт был про его дело и не выглядел как у соседа. Это решается иначе и стоит дешевле, чем честный ноль.

Тридцать страниц поиска: «с нуля» у двадцати двух, а где ноль — ни у одной

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

А теперь то, чего мало. Вёрстка упомянута на двух страницах, причём на одной — в виде обещания, что знать её не нужно. Макет или прототип — на одной. Шаблоны — на двух, и обе принадлежат конструкторам, которые предлагают «готовые шаблоны». HTML встречается на пяти страницах. Блокнот — ни на одной.

Пять нулей: с чего на самом деле начинают

Чем «пустее» старт, тем больше свободы и тем больше работы. Вот пять отправных точек — от самой пустой до самой заполненной.

Выберите вариант, чтобы увидеть, что он значит на практике.

Создание сайта с нуля в Блокноте: страница за десять минут

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

1. Откройте Блокнот (в Windows) или любой простой текстовый редактор.
2. Наберите или скопируйте код ниже и замените текст на свой.
3. Сохраните файл с именем index.html: тип файла — «Все файлы», кодировка — UTF-8.
4. Откройте сохранённый файл двойным щелчком — он появится в браузере.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ремонт обуви в Мытищах</title>
</head>
<body>
  <h1>Ремонт обуви в Мытищах</h1>
  <p>Набойки — 400 ₽. Работаю с 9 до 20.</p>
  <a href="tel:+70000000000">Позвонить</a>
</body>
</html>

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

Чего у такой страницы нет: адреса в интернете, формы заявки и удобного способа править текст. Чтобы её увидели другие, файл выкладывают на хостинг и привязывают домен. С этого места «Блокнот» перестаёт быть игрушкой и становится обычной разработкой.

Создание макета сайта с нуля в Фигме

Макет — это сайт, нарисованный до того, как его начали строить. Создание сайта в Фигме с нуля логично для тех, кто хочет согласовать вид страниц заранее. Порядок, который бережёт время:

1. Структура на бумаге. Список блоков сверху вниз и одна фраза о каждом. Без этого холст останется пустым надолго.
2. Фрейм под телефон. Начинайте с узкого экрана: на нём сразу видно, что лишнее.
3. Серые прямоугольники. Расставьте блоки без цвета и картинок, только с настоящими заголовками.
4. Сетка и отступы. Выберите два-три размера отступов и используйте только их.
5. Стили. Один шрифт, три размера текста, основной цвет и один акцентный — для кнопок.
6. Повторяющиеся элементы. Кнопку, карточку и шапку оформите как компоненты, чтобы менять их в одном месте.
7. Широкий экран. Разверните готовый мобильный макет в настольную версию, а не наоборот.

Шаблон или без шаблонов: что вы на самом деле выбираете

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

Насколько ваш сайт «с нуля»: шесть слоёв

Сайт состоит из шести слоёв, и каждый можно сделать заново или взять готовым. Отметьте, что вы создаёте с чистого листа.

Мой опыт такой: первые три слоя — структура, тексты, фотографии — посетитель замечает сразу, и именно по ним отличает один сайт от другого. Последние три он не видит вовсе, пока всё работает. Поэтому, когда бюджет ограничен, «с нуля» разумно делать содержание, а техническую основу брать проверенную.

«Хочу без шаблонов» мне говорят часто. А потом присылают тексты, скопированные с сайта конкурента, и фотографии из фотобанка. Получается дизайн с нуля вокруг чужого содержания. Я предлагаю наоборот: сначала своё содержание, а уже под него — оформление.

— Александр Рожков

Чего нет ни в одном нуле

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

• Содержание. Блокнот пуст, холст пуст, а в шаблоне лежат чужие слова. Что вы продаёте, почём и почему у вас — придётся сформулировать самому в любом случае. Сайты месяцами стоят недоделанными не из-за кода, а из-за ненаписанного текста на главной.

• Адрес и место. Домен и хостинг нужны всем, кроме сайтов на конструкторе, где место входит в тариф. Домен оформляйте на себя — это единственная часть сайта, которую нельзя сделать заново, если она потеряна.
• Посетители. Готовый сайт никто не увидит, пока о нём не узнают поиск, карты или реклама. Страницы под запросы, заголовки, скорость — всё это закладывается при разработке, а не прикручивается потом.

Отсюда практический вывод. Если у вас неделя, тратить её на вёрстку с пустого файла — роскошь: за эту же неделю можно написать тексты, сделать фотографии и собрать сайт на готовой основе. Если же сайт делается на годы и должен приводить клиентов из поиска, экономия на структуре и коде потом обойдётся дороже, чем работа с нуля сейчас.

Этапы создания сайта с нуля: шесть шагов при любом старте

С какого бы нуля вы ни начали, процессы создания сайта с нуля одни и те же. Я работаю в шесть этапов; типичный проект занимает около трёх недель. Ниже — создание сайтов с нуля в картинках: вся последовательность одной схемой.

1. Бриф и знакомство. Что продаём, кому, чем отличаемся, что должно произойти после визита на сайт.
2. Прототип и дизайн. Сначала схема страниц, потом оформление. Здесь и решается, с какого нуля идём.
3. Разработка. Вёрстка, формы, подключение редактора, основа для поиска.
4. Приёмка и правки. Вы смотрите сайт на тестовом адресе и говорите, что поправить.
5. Перенос на рабочий сервер. Домен, защищённое соединение, счётчик, проверка форм.
6. Сопровождение и рост. Обновления, новые страницы, продвижение.

Подробно, с тем, что вы получаете на каждом шаге, эти этапы расписаны на странице «Этапы разработки сайта».

Сайт-визитка: создание с нуля

У визитки пять-семь страниц: главная, услуги, цены, о компании, контакты. Основное время уходит на первый этап — сформулировать, чем вы отличаетесь, — и на фотографии. Технически это самый простой тип сайта, и начать создание сайта с нуля проще всего именно с него.

Создание информационного сайта с нуля

Здесь всё наоборот: оформление простое, а главная работа — содержание и структура разделов. Такому сайту с первого дня нужна система управления, потому что страниц будут сотни, а добавлять их придётся постоянно. Блокнот и одностраничные конструкторы для него не годятся.

Создание сайта с нуля: презентация из семи слайдов

Школьникам, студентам и тем, кто защищает проект перед руководством, нужно не сделать сайт, а рассказать о процессе. Вот структура, которая укладывается в семь слайдов:

• Задача. Для кого сайт и что он должен дать.
• Выбор старта. С какого нуля начинали и почему.
• Структура. Схема страниц одной картинкой.
• Макет. Экран телефона и широкий экран рядом.
• Разработка. Чем пользовались, один фрагмент кода или редактора.
• Результат. Адрес сайта и снимок готовой страницы.
• Выводы. Что получилось, что сделали бы иначе.

Итог

У создания сайта с ноля нет одной отправной точки — их пять: Блокнот, Фигма, Zero Block, пустая тема и шаблон. Самостоятельное создание сайта с нуля разумно начинать с той, что соответствует вашим навыкам и сроку, а «с нуля» делать прежде всего то, что видит посетитель: структуру, тексты, фотографии. Шесть этапов — от брифа до сопровождения — остаются теми же при любом выборе.

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

Александр Рожков

Вебмастер · SEO-специалист · 15+ лет · 200+ проектов

Частный вебмастер в Москве. 200+ сайтов под ключ, 15+ лет опыта. Создаю сайты, настраиваю SEO и рекламу лично — без субподрядчиков.

О себе