Цитаты из книги «Создание сайтов»

Интерактивные прототипы axure.com adobe.com flairbuilder.com foreui.com guimachine.ru proto.io pidoco.com protoshare.com Скетчи, мокапы balsamiq.com mockupbuilder.com gomockingbird.com iphonemockup.lkmc.ch Полезно знать «Прототип: бумажный или интерактивный?»: http://www.cossa.ru/articles/155/40512/ О картах кликов в «Яндекс. Метрике»: http://help.yandex.ru/metrika/behavior/click-map.xml Советы по работе с Axure RP Pro: http://habrahabr.ru/post/101938/ «Рейтинг решений для прототипирования и проектирования сайтов, используемых в веб-студиях и интернет-агентствах России»: http://2011.tagline.ru/prototype/ «Рассылка SeoPult. Выпуск № 120: юзабилити сайта»: http://seopult.ru/subscribe.html?id=125 «Рассылка Setup.ru. Выпуск № 53: создание прототипа»: http://www.setup.ru/client/subscription/114 «Рассылка Setup.ru. Выпуск 44: A/B-тестирование»: http://www.setup.ru/client/subscription/93 Стив Круг. Веб-дизайн, или Не заставляйте меня думать!: http://www.ozon.ru/context/detail/id/3795618/ Влад Головач. Дизайн пользовательского интерфейса.

Основные элементы меню и ссылки в идеале доступны без прокрутки страницы вниз. До всех мало-мальски значимых страниц посетитель – не всегда, но как правило – должен добираться в худшем случае за три клика. Другие общие рекомендации по юзабилити перечислены, например, в тематическом выпуске рассылки SeoPult (см. блок «Полезно знать»).

Резонно, чтобы перед глазами у проектировщиков всегда была общая картина сайта. Вне зависимости от того, какой инструмент используется для прототипирования, очень удобно начинать с функциональной структуры сайта в mind maps, или ассоциативных картах (см. главу 1 «Техзадание: последний раз себя спрашиваю!» и рис. 2). Полезно, чтобы файл с mind map был на «Рабочем столе» (или, например, в онлайн-сервисе типа Mindmeister.com) у вас и всех, кто занят в проекте. Как-никак дельно составленная ассоциативная карта отражает всю структуру и функциональность сайта.

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

Мокап (от англ. mock-up – «полноразмерный макет»)

Понять, эффективны ли механизмы сайта «вживую», дает возможность его прототип – макет той или иной степени интерактивности (см. главу 2 «Создание прототипа: анатомия сайта»). Для сборки таких «боевых моделей» предназначен целый арсенал инструментов, в том числе онлайновых, например зарубежный Balsamiq.com и российский Guimachine.ru. Рис. 2. Mind map на проектирование сайта Составляя техническое задание, обсуждая отдельные его пункты с исполнителем, вы действительно, как отмечено в названии главы, в последний раз спрашиваете себя, чего вы хотите от сайта и какие возможности должны быть заложены в его фундамент.

Что должно входить в техническое задание Едва ли не главное для технического задания (после смыслового наполнения, конечно) – четкая структура и простое, понятное форматирование. В конечном счете ТЗ должно представлять собой доработанную и обросшую деталями концепцию, в идеале – вплоть до внешнего вида и механики работы страницы каждого типа в отдельности. Возможна следующая рубрикация ТЗ. • Термины и определения. • Назначение технического задания. • Обязанности исполнителя и заказчика. • Назначение и задачи сайта. • Описание работы сервиса и механики сайта. • Структура сайта и его составляющие. • Дизайн сайта. • Требования к технической и программной реализации сайта. • Условия сдачи и приемки. Критически важно, чтобы из технического задания явствовали объективные критерии того, выполнена та или иная задача или нет. Недвусмысленность формулировок заранее отсекает риск многих претензий и разочарований как со стороны заказчика, так и со стороны исполнителя.

Маленький совет, который, мы уверены, облегчит вам жизнь и приблизит момент открытия сайта. Именовать файлы с концепцией или техническим заданием следует так, чтобы с первого взгляда становилось ясно, кто автор редакции документа и является ли она актуальной. Например, ProjectSpecification0.1.doc. Здесь Project – название проекта, Specification – тип документа (в нашем случае техзадание; это может быть и Concept – «концепция»), а первая цифра маркирует версию, отправленную исполнителю; если это 0, значит, она еще не выслана и вы шлифуете документ собственными силами. Тогда 0.2 может обозначать новую редакцию документа, сделанную вами же и никому больше не показываемую. Когда же исполнитель ответит вам, прислав документ со своими уточнениями, вы создадите с учетом его поправок и ваших собственных доработок (версии 0.2) файл под номером 1.3.

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

• краткий список сервисов и возможностей.