Как составить план для создания сайта

Поэтапный план создания сайта — читайте в полезном блоге digital-агентства MWI.

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

Обращаем Ваше внимание, что этот материал взят из нашей книги Топ 20 SEO-рекомендаций, которые необходимо учесть при разработке.

Ключевые этапы, которые необходимо отразить в плане работ:

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

3. Подобрать наиболее подходящую для выбранных целей CMS (систему управления контентом), с помощью которой будет осуществляться все последующее взаимодействие с сайтом.
Если бюджет ограничен, то в качестве бесплатных вариантов вполне могут подойти Joomla! или WordPress.
Для более серьезных проектов следует обратить внимание на платную cms 1С-Битрикс.

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

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

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

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

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

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

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

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

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

Подробный план работы над сайтом

У разных веб-студий свой подход к разработке. Но все придерживаются примерно одного и того же плана.

Итак, в разработку сайтов входят следующие этапы:

Определяем цель создания сайта

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

• презентация компании;

• рост узнаваемости бренда;

• привлечение новых клиентов;

• сбор заявок (лидов);

• продажа товаров или услуг;

• информирование о новостях и т.д.

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

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

Поэтому, так важно определить цель (или цели) создания сайта ещё до начала разработки.

Маркетинговые исследования

После определения целей, маркетолог веб-студии приступает к маркетинговым исследованиям.

Исследования делятся на 3 направления:

• Анализ целевой аудитории (ЦА);

• Анализ конкурентов;

• Анализ своего продукта и компании.

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

Разберём каждый вид исследования подробнее.

Анализ целевой аудитории

Целевая аудитория (ЦА) ― потенциальные покупатели товара или услуги. Анализ ЦА отвечает на вопросы:

1. Кто наш клиент?

• Пол;

• Возраст;

• Профессия;

• Образование;

• Хобби.

1. С какой проблемой клиент приходит на наш сайт?

• Потребность (больной зуб, подарок девушке, обучение);

• Факторы принятия решения о покупке (клиника рядом с домом, низкая цена, подробный план занятий);

• Дополнительные факторы принятия решения (бесплатный осмотр, доставка в день заказа, рабочая тетрадь в подарок);

1. Как клиент хочет решить проблему?

• Шаги клиента до совершения покупки (просматривает несколько сайтов, звонит менеджеру, приходит в офис);

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

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

Сегменты ― это разные люди, которым интересны совершенно разные предложения. Среди сегментов принято выделять основной. Основной сегмент приносит до 90% прибыли компании.

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

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

Базовый конкурентный анализ можно сделать за 3 простых шага:

1. Составить таблицу и записать в неё адреса сайтов конкурирующих компаний;

1. Зайти на каждый сайт и посмотреть на сильные и слабые стороны;

1. Зафиксировать в таблице интересные идеи и подумать, как можно их улучшить.

Обязательно проводите анализ конкурентов. Благодаря ему, вам не придётся заново изобретать велосипед. Часть решений будет уже перед глазами.

Анализ своего продукта и компании

Целевую аудиторию нашли, за конкурентами подсмотрели. Теперь нужно проанализировать себя и своё предложение.

Анализ продукта позволяет:

1. Выявить сильные стороны (пицца за 10 минут);

1. Компенсировать слабые стороны (нет доставки пиццы, но дарим бутылку лимонада за самовывоз);

1. Понять, как изобразить продукт на сайте;

1. Найти точки роста (придумать систему скидок, добавить купон или акционное предложение).

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

Выбираем тип сайта

Тип сайта выбирается, исходя из цели и исследований, которые мы провели ранее.

Сайт-визитка или портфолио

Простая веб-страница, которая содержит основные данные о компании или специалисте: название, список услуг, примеры работ и контакты для связи.

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

Landing page

Одностраничный сайт для продажи одного товара или услуги (чаще всего онлайн-обучения).

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

Интернет-магазин

Особенность интернет-магазина ― удобная навигация между товарами, благодаря системам фильтрации и сортировки.

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

