Проектирование информационной архитектуры сайта. Курс выживания.

(Окончание. Начало в №№7-14) В прошлом раз мы начали говорить про сетки дизайна. Напомним, что это — своего рода макеты, которые описывают содержание веб-страницы, а не представляют его, как, например, эскиз дизайна. Таким образом, становится видно, в каком месте у вас будут размещены элементы содержания, места для локальной и глобальной системы навигации, внутренней или внешней рекламы, спонсорских ссылок и логотипа компании. Для начала возьмите список разделов сайта и сделайте из него список страниц всех возможных типов. Отдельные страницы сайта должны быть выполнены в одном стиле в пределах всего сайта. Просмотрите инвентарный список элементов содержания и попытайтесь отобрать два-три основных типа содержания. Вы начнете со страниц этих типов, остальные будут созданы на их основе. Теперь берите альбом или открывайте программу для рисования. Нарисуйте простой прямоугольник — это будет сама страница, добавьте блоки для всех элементов на этой странице. Так как содержание – это наиболее важный элемент, начните с него, хотя это и достаточно проблематично, так как вы пока не знаете, что еще должно быть на этой же странице. Но некоторые элементы должны быть включены сразу: бренд, реклама, навигация, заголовки, графика в заголовках, футеры с копирайтами и т.п. Брендинг играет важную роль на каждой странице, поскольку сообщает пользователям, на каком сайте они находятся (и что они вообще на нем находятся, а не в каком-то другом месте). Обычно место для бренда отводится в верхнем левом углу страницы. Это продиктовано психологией восприятия информации и удобством. Реклама и спонсорская реклама может быть интегрирована в страницу множеством способов. Возможно, это будет полноразмерный баннер размером 468х60 пикселей или квадратный баннер с разрешением, например, 125х125 пикселей на каждой странице. Должен ли он быть размещен вверху или под заголовком страницы? Где будут располагаться кнопки дружественных сайтов? Как будет представлена спонсорская реклама? На все эти вопросы необходимо найти ответ сразу при разработке сайта, а не тогда, когда ресурс у вас уже функционирует, и вы замечаете, что что-то осталось забытым. Наконец, крайне важную роль также играет навигация. Глобальная система навигации должна быть постоянной на всех страницах сайта. Локальная навигация может меняться в зависимости от содержания страницы или раздела, но постарайтесь сохранить ее настолько постоянной, насколько это возможно. Работа над сеткой дизайна -- это повторяющийся процесс. К ней придется возвращаться несколько раз. Кстати, возможно, вы захотите создать два или три разных типа сеток, если для этого будет достаточно времени. Эскиз дизайна и «рыба» Эскиз дизайна нужен, для того чтобы представить внешний вид сайта. Эскиз может воплощать метафору, но это не обязательно. Часто работа над эскизами идет параллельно процессу создания информационной архитектуры, или же эскизы дизайна могут быть разработаны и одобрены заказчиком заранее. Эскизы могут и не представлять структуру сайта, дизайнер также может не заботиться о размере файла и оптимизации его для интернета. Следующий шаг – создание «рыбы». «Рыба» представляет собой страницу в реальном размере, воплощает эскиз дизайнера и сетку, созданную ранее. «Рыба» служит основой уже для окончательного дизайна страницы, необходимо получить одобрение «рыбы» у заказчика, хотя, как правило, вполне достаточно заверить сетку и эскиз дизайна. Теперь вы закончили работу над проектированием информационной архитектуры веб-сайта! У вас на руках должны быть все материалы, чтобы построить прототип сайта. Прежде, чем перейти к этому этапу работы, добавьте последнюю главу в основной документ. Концепция сайта: Визуальный дизайн Все практически готово. Осталось только внести в основной документ описание визуального дизайна сайта. Создайте новую главу, назовите ее «Визуальный дизайн». Внесите туда сетки и диаграммы, эскизы и скриншоты «рыбы» или прототипа из Сети, если он готов. Документ «Концепция сайта» теперь завершен. Он пригодится дальше на этапе собственно разработки, при наполнении сайта содержанием, а также при редизайне. Пример: 5 Визуальный дизайн 5.1 Сетки дизайна 5.2 Эскизы дизайна 5.3 Рыба 5.4 Прототип страницы в веб Мы закончили теорию проектирования информационной инфраструктуры сайта. Теперь, чтобы стать действительно хорошим информационным архитектором, нужна только практика. Очень много практики. И тогда у вас будут по-настоящему эффективные и правильные решения. По материалам John Shiple «Squishy’s Crash Course in Information Architecture» Андрей Тихонов
Весь номер

Новости партнеров: