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

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

Определим структуру проекта, отразив её в шапке проекта в навигации.

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

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

Выберите подходящее вам меню:

Типовая структура: услуги, блог, о нас, контакты.

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

Первый пункт — услуги. То есть то, зачем пришёл посетитель.

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

Если услуг много, то делаем выпадающее меню со списком и переходом на каждую конкретную страницу:

Сами услуги могут быть описаны в рамках одной страницы. Если услуга одна, то, скорее всего, это будет описание из одной страницы. Или последовательное описание нескольких услуг в рамках одной страницы:

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

В главном меню может быть не один пункт с услугами, а несколько:

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

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

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

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

Это можно представить таким образом:

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

Самая простая ситуация: товаров мало. Классификация не нужна. Все товары находятся в одном разделе.

Если количество товаров значимое, то необходимо их разделить на большее количество разделов. Примеры классификации:

• Основная классификация по типу продукта: купальники, холодильники, мониторы, средства против облысения, мобильные телефоны
• По целевой аудитории: для мужчин, для женщин, для детей; для школьников 1-5 классов; для 6-11 классов;
• По участию в акциях: скидки августа; распродажа; скидка 70%
• По участию в подборках: новинки; выбор эксперта; актуально в текущем сезоне;
• Ася Давыдова рекомендует; для вдохновения
• По производителю: Nokia, Apple, Samsung
• По стране происхождения: Китай, Россия, США
• По назначению: для дома, для офиса, для дачи
• По коллекции: зимняя коллекция, летняя коллекция
• По цвету: красные, зеленые, синие

Структура интернет-магазина — это объединение ссылок на разделы и страницы. Стандартные страницы отвечают на обычные для интернет-магазина вопросы:
1. Условия доставки и оплаты
2. Условия возврата
3. Информация о компании
4. Контактная информация

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

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

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

Таким образом, мы будем описывать наши услуги в рамках одной страницы. Будь то единая услуга - "Комплексное сопровождение компании в интернете", "Создание сайтов" или ряд услуг - создание сайтов, продвижение сайтов, фотосъемка товаров для интернет-магазина. Всё делаем на одной странице. Вот так:

3. Портфолио + блог (формат 2в1)
Блог — это страницы, упорядоченные по дате. В блоге есть список таких страниц — постов. И есть страницы каждого конкретного поста.

В блоге мы будем публиковать наше портфолио и писать статьи. Если у вас нет ни портфолио, ни постов, то ничего страшного, мы это поправим к концу блока "самоупаковка".

4. Страница "Контакты"
Туда мы повесим все контакты - от соцсетей до адреса (даже если нет офиса).

Изначально мы остановимся на этих 4 пунктах. Потом можно будет добавить отдельный раздел, который назовём "Отраслевые решения" / "Готовые решения" / "Спец.предложения", но это уже потом. Я обязательно расскажу о готовых решениях позже на курсе.

Итак, что нам нужно сделать на текущем шаге?

• Главная страница у нас уже есть. Гуд. Пока её не трогаем.
• Создаём страницу услуги.
• В блоге создаём 4 поста-заглушки. Или, другими словами, 4 поста-рыбы. Заглушка или рыба - это просто сленг, обозначающий размещение не финальной информации, а временных текстов и изображений, служащих примером. Только давайте сразу сделаем заглушки для работ в портфолио, а не просто произвольно постучать по клавиатуре. Все посты нужно опубликовать (по умолчанию они являются черновиками). Фотки для заглушек я обычно беру тут: https://www.pexels.com/
• Ну и создаём страницу "Контакты"
  
  Должно получиться вот так. Страницы:

Что касается работы с блогом, то вот где это происходит: