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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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