#3 USE - Урок 04 (2015) PDF

Юзабилити
и эргономика веб-страниц
Урок 4
Проектирование сайта
Информационная архитектура
Техническое задание и бриф
Содержание
Введение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3 Практическая сторона разработки сайта . . . . . . . . . . 31
Информационная архитектура . . . . . . . . . . . . . . . . . 5 Техническое задание или бриф . . . . . . . . . . . . 31
Уровневая концепция сайта . . . . . . . . . . . . . . . . . . . 8 ТЗ на дизайн . . . . . . . . . . . . . . . . . . . . . . . . . 37
Принципиальная двойственность . . . . . . . . . . 11 Итог . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Проектирование сайта . . . . . . . . . . . . . . . . . . . . . . 14
Цели сайта . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Потребности пользователей . . . . . . . . . . . . . . 18
Уровень набора возможностей: планирование
функционала . . . . . . . . . . . . . . . . . . . . . . . . 20
Уровень структуры . . . . . . . . . . . . . . . . . . . . 22
Лексика сайта . . . . . . . . . . . . . . . . . . . . . . . . 28
Итог . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Урок 4 Проектирование сайта

Юзабилити и эргономика веб-страниц
чтобы продолжить, нужно остановиться на
принципах, на которых базируется удобство
сайта.
Сайты бывают очень разными, но одно
можно утверждать совершенно точно — сайт
Введение предоставляет информацию. Главная задача
дизайнера в этом вопросе — сделать подачу
Сегодняшний урок может показаться вам не- информации на сайте максимально эффек-
обычным, поскольку в нем пойдет речь совсем тивной, т.е. решить задачу информационного
не о дизайне или графике. дизайна. Это и есть наша сегодняшняя тема.
Настало время узнать то, что, в первую Начнем, пожалуй, издалека.
очередь отличает веб-дизайн от других обла- Представьте, что Вам нужен сайт. Или Вам
стей графического дизайна. Сегодня мы по- нужно сделать сайт. С чего Вы начнете? Какой
говорим о проектировании. Проектировании инструмент возьмете в руки (откроете на ком-
веб сайта, его структуры. Это — важнейший пьютере)?
вопрос веб-дизайна, поскольку сайт, в первую Если Вы выбираете Photoshop или другой
очередь — это не картинка в браузере, а ин- графический редактор, то Вы совершаете са-
струмент, причем, порой, довольно сложный. мую распространенную ошибку новичков и
Напомню, что наша цель, т.е. цель всего вы — неправы.
изучаемого вами курса — это научиться соз- Почему?
давать удобные, функциональные и, одновре- А что главное на сайте? Правильно, поль-
менно, привлекательные сайты. В предыдущих зователь. Другими словами, сайт создается
уроках мы уделил довольно много внимания для пользователя и ради пользователя. Поль-
последнему прилагательному, т.е. ответам на зователю должно быть приятно и удобно, а
вопрос: «Как сделать сайт привлекательным?». ведь веб-сайт практически всегда является
Кстати, мы еще не закончили с этим. :) Но, «инструментом самообслуживания». Пользо-
Введение
ватель остается один на один с сайтом. Это, в пользователю и помогало нам
принципе, нормально. Современный пользо- достигать поставленных перед
ватель, в принципе готов к такому положению проектом целей.
дел и, поэтому, использует свой опыт. По этой В результате мы получаем
причине, учет опыта взаимодействия при следующую диаграмму.
создании сайта — фундамент его успеха.
Ну, хорошо, с опытом взаимодействия мы
еще разберемся. Что дальше? Что еще являет-
ся важным на сайте? Если Вы ответили, что
контент (содержимое), то Вы попали в точку.
А если, нет, то придется смириться с тем, что Внутренняя область обо-
значена как IA. Это означает
суть любого сайта — это встреча пользова- — Information Architecture, ин-
теля с его контентом, каким бы он ни был. И формационная архитектура.
только потом, в третью очередь, мы начинаем

думать об оформлении места этой встречи,
т.е. о дизайне страниц сайта. Поэтому мы и
начали наш курс с конца, поскольку эта часть
вам наиболее знакома и понятна.
А также, не стоит забывать о целях сайта,
его задачах и принципах использования. Это
— контекст, в рамках которого, пользователь
получает контент.
Итак, сформулируем: при создании сай-
та, мы решаем, что и как будет организова-
но на страницах сайта с учетом того, чтобы
это было удобно и понятно потенциальному
Введение
офисные здания, в которых не открываются
окна, и лабиринты аэропортов с указателями,
ведущими не туда.
Такие сайты создают по тем же причинам,
что и строят плохие дома:
1. Во-первых, архитекторы не живут сами в
Слово архитектура, уверен, у многих вызы- тех строениях, которые проектируют, по-
вает определенное уважение и доверие. Архи- этому плохо понимают потребности своих
тектор — это человек, который проектирует пользователей.
здания и сооружения для жизни и работы лю- 2. Во-вторых, создавать постройки, которые
дей. Здания должны быть удобными, функци- выдержат испытание временем, действи-
ональными и привлекательными. Ничего не тельно трудно. Потребности меняются, и
напоминает? Пару страниц назад, тоже самое неожиданности возникают сплошь и ря-
было сказано о сайтах. дом.
Как и здания, веб-сайты обладают архи- 3. В-третьих, сайты очень часто строят не
тектурой, определяющей нашу работу с ними. ради пользователей и контента, а «ради га-
Некоторым веб-сайтам присуща логическая лочки», т. е. «чтобы был». И делают это не
структура, позволяющая нам найти ответ и профессиональные разработчики, а слу-
выполнить задачу. В других сайтах она отсут- чайные люди. Третий пункт не имеет от-
ствует и попытка поиска на нем какой-либо ношения к зданиям (слава Богу!), а только
информации становятся весьма сложными: к сайтам. :)
не находим нужный товар, отчет, теряемся в
корзине интернет-магазина. Есть определен- Таким образом, создание правильной, ло-
ное сходство с неудачными постройками: кух- гической структуры информации (контента)
ни, в которых нет места для кухонного стола, на сайте напоминает архитектуру. Поэтому и
называется она информационной архитекту- Наверное, у вас возникает вопрос: «А ди-
рой (ИА). зайнер то-тут причем?». В идеале этим должен
Существует несколько определений: заниматься отдельный профессионал, кото-
рый называется информационным архитекто-
1. Сочетание схем организации, предмети- ром, но на практике, чаще всего это — забота
зации и навигации, реализованных в ин- веб-дизайнера, поскольку нанимать дополни-
формационной системе. тельного специалиста, мало кто желает, к тому
2. Структурное проектирование информаци- же, вряд ли этот человек будет очень серьезно
онного пространства, способствующее вы- загружен работой в небольшой студии, кото-
полнению задач и интуитивному доступу рая занимается созданием малых и средних
к содержимому. сайтов общего назначения. Такой человек бу-
3. Искусство и наука структурирования и дет состоять в штате очень крупной фирмы.
классификации веб-сайтов и интрасетей В крайнем случае, дизайнер должен уча-
с целью облегчения пользователям поиска ствовать в разработке информационной ар-
информации и управления ею. хитектуры.
4. Развивающаяся дисциплина и сообщество Можно ли создать сайт без продуманной
практиков, ставящее своей задачей рас- ИА? Можно, но долго он, скорее всего, не про-
пространение принципов проектирования живет, поскольку главная задача ИА — это
и архитектуры на цифровых просторах. обеспечить поддержку и расширение сайта.
ИА — это чертежи сайта. Такие же, как
Также, важно понимать, что информаци- чертежи здания или какой-либо сложной уста-
онная архитектура — это также и документ, новки. Можно ли построить дом без планов и
в котором визуализируется результат прора- чертежей? Можно, но, если там нужно будет
ботки структуры и концепции создаваемого сделать перепланировку или что-то отремон-
сайта. По-сути, далее, мы займемся изучением тировать, то вряд ли кто-то справится с этим.
составления этого документа. Даже строитель не сможет. Он попросту за-
будет о конструкции здания через какое-то
время.
Вот и выходит, что без планирования и
«черчения» сайта, никак нельзя.
Разрабатывая ИА, мы закладываем фун-
дамент, на котором потом будем возводить
визуальную архитектуру сайта (компоновку)
— это наш следующий урок и навигационную
систему — это мы тоже рассмотрим чуть поз-
же.
Фактически, в основе задания на разра-
ботку сайта лежит некая концепция, вокруг
которой будет реализовываться проект.
Самое главное — весь процесс разработ-
ки и создания сайта требует, чтобы ни один
Уровневая концепция сайта аспект общения пользователя с вашим сай-
том не возник случайно, без вашего осознан-
Надеюсь, что необходимость продумывания ного и явно выраженного решения. То есть, на
сайта перед созданием визуальной части стала каждом этапе разработки необходимо четко
вам очевидной. Я ввел понятие информацион- понимать ожидания пользователя и любые его
ная архитектура, но прежде чем мы присту- возможные действия.
пим к вопросам её разработки, я хочу сделать Это весьма непросто, но эта проблема лег-
более подробный разбор всего процесса про- ко разбивается на 5 уровней, каждый из кото-
ектирования сайта. рых самоценен.
Давайте посмотрим на создание ИА не-
сколько под другим углом. Дело в том, что ча- 1. Уровень поверхности — на
стенько, для небольших сайтов, понятие ИА поверхности вы видите ряд
заменяется чем-то более простым для воспри- веб-страниц, состоящих из
ятия: «карта сайта», «блок-схема», «диаграм- текста и графики. По неко-
ма», фигурирующим почти в каждом тех- торым картинкам можно кликать, чтобы
ническом задании (ТЗ) на разработку. Таким что-то сделать, т.е. они являются элемен-
образом, ТЗ — это более крупный документ, тами интерфейса. Другие, например фото-
который либо содержит ИА либо является графии обложек книг или логотип сайта,
источником её разработки. Поэтому давайте являются просто иллюстрациями или эле-
сначала разберемся с процессом создания ТЗ ментами декора.
на сайт.
Уровневая концепция сайта

