Обзор свежих материалов, август 2010

Этот материал продолжает серию ежемесячных обзоров свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель, май-июнь, июль.

Методы и практики

In Defense of A/B Testing
Paras Chopra написал отличную статью в защиту метода A/B-тестирования, в последнее время подвергшегося критике со стороны проектировщиков и дизайнеров. Он опровергает три основных претензии, которые касаются в первую очередь зацикливания на не самых эффективных изменениях.

Guidelines for Designing Data Tables
Connie Malamed, автор книги “Visual Language for Designers”, дает серию советов по оформлению таблиц. Она описывает ментальный процесс работы с таблицей и рассказывает о том, как упростить пользователю прохождение по нему.

Making User Interface Elements Difficult to Use By Intent
Статья Jacob Gube, в которой он рассказывает о намеренном усложнении интерфейса в тех случаях, где возможна потеря данных и другие неприятные последствия.

Making the Deal — Supporting Product Demos with User Assistance
Mike Hughes из IBM описывает процесс оптимизации интерфейса демо-версий продукта. Он описывает 4 характеристики, в которых демонстрация должна быть особенно хороша — ценность продукта и ее наглядный показ, внимание к существующим проблемам пользователя, конкурентные преимущества.

User Interface Stack Exchange
Новый сервис вопросов и ответов, посвященный практическим вопросам проектирования интерфейсов. Здесь собраны популярные вопросы и ответы практикующих специалистов на них.

Good Help is Hard to Find
Статья Lyle Mullican описывает несколько способов представления справочной информации в веб-сервисах. Он разделяет помощь на два типа — интегрированную в общий процесс и показываемую отдельно.

Guidelines for user friendly URI Design
Неплохая памятка о создании понятных и читабельных URL от Jacob Gillespie. Статья рассказывает об общих принципах и дает серию полезных советов.

Инструменты

Free Wireframing Kits, UI Design Kits, PDFs and Resources
Одна из наиболее масштабных подборок шаблонов и стенсилов для проектирования и дизайна веб-сервисов и мобильных приложений. Хотя таких коллекций в последнее время появляется все больше, эта статья от Smashing Magazine — одна из наиболее подробных и проработанных.

20 Free Web UI Element Kits and Stencils
Еще одна коллекция шаблонов и стенсилов для проектирования и дизайна. Не так много нового, но может быть полезна.

Паттерны

Liquid Information Navigation – A New Paradigm?
James Kalbach из LexisNexis описывает постепенно развивающийся тренд в веб-интерфейсах — аналог контекстного меню десктопных приложений. Хотя такие меню периодически встречаются вот уже несколько лет, в статье собрана вместе подборка таких примеров.

Dark Patterns — Black Hat, Anti-Usability Design Patterns
Коллекция анти-паттернов проектирования, в которой собраны примеры того как делать не нужно. Примеров пока не так много, но автор сайта Harry Brignull активно публикуется в профессиональном сообществе и вряд ли забросит интересное начинание.

Процесс

All Look Same? A Comparison of Experience Design and Service Design
Jodi Forlizzi сравнивает user experience design и service design с тем чтобы понять, насколько близки эти дисциплины. В статье делаются отсылки к их истории и общему процессу.

Learning from Our Challenge Piles
Отличнейшая статья Michelle Gilmore, в которой она делится своим опытом решения проблем, возникающих при работе с заказчиком работ по проектированию и дизайну. Она описывает 4 типовые ситуации из своей практики и рассказывает о том, как было найдено решение.

Кейсы

Case study — How we made an extra £14 million a year for a travel company
История о том, как был переделан сайт турагентства Sunshine Travel и как это помогло значительно повысить конверсию. Статья описывает основные изменения и процесс работы над проектом.

Designing a Persuasive Video Game
Здорово описанный кейс, рассказывающий о процессе создания обучающей игры. John Ferrara пишет об использовавшихся принципах игровой механики и том, чего они хотели достичь их использованием.

Migrating a Corporate Intranet to SharePoint — A Case Study
Jen Hocko описывает процесс переноса корпоративного интранет-сайта на платформу SharePoint и то, какие задачи решал проектировщик в этом процессе.

Теория

