Как спроектировать современный сайт

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

СТРАНИЦА АВТОРА

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

СТРАНИЦА ABOUT US

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

СТРАНИЦА АРХИВА

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

СТРАНИЦА ПРОЕКТА

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

СТРАНИЦА НАСТРОЕК

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

ШАБЛОН РАССЫЛКИ Обратите внимание, что наша сетка может применяться не только для сайтов. Ее также можно успешно использовать и в других областях. Проведенная нами работа поможет оформить информационную рассылку Designery.us, на которую подписываются пользователи.

«Резиновая» верстка

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

Однако я не могу не рассмотреть «резиновую» верстку – создание страниц, меняющих размер в зависимости от области просмотра.