Постановка задачи

к ак говорил герой Абдулова в фильме "Чародеи': "Вижу цель - не вижу препятствий': и я с ним полностью согласна. Самое страшное в любом проекте - его начало, когда буквально не знаешь, с какой стороны к нему подступиться. Я думаю, у неопытного дизайнера эта проблема гораздо более ощутима, поэтому сейчас мы будем прежде всего учиться не бояться начинать. Ставим себе задачу Многие школьники ненавидят писать сочинения, даже по любимой книге. Это происходит чаще всего оттого, что в голове нет порядка, не сформировалось отношение к произведению. В итоге ученик часами сидит перед абсолютно чистым листом бумаги и раздумывает о чем угодно, только не о сочинении. Дизайн в каком-то смысле это тоже сочинение, только в виде графики, а не слов, и неподвижное сидение перед экраном монитора в ожидании музы мне знакомо. Главная задача, как то написание сочинения или создание дизайна, слишком абстрактна и велика, и нетренированный мозг просто не в состоянии ее охватить. Отсюда сначала паника, затем - ступор и неизбежное вслед за этим самобичевание Преодолеть свой главный страх под названием "Я ничего не могу придумать" или "То, что я придумал, - полная чушь" помогает планирование. Вот рецепт осуществления такой цели, как написание сочинения. Составьте его план, начиная с простых и банальных пунктов: введение, основная часть и заключение. Это просто, над этим даже думать не нужно. Далее дополните каждый пункт подпунктами. Расширяя каждый пункт, внедряя в него приходящие по этой более конкретной теме мысли, вы постепенно "накормите" свой мозг информацией, и он начнет работать сам по себе. Возможно, в памяти всплывут цитаты и образы героев (они обязательно это сделают, если у вас все хорошо с памятью). Важно: во время всех этих действий отключите в голове режим критика, он пригодится позднее. После того как написан подробный план, остается лишь заполнить этот каркас. Все. Проверяйте грамматику и логику повествования. В дизайне все обстоит примерно так же. Чтобы не бояться большого и сложного проекта, составьте план действий. Поскольку мозг может не охватить всю информацию сразу, записывайте все. Чтобы вы не изобретали очередной велосипед, вот примерный план, по которому можно действовать. n •• " деiсrв•• 8 Формулировка цели и описание проекта 8 Сбор и анализ информации о проекте 8 Сбор материалов, необходимых в работе 8 Разработка структуры и прототипа дизайна (лейаута) • Составление технического задания 8 Создание дизайна 8 Утверждение дизайна, переделки и исправления 8 Сдача проекта заказчику Глава 3. Постановка задачи 53 В зависимости от ситуации какие-то пункты могут исчезать, а какие-то появляться. Этот план поможет вам начать проект и довести его до победного конца Формупировка qenи и оnисание nроекта В первую очередь, четко сформулируйте цель. Она может звучать так: "Нарисовать дизайн сайта туристического агентства, специализирующегося на пивном туризме". Сразу замечу, что цель "Нарисовать дизайн сайта туристического агентства" слишком расплывчата. Маленькое уточнение о специализации делает задачу более близкой. Далее, если вы достаточно тесно контактируете с клиентом (не через посредника), поговорите с ним о проекте, чтобы составить описание. Описание перваначально составляется в свободной, непротокольной форме по мере общения с заказчиком. Вы можете задать ему, например, такие вопросы. 1. Что именно должен делать этот сайт в целом? Работать на узнаваемость бренда, продавать товары и услуги, информировать о деятельности компании, привпекать новых клиентов и т.д. 2. Кем являются потенциальные посетители сайта? Опишите их портрет: возрастную и социальную группы, уровень доходов и образования. 3. Какие сервисы, услуги, блоки информации будут размещены на сайте? 4. Как люди будут пользоваться сайтом? Опишите примерный сценарий того, как посетитель пользуется сайтом: куда пошел, что посмотрел в первую очередь, что сделал и т.д. Сбор и анапиз информации о nроекте На этой стадии стоит проделать такие вещи, как анализ сайтов потенциальных конкурентов. Рассмотрите их дизайн, ошибки и достижения в юзабилити, подумайте 54 Часть I. Вспомнить все и запишите, чего им всем не хватает и что вы можете применить в своем проекте. Описания, данного клиентом, недостаточно, ведь он, как правило, не задумывается об анализе сайтов конкурентов. Поэтому вы сами проводите небольтое исследование. Возможно, в отрасли, к которой принадлежит компания, есть свои правила оформления сайтов. Все наблюдения и закономерности записывайте - эта информация может пригодиться вам в будущем. Сбор материапов, необходимых в работе Этот пункт означает, что, прежде чем приступить к рисованию, вы просто обязаны востребовать у заказчика необходимые в работе материалы. Это в обязательном порядке логотип, фирменные цвета и руководство по применению фирменного стиля, если такое имеется. Правда, опыт показывает, что Style Guide (он же "брендбук" в народе), в котором в мельчайших подробностях расписаны правила оформления всех документов, идентифицирующих компанию, могут позволить себе только крупные компании. Остальные же либо не знают, что это такое, либо не считают нужным создавать такое руководство. Отдельный пункт - фотоиллюстративный материал. Если у заказчика есть качественные фотографии, показывающие рабочий процесс (например, изготовление колбасных изделий или выпечку хлеба), будет неплохо, если он их предоставит. Чаще всего, конечно, у заказчика в лучшем случае есть логотип, поэтому фотографии вы ищете сами. Это можно сделать как на стадии сбора материалов, так и в процессе рисования, подбирая фото по мере необходимости. Разработка структурь1 и nрототиnа дизайна Получив всю информацию о проекте, вы составляете структуру сайта. Подробнее об этом мы будем говорить в отведенной для этого главе, а если вкратце, то созданию структуры предшествуют беседы с заказчиком на предмет того, какие разделы будут на сайте. Прототип дизайна, каркас или лейаут (layout - планировка, расположение) - это уже первый шаг к графическому дизайну. В лейауте нет никакой графики, это всего лишь план расположения элементов на сайте, и он помогает не забыть о том, что вы собирались нарисовать. Этот пункт может предшествовать следующему, а может и поменяться с ним местами. Но все же желательно, чтобы разработанные вами лейаут и структура сайта уже были включены в техническое задание. Составпение техническоrо задания Техническое задание - это официальный документ. На какой бы основе ни были построены ваши взаимоотношения с заказчиком, крайне желательно составить Глава 3. Постановка задачи 55 и утвердить обеими сторонами техническое задание. На него вы ориентируетесь в дальнейшей работе, оно же прилагается к договору об оказании дизайнерских услуг. Считается, что все, что не входит в техзадание, должно оплачиваться отдельно, ведь подписывая его, клиент соглашается с написанным. Утвержденное техническое задание гарантирует, что вы друг друга поняли верно и в отношении дизайна, и в отношении функциональности. В целях экономии ваших мозговых ресурсов привожу ниже стандартное техническое задание. Вам достаточно будет лишь немного переделать его под свой проект, что-то убрать и что-то добавить. Но в целом этот шаблон подходит для описания большинства задач, связанных с веб-дизайном. Тм nовое технмческое заданме 1. 0 BpOIITI Это самая официальная часть. Она включает в себя название и краткое описание проекта, а также круг задач, выполняемых дизайнером. Чтобы потом не было никаких вопросов, задокументируйте, в чем заключается назначение сайта. От этого зависит многое: как сроки выполнения, так и сам дизайн. В качестве примера предлагаю следующие варианты (можно выбрать одиндва пункта). 8 Информационный 8 Имиджевый • Интернет-магазин 8 Другое (промосайт, личная страница, сайт какого-либо онлайн-сервиса и т. д.) 3. Матвр•аnы Перечислите материалы, переданные вам заказчиком: логотип, руководство по фирменному стилю, информацию о фирменных цветах, примеры печатной рекламы, фотоматериалы и т.д. 4. CfPrПJPI CIЙTI Здесь располагается полная структура сайта, утверждаемая заказчиком. Не важно, разрабатывается одна только главная страница, набор страниц или даже сайт целиком; без структуры - никуда. Если вы нарисовали и утвердили прототип сайта до подписания технического задания, то обязательно включите его сюда. 56 Часть 1. Вспомнить все &. Д.заlн Этот пункт включает в себя пожелания клиента к графическому оформлению сайта. На примерах других своих работ выясните его предпочтения и определитесЪ вместе с ним со стилем сайта. Возможны, например, следующие варианты. • Минимализм • Бизнес-стиль • Веб 3.0 • Промостиль (может быть реализован в разных вариантах, требуются примеры) • Другое (на примерах других сайтов) 7. Qa&J0818 riMMI Утвердите приблизительную цветовую гамму сайта, чтобы не вышло так, что вы создали дизайн с черным фоном, а заказчик хотел белый в голубую полоску. Среди самых распространенных вариантов можно назвать такие. • Только цвета фирменного стиля • Цвета фирменного стиля и любые сочетаемые с ними • Цвета, подходящие к стилю дизайна и тематике сайта (на усмотрение дизайнера) • Динамичные цвета • Мягкие пастельные оттенки • Монохром (оттенки серого) 8. 3MOQ80HIЛU18 СОСТ18Л88JЩ118 Побеседуйте с заказчиком и выясните, какие эмоции должен вызывать дизайн сайта. Если он не может определиться, подумайте над этим пунктом сами и предложите свой вариант, например, из числа следующих. • Спокойный • Представительный, официальный, строгий • Вызывающий, шокирующий • Легкомысленный • Отражающий имидж фирмы 8. fраф•к• на cairв Глава 3. Постановка задачи 57 Чаще всего клиент не знает, какие фотографии и иллюстрации будут располагаться на сайте. Вы можете обсудить с ним этот вопрос либо выбрать пункт "На усмотрение дизайнера" и экспериментировать в процессе. Вот несколько вариантов, из которых можно выбрать требуемый. • На усмотрение дизайнера • Не нужно • Абстракции • Люди • Животные, растения • Техника, продаваемый товар • Другое 10. Верстка caira Независимо от того, кто, вы или ваш коллега, будет верстать этот дизайн (часто от дизайнера требуется только картинка), вопрос верстки поставьте заранее. От того, какой тип НТМL-верстки будет использоваться, зависит и дизайн: ширина макета и другие нюансы. Вот возможные варианты. • Жесткая левосторонняя/правосторонняя • Жесткая по центру 8 Резиновая (растягивающаяся по размеру экрана монитора) 11. Ш•р•на вв6-сrран•qы Для жесткой верстки эти параметры более чем важны. Для резиновой уточните, с какого разрешения монитора начинать поддержку. Логично исходить из того, что сейчас экраны размером SООхбОО пикселей используется редко, 1024х 768 - чаще, 1280x i024 - еще чаще. Но здесь есть еще целое множество других вариантов. 12. lол•••сrво crpaн•q Напишите, сколько страниц сайта (и каких) вы изготавливаете. • Одна страница (главная) 8 Все страницы сайта 8 Ваш вариант (как правило, одна глаьная и одна внутренняя) 58 Часть 1. Вспомнить все 13. Вврвд••• nро•зввдвн•• В этом пункте вы оговариваете, в каком виде сдается готовая работа. Варианты могут быть такие. 8 Только файлы PSD и JPG с макетами страниц • Файлы PSD и JPG с макетами страниц, а также их сверстанные НТМL-файлы 8 Сайт "под ключ" (при условии, что вы со своей командой можете делать все, от дизайна до установки готового сайта на сервер клиента) Создание дизайна Подробнее о создании дизайна мы будем говорить чуть позже, в части, посвященной рисованию и стилям сайтов, а здесь лишь коротко скажем об этом процессе как о части плана действий, которому вы следуете. Каким бы это ни казалось странным (хотя, например, менеджеры этому не удивляются), на собственно создание дизайна необходима максимум одна десятая времени, затраченного на проект в целом. И чем крупнее и серьезнее работа, тем больше вы будете общаться с заказчиком, сочинять письма и подписывать бумаги. При достаточном опыте качественный дизайн можно нарисовать за день-два. А вот следующий пункт плана - тот самый пожиратель времени, с которым нельзя бороться, а можно только смириться. Утверждение дизайна, nередепки и исnравпении О "пожирателе времени" я говорю совершенно серьезно. Обычно вполне спокойно воспринимается стадия предварительных переговоров, хотя и она может длиться достаточно долго (но так надо для вашего же блага). Подписание документов, регламентирующих работы, - также важно и также небыстро. Но после того как вы создали дизайн (пусть даже идеальный), не расслабляйтесь. Его надобно утвердить, т.е. добиться от заказчика твердого "Да, я доволен, вот ваши деньги". Утверждение дизайна с первой попытки - большая редкость, и это вполне объяснимо. Несмотря на тщательную подготовку к рисованию (если она была проведена), в каких-то моментах вы с клиентом могли просто не понять друг друга. И это нормально. Я сейчас попробую вспомнить университетские лекции по коммуникации и объяснить, почему это именно так. Когда люди общаются, не важно, устно это происходит или письменно, они никогда не говорят всего того, о чем думают. И не потому, что хотят обмануть, а потому что мозг так устроен: говорящий думает, что слушателю и так понятны элементарные (для говорящего) вещи, и пропускает их. Из 100% мыслей вербализируются в лучшем случае 80%. Далее слушатель воспринимает информацию. Но из этих 80% он услышит 70%, а поймет - 60%. Не потому, что он глупый, а потому что багаж знаний Глава 3. Постановка задачи 59 и жизненный опыт у всех людей разные, отсюда возникают "фильтры" и барьеры в восприятии информации. И если, не дай Бог, в процессе разговора (переписки) люди не записывают и не сохраняют то, о чем они говорили, то у среднего слушателя в итоге останется в памяти жалких 25% всего того, что хотел ему сказать говорящий. На рис. 3.3 показама схема типичной коммуникации.