Структура сайта в виде схемы от а до я: правильные рекомендации

Почему так важна структура сайта?

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

Наличие четкой структуры сайта позволяет лучше понять ваш сайт и поисковым системам, так что это крайне важно и для SEO

Важность для юзабилити

Структура сайта оказывает огромное влияние на пользовательский eXperience (UX). Если посетители могут найти нужные продукты и информацию, с большой долей вероятности они станут вашими клиентами.

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

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

Важность для SEO

Цельная структура сайта намного повышает шансы на высокие позиции при ранжировании поисковых систем. Есть три главные причины для этого:

1. Она помогает Google «понять» ваш сайт.

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

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

2. Она не дает вашему сайту конкурировать с собой

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

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

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

3. Она работает с изменениями на вашем сайте

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

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

Описание структуры сайта пример: виды и особенности

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

Линейная структура сайта

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

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

Сфера применения сайтов с подобным размещением страниц весьма ограничена. 

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

Виды:

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

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

Древовидная структура сайта 

http://vistanews.ru/uploads/posts/2016-07/1469627212_1.gif » alt=»» width=»533″ height=»325″ />

Является самой оптимальной структурой, которую часто используют веб-мастера в своей работе.

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

Решетчатая структура (системы координат)

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

• создание решетчатой структуры очень сложное, так как необходимо копаться в коде или настраивать под нее CMS. Однако использование CMS поможет вам с тем, как узнать структуру сайта;
• использование решетчатой структуры легко может запутать не только пользователя, когда он будет искать информацию, но и самого веб-мастера во время размещения контента;
  — решетчатую структуру лучше не применять для больших сайтов, так как на них размещается очень много гиперссылок.

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

Смешанная структура (паутина)

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

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

Структура сайта — пример коммерческого сайта с наглядной структурой

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

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

Рис. 4 Линейная структура сайта с ответвлениями

Это чуть более сложная структура, свойственная небольшим корпоративным ресурсам, сайтам-визиткам, некоторым авторским блогам. Как правило, здесь также нет разделов, а есть только отдельные статичные страницы. Но ссылки на все эти страницы (или на большинство из них) размещены на главной. Благодаря этому система навигации здесь очень простая и интуитивно-понятная, а доступ ко всем страницам осуществляется всего лишь за 1 или 2 клика. Характерный пример сайта с подобной структурой — визитка какой-нибудь фирмы (с главной проставлены ссылки на страницу с каталогом товаров, прайс-листом, контактными данными, вакансиями и т.д.).

Решётчатая структура сайта

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

Данный вид структуры характерен преимущественно для каталогов статей или ссылок.

Рис. 5 Решётчатая структура сайта

На первый взгляд она очень удобна для пользователей, но для обычных сайтов её лучше не использоваться.

Дело в том, что:

• Решётчатую структуру сложно создать, так как придётся долго копаться в коде или настраивать под неё CMS
• при организации решётчатой структуры можно легко запутаться не только пользователю во время поиска информации, но и самому веб-мастеру при размещении контента
• на сайте размещается большое количество гиперссылок, поэтому применение решётчатой структуры ограничено для больших сайтов

Древовидная структура сайта

Древовидная структура сайта часто используется многими веб-мастерами как самая оптимальная.

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

Рис.

6 Древовидная структура сайта

Достоинства древовидной структуры сайта

• Главное достоинство древовидной структуры сайта — универсальность. Древовидная структура прекрасно может подойти для любого вида сайта, будь то домашняя веб-страничка, сайт-визитка, корпоративный сайт, портал или каталог.
• Прекрасная навигация. Идея применения подобной структуры заключается в том, что у человека есть выбор и возможность как с главной страницы сайта, так и любой другой, перейти в любой раздел, подраздел и на конкретный страницу (документ).
• Большая гибкость. Хотя на обычном HTML такую структуру сайта практически невозможно организовать (да и не нужно), для её создания пишется движок или используется CMS.

Недостатки древовидной структуры сайта

При использовании древовидной структуры очень сложно соблюдать баланс между «глубиной и шириной». Если «дерево» сайта будет расти только вглубь, то пользователям, чтобы дойти до какой-то информации, придётся загрузить и просмотреть слишком много страниц, что будет раздражать пользователей. Если создать очень широкую древовидную структуру, то посетители будут вынуждены каждый раз тратить очень много времени для выбора нужной им ветки. А это тоже плохо. Таким образом, при использовании древовидной структуры сайта необходимо постоянно следить за её разрастанием и придерживаться золотой середины.

Смешанная структура сайта

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

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

Рис. 7 Смешанная структура сайта

Анализ структуры существующего сайта

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

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

Для чего же нужен анализ структуры сайта?

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

Данный анализ учитывает следующие аспекты:

