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

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

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

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

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

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

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

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

А внутри каждой категории находятся страницы со статьями:

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

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

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

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

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

Если же дизайнера в команде нет, то желательно пройти следующий этап:
создание wireframes и прорисовку всего клиентского пути. А следовательно построение клиентского опыта UX.

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

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

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

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

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

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

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

В финале у вас должно получиться что то похожее: