Стратегия "крупный, средний, мелкий"

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

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

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

Разделение страницы на управляемые области

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

Например, на Web-сайте Williams-Sonoma содержится значительный объем информации, однако маке! в виде трех колонок позволяет легко разобраться с представлен­ными данными. Обратите внимание на то, как работает стратегия "крупный, средний, мел кий" для графических изображений. Сначала обращает на себя внимание крупная иллюстра­ция наверху страницы, которая занимает по размеру две колонки. Меньшая иллюстрация справа представляет "среднюю" область. Остальные элементы содержимого являются "мел­кими" по отношению к графическому приоритету.

Дизайн в области линии перегиба страницы

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

Отличительной особенностью Web от печатных изданий является тот факт, что здесь местоположение линии перегиба разное для каждого компьютера. У одних пользователей мониторы с большой диагональю экрана, у других с маленькой, к тому же некоторые меняют размер шрифта, установленный по умолчанию, на более крупный или мелкий. Это значит, что вы должны разработать дизайн для самого мелкого из возможных размеров или отдавать себе отчет в том, что ваш сайт будут просматривать только пользователи с большой диагональю экрана. Худший вариант— это видимая область 800x600 пикселей минус 20 пикселей сверху и снизу с учетом монитора портативного компьютера и интерфейса Web-браузера. Это значит, что вам придется разместить наиболее важную информа­цию на площади всего 780x560 пикселей. В противном случае пользователи че­го-то не увидят