Подходит для реализации широкого ассортимента товаров или услуг.

Новостной портал

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

Новостной портал должен быть разработан с учётом ежедневной нагрузки в тысячи посетителей. Крупнейшие русскоязычные новостные сайты России: РИА-новости, Lenta.ru, Vesti.ru и сайт газеты «Комсомольская правда» посещают до 10 млн. пользователей в месяц.

Корпоративный сайт

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

Корпоративный сайт ― это наиболее полная презентация компании в интернете. Такой веб-сервис может совмещать в себе и функции интернет-магазина, и отдел продаж для b2b (оптовые клиенты), и блог новостей.

Пишем техническое задание

Техническое задание (ТЗ) ― это документ, который подробно описывает план работы над сайтом. Цели проекта переводятся на язык разработки с указанием применяемых стеков, фреймворков и других инструментов.

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

Собираем семантическое ядро

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

Найти ключевые слова, по которым страницы будут показываться на поисковиках, можно с помощью сервисов Wordstat (для Яндекса) и Google Trends (для Google).

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

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

Продумываем структуру

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

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

Готовим контент

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

Для многостраничного сайта контента нужно больше, но весь объём на старте не требуется. Например, нет нужды загружать сразу все товары в интернет-магазин. Достаточно загрузить 10-20 позиций самых ходовых товаров, а остальные добавлять постепенно.

Работа над контентом сайта продолжается и после его разработки. На основании собранной семантики можно создать контент-план, который определит наполнение сайта на месяцы вперёд.

Готовим прототип сайта

Одним из важнейших этапов разработки веб сайта является создание его прототипа.

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

Прототип облегчает дальнейшую работу, а именно:

1. Позволяет согласовать промежуточные итоги. Если бы клиент видел оформленный сайт, то он бы оставил множество правок. Чёрно-белый прототип, напротив, позволяет не отвлекаться на визуальное оформление, и при этом показывает концепцию проекта;

Согласование прототипа сайта с заказчиком ― это пример современного подхода к разработке под названием AGILE.

AGILE ― это разделение большой задачи на несколько этапов (спринтов). Каждый спринт согласуется с клиентом.

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

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

1. Экономит на доработках. Легче всего вносить правки в сайт, пока он в виде прототипа. Если же пропустить этот этап, то вносить изменения придётся и в дизайне, и в вёрстке, и в программировании, что дороже и занимает больше времени.

К тому же, на этапе прототипа можно оценить удобство сайта. Иначе говоря, пользовательский опыт или user experince (UX). Поэтому, прототип ещё называют UX-дизайном сайта.

Отрисовка дизайна сайта

Дизайн ― визуальное оформление проекта. В дизайн входят:

• цвета;

• шрифты;

• оформление кнопок, форм;

• анимация элементов.

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

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

При разработке дизайна также разрабатывается мобильная версия будущего сайта.

Мобильная версия ― это очень ответственная часть работы, потому как более 50% посетителей будут заходить на сайт с мобильных устройств.

Выбираем CMS (языки, фреймворки или конструкторы)

Мы уже определились с типом сайта, продумали его структуру, составили прототип и даже отрисовали дизайн.

Теперь нам нужно выбрать платформу, на которой наш сайт и будет работать. Мы можем выбирать между вёрсткой на «чистом» коде, использованием фреймворков, CMS или конструкторов.

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

Разработка сайта на языках программирования

Написание сайта с нуля на «чистом» коде ― это самый дорогостоящий подход к разработке. Используются три низкоуровневых языка программирования:

― HTML (отвечает за расположение элементов);

― CSS (отвечает за визуальное оформление элементов);

― Javascript (отвечает за интерактивные действия: калькуляторы, формы обратной связи, сложные анимации и т.д.).

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

Разработка сайта на фреймворках

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

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

Подходят для реализации сложных корпоративных сайтов и веб-сервисов. Во всех же остальных случаях достаточно CMS или конструктора.