2. Уровень компоновки — по- возможностей сайта в единое целое. Про-
верхность существует благода- стое перечисление этих функциональных
ря компоновке страниц сайта. возможностей образует уровень набора
Это — закономерность рас- возможностей сайта. Например, можно
положения кнопок, вкладок, фотографий и позволить пользователям сохранять адрес,
текстовых блоков. Компоновка проектиру- чтобы не пришлось указывать его повтор-
ется максимально эффектной и эффектив- но. Вопрос, включена ли эта (или любая
ной, то есть, чтобы логотип запоминался, а другая) функция в список функций сайта,
кнопку нужного действия легко можно было как раз относится к возможностям сайта.
бы найти, когда она понадобится. 5. Уровень стратегии — набор
3. Уровень структуры — компо- возможностей целиком опре-
новка является конкретным деляется стратегией сайта.
воплощением абстрактной Стратегия включает в себя
структуры сайта. Компонов- не только то, что хотят получить от сайта
ка задает расположение навигационных его владельцы, но и то, что хотят получить
элементов, структура же определяет, что пользователи. В примере с интернет-ма-
фактически кроется за этими понятиями: газином некоторые стратегические цели
кнопка, вкладка, ссылка и т.д. Другими сло- формулируются легко: пользователи хотят
вами — структура — это логика работы купить товары, а мы хотим их продать.
интерфейса, а компоновка — это её вопло- Однако другие цели могут оказаться не
щение в коде. Именно в этом уровне и гнез- столь очевидными.
дится информационная архитектура (ИА).
4. Уровень набора возмож- Эти пять уровней — стратегия, набор воз-
ностей — структура опре- можностей, структура, компоновка и поверх-
деляет способ организации ность — составляют концепцию сайта и яв-
различных функциональных

ляются предметом разработки всей команды, саться» в бюджет и сроки, по-
занятой в проекте. скольку будем переделывать все
С переходом на каждый последующий по нескольку раз.
уровень вопросы, на которые мы ищем отве- Нельзя выбирать обои и ра-
ты, становятся немного менее абстрактными мочки для фотографий, не видя
и более конкретными. На нижнем уровне мы стен, а стены не построить без
совсем не думаем об окончательном внешнем фундамента. Но, несмотря на
виде сайта — нас волнует лишь то, насколь- это, частично эти процессы мо-
ко сайт впишется в нашу стратегию. Зато, на гут накладываться друг на друга,
самом верхнем уровне мы освобождены от т.е. начинать прорисовку маке-
глобальных проблем (предполагается, что они та можно не закончив перечень
уже решены) и интересуемся только приклад- возможностей. Главное, подхо-
ными вопросами дизайна и / или программи- дить разумно.
рования. От уровня к уровню наши решения
обретают новую степень детализации.
Уровни не самостоятельны. Каждый из
них зависит от уровней, расположенных ниже:
поверхность зависит от компоновки, которая
зависит от структуры, которая зависит от на-
бора возможностей, зависящего от стратегии.
Самое сложное в этом то, что, если каж-
дый уровень будет прорабатываться отдельно,
а это вполне возможно, если делать парал-
лельно — например, рисовать (ну скорее уже!)
дизайн и вместе с этим думать что именно и
зачем :) , то мы можем, мягко говоря, не «впи-

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

зад с появлением мобильных приложений.
По этой причине, кстати говоря, несколько
т.е. выполнять некие бизнес-за- меняется квалификационная ориентиро-
ванность веб-технологий.
Всю рассмотренную выше схему можно назы- дачи, которые ранее возлагались Если несколько лет назад негласно счи-
вать по-разному. Мы уже знакомы с термином исключительно на настольные талось, что создание сайта — это рабо-
«информационная архитектура», но, уверен, программные продукты — дес- та дизайнера (достаточно знать Adobe
Photoshop чтобы его нарисовать и HTML
что вы слышали и такие вещи как «информа- ктопные приложения. Так по- чтобы его написать), то теперь совершенно
ционный дизайн» и «проектированием интер- явилось понятие — веб-сервис, очевидно, что без серьезного програм-
мирования здесь не обойтись, т. е. созда-
фейса». Какая между ними разница? Есть ли веб-приложение. ние сайта — это работа в первую очередь
она вообще? Как результат, мы имеем по- программиста, но помогать ему будут ди-
зайнер и другие профессионалы (смотри
В вопросе проектирования сайтов зало- нимание сайта одновременно и первый урок).
жена принципиальная двойственность, корни как средство распространения
которой восходят к первым годам существо- информации (масс-медиа) и как клиент-сер-
вания Всемирной Паутины. Когда она появи- верное программное обеспечение.
лась, то использовалась сугубо как новое, аль- Такая двойственность породила пробле-
тернативное средство публикации. Другими мы в развитии, поскольку проектирование
словами, есть радио, есть телевидение, есть информационного ресурса довольно серьезно
газеты и журналы, а есть Всемирная Паутина. отличается от проектирования программного
К её использованию стали применять те же приложения. Дело даже не только и не столько
понятия и принципы, что были приняты в в терминах.
издательском деле. Так появились интернет- Давайте разделим наши 5 уровней на две
журналы, интернет-газеты и т.д. отдельные стопки и сопоставим их.

