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

Мой псевдонаучный мануал про действия, которые нужно сделать ПЕРЕД созданием сайта. В рамках конкурса.

Концепция
И так, у нас уже есть какая-то идея для сайта.

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

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

На этом этапе важно обдумать, стоит ли игра свеч. Дальше нужны будут уже более значительные энергозатраты, поэтому отступить будет сложнее.

Далее мы анализируем «спрос на сайт». Здесь важно понять, ЧТО будут искать люди у вас на сайте, КАКИЕ ВОПРОСЫ они хотят решить, ПРИ ПОМОЩИ ЧЕГО (тип контента). На выходе получаем:
- Полная структура сайта с детализацией до страниц
- Контент-план на значительный период, который поможет написать контент и размещать его по плану

Теперь с учетом обязательного функционала, структуры сайта и типа контента, разрабатываем схематические макеты сайта. Степень детализации выбирайте сами. Я люблю рисовать довольно точные макеты, оставляя дизайнеру минимум простора для творчества. Процесс разработки макетов – итеративный. Сделали, потом пытаемся что-то улучшить, пробуем, тестируем, спрашиваем мнение других. Лучше набить шишки на этом этапе, чем потом править дизайн и верстку. На выходе:
- Макеты всех типов страниц сайта
- ТЗ на разработку сайта

В итоге на выходе у нас получается четыре документа:
- Макеты сайта отдаем дизайнеру
- Готовый дизайн и ТЗ на разработку отдаем веб-разработчику
- Контент-план отдаем в работу копирайтерам
- Линкбилдинг-план отдаем линкбилдерам (или сами)

Анализ конкурентов
Методика:
1) Найти довольно полный список конкурентов
2) Отсортировать их в порядке убывания посещаемости с учетом «нишевости»
3) Выделить N самых успешных проектов
4) Провести глубокий анализ семантики, особенностей, внутренней и внешней оптимизации
5) Отметить самые комментируемые/посещаемые/лайкаемые разделы/страницы конкурентов
6) Выделить сильные стороны всех конкурентов и применить к своему

Инструменты:
- http://www.similarweb.com/ - статистика посещаемости и топ-сайты по темам
- http://keys.so/ - поиск топовых конкурентов, определение сильных разделов/страниц
- https://ru.ahrefs.com/ - анализ внешней оптимизации

Дополнительные материалы:
- http://sosnovskij.ru/analiz-sajtov-konkurentov/
- http://www.workformation.ru/kak-provodit-a...onkurentov.html
- http://prozhector.ru/publications/vypusk-1...ov-konkurentov/
- http://texterra.ru/blog/kak-vypolnit-anali...konkurenta.html
- http://seoprofy.ua/blog/prodvizhenie-sajto...tov-konkurentov

Анализ семантики
Методика:
1) Собрать как можно больше доступных ключевых слов (в том числе, с конкурентов)
2) Отфильтровать слова по частотности, конкуренции, релевантности, дубликатам
3) Сгруппировать слова (одна группа – одна точка входа)
4) Структурировать группы (категории, меню сайта)
5) Разработать контент-стратегию (каждой группе ключей тайтл, h1, категорию и ТЗ копирайтеру, если нужно)

Инструменты:
- Конечно Key Collector
- http://keys.so/ - дополнительная семантика
- http://mutagen.ru/ - конкуренция ключей, дополнительная семантика
- https://www.semrush.com/ - дополнительная семантика
- http://www.bukvarix.com/ - дополнительная семантика
- http://www.rush-analytics.ru/ - группировка ключей

Дополнительные материалы:
- Любой видео-курс по СЯ, коих сейчас полно (можете попробовать найти мой в паблике)

Проектируем сайт
Методика:
1) Рисуем схематический макет сайта исходя из контент-структуры
2) Смотрим на то что получилось
3) Смотрим на другие хорошие сайты в Интернете
4) Пытаемся что-то перенять, улучшить и переходим к шагу 2
5) И пожалуйста, ничего лишнего (блоки «Кто на сайте», какие-то архивы, огромные шапки ДОЛОЙ)

Инструменты:
- http://www.axure.com/ - офлайн программа
- http://www.hotgloo.com/ - онлайн сервис

Дополнительные материалы:
- Книга «Прототипирование. Практическое руководство»

Примеры
Я решил не разбирать все этапы на каком-то конкретном сайте, но солью немного примеров и опыта.

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

Были собраны конкуренты в основном из keys.so и similarweb.

Что можно сказать интересного глядя на данные?
1) В структуре сайта, оформлению страниц, перелинковке и дизайне стоит ориентироваться на первом и последнем сайте – у них хорошие показатели ПФ.
2) Все сайты с динамикой + (растущим трафиком) стоит проанлизировать в ahrefs и перенять внешние факторы.
3) Проанализировать сайты, у которых больше всего трафика на семантику и внешние ссылки. Понять какой контент дает им трафик.
4) Здесь не видно, но у каждого сайта есть еще столбик «Примечания», где записаны «клевые фишки» сайтов. Их нужно реализовать и у себя.

Структура сайта

Майндмап структуры строительного сайта. Начал составляться на этапе анализа конкурентов. Затем дополнялся в процессе сбора СЯ. Потом вносились отметки на этапе наполнения сайта. Незаменимая вещь.
Также важный момент. Начинаем наполнять сайт с низкоконкурентных ключей (по мутагену). По ним сразу пойдет трафик. Затем по мере набора траста идем к СК и ВК.

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

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

Макет

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

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

Думайте, прежде чем делать сайты