Примеры: Bootstrap, Vue.js, django и другие.

CMS (коробочная система управления)

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

Существуют отдельные CMS для создания интернет-магазинов, блогов, лендингов, порталов новостей и т.д.

Конструктор сайтов (SaaS-платформа) ― самый простой вариант

Конструкторы сайтов ― это самый простой и в то же время наименее гибкий способ разработки.

Конструкторы распространяются по модели SaaS-платформ: пользователь оплачивает подписку, а взамен получает все возможности платформы и полную техническую поддержку.

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

Верстаем сайт

Вёрстка ― это перенос дизайна в программный вид. Верстальщик должен позаботиться о том, чтобы сайт корректно отображался на всех устройствах: ПК, планшеты, смартфоны.

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

Программируем сайт

Дизайн сайта успешно перенесён верстальщиком. Но веб-сервис по-прежнему не работает.

И тут на сцену выходит программист, который прописывает логику поведения проекта. В случае, когда сайт построен на CMS или конструкторе, программирование не требуется.

Проводим тесты

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

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

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

Публикуем контент

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

Размещаем сайт в интернете

Готовый сайт размещается на хостинге, ему присваивается доменное имя ― адрес сайта. Выпускается сертификат безопасного подключения SSL.

По желанию клиента, проводится обучение по работе с админ-панелью сайта. С помощью админ-панели клиент может самостоятельно загружать и удалять контент, отслеживать статистику посещения и вносить мелкие правки.

Какие этапы исключатся на конструкторе

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

Этапы, которые исключаются:

1. Выбор CMS. Внутри конструктора уже есть весь необходимый инструментарий и готовые компоненты для разработки;

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

1. Тестирование. Конструкторы сайтов предлагают готовые решения, нет нужды заниматься их тестами. Достаточно оптимизировать контент (сжать картинки, видео, упростить анимации и т.д.);

Этапы, которые упрощаются:

1. Составление ТЗ. Использование конструктора упрощает ТЗ. Можно не тратить время на прописывание многочисленных языков, фреймворков и инструментов. Вместо этого уделяется внимание более важным вещам (скорость загрузки сайта, структура, отображаемость на девайсах и т.д.);

1. Вёрстка. Перенос дизайн-макета на конструктор происходит без использования HTML и CSS. Фактически, вёрсткой может заниматься сам дизайнер;

1. Публикация в интернете. На конструкторах процесс запуска сайта заметно автоматизирован и упрощён: зарегистрировать домен, выбрать хостинг и выпустить сертификат можно внутри SaaS-платформы.

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

Хотите научиться делать коммерческие сайты для бизнеса? Оцените все преимущества работы на конструкторе сайтов Creatium. Зарегистрируйтесь и пользуйтесь возможностями платформы бесплатно 14 дней без ограничений.

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

Мы решили восстановить справедливость (а заодно развеять популярные мифы), подробно осветив процесс разработки «от и до». Получился «мануал» длиной в 17 пунктов, что само по себе свидетельствует о масштабе деятельности, которая разворачивается в рамках создания сайта.

Процесс создания сайта пошагово

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

Подготовка к созданию сайта

1. Бесплатная консультация

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

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

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

2. Заполнение брифа

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

Заполненный бриф дает возможность оценить объем и примерную стоимость работ.

Грамотно составленный и информативный бриф — первое условие успешной разработки сайта.

3. Обсуждение проекта

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

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

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

4. Подготовка коммерческого предложения

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

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

5. Подписание договора

Когда КП обсудили, проговорили все волнующие вопросы и пришли к консенсусу, составляем и заключаем договор. Он гарантирует вам, что услуги по созданию сайта будут оказаны в полном объеме и в условленные сроки.

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

6. Сбор семантики для SEO

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

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

7. Составление технического задания

Финальный подготовительный этап — формирование технического задания на создание сайта (ТЗ). Оно составляется на языке, понятном специалистам — веб-дизайнерам, программистам. Это рабочий документ, помогающий выполнить все требования и проконтролировать результат.

