Прототипы — что должен знать заказчик, чтобы заказать проект сайта или приложения

авг 13, 2018

Как часто бывает такая ситуация, что вы хотите сделать заказ на изготовление сайта или приложения, но не знаете с чего начать? Вы приходите к дизайнеру или спрашиваете ваших знакомых, и получаете информацию, что вам нужно для начала придумать, что должно быть на сайте. Написать ТЗ. По-полочкам написать, а лучше нарисовать! Решить конфигурацию каждой страницы. Подготовить текстовый и графический контент. Решить вопрос адаптивности сайта. Это звучит страшно и отпадает всякое желание начинать. Но есть хорошая новость — все это работа дизайнера и вы можете не фантазировать, как лучше устроить будущий сайт!

На самом деле, это очень частая и понятная проблема. Дизайнер интерфейса не может и не хочет вникать в пользовательские сценарии, а так же не хочет вникать в проблемы бизнеса заказчика.

Дизайнер, который занимается проектированием взаимодействия пользователя с проектом, называется «UX-дизайнер». «UX» означает «User Experience», и переводится как «пользовательский опыт».
Дизайнер, который занимается непосредственно «рисованием», называется «UI-дизайнер».»User interface designer» — «дизайнер пользовательского интерфейса».
Есть дизайнеры, которые совмещают, а есть те, которые занимаются чем-то одним.

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

Что такое проектирование сайта?

Обычно под проектированием сайта подразумеваются следующие компоненты:
1. Карта сайта.
Перечисление всех страниц, которые будут на сайте и их связи. То есть, например, на страницу отдельной статьи можно попасть с перечня статей и с главной страницы. А на контакты можно попасть с меню в шапке.

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

Пример хорошего прототипа страницы новости
good-wirerame

Пример плохого прототипа страницы новости
badd-wirerame

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

Этот этап — обязанность UX-дизайнера. Не заказчика! Не менеджера! Даже не всегда разработчика!
Когда дизайнер проектирует интерфейс он полагается на свой опыт и на опыт других дизайнеров. Плюс он использует свои знания в продажах и маркетинге. Обычно у разработчика, у менеджера и у заказчика не хватает всех этих знаний.

Для иллюстрации я опишу процесс решения проблем в проекте, которым пользуюсь сама. Предположим, я проектирую страницу или экран с поиском недвижимости и думаю о фильтре. Вначале я набрасываю решение, которое мне приходит в голову, которое всплывает в подсознании. Дальше начинается раздвоение личности: я представляю себя клиентом и прохожу свой фильтр. Попутно я отмечаю, что мне кажется неудобным, сложным, непонятным. Потом я обращаюсь к опыту других дизайнеров — собираю наибольший объем интерфейсов, сайтов и всего, что могу найти, связанного с моей задачей. Проверяю сайты типа Behance, смотрю приложения, веб-проекты. И решаю, насколько убого мое решение=))) Если оно убого, то пользуюсь опытом дизайнеров, если оно-супер, то беру его и добавляю лучшее из опыта коллег. Как-то так, плюс минус. Порядок бывает разный, но это всегда свои мысли+опыт других дизайнеров.

Как видите, это занимает уйму времени, к тому же улучшается в процессе согласования с клиентом и пользователями. Опыт дизайнера как раз состоит в том, что к следующему подобному фильтру, я уже знаю решение проблемы для предыдущего проекта. И могу либо использовать его, либо как-то улучшить. Клиенту нужно будет потратить недели, а то и месяцы, чтобы сделать все правильно, а дизайнер может сделать все намного быстрее. Разве это не экономия?

Что такое ТЗ?

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

Пример плана ТЗ на дизайн лендинг-страницы (без разработки, только дизайн):
————————
Лендинг-страница для сайта qwerty.com

Задачи страницы: 1) продать услугу печати (единственная услуга).
2) рассказать о компании.

Необходимо сделать макеты для одной страницы в формате .psd на сетке Bootstrap 4 в размерах 320px, 780px, 1560 px.
Также отдельным psd подготовить Ui-kit с элементами сайта.
Отдельным psd подготовить диалоговые окна.
Отдельным psd подготовить форму связи через сайт.

Для иконок используйте font-awesome.
Для графики используйте векторные иллюстрации.

Необходимо предусмотреть СЕО-блок на сайте, с текстом примерно в 3000 знаков. Он должен быть не очень заметен, но читаем. Можно расположить после подвала.
Также важно предусмотреть место для счетчика метрики Яндекс.
——————————————-
Еще есть бриф, это — анкета с вопросами о стиле сайта, о целевой аудитории и о целях/задачах проекта. Но о нем мы поговорим отдельно. =)

Чтобы понять, что работа выполнена хорошо и можно приступать к следующему этапу-непосредственному дизайну, нужно в идеале дать потенциальным пользователям пройти (буквально прокликать) нарисованный прототип/прочитать написанный текст с описанием страниц. В не идеальном, а обычном случае, изучить самостоятельно заказчиком. Должно быть все понятно: о чем речь, как попасть на нужные страницы. Задачи пользователей должны решаться уже на этом этапе. А задачи сайта должны быть решаемыми в перспективе (так как по-делу их решит уже финальный дизайн).

Оставайтесь на связи!

Мои подписчики получат не только свежие новости, но и подарки! Например, наборы иконок и иллюстраций!


Другие статьи
Как получить заказ с Upwork
Чек-лист: кому нужен качественный сайт, а кому можно...
Управление временем — как успевать больше на 50%
Прототипы — что должен знать заказчик, чтобы...