Давайте вспоним, как вообще мы делаем дизайн сайта. Сначала прикидываем общую композицию, идею... Ну то есть я-то просто иду и срисовываю с бесплатных шаблонов, но вы ведь не такие, правда? После придумывания ключевой идеи вы строите сетку, определяете блоки, двигаете их туда-сюда, находите логику. И так от крупного к малому — все по заветам, изложенным в «Памятке дизайнеру сайтов».

Периодически в этот гладкий, полный творчества и самоотдачи процесс вмешивается клиент...

Переделки

Я бы очень хотел попасть в чудесную страну Определёнию, где заказчик тебе говорит, что сайт он хочет вот такой, с такими вот бантиками и рюшами. Ты делаешь, как сказали, он принимает, потому что он сразу все правильно описал и предусмотрел. Все счастливы, все довольны.

Увы, обычно происходит несколько иначе. Присылает заказчик бриф (или ТЗ, или описание, или просто письмо с сочинением на вольную дизайнерскую тему). И вроде бы все нормально поначалу, но потом выясняется, что например новостей-то у него и нет, а будет только блог. Или что размещаем не два баннера, а четыре. Или что между тизером и текстом, да-да, вот здесь, нужна еще кнопочка «вступить» (или значок «нюхнуть», или флажок «new»...). В общем, итерация за итерацией сайт обрастает новыми свойствами, а значит макет нужно под них подстраивать.

Избежать этих итераций = переделок как правило не удаётся — больно редко случается сделать сразу такой дизайн, чтобы не получить никаких правок. Какую стратегию переделывания выбрать? Первая — стараться делать меньше итераций, стремясь на каждой из них все предусмотреть и тем самым сделать ее последней. Вторая — стараться тратить меньше времени и сил на каждую из итераций и таким образом многими, но быстрыми шажками-переделками продвигаться к цели. Естественно, никто не говорит, что дизайнер должен полностью принять одну из них и абсолютно отвергнуть другую. Естественно, у каждого свой гибрид. Но к чему склониться? Больше пыжить мозг в надежде на джек-пот или, как папа Карло, переделывать и переделывать? Посмотрим, что говорит по этому поводу Влад Головач в своей книге «Дизайн пользовательского интерфейса² Искусство мыть слона» (она бесплатна и доступна для скачивания, очень советую):

...Наконец, работа через переделки лучше и тем, что её легче проверить. Когда вы долго ищете наилучшее интерфейсное решение, путь к нему содержится только у вас в сознании; он не воплотится в реальности, пока вы не доделаете работу до конца. Если же вы работаете через переделки, почти сразу вы получаете вариант вне своей головы (пускай только эскиз). Такой вариант можно показать коллеге или заказчику, чтобы спросить у них совета. Две головы тут лучше одной, так что включение дополнительных людей в процесс дизайна улучшает качество.

Пара примеров такого рода работы из моей практики:

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

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

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

Промежуточный итог

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

Прототип с подробностями

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

прототип (иллюстрация из «Памятки дизайнеру сайтов»)

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

тут уже можно принимать решения
(иллюстрация из «Памятки дизайнеру сайтов»)

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

Промежуточный итог

Наша технология прототипирования должна позволять дизайнеру быстро рисовать прототип, да такой, чтобы клиенту по нему было ясно, что происходит. Например, если вот там-то подразумевается три новости на две-четыре строки текста каждая с заголовками по 18 пикселей, то пусть в прототипе будут не прямоугольнички, а тексты по две-четыре строки и заголовки по 18 пикселей.

Степень детализации прототипа

В процессе прототипирования сайта на нас с противоположных сторон давят два обстоятельства: критичность быстроты переделок говорит нам «давай быстрей», в то время как условие понятности прототипа говорит «делай подробнее», а значит медленней. Где истина? Истина в вине. Вкусном, естественно. А кроме вина? В выборе золотой середины.

Как выбрать золотую середину между скоростью разработки и подробностью прототипа? Исходя из задачи (быстро, но чтобы клиенту понятно) и конкретных условий заказа.

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

Работа с текстом

Стили текста могут сохранить нам время? Могут. Так как если вдруг клиенту взяло и стукнуло, что текстовый шрифт должен быть Times, а не Arial, то при работе со стилями мы внесем это изменение за 10 секунд. А без стилей пришлось бы идти по всем местам, где у нас используется Times (это зачастую разные страницы, слои или хотя бы текстовые блоки). Да и вообще, работа со стилями — хорошая современная практика.

А вот запары с правильными переносами (давней проблемой что «Иллюстратора», что «Фотошопа») излишни. Неправильные переносы сами собой уйдут на этапе верски, так зачем сейчас ими заниматься? Если, конечно, это не имеет критического значения для клиента.

Не стоит также тратить время на выдумывание чересчур интеллектуальной рыбы. Для того, чтобы показывать дизайн, достаточно взять тексты по тематике сайта или близкой к ней (я зачастую пользуюсь Яндекс.Рефератами).

Картинки и оформление

Заготовьте одну картику и ставьте ее везде, где в контенте появляются картинки. Не надо мудрить. То же самое с элементами пользовательского интерфейса (кнопка, поле ввода текста, табы...), рекламами (баннеры стандартных размеров; модули контестной рекламы), блок ссылок (чтобы использовать для блоков вроде «популярные статьи», «случайные статьи», блогорол); рыбный юзерпик; набор номеров страниц вида «предыдущая 1 2 3 4 5 следующая» и подобные часто используемые в современных сайтах вещи. Все это прекрасно складывается в библиотеку графических элементов и не оттягивает карман, поэтому лезть в какой-нибудь файл нет необходимости. Но если это заготовлено и в отдельном файле — ладно уж, сойдет. Главное, чтобы вообще было заготовлено и удобно было это доставать.

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

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

И так далее и тому подобное. Главное не частности, а подход — если это не принципиально, не тратьте на это время в процессе прототипирования. То есть если клиент не воспринимает прототип без отрисованных тизеров, что ж, придется нарисовать. Но если можно не рисовать их на этапе решения более общих задач, то проезжаем остановку «рисование тизера» на скором поезде. Помним: от общего к частному. Какие тизеры, если не ясно, где будут новости, а где меню?

Ну и всегда держите в голове соотношение затраченное время / польза. Если пользы от рисованной вами с нуля иконки не больше, чем от иконки, взятой из бесплатного набора, то зачем тратить время на ее рисование? (Кстати, иметь рыбный набор часто используемых иконок тоже нелишне.)

Заключение

Вся эта писанина была нужна для того, чтобы объянить мое понимание прототипирования и его основных принципов: «много переделок» и «ничего лишнего, так как время дорого». Из этих принципов и проистекает выбор «Иллюстратора» как основного инструмента для создания прототипов, в требуемой мере близких к макетам.

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

Пока же чао и до встречи в понедельник.