Блочная разметка в проектировании

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

Говорить о блочной разметке можно долго и нудно. Я же постараюсь максимально избавить вас от мазохизма при чтении этой статьи с помощью краткости и конкретики.

Для начала оговорюсь:

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

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

Немного советов

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

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

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

4. Делайте wireframes черно-белыми. Блоки в цветном варианте будет перебивать внимание людей друг у друга, что совершенно нежелательно. Также разные цвета создают разный эффект внимания — т.е. ярко-красный привлечет внимание к себе гораздо лучше, чем светло-желтый. Именно поэтому я использую только градации серого (начиная от чистого белого, и заканчивая воронным черным), где насыщенность зависит от предполагаемой важности того или иного блока на сайте.

5. Если уж решили сделать цветными — не делайте потом обесцвечивание. Так как даже совершенно разные цвета в цветном варианте могут в черно-белом свестись к одному и тому же оттенку серого.

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

Этапы блочной разметки

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

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

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

Затем приступаем к отрисовке самой конкретики. То есть, наполняем эти блоки нужными данными — формами ввода, текстами, и прочим. При этом начисто избегаем отрисовки любой графики. Если это кнопка — рисуем её как можно проще. Легкого градиента, и окантовки по краям будет достаточно для понимания, что это именно кнопка, а не нечто иное.

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

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

Если поправки небольшие, и их немного — до 30-40, то это уже очень хорошо — значит наше время потрачено не зря.

Грубо говоря, после этого идет оттачивание всех блоков, и контента внутри него — описывать тут особо нечего. Могу лишь привести пример, чтобы вы наглядно увидели разницу между первым вариантом разметки и её логическим завершением. Между оригиналом и итоговым макетом произошло около 100 правок, и 6 версий. Не всегда крупных, но от этого не менее важных.

Выводы:

Создание блочной разметки очень важная часть процесса создания дизайна, и проектирования интерфейса. Благодаря ей — дизайнерам удается избежать таких подлянок от заказчика, сродни «вот этот элемент тут не к месту — передвиньте его».

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

PS: в качестве примера я использовал этапы проектирования интерфейса для проекта iFolk. Ожидайте на днях анонсирования. Пока же можете оставить свой e-mail для того, чтобы мы могли отправить туда кучу спама о виагре.

PPS: приношу свои извинения за то, что в последнее время нечасто публикуюсь. Вышеуказанный www.ifolk.ru забирает на себя ну о-о-очень много внимания.

PPPS: рад сообщить, что количество rss-подписчиков перевалило за 1200 :)

Тем временем:

1. Миша Квакин решил сделать для своего блога систему инвайтов.
2. Юра Гугнин наконец-то предоставил нам новую заметку :)
3. Футуриус написал о UMBEL.
4. Сергей Чаботько рассказывает о деньгах в байнете.
5. Юра Ветров разжевал о проектировании в Agile-процессе.
6. Егор Чернев пишет об онлайн планировщике помещений.

• Похожие заметки:

  • Блочная разметка. Программы
  • Выловим баги
  • Не заставляйте меня думать
  • Область реагирования