Как спроектировать современный сайт (Вин) - страница 39

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

Проект 3. Страница профиля

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

В то же время данные, размещенные на странице пользователя, не так разнообразны, как информация, выводимая на информационную страницу. Здесь должны быть представлены биографические сведения и сведения о сетевой активности конкретного пользователя, а информационная страница демонстрирует сведения об активности на всем сайте. Так что дизайн страницы профиля должен быть более близким пользователю.

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



Вверху – эскиз дизайна; внизу– макет страницы профиля


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


Структура страницы как «проекция» рекламного блока


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