• Логическая структура сайта. Соответствие названия папок и содержание файлов более низкого уровня тематике папок (разделов) более высокого уровня.
• Размещение однотипных файлов в одной директории. Например, файлы с расширением .png, .gif, .jpg в папке «img», а файлы .pdf в папке «download»
• Соответствие существующей структуры сайта (кластеризованному) семантическому ядру
• Семантическая структура сайта. Цель — использование максимального количества ключевых слов и словосочетаний в тексте сайта с помощью оптимального количества файлов.
• Использование ЧПУ (Человеко-понятный урл) или URL Design в в названии папок (подпапок)
• Анализ структуры сайтов — конкурентов
• Оптимальность ссылочной структуры сайта (внутренняя перелинковка)
• Глубина сайта
• Эффективность и корректность индексации информационных страниц сайта.
• Корректность ранжирования алгоритмом поисковых систем страниц Вашего сайта.

?? Глубина сайта ??

Робот поисковой машины, как и посетитель ресурса, переходит по ссылкам, ведущим на внутренние страницы сайта.

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

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

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

Чаще всего сайт имеет иерархическую (древовидную) структуру, когда главная страница ссылается на разделы, а разделы на подразделы и т.д. Таким образом, наибольший вес имеет главная страница, затем разделы и подразделы.

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

Основные этапы проведения анализа структуры сайта

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

Как составить структуру сайта

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

Введите в поисковую строку ваш запрос, выберите поисковую систему и перейдите на вкладку «Суммарный отчёт» → «Ключевые фразы».

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

Сгруппируйте отфильтрованные фразы с помощью инструмента «Кластеризация» в Serpstat. Исходя из семантики по запросу «халаты», я определила, что пользователей интересуют такие категории, как производитель, тип, детали, материал, длина, а также скидки.

Визуализировать структуру сайта на основе собранной семантики вы сможете в инструменте XMind.

Подробнее о сборе семантического ядра читайте на блоге Serpstat в посте «Как создать структуру сайта на основе семантики» и на блоге Netpeak в посте «Как составить семантическое ядро, не обращаясь к специалисту».

Кроме того, вы можете составить структуру с помощью анализа сайтов ваших конкурентов. Определите типы страниц, а также наиболее трафиковые страницы на сайте конкурента. Если у конкурентов структура отображена в URL, можно просканировать их сайт в Netpeak Spider и выгрузить структуру URL в Xmind. Также вы можете с помощью Serpstat выгрузить только страницы конкурентов с видимостью, вставить в Netpeak Spider, просканировать, построить структуру и выгрузить в Xmind.

5.1. Рекомендации по созданию структуры сайта

• Используйте страницы-хабы → важные обзорные страницы с общей темой или категорией, которые объединяют дочерние категории и подробные темы в одну;
• Создайте SILO-структуру контента → иерархическая организация вашего контента по темам. Страница-хаб объединит контент в общую ветку, а SILO-структура отвечает за распределение внутри этой ветки;

• Добавьте ссылки на значимые разделы в меню или в футер сайта;

  Ключевые разделы меню в футере на сайте Meduza

• Добавьте различные виды перелинковки → контекстная перелинковка, использование различных скриптов;

  Пример страницы-хаба

• Создайте HTML-карту сайта, которая будет содержать ссылки на важные разделы или все страницы ресурса;

  Карта сайта Esquire

• Используйте понятные для пользователя тексты ссылок, которые ёмко описывают суть страницы, на которую ведут. Google использует анкор для определения релевантности вашего контента запросам пользователей.

Типы применяемых структур сайта

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

Особое внимание целесообразно уделить полноте охвата, логике подачи материала

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

Линейная структура сайта

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

Рис. 1 Линейная структура сайта

В линейной структуре не существует разделения контента (страниц) на уровни. Все страницы на таких сайтах равноправны, и их последовтельно должен увидеть каждый посетитель.

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

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

Таким образом создается своеобразная карта проекта, которая помогает посетителю осуществлять просмотр сайта.

Особенности линейной структуры сайта

1. Акцент на одном продукте;
2. Возможность выложить большой объем специализированной или маркетинговой информации;
3. «По дефолту» очевидный процесс покупки продукта, который может быть спроектирован исходя из специфики продукта;

Пример: сервис для улучшения текста «Главред»

Область применения линейной структуры сайта

Область применения сайтов с линейной структурой чётко ограничена.

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

Линейная структура с альтернативными вариантами

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

Рис. 2 Линейная структура сайта с альтернативным вариантом А

Область применения линейной структуры сайта

Чаще всего подобная структура используется для заполнения форм регистрации посетителей сайта. В этом случае все люди начинают работу со стартовой страницы. Однако потом частным лицам предлагается ввести одну информацию, а представителям коммерческих структур — другую.

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

Рис. 3 Линейная структура сайта с альтернативным вариантом Б

Данная структура аналогична дороге с множественными ответвлениями от неё.

Как правильно изменить (переделать) структуру сайта

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

С чего начать изменение структуры:

