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

Проект 2. Информационная страница

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

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

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

Каркас информационной страницы

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

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

Небольшой эскиз новой страницы

Информация так же сгруппирована в три колонки, но разделение между ними выражено не так сильно, как при соотношении областей 2:1, использованному на странице статьи. Мы хотим заставить колонки работать как единый объект, даже если они будут отделены друг от друга.

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

Проводя линию под элементами аккаунта, мы формируем область с другой динамикой

На нашем эскизе пиктограммам проектов отведена достаточно широкая средняя область – две колонки, расположенные рядом. Чтобы создать эту область, можно объединить 8 юнитов в 16-юнитной сетке, тогда с обеих сторон останутся по 4 юнита.

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

Расположим пиктограммы проектов в середине страницы

Прямо над пиктограммами проектов можно разместить аватары пользователей Designery.us. Их размеры допустимо привязать к шагу сетки и сделать равными одному юниту:

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

Теперь у нас появилась проблема. Опознать пользователей по изображению нелегко. Хотя в Интернете довольно часто можно увидеть списки пользователей в виде изображений, нужно найти способ представления имени каждого пользователя. Как правило, это можно сделать, выводя имя в виде текстовой метки при щелчке на изображении, но мы найдем более творческое решение.

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

Аватары пользователей располагаются над названиями проектов

Сетка поможет создать необычное дизайнерское решение, позволяющее отобразить имя рядом с фотографией

Обратите внимание, что увеличенное изображение имеет размер 110x110 пикселов. Поэтому оно хорошо вписывается в шаг сетки и остается пропорциональным уменьшенным пиктограммам. Это один из приятных побочных эффектов использования эффективной сетки. Иногда кажется, что сетка сама управляет собой без каких-либо усилий с нашей стороны.

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

Добавим в верхний правый угол страницы функцию поиска по датам

Окончательный дизайн информационной страницы

И напоследок давайте разместим слева от фотографий ссылки, позволяющие легко найти информацию (Explore). Этот список выглядит очень просто. Но не забывайте: самые простые вещи часто оказываются и самыми лучшими.

Создавая этот дизайн, я не упомянул базовую сетку, но если присмотреться, все элементы окажутся привязаными к базовым линиям.

Информационная страница с сеткой базовых линий

Элементы оказались на сетке базовых линий благодаря подзаголовкам Explore, Top Designery.users, Browse by Date и Hot Projects on Designery. В шаблоне страницы статьи линии над каждым подзаголовком были привязаны к базовой сетке, а текст подзаголовка выравнивался по вертикали относительно пространства, образованного двумя базовыми строками. Кроме того, между началом текста и базовой строкой сделан отступ величиной в одну строку.

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

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

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

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

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

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

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

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

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

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

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

Добавление разделительных линий для разметки страницы

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

Один из возможных вариантов размещения пользовательской аватарки

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

Во-вторых, если поместить фотографию вне этой области, например, под заголовком, в заголовочном блоке останется мало элементов. Короткие строки читать легче, особенно если они содержат информацию, предназначенную для быстрого восприятия, например, биографические данные. Если в этой области не будет фотографии, длина текстовой строки (количество символов) увеличится. Обратите внимание, что часть текстовых блоков имеют малую длину, поэтому остается много пустого места. В дизайне других страниц мы часто оставляли пустое место, но наша цель не в том, чтобы создать как можно больше пустого места, а в том, чтобы использовать его целенаправленно и рационально. В противном случае пустое пространство будет выглядеть неупорядоченным и необоснованным.

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

Если фотография находится сверху, текст под ней кажется неупорядоченным

Другое расположение фотографии лучше подходит для отображения информации о пользователе

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

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

В качестве завершающего штриха разместим ссылки Send message и Add as a Friend сразу под фотографией. И снова такое соседство оправдано – эти ссылки расположены под элементами, позволяющими идентифицировать пользователя. Идеальное расположение для ссылок, позволяющих совершать действия с данной информацией.

Область страницы под биографической информацией делится по уже знакомому нам принципу 2:1. Здесь так же можно поместить материалы трех разных типов: списки друзей, списки проектов и статистику активности. Наличие трех разных типов информации предполагает разделение этой области на три части, согласно принципу симметрии, реализованному на информационной странице.

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

Нижнюю часть страницы можно разделить на три равные области, согласно принципу симметрии, использованному на информационной странице

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

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

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

Менее симметричная структура лучше соответствует конкретным условиям

Чтобы выбрать конкретный способ реализации, нужно учитывать, какое свободное пространство находится в нашем распоряжении. Нам не хватит места, чтобы привести эти изображения к тому же размеру, как на информационной странице. В нашем случае можно взять размеры изображений, которые использовались при создании страницы статьи. Изображения имели ширину 3 юнита (170 пикселов) каждое. Этих значений будет достаточно, чтобы разместить в колонке шириной 6 юнитов (350 пикселов) 2 узких столбца изображений. Результат напоминает информационную страницу, но больше подходит для конкретных целей.