Emotional Design with A.C.T.
Интереснейшая серия публикаций Trevor van Gorp, в которой он описывает психологические основы вовлекающих интерфейсов. Он исследует вызывающий эмоции дизайн и то, как можно создавать его.

Updating Our Understanding of Perception and Cognition
Выдержка из книги Jeff Johnson “Designing with the Mind in Mind”, в которой он описывает процессы восприятия и познания. Крайне полезное чтение, которое позволяет понять как работает и что видит глаз, как происходит процесс чтения и распознавания объектов. Вторая часть статьи —www.uxmatters.com/mt/archives/2010/08/updating-our-understanding-of-perception-and-cognition-part-ii.php.

История

What is a Device?
Выдержка из будущей книги Dan Saffer “Designing Devices”, в которой он описывает краткую историю устройств. А это очень полезно для понимания того, как развивались интерфейсы.

Тренды

5 Creepy Ways Video Games Are Trying to Get You Addicted
Подробное описание 5 распространенных принципов игровой механики от David Wong, которые используются во многих хитовых играх. Статья особенно хороша тем, что в ней приводится масса примеров и отсылок к исследованиям.

Свежие ссылки можно также отслеживать во Friendfeed-ленте User Experience.

Прототипирование в Expression Blend + SketchFlow. Часть 2. Основы

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

Начало работы и интерфейс

Все начинается с создания нового проекта. На этом этапе вы можете выбрать, какого типа SketchFlow-приложение вы хотите создать. У вас два варианта: Silverlight и WPF-приложение.

Тут может показаться, что SketchFlow позволяет разрабатывать только прототипы Silverlight или WPF-приложений, но это не так, равно как не верно, что на бумаге можно делать только прототипы «бумажных» приложений.

Фактически, вы выбираете контейнер или, если хотите, способ доставки вашего прототипа. Silverlight-контейнер работает в браузере и может быть выложен на сайт. WPF-контейнер представляет собой отдельное Windows-приложение. Это основная разница, тем не менее не стоит забывать, что по собственной функциональности Silverlight != WPF, то есть какие-то нюансы все же могут быть, особенно, если вы выходите за пределы базовых идей SketchFlow и начинаете активно использовать возможности той или иной платформы. (См. также Типы проектов в Expression Blend + SketchFlow)
vs. 

В остальном, все зависит от вашей фантазии и ваших задач. Со SketchFlow вы получаете контейнер — проигрыватель интерактивных прототипов. В этом смысле ничто не мешает разрабатывать прототипы обычных приложений, сайтов или мобильных приложений для любой платформы. По существу, для придания контекста достаточно добавить подходящую подложку и, если нужно, подходящие стили контролов (Expression Blend умеет импортировать psd-файлы). То есть ответ на вопрос “могу ли я с помощью этой штуки сделать прототип iPhone-приложения?” положительный. Хотя, лучше, конечно, если вы сделаете приложение под Windows Phone 7 😉

Я буду придерживаться пути Silverlight-контейнера. Давайте посмотрим на интерфейс Expression Blend для SketchFlow-проекта:

Помимо меню и панели инструментов, в интерфейсе можно выделить 6 основных блоков:

1. Рабочая область, где разворачивается основное действие,
2. SketchFlow Map — карта вашего приложения, показывающая, какие есть экраны и компоненты и как они связаны между собой.
3. Projects — дерево вашего проекта, Assets — заготовки, контролы и т.п., которые можно использовать в прототипе.
4. Дерево элементов текущего экрана, компонента или контрола + панель для записи анимаций.
5. SketchFlow Animations — специальная панель для упрощенной записи анимаций для прототипов.
6. Свойства выделенных элементов — цвет, положение, шрифты и пр.

Прежде, чем двигаться дальше, нужно сделать одну важную настройку, которая впоследствии сильно облегчит жизнь: через меню Tools⇒Options⇒SketchFlow нужно установить размер по умолчанию для новых экранов и компонентов. Например, если вы используете подложку телефона или браузера, то разумно установить размером по умолчанию для экранов именно размер подложки.

Двигаемся дальше: впереди основные концепции: карта, экраны, компоненты, связи и в конце немного поговорим об импорте.

SketchFlow Map

