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