Нередко заказчик сайта уже имеет готовое ТЗ, тогда данный этап можно пропустить.

Если техзадание составляется студией, его обязательно согласовываем с вами.

Разработка дизайна

8. Создание дизайн-концепции сайта

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

Мы предлагаем несколько вариантов дизайн-концепций и объясняем преимущества каждого подхода.

Вы выбираете лучший, на ваш взгляд, вариант. Он и поступает в работу.

9. Создание прототипов страниц сайта

Прототипирование — создание шаблонов страниц. Прототип демонстрирует общий внешний вид и структуру.

Мы создаем прототипы для всех типов страниц: главная, каталог, страница услуг, контакты, карточки товаров и т.д.

Каждый шаблон согласовывается и, при необходимости, дорабатывается.

10. Разработка дизайна адаптивной версии

Не менее 50% вашей аудитории пользуется мобильными устройствами. Поэтому важно подготовить версии страниц, адаптированные под гаджеты.

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

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

Верстка и программирование

11. Верстка сайта

На этапе технических работ все, что придумано и «нарисовано», реализуется в «цифре» — в виде кода.

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

12. Программирование

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

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

13. Тестирование сайта

Все, что сделано в процессе веб-разработки, подвергается тестированию. Этим занимаются аналитики, программисты, тестировщики студии и сам заказчик.

Тщательно проверяем работоспособность и оперативно устраняем проблемы до выхода сайта в «мир».

Наполнение сайта

14. Подготовка контента

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

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

Создание контента лучше доверить специалистам. Он должен быть не только интересным и полезным, но и оптимизированным в соответствии с SEO.

15. Размещение контента

Созданный контент размещается на сайте. Когда проект небольшой, это делается вручную. Если на сайте сотни или тысячи страниц, целесообразно задействовать программные средства (например, выгрузку из 1С).

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

Фотографии оптимизируются с сохранением качества — для ускорения загрузки страниц.

Типографирование обеспечивает правильное отображение текстов — для комфортного восприятия пользователями.

Пуско-наладка и сдача проекта

16. Финишные настройки и запуск

Перед запуском проект еще раз тестируется — уже в готовом, наполненном виде. После этого сайт переносится на хостинг, и подключается домен. Теперь ресурс доступен в Сети, и его можно найти по уникальному адресу.

17. Сдача проекта заказчику

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

При необходимости, проводим экспресс-обучение по работе с администраторским интерфейсом — для вас и ваших сотрудников.

Этапы оплаты

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

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

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

Профессиональная веб-разработка

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

Planning is critical to most work, including web design. Without a website project plan, you’ll have a website that yields poor results, disappoints clients, and frustrates the development team.

This article will help you plan web design projects so you can deliver them successfully. Here’s what you’ll learn:

• Why do you need a website project plan?
• How to plan a website project?
  • Research requirements
  • Identify project activities
  • Create a project schedule
• How to present a website project plan?

Ready? Let’s dive in.

Why Create A Website Project Plan?

Most web design agencies understand the importance of planning. Yet website development planning takes a back seat.

You’re busy, focused on solving day-to-day challenges. Maybe you lack the expertise to map out the entire website planning process. Or, perhaps website planning feels like a pointless exercise as things change anyway.

Whatever the reason, a website project plan is critical to delivering a web design project successfully. 

Here’s what happens when you fail to plan:

• Your design and development team is forced to make assumptions. Incorrect assumptions result in scope creep and cost overruns.
• Now and then, you have to go back and begin again. As a result, you miss milestones and delivery deadlines.
• Confusion rules supreme as you need runtime clarifications from clients. Back-and-forth communication adds more delays.
• Clients are dissatisfied, frustrated, and may threaten to shut down the project altogether.
• You deliver a website that no one is happy with.

How To Plan A Website Project?

Before you start talking to clients about the website, you’ll need to get three things in place.