На «программной» половине мы будем го- ся визуальной части, хотя, вроде бы, не стоит
ворить главным образом о задачах — о шагах заниматься этим до того, как будут готовы
некоего процесса и о том, что и как думают о предыдущие четыре. Тем не менее, весь ваш
выполнении этих шагов люди. Здесь мы смо- предыдущий дизайнерский опыт позволит
трим на сайт как на инструмент или набор вам достаточно быстро разобраться с послед-
инструментов, необходимых пользователю ним уровнем — уровнем поверхности. Т.е. он
для решения одной или нескольких задач. для нас — самый простой.
На «информационной» половине нас ин- Теперь мы уделим внимание первым двум
тересует информация — какую информацию уровням, чтобы в дальнейших уроках объеди-
предлагает сайт и что она значит для наших
пользователей. Создание гипертекста — это
создание информационного пространства, в
котором могут перемещаться пользователи.
Обратите внимание, что в обеих частях
нашей структуры на самом низком уровне на-
ходится одно и тоже: цели сайта и потребности
пользователей. Ну это и не удивительно. Это
еще раз доказывает то, о чем было сказано в
самом начале — сайт создается для пользо-
вателей в рамках реализации своих целей.
Эта схема очень важна для понимания
процесса проектирования сайтов. Мы, в рам-
ках данного курса, движемся по ней как бы
одновременно снизу вверх и, наоборот, сверху
вниз. В предыдущих уроках мы очень под-
робно разобрали с вами почти все, что касает-

нить поверхность с фундаментом разработки
сайтов.

ципе не ставит никаких целей! Ему нужен сайт
потому, что «у всех есть и я хочу». Это очень
плохо, но, к сожалению, правда. Что же делать?
Дело ведь в том, что если нет уровня страте-
гии, то сайт обречен на провал. В таком случае,
Проектирование сайта стоит придумать цели для сайта самостоятель-
но и следовать им в дальнейшей разработке,
При проектировании сайта одно из важней- утвердив их у заказчика.
ших задач будет определить цели и потреб- Итак, какие цели может преследовать сайт?
ности пользователя.
Все просто и сложно одновременно. Есть
два сакраментальных вопроса:
1. Что нам (заказчику) нужно от сайта?

2. Что полезного сайт может принести поль-
зователям?
Ясным образом сформулированные отве-

ты на эти вопросы и образуют первый уровень
— уровень стратегии. Как ни странно, клю-
чевые слова в этом предложении — «явным
образом сформулированные», чаще всего и
становятся камнем преткновения. Слишком
часто цели существуют в виде предположений
и невысказанных идей. А также, что очень ха-
рактерно для нашей страны, заказчик в прин-
Цели сайта
Коммерческие цели
Это — самый распространенный вариант, ко-
торый пытаются сформулировать все, и тут
попадают в главный капкан. Помните про «яв-
ным образом сформулированные»? Так вот построив некий сервис, с помощью которого,
коммерческие цели явно формулировать либо пользователи смогут решить какие-то свои
боятся, либо не желают. А нужно. Попробуем потребности. Но это уже больше относится к
классифицировать их: потребностям пользователей, так что об этом
Прямые продажи товаров или услуг. Вы позже.
создаете интернет-магазин с полноценной си- Экономия средств и времени. Эту цель
стемой оплаты онлайн? Тогда это и есть ваша может помочь решить корпоративный сайт
цель. Такую цель легко сформулировать и, компании, у которой есть целый штат кон-
что самое главное, потом легко оценить её до- сультантов. С помощью сайта консультации
стижение. Например: за месяц сайт продал можно сделать более быстрыми и более эффек-
товаров на X гривень. А мы хотели Y гривень. тивными, т.е. сэкономить на них.
Сравниваем X и Y и делаем выводы. Реклама. Если не подходит ни то ни дру-
Кстати, продавать можно не только ма- гое, то ваш сайт может преследовать реклам-
териальные товары, а и саму информацию, ные цели. Имеется в виду реклама фирмы,
товаров или услуг заказчика. Тогда, наверное, товар (новинка на рынке!) или услугу (акция!),
мы создает промо-сайт. Такая цель оцени- а рекламируем идентичность компании. Под-
вается с помощью специальных показателей держиваем её узнаваемость, информируем о
эффективности рекламной кампании. Здесь новостях, публикуем пресс-релизы и т.д.
нужна консультация маркетинговой службы Сложность такой цели в сложности её
заказчика. оценки. Тем не менее, такие метрики тоже су-
Продажа рекламы. На самом деле — это ществуют. Современный подход к этому во-
непрямая цель. Рассматриваем её здесь пото- просу основан на использовании социальных
му, что она коммерческая. Сайту ведь нужно
развиваться. Это потребует затрат. Чтобы их
окупить, может преследоваться цель продажи
чужой рекламы на страницах проектируемого
сайта. Чаще всего речь идет в таком случае о
некоммерческом сайте. См. ниже.
Имиджевые цели
Далеко не всегда можно четко определить
цели сайта именно как прямую коммерцию,
выражаемую в денежном исчислении. Очень
крупный сегмент сайтов предназначены для
реализации целей развития бренда, ничего не
продавая и не принося никакой прямой фи-
нансовой выгоды.
Фактически это та же реклама (см. пре-
дыдущий параграф), но она не является це-
левой. Т.е. мы не рекламируем конкретный
сетей и групп в них. Более подробно об этом
вопросе вы будете узнавать из курса «Основы
продвижения сайтов и интернет-маркетинга».
Некоммерческие сайты
Не всем сайтам нужно продавать или рекла-
мировать. Существует масса проектов, абсо-
лютно никак не связанные с бизнесом. Ос-
новная цель, которая может быть здесь — это
информирование как можно большего коли-
чества людей.
Монетизация таких проектов — это от-
дельный и важный вопрос, но очень нестан-
дартен и требует более подробного обсужде-
ния.
чины в возрасте от 25 до 30 лет с высшим об-
разованием и стабильным заработком выше
среднего», так и довольно расплывчатые —
«женщины среднего возраста».
Психографические критерии: отражают
Потребности пользователей мировосприятие ваших потенциальных поль-
зователей вообще и по тематике вашего сайта
Самая главная ошибка, которую можно сде- в частности. Частенько люди с одинаковыми
лать на уровне стратегии — это даже не плохие демографическими характеристиками облада-
или неясные цели, а неверное представление о ют и одинаковым мировоззрением.
том, кто ваш пользователь. По этой причине, Отношение пользователя к Интернет и
важным этапом разработки сайта на уровне сайтам: можно классифицировать пользовате-
стратегии является исследование целевой ау- лей по уровню вовлеченности в использование
дитории. Интернета в повседневной жизни и работе.
Собственно примерный список потребно- Принадлежность пользователей к той или
стей пользователей прямо вытекает из целей иной группе определяет то, как люди будут ис-
сайта, но он требует уточнения в соответствии пользовать информацию, поданную на сайте.
с вероятными группами пользователей нашего У родителей абитуриента будут, вероятно, су-
будущего сайта. щественно иные потребности в информации,
Всю массу пользовательских потребностей нежели у самого абитуриента. Идентификация
можно разбить на обозримые части путем сег- различных ролей посетителей вашего сайта
ментации пользовательской аудитории. Суще- поможет вам разделять и анализировать их
ствует несколько способов это сделать: потребности.
Демографические критерии: пол, возраст, Есть еще одна важная причина для опре-
образование, семейное положение. Это могут деления сегментов пользовательской ауди-
быть как вполне конкретные группы — «муж- тории. Иногда потребности разных групп
пользователей не просто различны, а прямо
противоположны. Возьмём, к примеру, при-
ложением для биржевой торговли. Новичкам,
скорее всего, следует предложить программу,
разбивающую процедуру покупки или прода-
жи акций на конкретные шаги. Экспертам же
подобный подход лишь создаст помехи — им
нужен монолитный интерфейс, предоставля-
ющий быстрый доступ к широкому набору
функций.
Самое главное решение, которое нужно
принять в данном контексте — это какие
именно группы пользователей вы будете
удовлетворять в рамках своего проекта. Это
повлияет на все последующие шаги в проек-
тировании.
◆◆ функциональные спецификации созда-
ются на заключительном этапе и описы-
вают, что она делает в реальности.
А что же делать при составлении требова-

