Wireframes — незаменимый инструмент в руках дизайнера интерфейсов, который позволяет максимально сократить издержки времени во время проектирования, при этом являясь наиболее удобоваримой формой для взаимодействия юзабилист-клиент, если клиент желает поучаствовать в проектировании.
Говорить о блочной разметке можно долго и нудно. Я же постараюсь максимально избавить вас от мазохизма при чтении этой статьи с помощью краткости и конкретики.
Для начала оговорюсь:
Блочная разметка — это этап проектирования интерфейса сайта, нужный дизайнеру для утверждения расположения всех функциональных блоков с их примерным наполнением вместе со своими коллегами или заказчиками. Требуется это для последующей, более легкой, прорисовки дизайна. Зачастую wireframes используются во время презентации клиенту в бумажном виде.
Нужно помнить, что создавая блочную разметку, нашей задачей является не отрисовка дизайна, а наиболее правильное и целостное расположение всех функциональных блоков на сайте. Следовательно — на внешний вид наплюйте, но не забывайте следовать советам ниже.
Немного советов
1. Блочная разметка должна быть как можно более простой. Без всяческих назойливых эффектов, градиентов и прочего.
2. В распечатанном виде любой человек должен с легкостью увидеть, где начинается какой-либо отдельный функциональный блок, и где начинается собственно контент. Следовательно — внимательно следите за тем, чтобы блоки были контрастны по отношению друг к другу.
3. Если для того, чтобы разделить какие-либо блоки, или внутренние под-блоки цвета вам уже не хватает (довольно частый случай в моей практике) — смело используйте линии, немного градиентные плашки (но в градациях серого), и пустое пространство.
4. Делайте wireframes черно-белыми. Блоки в цветном варианте будет перебивать внимание людей друг у друга, что совершенно нежелательно. Также разные цвета создают разный эффект внимания — т.е. ярко-красный привлечет внимание к себе гораздо лучше, чем светло-желтый. Именно поэтому я использую только градации серого (начиная от чистого белого, и заканчивая воронным черным), где насыщенность зависит от предполагаемой важности того или иного блока на сайте.
5. Если уж решили сделать цветными — не делайте потом обесцвечивание. Так как даже совершенно разные цвета в цветном варианте могут в черно-белом свестись к одному и тому же оттенку серого.
6. Структурируйте контент. Делите блоки на под-блоки. Что я подразумеваю под этим? То, что нужно разделять контент даже внутри основных блоков. К примеру: не писать тексты сплошным полотном, не забывать о белом пространстве и абзацах. В общем — вспоминайте азы типографики и модульной сетки из полиграфии, они нужны даже для проектирования интерфейсов.
Этапы блочной разметки
- В самом начале нужно знать, что будет на странице. Если не знаете — составьте полный перечень, включающий в себя самые мелкие детали. При этом деля все элементы на группы и подгруппы. Это понадобится в дальнейшем.
- Выкидываем половину элементов за ненадобностью. Это всегда происходит, когда осознаешь предполагаемое количество информации на странице.
- Приступаем к самой блочной разметке.
Сперва рисуются лишь основные блоки, без наполнения. Т.е. не без помощи плашек, линий, и белого пространства мы делим пустой лист на основные составляющие — шапку, контент, подвал, колонки, и прочее.
После этого переходим к более детальной разметке и делим эти основные блоки на составляющие. Допустим, шапку можно разделить на следующие под-блоки: поисковая форма, форма авторизации пользователя, логотип, графический элемент, и меню.
Затем приступаем к отрисовке самой конкретики. То есть, наполняем эти блоки нужными данными — формами ввода, текстами, и прочим. При этом начисто избегаем отрисовки любой графики. Если это кнопка — рисуем её как можно проще. Легкого градиента, и окантовки по краям будет достаточно для понимания, что это именно кнопка, а не нечто иное.
В результате получаем довольно интересную вещь — примерный вид того, как располагаются блоки, и элементы в них на странице сайта.
Самое главное теперь — брать мозг в руки, или ждать совета товарища. Ведь после такого процесса ваш, даже самый наметанный глаз обязательно замылится от обилия информации — как текстовой, так и графической. Поэтому мы зовем нескольких людей (желательно юзабилистов, или же представителей целевой аудитории сайта, но обязательно больше 5), и заставляем их вдуматься в то, что у нас получилось.
Если поправки небольшие, и их немного — до 30-40, то это уже очень хорошо — значит наше время потрачено не зря.
Грубо говоря, после этого идет оттачивание всех блоков, и контента внутри него — описывать тут особо нечего. Могу лишь привести пример, чтобы вы наглядно увидели разницу между первым вариантом разметки и её логическим завершением. Между оригиналом и итоговым макетом произошло около 100 правок, и 6 версий. Не всегда крупных, но от этого не менее важных.
Выводы:
Создание блочной разметки очень важная часть процесса создания дизайна, и проектирования интерфейса. Благодаря ей — дизайнерам удается избежать таких подлянок от заказчика, сродни «вот этот элемент тут не к месту — передвиньте его».
В блочной разметке передвижение элементов — элементарщина. В готовом же дизайне каждый элемент является кусочком композиции, которую легче простого сломать даже с помощью перемещения одного-единственного элемента. Поэтому советую запастись терпением на этом этапе — он один из самых ключевых в проектировании.
PS: в качестве примера я использовал этапы проектирования интерфейса для проекта iFolk. Ожидайте на днях анонсирования. Пока же можете оставить свой e-mail для того, чтобы мы могли отправить туда кучу спама о виагре.
PPS: приношу свои извинения за то, что в последнее время нечасто публикуюсь. Вышеуказанный www.ifolk.ru забирает на себя ну о-о-очень много внимания.
PPPS: рад сообщить, что количество rss-подписчиков перевалило за 1200 :)
Тем временем:
- Миша Квакин решил сделать для своего блога систему инвайтов.
- Юра Гугнин наконец-то предоставил нам новую заметку :)
- Футуриус написал о UMBEL.
- Сергей Чаботько рассказывает о деньгах в байнете.
- Юра Ветров разжевал о проектировании в Agile-процессе.
- Егор Чернев пишет об онлайн планировщике помещений.