Перейти к содержимому
TOPGENIUS
ЖЖ СТУДИИ TOPGENIUS

Как собрать структуру сайта до начала дизайна.

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

Как собрать структуру сайта до начала дизайна — иллюстрация

Структура сайта — это состав страниц и связи между ними. Её собирают от задач посетителя: какую информацию ему нужно найти, что сравнить и какое действие выполнить.

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

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

Сначала опишите вопросы посетителя

Возьмите реальные обращения клиентов. Какие сведения люди уточняют перед заказом? Где путают направления? Какие условия влияют на возможность выполнить работу? Эти вопросы дают основу для структуры без необходимости придумывать разделы ради самого количества.

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

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

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

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

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

Различайте страницу, раздел и блок

Страница имеет собственную задачу и адрес. Раздел объединяет связанные материалы. Блок помогает раскрыть часть вопроса внутри страницы. Если смешать эти уровни, получится либо слишком дробное меню, либо длинная страница с несвязанными темами.

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

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

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

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

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

Соберите рабочую таблицу до макетов

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

СтраницаНа что отвечаетЧто нужно подготовитьКуда вести дальше
Направление услугКакие варианты подходят задачеРазличия, ограничения, краткие поясненияК конкретной услуге
УслугаЧто входит и как обсуждается заказСостав, условия, примеры, исходные данныеК работе по теме или обращению
ПроектКакой опыт подходит для сравненияЗадача, собственное участие, разрешённые материалыК соответствующей услуге
СтатьяКак разобраться в конкретном вопросеПолезное объяснение и проверенные примерыК связанному материалу или услуге
КонтактыКак связаться и что сообщитьАктуальные способы связи и условия обращенияК выбранному действию

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

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

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

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

Проверьте структуру на конкретном маршруте

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

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

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

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

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

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

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

Отделите запуск от возможного расширения

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

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

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

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

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

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

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

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

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

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

Что делать дальше

  1. Соберите вопросы, которые клиенты задают перед обращением.
  2. Разделите будущие страницы, категории и блоки по их задачам.
  3. Заполните таблицу содержания и проверьте основные маршруты.
  4. Согласуйте стартовый состав и материалы либо пришлите нам задачу сайта для подготовки структуры.

Читайте также

Связаться с нами

Расскажите о вашем проекте

Ответим в течение рабочего дня: предложим решение, срок и смету.

Антиспам

Форма защищена от автоматических заявок.

Обратная связь

Обсудим задачу, сроки и состав работ.

Или позвоните

Telegram

Без спам-звонков — один короткий разговор по сути.