• Project Manager: This person leads the project team. They are responsible for project research, planning, execution, and communication. Most agencies don’t hire certified project managers. And often, a senior team member assumes the responsibility of a project manager.
• Project Management Methodology: The PM methodology dictates how a project is managed and delivered. Two common methods of project management are Waterfall and Agile. Learn more about popular project management methodologies.
• Project Management Tool: A project management platform helps the project manager in planning and tracking a project. We have compiled a list of the best web design project management tools.

Now that you have the basics in place let’s dive into the first step for planning your website project.

Step #1: Research Requirements

First, you need to define what the client wants. 

The client can be external or internal. Instead of talking to a committee, ask the client to assign a contact person. The same person is also preferably the decision-maker for the project.

Next, along with the contact person on the client’s side, define the following:

Purpose

Every website is different. You can do a lot of things with a website — sell products, share a portfolio, manage a publication, etc.

Understand what the client expects the website to do.

Audience

Depending on its purpose, a website may serve one or more audiences. For each audience, create an audience persona. The persona should contain detailed information about the audience demographics and beliefs.

You can use this tool from HubSpot to make a customizable audience persona. 

Constraints

The most common constraints are budget and time. Web design projects may also have design constraints. For example, the client may ask for specific colors, fonts, etc. 

Creative teams may feel that constraints limit creativity. But, at the same time, they also help define the project scope.

Priorities

Priorities are the other side of constraints. 

With limiting constraints, you must understand what goals and audiences are essential to the client. That’s because focusing on wrong priorities results in scope creep. Scope creep, in turn, delays the project. And may even result in complete project failure.

Once you’ve identified the project’s goals, target audience, constraints, and priorities, document these in the project proposal. Keep the proposal brief and make it simple.

Finally, get the proposal approved by your client.

Step #2: Identify Project Phases & Activities

Next, once the client has approved your proposal, identify all the phases and activities needed to complete the website project.

Most web design projects will have a similar set of tasks. However, depending on the client’s needs, your project may include additional activities. 

Depending on your project management methodology, you can execute project phases iteratively or sequentially.

For example, you can do content preparation, design, development, and testing phases iteratively for each web page. Or you can prepare content for all pages, then create designs, develop all pages, and finally test them together.

Let’s look at some common activities in web development projects.

Branding, Infrastructure & Layout

In this phase, you set up the foundation of your web design project. 

At the end of this phase, you’ll have ready access to all the global elements of your project. These global elements affect all the pages of your website. As a result, you’ll have to work closely with the client and get approval for each finalized element.

Examples of project activities in this phase include:

• Define the site title and tagline.
• Finalize logo, color palette, fonts, and page layouts.
• Create a sitemap that shows all the website pages and the relations between them.
• Purchase a domain and hosting services.

Content Preparation

The goal of this phase is to gather all the content needed for the website. The sitemap and the page layout styles created in the previous phase help identify the necessary content.

You may find that some content is already available with the client. However, you may need to work with external content creators in some cases.

Typical project activities in this phase include:

• Identify the types of content needed. For example, page content, testimonials, privacy policy, terms of use, FAQs, etc.
• Decide on client-side, internal, and external content creators and providers.
• Create/update/receive the text and graphical content.
• Organize the content in a content repository.
• Proofread, validate and finalize content.

Design & Development

This is the phase where all the real work happens.

Your team starts to design and develop the website’s pages. Activities in this phase depend on the sitemap, layouts, and content collected in the previous two phases.

Here are some examples of activities that happen during this phase.

• Design page elements such as buttons, call to actions, testimonials, etc.
• Design pages based on layout styles and content.
• Set up a sandbox server.
• Convert design mockups into coded widgets and pages.
• HTML, CSS, and Javascript validation.
• Develop functionalities like a blog, an e-commerce store, or a CMS.
• Organize and link pages according to the sitemap.
• Review pages with clients and get necessary approvals.

Testing

In this phase, you validate the website’s functionality and verify that it matches the client’s requirements.

