Блочная разметка в проектировании
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-процессе.
- Егор Чернев пишет об онлайн планировщике помещений.













Спасибо за очередную интересную заметку ;-)
Можно узнать подробнее что за проект проекта iFolk?
А статья понравилась, спасибо, буду теперь показывать шаблоны друзьям-специалистам, чего раньше не делал.
То есть wireframe утверждается заказчиком еще до создания полноценного макета сайта? А не случается так, что заказчик говорит: «Я в этом юзабилити твоем ничего не понимаю, ты мне покажи, как будет выглядеть сайт, чего ты мне прямоугольники тут рисуешь?»
Денис, чуть позже :) Пока же не могу ничего сказать из-за коммерческой тайны.
Андрей, еще ни один заказчик не отказался рисовать блочную разметку до отрисовки макета. Наоборот — все рады тому, что можно что-то очень быстро поменять, не вызвав при этом недовольство дизайнера.
bublik, на здоровье :)
Денис, показывать нужно не итоговые макеты, а блочную разметку. Итоговые макеты лучше показывать только заказчику, т.к. в моей практике зачастую раньше получалось так, что я послушав чьи-то замечания, исправлял макет — и эти исправления не нравились клиенту.
Ярослав, если заказчик одобряет я исправляю что-то только когда хочу выложить работу себе в портфолио. Что утвердил заказчик — святое и неприкосновенное :)
Не сказал бы, что святое, но то, что неприкосновенное — однозначно :)
Спасибо за статью. Вообще с удовольствием читаю ваш блог.
Только эта статья со скриншотами немного удивила.
Зачем вы предлагаете своим клиентам клонровать хабр + dirty + лепрозорий в рамках одного проекта?
insight, причем тут хабр, дёти и лепра? Может вы внимательно почитаете вот эту фразу:
------------------------------------------
> PS: в качестве примера я использовал этапы проектирования интерфейса для проекта iFolk. Ожидайте на днях анонсирования. Пока же можете оставить свой e-mail для того, чтобы мы могли отправить туда кучу спама о виагре.
PPS: приношу свои извинения за то, что в последнее время нечасто публикуюсь. Вышеуказанный www.ifolk.ru забирает на себя ну о-о-очень много внимания.
------------------------------------------
Тут нет клиентов. Тут есть задание внутри команды. Социальная сеть.
Блочную разметку iFolk я привел примера ради, т.к. я имею полное право это делать, в отличии от wireframes для клиентов и закрытых проектов.
Нормальная статья для тех, кто в танке насчет вайрфреймов вообще, только есть одно но — вайрфреймы нужны в первую очередь проектировщику, а потом только дизайнеру.
То есть делать их могут два разных человека и это нормально: чаще всего набор взаимосвязанных вайрфреймов является результатом работы над сайтом практически любой юзабилити-конторы. Затем только привлекают визуальных дизов.
Второе но: у вас слишком детальные вайрфреймы в примере. Уже с градиентами, тенюшками и прочими рюшками, которых вы хотите избежать в первом пункте «советов».
Часто бывает, что такая детализация вредна на этапе проектирования — настраивает на определенные ощущения заказчика, сбивает с курса визуального дизайнера. Usethics разработали какое-то время назад свою библиотечку под InDesign (кстати, я пропустил что-то, или у вас ни слова в статье про средства, которыми вайрвреймы создаются?) для работы над структурными схемами страниц, рекомендую — достаточно высокий уровень абстракции, по крайней мере, из того, что я видел: usethics.ru/lib/indesign_library.html
Кстати, на маке есть классный OmniGraffle для такого проектирования. А в чем созданы ваши вайрфреймы?
explanent, я совмещаю в себе эти две профессии, и поэтому об этом говорю :)
Насчет детализации: вы пропустили ремарку о том, что этот пример уже полностью готового вайфрейма после третьего этапа.
О том, в чем создавать вайфреймы я расскажу немного позже. Это лишь первая статья из серии. Сам я их рисую там же, где и дизайн полностью — в прекрасном Photoshop. Благо он и под мак, и под win.
PS: кстати — в моем итоговом вайфрейме нет никаких тенюшек, и рюшей. Только легкие градиенты.
——————————————
Совет 3:
Если для того, чтобы разделить какие-либо блоки, или внутренние под-блоки цвета вам уже не хватает (довольно частый случай в моей практике) — смело используйте линии, немного градиентные плашки (но в градациях серого), и пустое пространство.
——————————————
А какаие для фотошопа существуют библиотеки стандартных элементов?
Честно говоря, я сомневаюсь, что с помощью фотошопа можно быстро решать задачи, для которых придуманы вайрфреймы. Обычно это делается в векторном редакторе, где легко все масштабировать, перемещать, объединять в группы и т.д. Самый близкий кроссплатформенный инструмент такого рода — InDesign, хотя гораздо привычней для многих Visio, или его аналог для мак ос — OmniGraffle.
Ну и конечно, я подразумеваю, что вы в курсе оригинальных концепций, стенсилов и наборов рекомендаций от Boxes and Arrows и от Garrett Dimon :-)
explanent, в фотошопе куча векторных инструментов. Я использую shapes.
Я решаю нужные задачи и фотошопе. Вектор, слои, иерархия и прочее — всё что нужно тут есть :)
Visio и inDesign слишком монструозны. Лучше уж Expression Blend.
PS: вкурсе :)
Ярослав Бирзул, я вот это имею ввиду. Если где-то ошибаюсь, поправьте. Теги с картинками использовать не стал.
gyazo.com/1cf2b8f6ea5841b...d3bb79d90ccc.png
&
gyazo.com/4551d1206bd4069...17226320e79c.png
gyazo.com/0d6a4f245bb76cd...476f481c0e7f.png
&
gyazo.com/61f2ab817070e41...3941df72ece2.png
Ну и так далее — практически идентичный интерфейс. Причем, видимо, 6 версий и 100 замечаний были созданы исключительно с соответствующей оглядкой.
Я без харрасмента, просто интересуюсь.
insight, проект хаброподобен, с этим никто и не спорит. Вот только хаброподобен он в блочной разметке. Но не в дизайне.
> gyazo.com/1cf2b8f6ea5841b...d3bb79d90ccc.png
>http://gyazo.com/4551d1206bd406901a9d17226320e79c.png
Это paginator3000 — opensource плагин навигации. Изначально, как видите, была другая навигация.
gyazo.com/0d6a4f245bb76cd...476f481c0e7f.png
gyazo.com/61f2ab817070e41...3941df72ece2.png
Опять же — не моя инициатива.
Все 6 версий и 100 поправок были не от меня. Все они сделаны в результате детального обсуждения в бейскемпе.
Кстати говоря, совсем забыл: протестировать рабочий прототип идеального видеоплеера можно тут: www.ifolk.ru/MPL/
Обращаю ваше внимание на то, что разработка еще в процессе, и кое-что еще не отшлифовано. Если вы заметили ошибки и недоработки — пишите по адресу my@birzool.com
А можно оффтоп: в качестве эксперимента по юзабилити :)
Вот если взять основные признаки самых успешных блогов (blogimira.ru/malenkij-diz... -bolshix-blogov/) и собрать «все-в-одном», можно ли что-то сказать об этом — усредненном — юзабилити? :)
Что думаете? :)
Лена, а к чему вы написали? :)
Тема статьи ведь о другом .
> Популярные блоги — это по определению примеры эффективного и функционального дизайна.
Популярные блоги — это по определению примеры умных и умеющих писать авторов. И статей, которые нравятся их целевой аудитории.
Вот что я об этом думаю.
Я написала сюда потому, что упомянутая статья только сейчас вышла (вот и написала в последний пост...)
Мне просто очень интересно ваше мнение по поводу упомянутых элементов (они же тоже связаны с юзабилити)...
Лена, я вам ответил:
Конкретно в блоги идут за стилем автора, авторским контентом, который найти где-то еще — затруднительно. Т.е. гораздо ценнее уникальность материала, чем кол-во пикселей в размере заголовка.
Вот что я об этом думаю :)
Ярослав, спасибо! :)
На здоровье :)
Спасибо Ярослав — очень полезная заметка для меня =)
Общие моменты конечно мне знакомы, но много чего интирессного и полезного узнал!
Буду использовать!
Спасибо. Пока не открыл для себя ничего нового. Но, как я понял это только начало, так сказать вступительная часть) С нетерпением жду продолжения.
отличная статья, открыл для себя много нового...
да и интересно стало что за iFolk, особенно порадовал копирайт на сайте «Побойся Чака Норриса»...))
>при этом являясь наиболее удобоваримой формой для взаимодействия юзабилист-клиент, если клиент желает поучаствовать в проектировании
Если попался такой отличный клиент, то блок-схему можно вырисовывать и карандашиком на бумаге. При этом все идёт намного быстрее и клиент чувствует, что он действительно участвует в процессе, а не испытывает технофобию, глядя как дизайнер со скоростью света давит на кнопки и успевает ещё при этом что-то вырисовывать на экране. Что в свою очередь может повысить его лояльность к студии в целом. А компьютерную версию можно сделать и потом, для утверждения.
>Этапы блочной разметки
1. В самом начале нужно знать, что будет на странице. Если не знаете — составьте полный перечень, включающий в себя самые мелкие детали. При этом деля все элементы на группы и подгруппы. Это понадобится в дальнейшем.
2. Выкидываем половину элементов за ненадобностью. Это всегда происходит, когда осознаешь предполагаемое количество информации на странице.
Скажем так, что перед проектированием проекта должен был быть бриф, целью которого как раз-то и выявить необходимые функциональные элементы на страницах сайта. В этом случае ничего выкидывать не придётся.
А полностью соглашусь с обоими пунктами, если, например, ведётся разработка личного проекта и такого брифа просто не было.
Ну и детализация, на мой взгляд, высоковата для примера «было-стало». Слишком мало оформительских отличий от финального варианта. Первый рисунок нагляднее и проще для восприятия структуры.
Несмотря на мою критику и дополнения, статья отличная. Требую продолжения! :)
rotor, Вы перечислили все само-собой разумеющиеся факты. Зачем?
Ну, просто дополнил тем, чего не увидел в статье. Кому-нибудь, особенно начинающим, пригодится.
Оффтоп:
не трудно заметить по скринам, что новый проект о софте и железе! так что ждемс. надеюсь не варез)))
кстати я рисовал блоки для своего сайт в Concept draw
Програмка так ниче на 4.
ссылку на wireframes скиньте плиз
пардон, новый проект про продукты компании apple! интересно что тогда iwhoilko.ru?
[...] для создания wireframes эта программа использует лишь малую часть своего [...]
[...] Блочная разметка в проектировании Wireframes — незаменимый инструмент в руках дизайнера интерфейсов, который позволяет максимально сократить издержки времени во время проектирования, при этом являясь наиболее удобоваримой формой для взаимодействия юзабилист-клиент, если клиент желает поучаствовать в проектировании… [...]
[...] Правильность сетки сайта. [...]
[...] блок-схема, как и зачем она разрабатывается, об этом хорошо написал Ярослав Бирзул, поэтому рекомендую к прочтению. Ну и [...]
Здравствуйте. Посмотрел вашу «мылособирательную штуку».
Конечно позабавили комментарии в HTML, но замечание (баг?) следующие:
При попытке отправить пустую форму сообщение об ошибке выходит в виде знаков вопроса. Пользую Firefox 3, WinXP. Видимо кодировка аяксового обработчика отличается от кодировки страницы?
И по поводу медиаплеера... А можно сделать так, чтобы воспроизведение автоматически при загрузке страницы НЕ начиналось? А то именно этим меня youTube и бесит, что если открыть 5 разных вкладок с роликами они одновременно начинают играть... RuTube в этом плане мне кажется удобнее.
ViC, спасибо, поправим :)
А по поводу медиа-плеера: нужно, а не можно.
[...] Блочная разметка в проектировании [...]