Альтернативный вариант отображения пиктограмм проектов

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

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

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

Теперь осталось разместить обзор активности в правой колонке. Сам материал очень простой – всего лишь набор текстовых записей, и его необязательно усложнять. Текст можно расположить сверху вниз в виде колонки. Часто такой простой подход к материалу оптимален для крайней правой колонки, потому что пользователи считают эту область веб-страниц «рекламным местом». Контринтуитивный подход оказывается более эффективным для данной области – чем проще материал, тем меньше он похож на рекламу, поэтому больше пользователей уделят ему внимание.

Будем отображать активность пользователя в правой колонке

Проект 4. Домашняя страница

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

Большинство домашних страниц должны одновременно выполнять несколько функций: отображать информацию о самых новых и/или самых интересных материалах, об активности и проектах в социальной сети Designery.us, а также представлять некоторых наиболее активных пользователей. Более того, страница должна демонстрировать пользователям торговую марку Designery.us способом, отличающимся от других страниц. Эти особые требования были отражены в задании (оно не навязывает определенный подход к компоновке страницы и допускает больше всего изменений).

Проект домашней страницы

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

На бумаге можно быстро и без лишней траты времени и сил проработать несколько разных вариантов компоновки страницы.

Домашняя страница не похожа на другие страницы сайта, поэтому создание эскизов особенно важно

В эскизе, который станет основой нашего дизайна, использован довольно стандартный подход к компоновке содержания. Страница делится натри основные колонки.

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

Окончательный эскиз домашней страницы

Начнем с верхней части страницы. Оформление блока с логотипом бренда существенно отличается. Эта страница является «парадным входом» на сайт и поэтому выполняет дополнительные функции – она должна представить и кратко описать Designery.us новым пользователям. Для этого можно просто поместить слоган рядом с торговой маркой:

Designery – это место встречи дизайнеров-практиков, студентов и любителей.

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

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

Изменяем расположение логотипа на домашней странице

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

За счет увеличения логотипа слоган сместился еще правее и сравнялся с ним по высоте. Данный визуальный эффект помогает восприятию материала слева направо, от логотипа к слогану, от понятия к пояснению.

Увеличенный логотип будет привлекать дополнительное внимание

По базовой сетке видно, что логотип и заголовок выровнены по верхнему краю

Теперь перейдем к основной части страницы. В нашем эскизе использовались три колонки. Мы уже знаем, что в сетке можно реализовать не меньше двух трехколоночных схем: симметричную схему, созданную для информационной страницы, и асимметричную схему страницы профиля, которая имеет множество вариантов. В этом случае симметричная схема будет нецелесообразной из-за размера рекламного блока, расположенного справа, поэтому обратимся к трехколоночной структуре, использованной на странице профиля. Попробуем доработать ее – изменим размеры двух колонок, чтобы первая колонка стала шире и привлекала больше внимания. Это повысит удобочитаемость страницы. На содержательных сайтах самые важные материалы стремятся расположить в верхней левой части основной области. Как правило, эти элементы являются самыми крупными на странице.

Основная область разбивается на три колонки

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

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

Разместим аннотации статей в двух левых колонках

Будем считать, что показанные аннотации соответствуют материалам, недавно опубликованным на сайте Designery.us. Для их отображения требуется много места на экране, поэтому неплохо было бы уменьшить их размер. В нижней части первой колонки можно разместить заголовки статей третьего уровня значимости (без аннотации), которые занимают меньше места. Эти заголовки будут сопровождаться такими же пиктограммами в два юнита шириной, что и аннотации «второго уровня», но располагаться они будут по три в ряд.

Добавление аннотаций в нижнюю часть левой колонки

Это краткие аннотации, поэтому их расположение внизу колонки логически обоснованно. Наша цель – показать, что на сайте есть и другие аналогичные материалы. Реализуем эту мысль, добавив ссылку More Articles… в самый низ колонки.

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

Элементы, созданные для других страниц, например, форма для подписки на рассылку и список пользователей с фотографиями, будут располагаться в средней колонке

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

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

Добавление материалов в крайнюю правую колонку

Как и на странице со статьями, пользователи должны иметь возможность перейти по ссылке к другим материалам того же типа. Одной из целей домашней страницы является обзор материалов, доступных на сайте Designery.us. Поэтому возьмем оформление ссылки More Articles… и используем его для списка пользователей и проектов внизу второй и третьей колонки. Кажется, что страница упорядочена по простому принципу: статьи в левой колонке, пользователи в середине, а проекты справа. С одной стороны, это не совсем верно – материал все-таки более разнообразен. Но с другой стороны, это так – ведь форма подачи материала имеет упорядоченный вид. Во многих случаях этого достаточно.

Готовая домашняя страница