SketchFlow Map — это карта ваших экранов и компонент, показывающая, как они связаны между собой. (Математически, это направленный граф и где-то в служебных файлах проекта можно даже найти его описание в xml-формате.)

На какие экраны пользователь может попасть из текущего? Какие переходы ему доступны?  Что он должен сделать, чтобы добраться до нужного экрана? Как различные компоненты вставляются друг в друга и в различные экраны? Все вместе это формирует поток вашего приложения, то есть иллюстрирует вожможные пути для работы пользователя с вашим приложением.

Наверное, можно даже сказать, что SketchFlow Map позволяет увидеть картинку целиком, то, что называется big picture. Карта позволяет сконцентрироваться не на деталях экранов, а на связях между ними.

Например, на картинке выше видно, что есть стартовый экран Login, и есть несколько основных экранов, в каждый из которых вставлено меню в виде компоненты MenuComponent, через который можно попасть на любой из экранов. Во все экраны вставлена подложка WindowComponent, в основные экраны вставлены лента твитов TweersComponent и панель для обновления статуса UpdateComponent.

Схема может быть и более сложной:

или более простой:

.

В конечном счете все зависит от сложности прототипа и того, на каком уровне вы делаете дробление на экраны, т.к. часть переходов между различными состояниями может быть “зашита” внутри экрана в виде выделенных состояний (States), переходы между которыми можно задавать, к примеру, с помощью поведений (Behaviours).

Еще один интересный момент: с точки зрения взгляда на прототипирование как инструмент мышления и анализа, SketchFlow Map сам по себе является инструментом проектирования “потока” приложения и изучения возможных вариантов, в чем-то напоминающим MindMap.

Несколько простых правил по SketchFlow Map:

1. Прототип всегда имеет стартовый экран, который обозначается зеленым треугольником (см. на картинках выше). Через контекстное меню стартовым можно сделать любой экран.
2. Экраны обозначаются прямоугольниками, по умолчанию они синего цвета (Navigation).
3. Компоненты обозначаются скругленными прямоугольниками, по умолчанию они зеленого цвета (Component).
4. Переходы обозначаются сплошными линиями. Композиция обозначается пунктирными линиями.

Кстати, вы можете задавать свои цвета всем элементам карты (экраны, компоненты, связи) — у вас есть пул из восьми цветов (цветовых тегов), которые вы можете определить через меню Project⇒SketchFlow Project Settings…

Дальше назначит цвет можно через выпадающее или контекстное меню:

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

Сравните:

и .

Двигаемся дальше: экраны и компоненты.

Экраны и компоненты

Экраны — это ключевые состояния вашего приложения, между ними можно устанавливать связи (переходы). Компоненты — это части приложения, которые могут вставляться в другие компоненты или экраны, т.е. это обычная композиция. Один и тот же компонент может быть вставлен в несколько экранов.

Технически, и те и другие являются обычными UserControl.

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

можно перейти к схеме

.

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

Создавать новые экраны и компоненты можно различными способами:

1. В панели управления SketchFlow Map есть необходимые кнопки:
   
2. Эти же опции доступны из контекстного меню карты.
3. Экраны и компоненты, находящиеся на карте имеют выпадающее меню, из которого можно вытянуть новый связанный экран или компонент:
   
   
4. Если выделить в рабочей области или дереве объектов один или несколько элементов, то из контенкстного меню их можно превратить в новые компоненты (Make into Component Screen…).

Для каждого нового экрана или компонента на карте открывается окно, в котором можно редактировать содержание. Не забудьте установить размеры экранов и компонентов по умолчанию (см. в начале).

Связи и переходы

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

В данном случае с экрана C можно напрямую перейти на экран X и через вставленную компоненту Navigation на экраны A, B, C (да, формально получается, что на себя тоже можно перейти).

В проигрывателе прототипа (компиляция и запуск — F5) эта совокупность связей напрямую отображается на доступные варианты навигации (переходов):

Обратите внимание, что у мониторчиков цвета соответствуют цветам на карте. При этом, конечно, в проигрывателе можно просто открыть карту и напрямую перейти на любой интересующий экран или компонент.

Новые связи на карте могут появляться несколькими способами:

