9 марта 3 минуты чтения #Инструкции

Как легко создать свой сайт с нуля

Иллюстрация материала

Не все компании стремятся запустить собственный сайт и ограничиваются официальными страницами в социальных сетях. Однако это рискованная стратегия: администрация соцсетей в любой момент может заблокировать аккаунт, а еще всегда существует риск взлома. Тогда бизнес лишится важного канала продаж. Кроме того, сайт — показатель серьезности компании в глазах многих клиентов. Рассказываем, как запустить собственный ресурс.

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

Выберите 5−7 компаний, которые работают с вами в одной сфере. Изучите логику их сайтов и для наглядности составьте сравнительную таблицу по следующим критериям:

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

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

Какие ресурсы и сервисы вам помогут

  • Colormind — сервис раскладывает палитру цветов на основе загруженного изображения (например, скриншота сайта) и генерирует подборку оттенков по заданным параметрам.
  • Fontface Ninja — приложение поможет сделать анализ шрифтов.
  • Serpstat — для сравнения семантики, видимости сайтов, количества переходов из поисковых систем.
  • Similarweb — для изучения источников трафика на сайты конкурентов.

Продумайте структуру сайта

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

Какие ресурсы и сервисы вам помогут

  • My sitemap generator — с помощью сервиса можно собрать прототип ресурса и наглядно увидеть все блоки. В дальнейшем на этом же ресурсе будет легко создать технический хml-файл — это карта сайта в специальном формате, которая нужна будет для индексации в поисковых системах.
  • Octopus — аналогичный сервис для визуального планирования структуры сайта.

Подберите референсы, изображения, цвета и шрифты

Изучите образцы различных ресурсов и создайте мудборд своего сайта с вдохновляющими примерами. Можно воспользоваться шаблонами, которые предлагают различные конструкторы — например, Tilda. Но часто при кастомизации готовых моделей их привлекательность теряется. Поэтому лучше всегда иметь под рукой ориентиры в области дизайна, к которым вы стремитесь.

Какие ресурсы и сервисы вам помогут

  • Eagle — сервис для подбора и структурирования идей. Все референсы можно сортировать по различным папкам, делать заметки, выявлять дубликаты. Можно загружать не только картинки, но и аудио, видеофайлы.
  • Httpster, Awwwards, Siteinspire — ресурсы, где подобраны образцы качественного дизайна сайтов.
  • Paletton — программа для выбора цветовой схемы. Позволяет сразу «примерить», как разные оттенки будут выглядеть на страницах сайта.

Выполните верстку

Есть 3 пути: конструктор сайтов, CMS-система или самостоятельное написание кода. Для новичков лучше всего подойдут первые два способа.

Конструктор сайтов работает по принципу Lego: из готового набора блоков можно буквально за несколько часов сделать собственный ресурс. Однако эта простота накладывает и ограничения: очень сложно по-настоящему кастомизировать дизайн, функционал и контент. А еще такие сайты обычно находятся на хостинге того конструктора, где были сверстаны. Перенести их на другую площадку практически невозможно.

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

Какие ресурсы и сервисы вам помогут

  • uKit, Nethouse, Wix — наиболее популярные конструкторы. Обычно используются для создания сайтов-визиток, портфолио, относительно простых лендингов.
  • WordPress, Joomla — распространенные CMS-системы, по которым в интернете есть много инструкций, видеороликов, форумов и чатов. В случае затруднений всегда можно будет найти нужную информацию и решить проблему.

Выберите хостинг и разместите на нем сайт

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

  • есть ли ограничения по объему трафика (лучше, чтобы не было),
  • поддерживаются ли популярные CMS,
  • насколько удобна панель управления,
  • есть ли техническая поддержка, насколько она оперативна,
  • какие настроены системы защиты,
  • можно ли подключить услуги электронной почты.

Какие ресурсы и сервисы вам помогут

  • Ru.hostings — сайт для поиска провайдеров с рейтингом лучших на основе открытых данных и отзывов пользователей.