Уровень набора возможностей: ний к контенту? Да, на самом деле, то же са-
планирование функционала мое, но оперировать нужно не вопросами «Что
делает?», а вопросами «Каким должно быть?».
Переходя на уровень набора возможностей, Огромную пользу имеет соотнесение
мы от вопроса «Зачем мы делаем этот сайт?» требований к контенту с функциональными
переходим к вопросу «Что именно мы дела- возможностями какой-либо CMS. (content
ем?». management system).
Здесь уже появляется разделение в подхо- Таким образом, разрабатывая требования
дах при разработке сайта как программного к контенту, можно (и нужно) сразу озаботить-
обеспечения и как информационного гипер- ся выбором CMS (движка), а уж он, в свою
текстового ресурса. очередь, подскажет вам требования к кон-
При разработке программного обеспече- тенту на основании своих функциональных
ния набор возможностей определяется в до- возможностей. Функциональность, которая
кументах, содержащих требования к функ- вам потребуется от CMS, зависит от природы
циональности, или в функциональных самого контента, поэтому разумным тут будет
спецификациях. В некоторых организациях совместное движение навстречу друг-другу,
эти термины обозначают два разных понятия: т.е. не только подбор движка под. требования к
контенту, определяемые самим контентом, но
◆◆ функциональные требования форму- и, возможно, корректировка этих требований
лируются в начале проекта для описания в соответствии с определенным движком, с
того, что система должна будет делать; которым вам удобно работать.
CMS — это программа, предназначенная
для управления каким-либо информа-
Например, если вы остановили свой вы- функциональные возможности ционным содержимым: текстом, изобра-
жениями, мультимедиа. В данном случае
бор на движке Wordpress, то вы сразу, или, как какого-то движка и все. :) речь идет о системе управления содержи-
говорят, «из коробки» сразу получите: Да, безусловно, чтобы сде- мым сайта. Часто эту программу называют
попросту движком сайта (engine).
лать ответственный выбор, нуж-
CMS бывают коммерческими и с открытым
◆◆ возможность сбора комментариев к кон- но знать возможности движков исходником (open-source) — бесплатные.
кретной статье; и их рынок. Ну тут деваться не- В мире веб-разработки очень популярны
именно open-source CMS. В ближайшем
◆◆ разделение статей по авторам; куда. Придется изучать. будущем вы будете изучать использование
◆◆ создание анонса статьи с возможностью Вопросы составления функ- таким популярный движков как Joomla и
Wordpress в рамках отдельного курса.
вывода анонсов на одну страницу и откры- циональных требований, к со- В основном CMS пишут на языке PHP. Они
тия полного текста статьи на отдельной жалению, слишком специфичны работают на сервере и занимаются гене-
странице, и т. д. и требуют специальной квали- рацией HTML-страниц на лету.
Большинство современных CMS позволя-
фикации. Поэтому они касают- ют натурально «собрать» сайт из отдель-
А если вы выбираете Joomla, то сразу по- ся в основном программистов. ных частей не написав ни строчки кода и
не разрабатывая собственный уникальный
лучите: Очень вряд ли, что вы, будучи дизайн. Конечно такой сайт будет доволь-
дизайнером, будете вовлечены в но дёшев, но и поражать воображение и
◆◆ Систему настройки прав доступа к содер- этот процесс при разработке веб- претендовать на эксклюзивность он тоже
не будет. Т. е. стандартные бесплатные CMS
жимому; приложения вашей командой. А годятся для дешевых шаблонных проек-
◆◆ Поддержка многоязычности, и т. д. вот при разработке контентного тов. Хотя, в умелых руках, из стандартной
CMS можно действительно сделать очень
сайта, на вас как на дизайнера, приличный проект.
Если все это вам нужно, что ж, отлично, запросто могут свалить обязан-
вы получите это совершенно свободно! ности по формированию требо-
Большинство движков на рынке копиру- ваний к контенту.
ют и дублируют возможности друг-друга, по-
этому сегодня требования к контенту соста-
вить не так уже и сложно. Скорее всего — это
зователю будет уютно, он в нем не заблудится
и не заскучает.
Напомню, что на данном уровне — уровне
структуры — мы снова сталкиваемся с двой-
ственной природой сайтов. Если мы разраба-
Уровень структуры тываем приложение, то мы вплотную будем
проектировать опыт взаимодействия на дан-
Вот мы и подошли к середине нашего пути ном этапе, т.е. закладывать фундамент ин-
вдоль 5-ти концептуальных уровней разработ- терфейса нашего приложения. А вот если мы
ки веб-сайта. Именно здесь и живет инфор- создаем информационный проект, то наша за-
мационная архитектура, с которой я и начал дача — как раз информационная архитектура.
сегодняшнее повествование. Проектирование взаимодействия и ин-
Предполагается, что мы с вами уже очень формационная архитектура кажутся высо-
хорошо понимаем стратегические моменты и котехнологичными областями, доступными
имеем ответы на все вопросы, которые звуча- лишь посвященным, однако на самом деле не
ли ранее: имеют никакого отношения к технологиям.
Они связаны с пониманием людей, знанием
◆◆ Что нужно нам от создаваемого сайта? того, что люди думают и как работают. Встро-
◆◆ Что получат пользователи на страницах ив это понимание в структуру нашего про-
сайта (и что хотят получить)? дукта, мы обеспечим позитивный опыт вза-
◆◆ Что конкретно будет представлять собой имодействия тем, кто будет иметь с ним дело.
то, что мы создаем? Что будем уметь и что В последующих уроках мы окунемся в во-
содержать и в каком виде? просы психологии восприятия и, вооружив-
шись этими знаниями, разберемся в деле про-
Теперь мы должны из этого строительного ектирования самого интерфейса, а не только
материала построить здание, в котором поль- его фундамента.
Сейчас же, мы, отодвинув в сторонку ню- ническое оборудование. Затем,
ансы психологии, поговорим об организации проведя анализ, мы обнаружим,
контента на сайте, требования к которому уже что услуги клиники делятся на
сформированы. восстанавливающие и лечебные,
а сотрудники бывают разных
Классификационные модели уровней квалификации. Далее
В корне ИА лежит классификация. Есть два эти категории, в свою очередь,
подхода к созданию таких классификацион- также могут делиться и далее.
ных схем: нисходящая и восходящая. Главной сложностью на дан-
Нисходящий подход заключается в том, ном этапе является попробовать Нисходящий подход
чтобы на основании стратегической информа- мыслить абстрактно, не привя-
ции получить некоторые категории, которые зываясь к конкретным образам,
потом можно будет разделить на подкатегории которые возникают у вас в голове
и т.д. пока не дойдем до элементарных сегмен- и забыв о движке, на котором вы
тов информации. будете это делать. В противном
Например: из ТЗ на сайт и переговоров с случае вы рискуете или упустить
заказчиком выяснилось, что сайт реабилита- нечто ценное, или попросту не
ционной клиники должен подробно информи- придумать это, ограничив себя
ровать потенциальных клиентов об услугах, внешними обстоятельствами.
врачах клиники и оборудовании. Это необхо- Восходящий подход, по-
димо для формирования лояльности потенци- сути противоположен нисходя-
ального клиента к компании и способствовать щему и начинается с очень скру-
его выбору в пользу компании заказчика. пулезного анализа имеющегося в Восходящий подход
В таком случае, мы можем сразу почерп- распоряжении разработчика контента, с целью

