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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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