Для веб-дизайна используются следующие методы:

• Сюжетная доска(storyboard) - графическая схема веб-сайта, может быть нарисована на бумаге, создана в любой графической программе, сгенерирована каким-либо веб-редактором (HTML editor).
• Карта сайта (site map) - как правило, текстовое описание устройства сайта.
• Решётчатая модель (wireframe) - оболочка, которая показывает создаваемые веб-страницы. Каждая страница нарисована информационными блоками, которые показывают где и как располагаются различные компоненты. Таким образом, представляется визуальное размещение объектов (layout), но не конечный внешний вид.
• Сценарий (scenario) - текстовое описание вариантов использования (use case).

Cюжетная доска (storyboard) используется в дополнение к карте сайта, помогая сделать решения по дизайну, технологии и бюджету. Хорошая сюжетная доска предоставляет понятный обзор создаваемого веб-сайта всем связанным с проектом людям. На сюжетной доске не видно всех отдельных страниц веб-сайт, потому что она покрывает лишь важные функциональные части веб-сайта. Доска не содержит информации о визуальном дизайне страниц, однако даёт возможность получить представление, какие основные элементы есть на каждой странице. Сюжетную таблицу также как и карту сайта можно создать при помощи карандаша и бумаги или какой-либо графической программы.

Рисунок 4-23. Типичная сюжетная таблица. Источник: http://www.eneta.ee/oppimine/veebistuudium/Lehed/veebidisain.aspx

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

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

Рисунок 4-24 Типичная карта сайта. Источник: http://www.eneta.ee/oppimine/veebistuudium/Lehed/veebidisain.aspx

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

Рисунок 4-25. Типичная решётчатая модель веб-страницы. Источник: http://www.eneta.ee/oppimine/veebistuudium/Lehed/veebidisain.aspx

Сценарий (scenario) - это текстовый прототип, который описывает устройство создаваемой веб-страницы. Включает в себя и варианты использования (user story, use case) - текстовые описания действий, выбора и результатов.