1. Когда вы вытягиваете новый экран или компонент из существующего, автоматически появляется связь (см. выше).
2. Из выпадающего меню компонента или экрана можно выбрать опцию Connect an Existing Screen или Insert Component Screen и перетащить связь на нужный объект.
3. Можно просто мышкой выделить объект и перетащить его на другой — между ними автоматически создастся связь (навигация или композиция).

Это то, что касается ручного создания связей. Есть еще вариант полуавтоматического появления связей на карте: на отдельные элементы (внутри экранов или компонентов) можно навешивать поведения (Behaviors), через которые можно запускать множество интересных действий и, в частности, переходы.

Для переходов даже добавлен специальный пункт в контекстном меню — NavigateTo, через который можно навесить переход по клику на любой из имеющихся экранов или вперед/назад в истории перемещений пользователя по экранам. Если между экранами еще нет связи, она автоматически будет добавлена и в карту.

Поведения мы рассмотрим отдельно в одной из следующих статей.

Импорт

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

В этом контексте становится интересным вопрос быстрого обозначения того, что будет на каждом из экранов. Эту задачу можно решать различными способами: от самого простого в виде текстового пояснения “тут будет список контактов” до импорта готовых зарисовок (скетчей).

В случае импорта Expression Blend + SketchFlow предоставляет вам несколько интересных возможностей, каждая из которых обладает своими плюсами и минусами

• Графические наброски (скетчи). Продумывая наброски, вы сразу выделяете ключевые состояния (экраны) и готовите зарисовки под каждое из них. Состояние = набросок. Далее каждый под из набросков создаете отдельный экран и переносите туда изображение. Потом связываете экраны между собой и получаете первичную версию прототипа. Это также может быть удобным, если вы начинаете с бумажных прототипов или зарисовок интерфейса на бумаге.
• Графические редакторы. Можно открыть Adobe Illustrator или Photoshop и нарисивать весь набросок в едином файле (или нескольких файлах), разнося разные компоненты и состояния по слоям. Состояние = набор слоев. Дальше можно импортировать этот файл в Expression Blend вместе со слоями.
• Microsoft PowerPoint. Если вы делаете прототип в PowerPoint в виде последовательностей слайдов, то вы можете импортировать презентацию в Expression Blend. Для каждого слайда SketchFlow создаст отдельный экран и установит связи между ними. Состояние = слайд.
• Expression Blend. И, наконец, можно создавать все сразу в Expression Blend + SketchFlow. Этот вариант мы рассмотрим в следующей статье.

В качестве примера, см. видео о создании прототипа интерактивного баннера.

Прототипирование в Expression Blend + SketchFlow. Часть 1. Немного истории

Введение

Этой статьей я хочу начать цикл статей, посвященных созданию прототипов с помощью Expression Blend и SketchFlow. Мы постепенно пройдемся от базовых концепций и понимания, как работает SketchFlow, до отдельных нюансов вроде настройки и брендирования проигрывателя прототипов. Местами, я буду включать переводы статей других авторов.

В качестве введения в тему и для того, чтобы получить общее представление, предлагаю посмотреть вот это короткое видео (всего 90 секунд!) с обзором текущих возможностей SketchFlow:

А начнем мы со статьи Christian Schormann об истории SketchFlow.

SketchFlow: Немного истории

SketchFlow, инструмент динамичного прототипирования для Expression Blend, наконец официально вышел (от переводчика: статья писалась к выходу Expression Blend 3)! Вы можете скачать триальную версию здесь.

Так как мне всегда нравилось наблюдать за развитием людей, идей и продуктов, я подумал, что вам тоже будет интересно узнать немного о прошлом SketchFlow — сейчас, кажется, подходящий момент, чтобы взять школьные тетрадки со столика и рассказать немного о том, как рос SketchFlow. Если вы хотите узнать больше о сегодняшем состоянии SketchFlow, смотрите этот пост…

Давайте начнем с детских фотографий:

Это прототип, который я написал несколько лет назад на Windows Forms, задолго до появления Avalon/WPF. Даже на этой ранней картинке, хорошо заметен большой редактор карты, названный «Storyboard editor». Серые стрелки отображают навигацию, а красные связи композицию.

А вот другая детская фотография тех же лет. Она показывает редактор скетчей, который позволял очень быстро набрасать в черновике идеи UI:

