Давайте накидаем перечень контента:
1. Логотип.
2. Глобальная навигация.
3. Вводный текст (только на домашней странице).
4. Редактор кода (только на обучающей странице).
5. Область результата (только на обучающей странице).
6. Индикатор выполнения задания (только на обучающей странице).
7. Теоретический текст (только на обучающей странице).
8. Текст задания (только на обучающей странице).
9. Навигация урока (только на обучающей странице).
10. Регистрационная форма (только на домашней странице).
У нас есть два вида страницы:
• домашняя страница (для вводного текста и регистрационной формы) и
• обучающая страница.
Здесь остановимся. Понятно, что это до смешного просто и не завершено, но для примера хватит. Конечно, мы не включили сюда много другого материала (страницу профиля, статистику по урокам и т. д.) На большом сайте перечень контента может оказаться громадным и, возможно, разобьется на несколько частей. Но помните! Это не функциональные требования. Мы не должны включать каждую деталь каждой части контента. Мы разделили его на большие специфические группы, которые отражают суть.
Как правило, мы присваиваем, номерной или буквенныйидентификатор каждой части контента. Так как наш пример несложный, мы будем просто использовать нумерацию от 1 до 10, как в списке. Дизайн перечня не важен; годится простой старый текстовый файл. Но вы можете сделать его таким, каким позволит ваше воображение.
В перечне контента классно то, что он никогда не подведет. Все срабатывает. Клиент может выкрикивать все, что хочет, а вы просто записывайте это. Мы скоро выясним, что будет работать, а что нет.
Записи перечня можно украсить (например, описаниями или скриншотами готовых компонентов), но знайте меру. Я считаю, что расстановка соответствия контента и типов страниц очень полезна, так что:
• домашняя страница → 1, 2, 3, 10,
• обучающая страница → 1, 2, 4, 5, 6, 7, 8, 9.
Порядок позиций в данном случае не имеет значения. Мы займемся этим во время этапа прототипирования.
Прототипирование со ссылкой на контент
Один из первых шагов, которые делают многие из нас в веб-проектах (будем надеяться, что после тщательной инвентаризации контента) – это создание прототипов. Прототипы, которые сегодня разрабатывают в основном дизайнеры, эволюционировали от простых чертежей прямоугольников на холсте до почти полноценного веб-дизайна, разве что без цвета, изображений и подробной типографики. Изначально это были средства работы с дизайном: расположение блоков, эффект близости, визуальная иерархия, приоритет пространства и т. п. Контент был представлен «грубыми» блоками. Некоторые дизайнеры еще продолжают так делать. Но многие поменяли свои цели.