Создаем структуру сайта
Продукт начинается даже не с конструктора сайта или лендинга.

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

Карта сайта
Это самый первый уровень при проектировании вебсайтов.

Вы должны выстроить взаимосвязь на уровне названий страниц

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

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

Пойдем по шагам.

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

Их роль в процессе проектирования сайта выполняет информационная архитектура.

Вы должны прописать какие заголовки должны быть на сайте.

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

Если же дизайнера в команде нет, то желательно пройти следующий этап:
создание wireframes и прорисовку всего клиентского пути. А следовательно построение клиентского опыта UX.
Вайрфреймы и логическая схема
На этом уровне когда у вас уже есть все заголовки и кнопки, а также показаны логические переходы вам необходимо раскидать все эти элементы по экрану таким образом чтобы это уже минимально напоминало законченный сайт.
Картинки вы можете обозначить простым квадратом.
Текст тонкими линиями.

Заголовки толстыми линиями и кнопки прямоугольниками.

Так же очень важно проработать вопросы связанные с ошибками.

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

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

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

В финале у вас должно получиться что то похожее:
Что стоит загуглить:
Структура сайта
Ответьте на три вопроса чтобы закрепить навык.
Начать тест
Что такое информационная архитектура продукта?
Точно так.
Это больше относится к технологической инфраструктуре.
Туториал для пользователя. Информационная архитектура это все же про другое
Продолжить
Проверить
Показать результаты
Информационную архитектуру можно спроектировать с помощью:
И с помощью этого тоже.
И с помощью этого тоже.
И с помощью этого тоже.
И с помощью этого тоже.
Точно. Не важно с помощью какого инструмента. Важен результат.
Продолжить
Проверить
Показать результаты
Обязательно ли делать человеко-читабельные ссылки
Продукт может работать даже если там все страницы просто по номерам названы. Единственная проблема это не запутаться во время добавления контента.
Точно! Особенно если это небольшой продукт или эксперимент. Но если вы строите какое то большое решение, то стоит все таки ссылки называть системно.
Продолжить
Проверить
Показать результаты
Оу. Что то пошло не так.
Стоит еще раз освежить контент в памяти
Пройти еще раз
Могло быть и лучше
Почти все правильно, но чуть-чуть не хватило. Ничего страшного, ведь совершенство требует терпения.
Пройти еще раз
Отлично!
Можно со спокойной душой переходить к следующему разделу.
Прокрути чуть ниже и продолжи:)
Пройти еще раз
Твое мнение важно. Все анонимно. Не сдерживай себя.