1. Первым делом вам нужно вывести (выписать) все страницы вашего сайта на отдельный лист (я это делал в екселе). Это нужно для разбивки и построения материала по рубрикам (темам). Сразу указывайте и текущие url для дальнейшего удобства.
2. Следующий этап — четкое понимание (заранее составленный) плана, дополнительные рубрики (страницы) с ключевыми словами или без них. В эти рубрики вы будете распределять страницы выписанные в ексель.
3. Распределить все страницы и записи по соответствующим категориям и страницам. Можно в отдельные листы или файлы.
4. Придумать (использовать ключи) для формирования будущих дополнительных страниц.
5. Прописать в файле для каждой страницы будущий URL.
6. Подготовить тексты или шаблоны контента промежуточных страниц (рубрик).
7. Подготовить файл (блокнот) с редиректами со старых на новые адреса страниц.
8. Добавить новые рубрики (страницы) и текст к ним.
9. Поменять структуру ссылок в вашей CMS.
10. Проставить к каждой записи принадлежность к тем или иным страницам (рубрикам) что бы новые url совпали с плановыми.
11. Внедрить перенаправление со старых адресов на новые.
12. Поменять внутренние ссылки, перелинковку, что бы ссылки со страниц вели на новые URL, а не на редиректы.

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

Теперь давайте быстро пробежим по всем пунктам списка. С 1-го по 7-й можно делать не спеша, никакого “яда” от этого не будет.

После того как все пункты по 7-й включительно будут готовы с 8-го по 11-й нужно внедрить за несколько часов, может день, максимум два, для избежания проблем с индексацией.

Последний 12-й пункт можно провести в течении месяца, он не так критичен, как остальные.

Я больше чем уверен что у вас возникло больше вопросов чем ответов, по этому советую ознакомиться с более детальным описанием всего происходящего на примере сайта “Учебка WordPress”. После ознакомления вам все станет ясно.

Правильная структура сайта

Чтобы Вам было понятнее как создаётся структура сайта, приведу Вам пример создания структуры для нового проекта. Предположим, что я решил делать сайт по тематике «Туризм». Тематика достаточно широкая, поэтому есть, где развернуться.

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

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

Сперва я делаю главные пункты меню:

Европа

Азия

Африка

Северная Америка

Южная Америка

Австралия и Океания

После этого я должен в каждом основном пункте меню сделать второстепенные подпункты. В разделе «Европа» такими подпунктами будут основные страны, куда стекаются все туристические потоки:

Испания, Италия, Франция, Германия, Австрия, Швейцария и т.д.

Надеюсь, технология создания подразделов Вам понятна.

Wireframing

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

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

Подход может быть полезен при разработке сайта по следующим причинам:

• Wireframes позволяет пользователю связать информационную архитектуру сайта с визуальным дизайном, отображая пути от страницы к странице;
• Определять способы отображения различных типов информации в пользовательском интерфейсе;
• Определить функциональные возможности этого интерфейса;
• В определении приоритетов для различных частей контента.

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

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

• Не используйте яркие цвета. Рекомендуется придерживаться серых тонов, если вы хотите выделить различия между частями контента. Если используете цвета, чтобы показать различие между двумя элементами, то оттенки серого цвета подойдут для этого лучше всего;
• Придерживайтесь одного шрифта. Если планируете использовать Comic Sans, возможно, вам придется пересмотреть свою типографику. Применяйте по возможности простые и распространенные шрифты. Но в самих Wireframes, если хотите подчеркнуть отличие заголовков и подзаголовков от обычного контента, используйте разные размеры одного шрифта;
• Не используйте в Wireframes изображения. Можно вставить их позже;
• При создании архитектуры сайта старайтесь избегать интерактивных функций. Поскольку Wireframes являются двухмерными, они не всегда хорошо обрабатывают интерактивные функции. Например, выпадающие меню, состояния наведения и аккордеоны.

В Wireframe рекомендуется включать следующие элементы:

• Логотип сайта.
• Поле или панель поиска;
• «Хлебные крошки» — эти элементы помогают пользователю определить, в какой части сайта он сейчас находится. Обычно это горизонтальные цепочки ссылок;
• Список сайтов;
• Заголовки, включая заголовок страницы с тегом H1 и подзаголовки с тегами H2-Hx;
• Меню навигации, включая глобальную и локальную навигацию;
• Основной контент;
• Кнопки социальных сетей, включая , и т. д.;
• Контактную информацию;
• Карту сайта;
• Футер сайта.

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

• Wireframes с низкой детализацией — разрабатываются быстрее и служат для оптимизации коммуникации и взаимодействия между участниками проекта. При низком уровне детализации точность отдельных элементов не играет роли, поэтому сами фреймы являются более абстрактными. Для обозначения доступных областей пространства используются простые изображения. Вы могли встречать подобные Wire frames, когда видели сайты наполнителем lorem ipsum вместо контента. Это говорит о том, что ресурс находится на стадии проектирования, а реальный контент будет добавлен позже;
• Wireframes с высокой детализацией — более подробны. Этот тип подходит для документации. Подобные Wireframes включают информацию о каждом элементе страницы. Например: поведение пользователя, размеры части контента, действия, связанные с любым интерактивным элементом.

Выводы

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

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

В итоге вы получаете карту сайта, которая легко воспринимается любым специалистом.

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