Все этапы создания сайта в web разработке с нуля до размещения в интернете

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

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

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

Хочу заметить, что в статье мы будем говорить преимущественно о создании одно страничного сайта (Landing Page). И хот все сказанное справедливо и для многостраничного веб ресурса, для создания большого сайта этого будет недостаточно.

Первый этап — создание прототипа сайта

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

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

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

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

Сам прототип можно создать с помощью ряда графических программ. Наиболее известные — такие редакторы как Figma и Miro.

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

Второй этап разработки — создание дизайна сайта

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

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

Шрифты на странице

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

Так же не стоит в качестве основного текста использовать декоративные шрифты. Такие шрифты лучше всего использовать как декоративные элементы. Основной шрифт должен быть открытым и читабельным. После выбора шрифта нужно выбрать размеры заголовков и основного текста. Здесь стоит отталкиваться от основного шрифта. Например, выбрав основной шрифт размером 18px заголовок можно сделать размером в 300% от основного. Заголовок второго уровня сделать размером 250% от основного. Так же можно использовать специальные сервисы. Например, этот.

С помощью начертания шрифта (жирности) можно акцентировать внимание пользователя на ключевой информации. При выборе размеров заголовков и текста стоит этот параметр тоже применять.

Для того, чтоб отделить более важный текстовый контент от менее важного можно использовать насыщенность текста и его оттенок цвета.

Выбор цвета на этапе дизайна

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

В зависимости от тематики сайта при выборе цвета стоит учитывать температуру цвета.

Обычно для сайта выбирается три цвета, которые распределяются по странице с соотношением 60—30—10.

• 60% объема занимает основной цвет и его оттенки, с помощью которых отображены фон и фоновые элементы.
• 30% объема занимает цвет, с помощью которого отображен контент.
• 10% занимает акцентный цвет, с помощью которого выделены ключевые элементы на странице.

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

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

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

Дизайн под разные разрешения

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

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

Для так называемых адаптивных версий создаются четыре фрейма (холста) размерами 1000px; 768px; 480px; 320px.

Устройства, которые используют ширину экрана 320px довольно устаревшие и сегодня являются редкостью. По это причине для мобильного устройства можно создать фрейм шириной 360px.

Для того, чтоб при уменьшении ширины экрана элементы сайта их необходимо будет разместить в вертикальной ориентации — в колонку. Шрифт на мобильном устройстве можно уменьшить до 14px.

Третий этап — создание веб версии сайта

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

Создание файловой структуры и подготовка к верстке

Перед написанием кода потребуется создать проект на рабочем столе компьютера и сделать все подготовительные работы.

Для того, чтоб создать проект нужно создать папку нашего сайта, которая будет его корнем. В папке создадим еще несколько папок:

• Image — папка, в которой будут храниться все изображения
• Fonts — папка для хранения шрифтов
• css — папка для хранения файлов css стилей
• js — папка для файлов со JavaScript скриптами
• index.html — главный файл для html разметки страницы

На этапе подготовительных работ скачиваем веб версии шрифтов в формате woff или woff2 и помещаем в папку fonts.

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

В папке css на этапе подготовки создается файл сброса и нормализации стилей.

Этап верстки сайта

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

Этап посадки верстки на CMS

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

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

Для того, чтоб на сайте была административная панель, с помощью которой можно редактировать, добавлять и удалять контент нам понадобится натянуть “верстку на CMS движок”. Другими словами, интегрировать верстку в CMS. Что такое CMS отдельная тема и здесь разбирать не буду.

В этой статье подразумевается натяжка на всем известную CMS WordPress. WordPress написан на языке программирования PHP и задача разработчика интегрировать готовый в результате верстки html в PHP движка.

Для того, чтоб натянуть верстку на WordPress или на какую-то другую CMS необходимо:

1. Скачать и установить локальный сервер на компьютер. Язык программирования PHP является интерпретируемым и работает только на сервере.
2. Скачать и установить сам WordPress.
3. Создать базу данных MySQL. Для того, чтоб иметь возможность изменять контент на сайте необходимо этот самый контент хранить в базе данных, которая вместе с файлами сайта будет храниться на сервере.
4. Создать шаблон сайта в ядре CMS. Перенести весь сверстанный проект в шаблон и добавить в html код необходимые PHP функции.
5. Установить в CMS необходимые плагины и настроить их.

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

Можно сделать натяжку верстки на CMS непосредственно на хостинге. В таком случае не придется устанавливать локальный сервер на компьютер. К тому же на сайте хостинг провайдера предусмотрена установка наиболее популярных CMS. Для работы с файлами движка в редакторе кода достаточно будет соединиться с сервером по FTP.

Этап размещения сайта на сервере

Для размещения сайта на сервере понадобится выбрать качественного хостинг провайдера. Тут важно учитывать его репутацию и другие факторы. Потребуется выполнить следующие шаги:

1. Выбрать тариф и зарегистрировать аккаунт.
2. Выбрать свободное доменное имя и зарегистрировать его (понадобятся паспортные данные). Оплатить домен.
3. Заказать сертификат безопасности (SSL) на выбранный домен. Создать директорию сайта в соответствующем разделе.
4. Поменять пути в файле SQL базы данных с учетом выбранного домена.
5. Перенести базу данных на хостинг
6. Перенести файлы сайта в созданную директорию на сайте хостинг провайдера.

Возможно, сайт будет доступен не сразу. Потребуется некоторое время, чтоб он появился в сети. Так же требуется время на выпуск сертификата безопасности SSL.

Пройдя все этапы мы получаем рабочий сайт в интернете, который доступен любому пользователю по адресу https:// ваш-домен.

Подведем итоги

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

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