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

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

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

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

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

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

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

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

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

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

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

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

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

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

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