нуть следующую классификацию контента его классификации. Затем, группы (категории)
на первом уровне: услуги, сотрудники, кли- контента можно объединить в более крупные
группы и т.д. для того, чтобы, в конечном ито- и о требованиях к контенту, определяемых в
ге «попасть» в те цели и потребности пользова- том числе и возможностями движка) должна
телей, которые мы запланировали ранее. позволить нам добавить новый раздел о турах
Нельзя ни один из этих способов назвать безболезненно.
однозначно лучшим. Нисходящий способ
слишком абстрактен и грешить тем, что мож- Архитектурные решения
но кое-что упустить из виду. Понять это мож- При работе с подобными моделями всегда есть
но будет только добравшись донизу, т.е. до са- соблазн исчислять их в страницах сайта или
мого контента. Восходящий же способ может документах. Не стоит этого делать.
построить такую структуру, которая будет на- Элементарной единицей информацион-
столько жестко пригнана к текущей ситуации, ных структур является узел. Все кружки на
что затем, когда настанет время обновлять схемах выше, по сути, узлы. Узел может быть
сайт, это будет сделать затруднительно. Нужно чем угодно. Это может быть и просто число,
балансировать между этими способами. дата, статья или целая библиотека.
Продолжаем помнить также, что струк- Узлы могут быть организованы самыми
тура тесно взаимосвязана с целями и потреб- разными способами, но, по большому счету,
ностями пользователей. При их изменении, все они укладываются в несколько видов:
может измениться и структура. Очень важно
проектировать структуру так, чтобы она была 1. Иерархическая структура (дерево). Здесь,
расширяемой. узлы имеют отношения типа «родитель—
К примеру, если вернуться к сайту реаби- потомок». Узлы-потомки представляют
литационной клиники, то, в какой-то момент, более узкие понятия в пределах широкой
клиника может расширить свой бизнес и пред- категории, представленной узлом-роди-
лагать клиентам, скажем, лечебные оздоро- телем. Не каждый узел имеет детей, но
вительные туры. Это надо отразить на сайте. у каждого (кроме самого верхнего) есть
Разрабатываемая структура (также помним родитель. Это самая распространенная в
вебе структура и, к тому же, самая понят- этих осей довольно много: производи-
ная. Большинство сайтов сделано по этой тель (бренд), ценовой диапазон, характе-
структуре. ристики товаров и т.д. Подчеркиваю, что
это именно, что дополнительная система.
Пример: основной контент сайта состав- Основной является рассмотренная выше
ляют статьи об автомобилях. Понятие «авто- древовидная. Если матричная структура
мобили мира» — это корень. Делим контент имеет больше 2-х осей, её нельзя исполь-
на разделы: грузовые, легковые автомобили, зовать в качестве основной.
автобусы. В пределах каждого раздела можно
создать подразделы по маркам производите- В качестве примера, фильтр интернет-ма-
лей или по другим характеристикам и т.д. газина. Узел структура — это товар. Каждый
Иерархическая структура очень присуща товар имеет определенные «координаты» по
интернет-магазинам. нескольким осям (шкалам): цена, бренды, диа-
Обратите внимание на меню веб-сайта на гональ, ОС и т.д.
иллюстрации. Здесь разделы визуализирова-
ны иконками. Каждый раздел имеет подраз- 3. Органические структуры. Предполага-
делы. В данном случае у нас есть «ФотоТехни- ет несистемные связи между узлами, т.е.
ка». Далее имеем категории. А уж конкретные взаимосвязь узлов не поддается какому-
товары — лежат в категориях. то логическому прогнозированию. Яркий
пример — это технология меток к статьям
2. Матричная структура. Узлы «нанизаны» в блогах. Т.е. когда определенному узлу Схематическое изображение
на определенные оси координат и доступ (статье) присваиваются определенные мет- иерархической, матричной,
органической и последова-
к каждому узлу можно получить, двига- ки, отображающиеся в виде ссылок. При тельной структур
ясь по этим осям. Это отлично работает переходе по такой ссылке, мы получим пе-
в тех же интернет-магазинах в качестве речень узлов, которые имеют одинаковую
дополнительной системы навигации. Там метку (тег). При этом любой узел может
иметь любую метку и любая метка может
быть присвоена любому узлу. Нельзя ис-
пользовать такую структуру в качестве ос-
новной. Она отлично работает в качестве
вспомогательной. Область применения —
это информационные сайты с большим ко-
личеством очень разнообразного контента.
Пример — сайт coverradio.fm, который

представляет собой очень объемный каталог Интернет-магазин — пример сайта с иерархической структурой
музыки — кавер-версий различных треков

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

в фильтрации товаров новый контент
интернет-магазина
4. Последовательные структуры. Это — по- гораздо ближе понятия марка автомобиля, тип
следовательное изложение материала по кузова, цвет и т.д.
частям. Обыкновенная книга — это при- Это пример неправильного выбора орга-
мер последовательной структуры. Это наи- низационных принципов. Как их выбирать?
более понятный человеку, но и наиболее Из потребностей пользователей — см. первый
примитивный в плане возможностей ва- уровень разработки сайта.
риант. Подойдет в очень узких локальных
задачах, типа пошаговой инструкции или
как содержание статьи.
Все эти структуры довольно абстрактны и

для того, чтобы выбранный вариант структу-
ры наполнить конкретным контентом нужно
выработать также организационные прин-
ципы, т.е. критерии сортировки объектов и
зачисления их в ту или иную категорию.
Например, если вы создаете сайт по те-
матике автозапчастей (продажа или кон-
сультирование или просто энциклопедия
— неважно) вы можете создать категории по
грузоподъемности, мощности и годам выпу-
ска, поскольку именно такие характеристи-
ки имеются в описании самих автозапчастей.
Проблема только в том, что пользователям
вашего сайта будет безумно сложно ориенти-
роваться в нем, поскольку пользователю сайта
Более сложным подходом к нормализации
лексикона является создание тезауруса. В
Нормализованный лекси- отличие от простого списка одобренных
кон — это всего лишь набор терминов, тезаурус документирует также
и альтернативные термины, имеющие ши-
стандартных терминов, исполь- рокое употребление, но не применяемые
зуемых на сайте. Это еще одна на сайте.
область, где важно проводить Имея тезаурус, вы можете описать соот-
Лексика сайта исследование пользовательской

ветствие между одобренными термина-
ми с одной стороны и профессиональным
аудитории. Самый эффективный жаргоном, сокращениями, сленговыми
терминами и аббревиатурами — с другой.
Даже если структура безупречно отражает то, путь разработки номенклатуры, Тезаурус может содержать и другие взаи-
как пользователи представляют себе тематику которую пользователи сочтут мосвязи между терминами, указывая более
широкие, узкие или близкие термины.
вашего сайта, они не смогут ориентироваться естественной, — побеседовать с
Документирование этих взаимосвязей
в архитектуре, если названия, понятия и тер- пользователями, чтобы понять, дает вам полную картину всего спектра
мины, которые использованы на сайте будут как они общаются. понятий, задействованных в контенте сай-
та, а это, в свою очередь, может подсказать
пользователю не понятны. Словари нормативной лек- вам новые подходы к построению архи-
В форме поиска тура использованы поня- сики помогут вам добиться не- тектуры.
тия «пакетные туры» и «экскурсионные туры».
Эти понятия не очевидны. Поэтому рядом
вы можете видеть иконку помощи, которая
сможет объяснить что непонятно. А вот само
понятие «тур», в принципе не объясняется,
поскольку предполагается, что оно известно
целевой аудитории.
Вот почему необходимо говорить на языке
предполагаемых пользователей, причем упо-
треблять его правильно. Средство, исполь-
зуемое для этой цели, называется словарем
нормативной лексики.
противоречивости в организации контента.
Особенно важно, если контент сайта контро-
лируется несколькими людьми.
простенького сайта-визитки пиццерии, то, не
стоило, конечно, этого делать. Все это каса-
ется средних и сложных проектов, которые,
надеюсь, вы будете создавать в будущем. Ну
как минимум, для курсовой работы по веб-
Итог технологиям в конце семестра.
Также, наверное, вы заметили, что сегодня
Уверен, что по прочтении этого материла, у мы рассмотрели только 3 уровня из пяти. Это
вас возникло ощущение, что все эти знания так, но, замечу, что уровень поверхности —
как-то оторваны от реальности и, на самом это то, о чем шла речь в предыдущих уроках,
деле, никто так не делает. В какой-то мере, без- а уровень компоновки мы рассмотрим в сле-
условно, вы правы. Это материал — это некий дующем уроке.
конгломерат человеческих знаний в области
организации информации и управления ею.
Он носит очень абстрактный характер, но это
не умаляет его ценности. В следующей главе
мы поговорим о практической стороне во-
проса в разработке сайта и, уверен, тогда вам
станет яснее что делать с этой информацией.
Кстати, так действительно не так много
веб-разработчиков делает. Но это объясняет
лишь одно — почему существует откровенно
много провальных проектов в вебе.
С другой стороны, если, прочитав это,
вы ринулись составлять тезаурус или про-
водить исследование целевой аудитории для
Уровень детализации, полнота, качество
и ясность изложения в ТЗ очень зависят от
уровня профессионализма и подготовки его
автора.
Принято считать, что ТЗ должен состав-
Практическая сторона лять заказчик. Но, на самом деле, очень слож-
разработки сайта но рассчитывать на то, что заказчик сможет
внятно, да еще и профессионально, рассказать
то, что нужно знать разработчику.
Техническое задание или бриф По этой причине, стоит вести речь, на
самом деле, о двух документах: бриф и, соб-
На практике, в особенности, если ведется раз- ственно, ТЗ. Бриф — это заимствованное ан-
работка среднего проекта, да и еще в рамках глийское слово brief, «краткий». Это, действи-
фриланса или, в крайнем случае, в небольшой тельно, краткое описание со слов заказчика
студии, столь глубоких исследований, конеч- сути того, что он желает видеть. Для удобства
но же, не проводят. Чаще всего, многие вещи, стоит заранее, перед встречей с заказчиком,
просто очевидны или прямо вытекают из тех- составить перечень вопросов, на которые за-
нического задания. казчик должен ответить. Далее, заказчик, про-
О техническом задании (ТЗ) на разра- сто заполняет анкету.
ботку сайта уже шла речь в самом начале се- А вот, собственно, ТЗ может и не быть.
годняшнего урока. Чаще всего — это един- ТЗ — это более серьезное и полное изложение
ственный документ, который составляется того, что содержится в брифе, если это нужно.
при разработке сайта. Но в нем, как правило, ТЗ может составляться уже и без заказчика
содержится (или должно содержаться) все то, для выполнения каких-либо работ в рамках
о чем говорилось в предыдущей части урока. проекта по разработке сайта.
Практическая сторона разработки сайта

Например, вполне может понадобиться от- смотрим типовые вопросы, которые там со-
дельное ТЗ на разработку системы управления держатся.
содержимым для сайта. Это ТЗ для команды
программистов. Составлять его будут про- 1. Информация о компании (заказчике):
граммисты. На своем языке. В своих терминах. ◆◆ Наименование
Затем они будут отчитываться о проделанной ◆◆ Сфера деятельности
работе именно по этому ТЗ. ◆◆ Целевая аудитория
Дизайнер тоже может получить отдельное ◆◆ Миссия, позиционирование на рынке
свое ТЗ на разработку дизайна сайта. В от- ◆◆ Основные конкуренты и их сильные / сла-
личие от брифа, там будет содержаться узко- бые стороны
профильная информация, которой заказчик ◆◆ Контакты
не знает и не должен знать. Например, важен
ли заказчику способ передачи макета в psd на Думаю, что список вопросов достаточно
верстку? А нужны ли ему имена файлов про- очевиден, тем не менее, замечу, что все это
екта? Прямо скажем, не всегда. поможет реализовать стратегический уровень
Подытожим. Не стоит путать понятия ТЗ разработки сайта. Безусловно, не ждите того,
и бриф, хотя частенько именно так и проис- что целевая аудитория будет определена в точ-
ходит. Просто заранее попытайтесь выяснить ности. Т.е. заполнение заказчиком этого пун-
у своего заказчика что он понимает под ТЗ и кта не избавит вас от проверки и дополнитель-
действуйте сообразно. ных исследований. Это — мнение заказчика, с
которым, безусловно, нельзя не считаться, но
Как писать бриф на сайт? это можно корректировать. Главное согласо-
Почти каждая более-менее вменяемая веб- вать корректировки потом.
студия предлагает скачать форму брифа на
разработку сайта прямо со своего сайта. Рас-

2. О проекте ◆◆ Планируется ли сопровождать сайт ре-
◆◆ Доменное имя (возможно уже есть или его кламной кампанией в интернет?
стоит покупать). Пожелания.
◆◆ Цели проекта: Эта часть снова направлена реализацию
• Привлечение клиентов, заказчиков стратегического уровня. Здесь вы почерпнете
• Привлечение партнеров практически все, что вам нужно. Но, как я ска-
• Выход на новые рынки зал в комментарии к предыдущему пункту, не
• Имиджевая цель забывайте о том, что это — видение клиента.
• Улучшение информационных комму- Обратите внимание на пункт «Цели проекта».
никаций (информационная поддержка Он содержит готовые формулировки целей,
партнеров, клиентов, дилеров) поскольку, традиционно, с этим возникают
• Ознакомление потенциальных клиентов проблемы, поскольку четко цели определить
с продукцией весьма непросто. Помогайте в этом вопросе
• Сбор маркетинговой информации (ис- себе и заказчику, предлагая варианты.
следования аудитории), проведение Кстати, маленькая хитрость состоит в том,
опросов и т.д. чтобы позволить заказчику определить тип
• Обратная связь с потребителями сайта. Как мы знаем, это очень сильно зависит
• Создание источника актуальной инфор- от целей. Задумавшись над типом сайта, за-
мации для клиентов, партнеров, прессы казчик, не исключено, взглянет иначе на цели
◆◆ Тип сайта: своего проекта.
• Сайт-визитка Старайтесь избегать свободных формули-
• Корпоративный сайт ровок. Иначе вы рискуете получить нечто по-
• Интернет-магазин добное: «Наш сайт должен повышать продажи
• Информационный проект и предоставлять информацию о нашем ма-
• Промо-сайт газине потенциальным клиентам с помощью
каталога. Сайт должен быть современным и

красивым». По этой формулировке очень тя- • Какие примеры сайтов схожей направ-
жело понять, что нужно заказчику. Я уж молчу ленности Вас привлекают? Почему?
о «красоте» — об этом потом. • Какие сайты Вам, наоборот, не нравят-
Идеально, если будет написано как-то так: ся? Почему?
«Будущий интернет-магазин мебели будет ◆◆ Стилистика.
служить основным инструментом для при- ◆◆ Впечатление. Что должен ощущать поль-
влечения клиентов и увеличения продаж. От зователь при посещении сайта?
большинства конкурентов нас отличает на-
личие собственного производства и сертифи- Важным моментом здесь является при-
цированный персонал прошедший обучение в ем от заказчика информации о фирменной
Италии. Наш посетитель и потенциальный стилистике компании. Не исключено, что вам
клиент должен с первого взгляда понять, что придется её разрабатывать. И это будет доро-
попал на сайт серьезной организации, однако же. Нужно попытаться выяснить очень под-
серьезность не должна „давить“ — мы хотим робно этот вопрос. А также не забывайте о
произвести впечатление открытой компании форме передачи логотипа и всей остальной
с которой легко и приятно работать». Но на айдентики. Бывают случаи, когда логотип у
такое способны немногие. заказчика в электронном виде (имеется в виду
векторная форма) просто не существует. То,
3. Дизайн что это проблема для заказчика отнюдь не
◆◆ Фирменный стиль компании. Есть ли он? очевидно.
Что именно есть? Дизайн сопряжен с эмоциональной сторо-
• Фирменные цвета ной. Здесь у заказчика есть возможность де-
• Логотип кларировать свое видение этого вопроса. Но,
• Брендбук эта часть очень слабо формализуется, поэтому
• Другое ожидайте, что заказчик напишет что-то вроде
◆◆ Примеры. «стильный современный дизайн» или «пользо-

вателю должно понравиться на сайте». Такие • ведение рубрики вопрос-ответ
формулировки очень слабо помогут вам, по- • организация книги отзывов (гостевая
этому стоит предусмотреть несколько вариан- книга)
тов ответов на вопрос стилистика, из которых • организация доски объявлений
заказчик что-то выберет. Нельзя давать воз- • ведение форума
можность заполнять эту графу свободно. • размещение собственной рекламы, ак-
центирующей внимание на отдельных
4. Функционал и структура товарах и услугах
◆◆ Разделы сайта. Приведите список разделов • организовать регистрацию посетителей
с их кратким описанием. для допуска к определенным разделам
◆◆ На сайте Вами планируется: сайта
• публикация новостей организации • размещать формы заказ/заявки на това-
• публикация тематических (например, ры и/или услуги
отраслевых) новостей ◆◆ Планируемая регулярность обновления
• подписка/ рассылка новостей сайта (что именно и с какой периодично-
• публикация пресс-релизов стью предполагается обновлять/добав-
• публикация тематических статей лять?).
• организация каталога товаров/услуг ◆◆ Уровень готовности поддерживать сайт
• возможность выбора товаров из катало- собственными силами: есть специалист
га (корзина) или предполагается его нанять, планиру-
• организовать прием платежей ется осуществлять поддержку и продвиже-
• использовать быстрый поиск по сайту/ ние сайта силами сторонней организации.
каталогу
• публиковать объявления о вакансиях Это — главная часть брифа. Это исход-
• организация голосований и опросов ник будущей информационной архитектуры
• размещение файлов для скачивания сайта. Не стоит опираться на информацию,

В сленге программистов часто можно слы-
шать слово — фича. Как обычно, это слово
которую напишет заказчик в пункте «Разделы присутствуют в брифе. Другое заимствовано из английского, «feature» пе-
сайта» как на окончательную. Не исключено, дело, что касаться вас это будет реводится как «особенность, характерная
черта» и в то же время как «возможность,
что вам придется её оптимизировать, пред- только, если вы фрилансер или функция».
ложив более эффективный вариант или до- менеджер веб-студии. Словом «фича» называют определенные
полнять какими-то элементами. индивидуальные функции какого-то при-
ложения, часто — уникальные, отсутству-
Список функциональных особенностей ющие в других подобных проектах.
(«фич») здесь приведен, безусловно, ориен- Вкладывается смысл тот, что определенная
тировочный. Программисты, с которыми вы «фича» отличает проекты друг от друга.
сотрудничаете, внесут ясность в это пункт,

поскольку, в первую очередь, это их юрисдик-
ция. Именно они будут претворять в жизнь
эти требования. Вы, как дизайнер, просто
должны знать о них и понимать, что будете
разрабатывать интерфейс для них. Вот тут, не
исключено, может понадобиться отдельное ТЗ
на определенные элементы функционала.
5. Бюджет и сроки
◆◆ Укажите “вилку” предполагаемого бюдже-
та на разработку сайта.
◆◆ Укажите желаемый и обязательный сроки
сдачи проекта
В принципе, тут все очевидно. Эта часть

приведена здесь именно для того, чтобы Вы
понимали, что подобные вещи действительно

Безусловно, речь стоит вести об отдельных
ТЗ для функционала сайта — для програм-
мистов и для дизайна сайта — для дизайне-
ров. Мы по понятным причинам рассмотрим
именно дизайнерское ТЗ.
ТЗ на дизайн Прежде всего скажу, что разработка ТЗ
— это тоже работа, за которую также хочется
Еще раз подчеркну: ТЗ составляется чаще получить вознаграждение. По этой причи-
всего после брифа и в том случае, если брифа не, нужно очень четко оценивать объем ТЗ и
недостаточно. уровень его детализации. Фактически, задача
Поскольку, чаще всего, заказчик и близ- ТЗ — устранять разницу между ожиданием
ко не обладает нужно квалификацией в веб- заказчика и видением разработчика. Дру-
дизайне, то шансов написать вменяемый доку- гими словами, если на этапе переговоров при
мент у него нет. По этой причине, ТЗ должен, составлении брифа, вы с заказчиком приш-
как это ни парадоксально, должен будет на- ли к полному взаимопониманию, то время
писать сам исполнитель! Но, согласовать его на разработку ТЗ тратить не стоит. С другой
потом с заказчиком, естественно. стороны, если коммуникация с заказчиком
Помните о том, что ТЗ — это очень ответ- затруднена, то, возможно, стоит, все таки, рас-
ственный документ, который определяет то, писать некоторые моменты.
что потом будет оплачивать заказчик. И в ва- Итак, хорошее ТЗ на дизайн может (и, на-
ших интересах сделать его так, чтобы в итоге верное, должно) содержать графическую часть
никто не остался недовольным, т.е. заказчик — прототип. Технологию составления про-
получил именно то, что он хочет, а вы полу- тотипа мы рассмотрим в следующем уроке,
чили именно такую оплату, которую стоит поскольку это имеет самое непосредственное
заплатить за ваше творение. отношение к реализации уровня компоновки
при разработке сайта.

А пока обсудим вопросы, которые стоит 3. Укажите экранное разрешение, на которое
задать. должен быть оптимизирован сайт:
◆◆ …px × … px
1. Какие изменения можно вносить в эле- ◆◆ Должен растягиваться в пределах от … px
менты фирменного стиля компании при до … px.
использовании их в дизайне? ◆◆ Должен иметь адаптивную верстку для
◆◆ Изменять цвет, тонировать таких устройств (перечислить).
◆◆ Масштабировать без ограничений 4. Выберите те элементы, которые должны
◆◆ Менять направленность, угол наклона, ис- присутствовать на сайте, и оцените их
кажать перспективой приоритет.
◆◆ Использовать части элементов фирменно- ◆◆ Логотип
го стиля для декорирования ◆◆ Название сайта
◆◆ Добавлять (убирать) объём, изображать в ◆◆ Слоган
другой технике ◆◆ Контактная информация
2. Какие требования предъявляются к ◆◆ Вводный текст
оформлению текста? ◆◆ Основная навигация
◆◆ Текст и графика ◆◆ Второстепенная навигация
• Текст должен главенствовать над изо- ◆◆ Дополнительная навигация
бражениями ◆◆ Путь по сайту
• Текст должен дополнять изображения ◆◆ Поиск по сайту
• Текст должен теряться среди изображе- ◆◆ Авторизация / регистрация
ний ◆◆ Состояние корзины
◆◆ Текст и фон ◆◆ Основной контент
• Тёмный текст на светлом фоне ◆◆ Подвал с текстом и баннерами
• Светлый текст на тёмном фоне

5. Должен ли дизайн главной страницы от- ◆◆ Единство, сплочённость /
личаться от дизайна внутренних? Чем Дробление, разделение, фраг-
именно? ментация
6. Требуемые графические элементы в дизай- ◆◆ Равновесие, баланс / Не-
не страниц сайта. Выберите, что из пере- устойчивость, неуравнове-
численного ниже должно быть представле- шенность
но на страницах. Значение по умолчанию ◆◆ Симметрия / Асимметрия
— «Не обязательно». Вы можете вписать в ◆◆ Регулярность / Иррегуляр-
эти поля просто «Да», «Нет», или описать ность
более подробно своё понимание того, что ◆◆ Запутанность, сложность /
там должно быть. Расчётливость, организация В идеале, в пункте 5 следует
привести графические про-
◆◆ Фото-коллажи ◆◆ Лаконичность, сдержанность / Преувели- тотипы главной и внутренних
◆◆ Пиктограммы (иконки) чение, гиперболизация страниц
◆◆ Тематические изображения ◆◆ Предсказуемость / Спонтанность
◆◆ 3D-модели ◆◆ Активность / Статичность, стабильность
◆◆ Flash-элементы ◆◆ Острота, тонкость, утончённость / Цель-
7. Графика на сайте. Укажите основную те- ность, основательность
матику. ◆◆ Нейтральность / Акцентированность
8. Ниже располагается список понятий, ◆◆ Слаженность, связность / Колебание, от-
которые отвечают за общее восприятие клонение
внешнего вида сайта — композицию, ◆◆ Плоскостность / Глубина
«ощущение», «настроение». Выберите те ◆◆ Повторение, чередование/ Случайность,
пункты, которые, по вашему мнению, эпизодичность
наиболее правильно характеризуют ваше ◆◆ Простота, умеренность/ Сложность, за-
представление о сайте. путанность, «навороченность»

9. Ниже располагается группа выборов, ко- владение не только готовый сайт, но и ис-
торые отвечают за цветовое решение — об- ходные материалы к дизайну?
щие принципы сочетания цветов. Выбери-
те те пункты, которые, по вашему мнению, В основном, этот шаблон покрывает самые
наиболее правильно характеризуют ваше общие вопросы, возникающие при разработке
представление о цветах сайта. дизайна сайта, но, в принципе, его можно и до-
◆◆ Контраст / Сближенность полнить или, наоборот, сократить. Главное, в
◆◆ Яркость, насыщенность / Сдержанность, очередной раз напомню, здравый смысл. Зада-
приглушённость ча ТЗ — обезопасить вас и заказчика от недо-
◆◆ Открытая гамма/ Цветовая нюансировка понимания. Т.е., если у вас сложилась полная
◆◆ Тёплая гамма / Холодная гамма ясность на предмет, скажем, цветовой гаммы
10. Рекламная площадь, предусмотренная на и она записана в брифе, то в ТЗ её обсуждать
сайте. Если вы предполагаете, что на стра- не стоит.
ницах сайта будут какие-либо баннеры, то
впишите в поля, соответствующие указан-
ным стандартным размерам баннеров, где
на странице они будут располагаться.
◆◆ 468 x 60
◆◆ 150 x 150
◆◆ 100 x 100
◆◆ 88 x 31
◆◆ Ваши предложения
11. Прочие пожелания и комментарии
12. Передача и представление готового дизай-
на. Желает ли заказчик получить в свое

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

Андрей Пилипенко

© Компьютерная Академия «Шаг», 2013

www.itstep.org

#3 USE - Урок 04 (2015) PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

#3 USE - Урок 04 (2015) PDF

Загружено:

Авторское право:

Доступные форматы

Юзабилити

Урок 4 Проектирование сайта

только потом, в третью очередь, мы начинаем

Уровневая концепция сайта

Уровневая концепция сайта

Уровневая концепция сайта

Принципиальная двойственность бликовать её, но и управлять ею,

Уровневая концепция сайта

Уровневая концепция сайта

Уровневая концепция сайта

1. Что нам (заказчику) нужно от сайта?

Ясным образом сформулированные отве-

А что же делать при составлении требова-

В таком случае, мы можем сразу почерп- распоряжении разработчика контента, с целью

Пример — сайт coverradio.fm, который

музыки — кавер-версий различных треков

Матричная структура Органическая структура в сайте, содержащем разнообразный и разнопла-

Все эти структуры довольно абстрактны и

Лексика сайта исследование пользовательской

Практическая сторона разработки сайта

Практическая сторона разработки сайта

Практическая сторона разработки сайта

Практическая сторона разработки сайта

Практическая сторона разработки сайта

сотрудничаете, внесут ясность в это пункт,

В принципе, тут все очевидно. Эта часть

Практическая сторона разработки сайта

Практическая сторона разработки сайта

Практическая сторона разработки сайта

Практическая сторона разработки сайта

Практическая сторона разработки сайта

Практическая сторона разработки сайта

Юзабилити и эргономика веб-страниц

© Компьютерная Академия «Шаг», 2013

Вам также может понравиться