Depending on the needs, various types of testing may be necessary. These can range from accessibility testing to website load testing. In some cases, you’ll also need to test the website for SEO-related issues.

Examples of activities in this phase include:

• Check that the website confirms with web standards.
• Ensure accessibility standards for differently-abled persons.
• Test the functionality is working as expected.
• Check if the website is responsive and works well on all devices.
• Fix issues that crop up during testing.

Go Live

Once you’ve tested the website and fixed the issues, it’s time to deploy the website on the client’s hosting server.

Depending on the approved project proposal, you’ll need to perform the following activities:

• Upload the website to the client’s hosting server.
• Write and hand over the website’s documentation to the client.
• Train the client team to create and update the website.
• Create a robots.txt file.
• Create and submit the XML sitemap to search engines.

Step #3: Create a Project Schedule

The final step in creating the website project plan is to map the activities and phases to specific dates. When creating a project timeline, activities become your project tasks with start and end dates. Similarly, the end of a phase marks a milestone on the project’s timeline.

You’ll need to consider the following factors when creating a schedule.

Client’s Priorities 

In some cases, the client may have a hard deadline for a website design project. For example, an event website has to be delivered before the event date or of no use.

Also, the client may consider dropping a few requirements from the scope if it’s impossible to hit the deadline. Keep these priorities in mind when planning the project’s schedule.

Team Availability

You don’t want to create a schedule and then find out your lead designer isn’t available for the design phase. That’s why you want to plan your project’s schedule around your team’s vacation days and public holidays.

Also, most web design teams share team members across projects. So, ensure that team members are not busy with other projects. Plus, look at their workloads and see that no one is overworked.

Toggl Plan’s Team Plan view makes it easy to visualize your team’s availability and workloads. You can also adjust the schedule without leaving the team view.

Task Estimates

The final part of the scheduling puzzle is task estimates. 

Let’s get this straight. Task estimation is complicated. And even seasoned managers can get estimates wrong. 

Also, unexpected events can throw your project schedule off. A team member may become unavailable. The content provider may delay content prep. Or the client may not send approvals on time.

In any case, draw from your experience to estimate tasks. But add buffers to ensure that you have time to recover in case things go wrong.

Here’s a simplified website project plan made in Toggl Plan:

So far, we’ve looked at how to discover project requirements, identify the project’s tasks, and create a project schedule. The only thing that remains is to present the finalized project plan to the clients and the team.

How To Present A Website Project Plan?

You can present a project plan using Excel, Powerpoint, or a project management tool like Toggl Plan. Take a look at how to manage a project in Excel.

However, project plans made in Excel aren’t collaborative. Plus, as more people update a spreadsheet, keeping its integrity becomes challenging. And, finally, it’s impossible to control access to an Excel sheet. 

That’s where Toggl Plan can help. 

With Toggl Plan, you can create color-coded website project plans, visually manage your team’s availability, and share the project’s progress with your clients. Clients see a read-only view, so they’re not bothered with the day-to-day tasks in a project.

Toggl Plan is easy to get started with and grows with your needs. Its simple, drag-and-drop interface means you can spend more time doing actual project work instead of tinkering with the tool. And, as an added bonus, it’s a tool your team will enjoy using every day.

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

Ниже я буду рассказывать о своем опыте. Сайтами я занимаюсь  уже порядка 15 лет, а вплотную – около 10 лет. Почему это так? Сейчас любая трансформация в организации, любые изменения в организации, так или иначе, касаются информационных систем. То есть, если мы хотим получить продажи, мы должны создать сайт. Если мы хотим повысить качества сервиса, то, скорее всего, это должно каким-то образом отображаться на сайте, например, в личном кабинете и как следствие ведет за собой создание нового сайта.

Введение

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

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

Немного о причинах появления этой статьи