Вам тоже кажутся знакомыми эти волнистые линии? В левом нижнем углу располагается библиотека элементов, включающая заранее подготовленные повторно используемые компоненты.

Другая фотография показывает проигрыватель в его самые первые дни:

Слева вы можете увидеть все доступные команды: зеленые обозначают навигацию, а оранжевые соответствуют изменению состояний. Внизу слева уже доступные простые средства для заметок. В этом прототипе заметки были простыми вставками речи (speech bubbles как в комиксах).

~~~

Должен честно признаться, что у нас сохранилось не так много записей за последующие несколько лет. По существу, жизнь расставила другие приоритеты, а с нашим героем практически ничего не происходило.

~~~

В один прекрасный день, когда SketchFlow встретился с Blend в первый раз (в наш офис в Миннесоте пришел Bob Pappas):

Это была любовь с первого взгляда, и с тех пор вещи начали очень быстро развиваться, взращиваемые потрясающими командами Blend и SketchFlow в Редмонде и Минессоте. Вот как выглядел плеер в тот период:

Немного спустя мы можем обнаружить фотографии вроде этой:

Следующая фотография сделана вскоре от предыдущей, когда мы смело экспериментировали над различными видами кривых для обозначения связей в карте:

И наконец, мы пришли ко дню выпуска из школы:

Сейчас Expression Blend + SketchFlow доступен для загрузки в составе Expression Studio. (От переводчика: Expression Studio также доступна в рамках подписок MSDN, MSDNAA, программ DreamSpark и BizSpark.)

Для нас безусловно будет большой честью, если вы попробуете его в работе. Команды Blend и SketchFlow с нетерпением ждут ваших первых (а также вторых и третьих) впечатлений.

via  Блог компании Microsoft

Библиотека элементов интерфейса iPad для Axure

Продолжая вчерашний пост про замечательную программу Axure Pro и после того, как мы научились уже создавать в нем прототипы, теперь сможем создавать прототипы и для iPad.

Сайт http://www.kreativr.de поделился вот такими вот интересными стенсилами для прототипирования под iPad.

Скачать Библиотеку элементов интерфейса iPad (2.3 Mb)

Весь интерфейс iPhone 4 в одном PSD-файле

Не Xcode единым — макетировать интерфейс iPhone-программы можно не только средствами Apple, привычный Photoshop выглядит более чем достойной альтернативой. А если вы нацелились на iPhone 4 с его роскошным Retina Display, то здесь никак не обойтись без последней работы студии Teehan+Lax — втиснутые в гигантский PSD-файл размерами 4074 × 2986 точек все базовые элементы графического интерфейса iOS, перерисованные под экранные 640 × 960 пикселей iPhone 4.

Скачать iPhone 4 GUI PSD (Retina Display) (20,8MB).

Объем собственно файла получился не менее устрашающим — в разархивированном виде iPhone_4_GUI_PSD_Retina_Display.psd занимает на жестком диске 62,7 Mb. Распространяются эти шестьдесят два целых и семь десятых мегабайта совершенно бесплатно, но с предложением заплатить за титанические усилия дизайнеров Teehan+Lax сколько не жалко. На данный момент времени среднестатистический взнос «сколько не жалко» составляет 10 долларов и 55 центов.

via DeepApple.ru

Программа для проектирования сайтов и интерфейсов на Айпаде

Пользователь nikolaz создал программу, которая позволяет создавать прототипы прямо со своего iPad. Что представляет из себя программа, и какие «плюшки» в ней есть лучше прочитать со слов автора.

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

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

Из других «вкусностей»:
— выравнивае по гайдлайнам
— управление цветами обводки/заливки/текста
— управление размером шрифта
— экспорт в Фотоальбом, ПНГ и формат Бальзамик Мокапс популярный в кругах разработчиков
— опции заморозки и клонировая шаблона
— возможность создать ссылку из одного документа на другой

После запуска о программе написали отзывы многие зарубежные сайты, что помогло выбиться в Топ 20 раздела «Производительность» американского АппСтора.

Для интересующихся скажу, что программа была написана и нарисована мной одним за месяц, но работа продолжается и скоро будут новые обновления и новые полезные функции.

