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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

...

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

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

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

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

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

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

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

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

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