Практика показывает, что заказчики чаще всего не совсем понимают, что им на самом деле надо, когда говорят об обновлении и редизайне сайта. Все думают, что редизайн — это на самом деле, создание совсем нового дизайна и тому подобные вещи. Люди путают веб-дизайн с дизайном, или наоборот, говорят, что это одно и то же. На самом же деле, в принципе, это очень близкие понятия, тем не менее, существует очень много отличий. Со временем, у меня сложился определенный опыт объяснения для заказчиков. И я для себя выработал определенную методику, согласно которой, работаю и создал уже не один десяток сайтов.

Что такое создание сайта

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

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

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

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

Этапы создания сайта

Конечно, проще всего написать фразу, которую сейчас очень часто используют в рекламе “создание сайта с нуля”. Казалось бы, что может быть проще и понятнее — просто сайт и все? Но это не так. Чем более подробно и грамотно труд по созданию сайта будет разделен на этапы, чем более узкоспециализированные специалисты будут привлекаться к каждому виду работ, тем вероятней что в конце получиться то что было задумано.

1. Осознать потребность.

2. Сформулировать идею.

3. Создать техническое задание.

4. Разработать схему расположения элементов.

5. Нарисовать дизайн.

6. Сверстать HTML шаблон.

7. Запрограммировать  контентную среду.

1. Осознать потребность

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

В принципе, потребность описывается, исходя из проблем: Например:

• нужно продавать через интернет, 

• требуется сэкономить время сотрудников,

• слишком много времени уходит на общение с клиентом по документообороту,

• покупатели недовольны скоростью ответа менеджера по продажам. 

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

2. Сформулировать идею

Что такое идея? Это ответ на вопрос, что необходимо сделать. Если у нас есть проблема, мы должны решить, что нам необходимо сделать для ее решения. 

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

Еще один пример — решение проблемы затрат времени и недовольства клиентов при работе менеджеров с документами. Идея может быть такой: предоставить доступ к документам в личном кабинете на сайте. 

Кто должен формулировать идеи? 

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

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

Формулировать идею нужно четко, понятно и кратко — максимум, один абзац. Это может быть 200-300 символов или даже 150. Главное, чтобы идея была понятная и емкая, чтобы в конце, когда сайт будет создан, вы смогли понять, соответствует ли он сформулированной идее.

Идея оформляется в виде текста, после чего трансформируется в техническое задание.

3. Создать техническое задание

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

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

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

Именно в текстовом техническом задании дается подробная расшифровка идеи плюс описываются технические требования, которым должен соответствовать конечный сайт.  Техническое задание может занимать, для примера, 30 000 символов. Чтобы было понятно, это около 25 страниц текста, где была описана каждая страница, какие элементы должны присутствовать на каждой из них, и так далее. Пример данного ТЗ я прикладываю. 

4. Разработать схему расположения элементов (прототипирование)

Техническое задание является основанием для создания схемы расположения элементов. Что такое схема расположения элементов? Этот этап еще называют прототипированием, и это определение не совсем верное, потому что прототипом все, что угодно можно назвать. 

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

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

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

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

Ниже вы видите примеры такой схемы, созданной от руки и нарисовано и с помощью Balsamiq Wireframes .  

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

5. Нарисовать дизайн

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

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

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

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

6. Сверстать HTML шаблон

Затем на основе прорисованного дизайна создается html шаблон (это также называется версткой сайта или шаблона). Потому готовый дизайн мы отдаем это верстальщику. 

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

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

Например, дизайнер сделал 11 пикселей, а у нас в верстке мы используем BOOTSTRAP. И мы не можем сделать 11 пикселей, у нас всегда будет какая-то относительная величина. Может быть, 10 или 12, в зависимости от того, что именно было указано в колонке. Соответственно, здесь такая точность, в принципе, не нужна. Главное, чтобы было изображено в соответствии с дизайном. Но при этом я рекомендую ориентироваться больше на зрительное восприятие, а не на, так называемый, пиксель перфект.

7. Запрограммировать  контентную среду

После того, как создан html шаблон, следующим этапом будет программирование контентной  среды. 

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