Желающим написать свой обзор и имеющим американский Айтюнс аккаунт — свяжитесь со мной по адресу app@sketchyapp.com, я вышлю вам промокод.

Надеюсь моя программа поможет вам в вашей работе!

Да, чуть не забыл, в день начала официальных продаж Айпада в России обязательно сделаю распродажу по $0.99. Сейчас она стоит $4.99 — примерно как кружка пива в среднем московском заведении.

Обзор средств прототипирования веб-сайтов

25 июня 2009 года в Москве на конференции «Сайт-2009. Создание и поддержка интернет-проектов» Коноплицкий Павел выступил  докладом «Обзор средств прототипирования веб-сайтов».

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

Что почитать юзабилисту

Так как у меня в своё время были сложности с поиском книг и документации по проектированию интерфейсов, то решил выложить и вам небольшой список книг, которые я читал и которые мне помогли и помогают в работе.

• Веб-дизайн: книга Джесса Гарретта. Элементы опыта взаимодействия
  http://www.books.ru/shop/books/559581
• Дизайн для Недизайнеров Р Вильямс
  http://www.books.ru/shop/books/566747
• Информационная архитектура в Интернете, 2-е издание
  http://www.books.ru/shop/books/251372
• Веб-дизайн: книга Стива Круга, 2-е издание
  http://www.books.ru/shop/books/544947
• Психбольница в руках пациентов Алан Купер
  http://www.books.ru/shop/books/211035
• Интерфейс Джефа Раскина
  http://www.books.ru/shop/books/25835
• Мифический человеко-месяц
  http://www.books.ru/shop/books/3626
• Web-дизайн: удобство использования Web-сайтов Якоб Нильсен
  http://www.books.ru/shop/books/497993
• Веб-дизайн: книга Якоба Нильсена
  http://www.books.ru/shop/books/7107
• Разработка пользовательских интерфейсов Тидвелл
  http://www.books.ru/shop/books/530181
• Ководство, Лебедев
  https://store.artlebedev.ru/books/design/kovodstvo/
• Информационная архитектура. Чертежи для сайта. Уодтке
  http://www.books.ru/shop/books/155169
• Практическое руководство по проектированию и разработке пользовательского интерфейса Торрес
  http://www.books.ru/shop/books/82345
• Типографика: шрифт, верстка, дизайн Феличи
  http://www.books.ru/shop/books/168701
• Дизайн интерфейсов Мандел
  http://www.books.ru/shop/books/301809
• Веб-дизайн: книга Дмитрия Кирсанов
  http://www.books.ru/shop/books/2176
• Разработка программного обеспечения. Константайн, Локвуд
  http://www.books.ru/shop/books/176703

Прототипирование в GoogleDocs

Как только в GoogleDocs появилась возможность создавать рисунки, то многие сразу же задумались, как это можно использовать для себя и конечно архитекторы пользовательских интерфейсов тоже заинтересовались этим. Ведь главная плюшка не в том, что можно рисовать в онлайне, а в том, что можно совместно редактировать.
И вот разработчик интерфейсов Morten Just, работающий в Vadafone, создал небольшую подборку скетчей для создания интерфейсов веб-сайтов в GoogleDocs.

Я попробовал создать несколько страниц для одного моего проекта и это оказалось действительно удобно. И даже то, что рисование в GoogleDocs сделано пока немного криво и нет нескольких мелких, но очень важных штук, не сильно усложняет задачу.

Вот 5 фактов, почему им стоит пользоваться:

• Удобно работать в команде над прототипом
• Все храниться в облаке.
• нет риска потерять файл или изменить его неправильно — всегда можно откатить.
• Это бесплатно
• У многих есть Google аккаунт.

Вот небольшой скриншот и ссылка на сам файл. Удачного дня!

Посмотреть и начать использовать!

P.S. Решил написать что мне не понравилось в GoogleDocs Drawing:

• Нет возможности блокировать элементы. Что бы можно было нажать какой нибудь замочек и не беспокоиться, что я нечаянно передвину этот элемент куда то.
• Нет слоев. Хотя бы на минимальном уровне.
• Нет возможности создания своих форм (скетчей) и сохранения их для дальнейшего использования.