Когда вы создали шаблон в виде html страницы, там может быть любая информация. Часто на этом этапе вместо точной информации об услугах используется какая-то “рыба” или нарисована какая-то произвольная фотография стола с надписью. Но для того, чтобы сайт работа, чтобы на нем отображалась реальная и актуальная информация, контент должен ожить. И чтобы он ожил, мы должны наш html шаблон адаптировать для конкретной среды. И вот здесь, как раз-таки, в дело вступает программист. 

На примере Drupal: берем верстку, создаем типы материалов, сами материалы, необходимые элементы для того, чтобы они отображались на странице, и программист задает эти стили. То есть, берет стили из html шаблона, и получает конечный результат, который как раз-таки, будет являться тем сайтом, которым будут пользоваться например, покупатели столов.

Зачем нужен руководитель проекта

Как видите, над сайтом работают разные специалисты. А потому, кто-то должен все это контролировать, распределять обязанности, проверять результат. Это все должен делать, как раз-таки, руководитель проекта создания сайтов. 

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

Специалисты

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

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

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

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

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

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

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

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

Так же про работу со специалистами можно почитать в статье:

О единстве и борьбе противоположностей в бизнесе. Взаимоотношения заказчика с исполнителем

Вопросы и ответы

Можно ли «перепрыгивать» некоторые этапы?

Нет, нельзя. Вы можете решить сами или по договоренности с заказчиком, что на самом деле, все и так понятно, и не нужна ни идея, ни техническое задание, просто создаете сайт и все. Но на самом деле, так поступают обычно, если создают сайт на каком-то конструкторе, например, на Tilda, или на очень простой CMS (WordPress, Webflow  и подобные), в тех случаях, когда создают «простой сайт за несколько дней и 1000 рублей».

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

Вам могут пообещать «мы создадим для вас хороший сайт на Tilda за 1000 или даже 20 000 рублей». Но что такое хороший сайт? Вы уверены, что ваше понимание и понимание людей, которые будут этот сайт делать, совпадает? Или предложат даже готовое тематическое решение, например, «создадим сайт для консалтинга». А каким должен быть сайт для консалтинга? Если нет поставленной цели, нет сформулированной идеи, то вам будет не с чем сравнивать, чтобы понять, хороший ли это сайт и поможет ли он вам в решении тех задач, которые вы бы хотели реализовать.

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

А что вы скажете о SEO?

Очень важно понимать, что SEO – это сложное понятие. С одной стороны, оно включает в себя широко известные технические требования, которые обязательно должны учитываться при создании сайтов. Об этом пишут очень много даже сами поисковые системы – как технически должны оформляться страницы, какие ошибки лучше не допускать и т.д. С другой стороны, ни одна поисковая система не расскажет вам, как работает алгоритм ранжирования, соответственно, вы не можете точно знать, как сделать, чтобы страницы вашего сайта ранжировались, и заранее на 100% сделать сайт таким, чтобы он вошел в ТОП выдачи.

Потому с точки зрения SEO на этапе создания сайта самое важное:

1. Создавать качественный контент (уникальные статьи, полезные публикации, грамотные описания и т.д.)

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

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

Интересная статья по теме SEO:

HTML5 и алгоритм разметки документов

Как набраться опыта?

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

Я уже 15 лет учусь и набираюсь опыта на практике. И могу поделиться собственным лайфхаком – экспериментируйте на себе. Лично мой сайт прошел уже, наверное, около 20 итераций. Я приложу некоторые варианты его дизайна, чтобы вы могли оценить, насколько по-разному выглядел мой сайт в разное время. Что только я ни пробовал! И разные дизайнерские решения, и разные движки – WordPress, Tilda, Webflow и некоторые другие. Лично я остановился в итоге на DRUPAL по целому ряду причин, среди которых не последнее место занимает то, что мне лично DRUPAL очень нравится.

Почему я выбрал именно Drupal можно почитать в моей статье:

Обзор CMS DRUPAL 9

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