Эта статья была опубликована еще в 2008 году на официальном сайте Adobe. В ней Nick Myers (ведущий визуальный дизайнер компании Cooper) рассказывает о преимуществах Fireworks в проектировании интерактивных продуктов. Сегодня перевод статьи опубликован на Хабрахабре:
Мне часто задают вопрос: «Какие инструменты вы используете при проектировании ваших продуктов?». Мой ответ «Fireworks» часто встречали с недоумением. Я провожу много времени чтобы объяснить наше предпочтение и это помогает, но я чувствую себя несколько защищающимся, так как Adobe Fireworks не является стандартным инструментом в нашей отрасли.
Когда я впервые пришел в консалтинговую компанию Cooper, я понял, что мне придется расстаться с всемогущим Adobe Photoshop (моим союзником с тех времен, когда слоёв в нем еще не было), и я немного беспокоился и был настроен скептически, но спустя несколько недель я изменил свой подход к проектированию свободный от опасностей Marquee Tool. Правда в том, что Fireworks имеет много преимуществ для разработки интерактивного дизайна, и это превосходно поддерживает наш рабочий процесс. В этой статье описывается, как Fireworks помогает нам в разработке интерактивных продуктов.
Если вам интересно то, как мы используем Fireworks в нашем рабочем процессе и разработке визуального дизайна, а также хотите получить представление о новом продукте, который мы разработали (упоминается далее в этой статье), то в первую очередь посмотрите это видео.
PowerMockup — простой плагин для Microsoft PowerPoint для создания низко детализированных прототипов. Инструмент для широкого круга пользователей, т.к. создание в нём прототипов похоже на создание презентаций Power Point — вы перетаскиваете элементы интерфейса на слайд. Слайды можно линковать друг с другом, а значит в прототипе можно реализовать некоторую интерактивность.
“Самая большая в интернете” - звучит наверно громко, но это действительно так. Кропотливо, целый год, с различных зарубежных сайтов участниками нашего сообщества скачивались и собирались библиотеки и стенсилы для проектирования интерфейсов. В архиве вы найдёте стенсилы для проектирования веб-сайтов, приложений для iPad и iPhone для программ:
Axure
Visio
Photoshop
InDesign
PowerPoint
Keynote
Illustrator
OmniGraffle
Бумажные шаблоны
Несколько причин, по которым стоит приобрести эту коллекцию:
Все средства от продажи коллекции поступают кошачьему приюту “Суперкот“. Ваши интерфейсы помогут людям, а средства животным.
Чтобы найти и скачать подобное количество стенсилов и библиотек, Вам понадобится намного больше часа. Час Вашего времени, мы полагаем, стоит выше 30 рублей (1$)
Если по какой-то причине Вы захотите получить свои деньги обратно - мы сделаем это для Вас (через Webmoney)
Размер: 306,73 мб (zip файл) Стоимость: 30 рублей или 1$
С начала работы нашего ресурса мы постоянно публикуем для Вас ссылки на библиотеки и стенсилы для различных инструментов прототипирования. На наших винчестерах уже скопилась огромная коллекция, которой хотелось бы поделиться. В этой подборке мы собрали библиотеки и элементы для программы Axure. Есть мнение, что это самая большая коллекция в интернете. Мы предлагаем Вам получить её за символическую плату в 1$ или 30 рублей. Все вырученные средства мы направим для приюта котов в Минске. Вы экономите время, т.к. получаете коллекцию, которая собиралась около года. Ваши прототипы помогают людям, а затраченные средства помогают животным.
Размер: 10 мб (zip файл)
Стоимость: 30 рублей или 1$
На сайте DeepApple опубликована ссылка на PSD с элементами интерфейса iPhone 4:
“Не Xcode единым — макетировать интерфейс iPhone-программы можно не только средствами Apple, привычный Photoshop выглядит более чем достойной альтернативой. А если вы нацелились на iPhone 4 с его роскошным Retina Display, то здесь никак не обойтись без последней работы студии Teehan+Lax — втиснутые в гигантский PSD-файл размерами 4074 × 2986 точек все базовые элементы графического интерфейса iOS, перерисованные под экранные 640 × 960 пикселей iPhone 4.
Объем собственно файла получился не менее устрашающим — в разархивированном виде iPhone_4_GUI_PSD_Retina_Display.psd занимает на жестком диске 62,7 Mb. Распространяются эти шестьдесят два целых и семь десятых мегабайта совершенно бесплатно, но с предложением заплатить за титанические усилия дизайнеров Teehan+Lax сколько не жалко. На данный момент времени среднестатистический взнос «сколько не жалко» составляет 10 долларов и 55 центов.”
SketchyPad — это программа для быстрого проектирования веб-сайтов и интерфейсов приложений «на коленях». В текущей версии в распоряжении пользователя 56 шаблонов, из которых вы можете «собирать» сайты и интерфейсы. Большинство шаблонов динамические, т.е. изменяют свой внешний вид в зависимости от ввода пользователя.
Из других «вкусностей»:
выравнивае по гайдлайнам
управление цветами обводки/заливки/текста
управление размером шрифта
экспорт в Фотоальбом, ПНГ и формат Бальзамик Мокапс популярный в кругах разработчиков
опции заморозки и клонировая шаблона
возможность создать ссылку из одного документа на другой
Мортен Джаст изучал Google Drawings, новое дополнение к Google Docs, и решил попробовать его как инструмент для прототипирования. По ощущениям дизайнера, создавать wireframes в Google Drawings у него местами получилось лучше чем в Omnigraffle или Fireworks.
В статье A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio он называет 5 причин, почему Google Drawings лучше Visio или Omnigraffle:
Совместное творчество. Команда может работать над одним документом и видеть изменения друг друга.
Wireframes физически находится в облаке. У вас нет необходимости пересылать друг другу версии файлов, которые мгновенно устаревают.
Риск потерять данные равен нулю. Сохранение версии происходит после каждой операции.
Это бесплатно.
У большого количества людей уже есть аккаунт Google, поэтому им не требуется регистрация.
Кроме скриншотов и своих впечатлений Мортен опубликовал набор стенсилов для Google Drawings.
1. Скачать программу Axure RP Pro. На сайте можно скачать 30- дневную триал версию. Программа создана специально для прототипирования, это хороший инструмент для профессионалов.
2. Перед прототипированием желательно знать что вы прототипируете. Получить задание от начальства, собрать требования, провести исследования решений. Должен быть конкретный документ (Сжатый бриф ), в котором должна коротко (это не ТЗ) описываться функциональность, требования будущего сайта.
3. Если проект большой, то нужно убедиться что на диске есть достаточно места. В условиях офиса и злых IT-шников, у которых нужно выбивать дополнительное место на корпоративном сервере это может быть проблемой. Поэтому лучше подумать об этом заранее.
4. Скачайте с сайта готовые нужные библиотеки. Эти библиотеки существенно помогут при проектировании.
5. Настройте программу под себя. Если вы любите чтоб все окна с инструментами были свернуты, сверните их. Если вы любите чтоб панель инструментов была не сверху, а снизу сделайте это… Лучше это сделать сразу, чем потом раздражаться по таким мелочам.
Мы уже публиковали ссылку на разбор кейса по увеличению продаж c использованием инструмента WebVisor. 15 февраля в программе “Бизнес.net” вышел сюжет об этом сервисе:
Система исследования и анализа поведения посетителей сайта WebVisor обладает большим количеством возможностей:
Проводить исследование поведения посетителей
Определять ошибки взаимодействии с сайтом
Выделить на сайте зоны внимания — определить “горячие” и “холодные” зоны
Построить и исследовать модели поведения посетителей
Влад Головач в блоге компании Usethics опубликовал рецензию на Balsamic Mockups:
“В комментариях к моим стенаниям про средства прототипирования один из читателей признался, что пользуется Balsamic Mockups. Примерно год назад я рассматривал этот вариант и он мне не показался; но время идет, так что дай, думаю, попробую снова, более внимательно. Специально для таких случаев Balsamiq раздает бесплатную лицензию в обмен на публичную рецензию, так что вот, пишу.
Начну с хорошего. Встроенные контроллеры для таблиц, вкладок и меню, серьезно экономящие время по сравнению с рисованием на бумаге. При изменении размеров объектов хорошо и наглядно показываются размеры в пикселях, что защищает от появления в прототипе либо слишком больших, либо слишком маленьких объектов (это серьезная проблема при рисовании на бумаге). Динамическая привязка объектов к координатам других объектов позволяет без всяких усилий делать ровно даже без сетки. Очень милая функция, при желании делающая любую (почти) вставленную растровую картинку монохромной. Контроллеры часто управляются тестом внутри (например, для полоски вкладок достаточно в полоске напечатать названия всех вкладок разделенными запятыми, а программа сама построит картинку этих вкладок; весьма удобно). Многие сравнительно простые элементы управления (вроде слайдера) рисуются очень быстро.”
Serena Prototype Composer предназначен не только для визуального прототипирования, но и ведения полноценной документации по проекту. Вы можете описать всех участников разработки и при необходимости легким нажатием кнопки извещать их по почте об изменениях, внесенных в прототип.
Командная работа подразумевает возможность редактирования и просмотра прототипа всеми участниками группы разработки, некий механизм контроля версий.
Работа с визуальной частью прототипа включает в себя возможность создания шаблонов, импорт существующих веб-страниц (и автоматическое преобразование их составных частей во внутренние объекты с возможностью дальнейшего редактирования), скриншоты страниц.
Возможна более сложная динамика по сравнению с Axure Pro, но в ней соответственно сложнее разобраться.
До 2008 года продукт был платным, в 2008 году компания Serena сделала подарок разработчикам.
Когда перед вами не стоит задача создать интерактивный прототип, то вы можете открыть Photoshop, которому на днях исполнилось 20 лет и нарисовать wireframe там. Именно для этого создан UI Design Wireframe Kit, все объекты которого полностью масштабируемые, а некоторые выполнены как SmartObjects.
Мы уже много раз писали о различных инструментах проектирования и о проектировании для iPhone. По случаю проведения в Минске открытой конференции WUD (Всемирного дня юзабилити) участники сообщества Usability.by собрали для вас в одном наборе стенсилы для проектирования интерфейсов под iPhone для Axure RP, Fireworks, Illustrator, OmniGraffle, Powerpoint, Keynote, шаблоны для бумажного прототипирования и html/css+jquery для динамических прототипов. Скачать стенсилы можно на сайте конференции
Наш мозг достаточно эффективный инструмент для решения задач. Возникает только одна проблема - это обмен и обсуждение идей. Идеи заперты в нашей голове и доступны только их автору. Рисование высвобождает идеи и позволяют другим увидеть и понять их. Визуальное представление позволяет совместно работать над обсуждением и улучшением ваших идей. Что бы я не пытался отобразить, иерархию в информационной архитектуре или документ с особенностями взаимодействия с веб-сайтом, рисование набросков зарекомендовало себя как наиболее подходящий и ценный инструмент для выражения моих идей.
В статье “Tools for Sketching User Experiences” Джейсон Робб делится своим богатым опытом работы с бумагой и маркерами, которые он использует каждый день при разработке интерфейсов. Кстати автором упомянутой в статье книги является Билл Бакстон, о котором мы уже писали сегодня и который выступит с докладом на конференции User Experience 2009 в Москве.
Не так давно появился отличный инструмент для A/B тестирования — Google Web Optimizer. Чтобы наилучшим образом представить результаты такого тестирования был создан сервис Abtests.com. Он позволяет представить результаты в виде кейса, где описано чем отличались варианты дизайна, каких показателей удалось достигнуть и какие инструменты были использованы.
По ощущениям Abtests.com пока находиться в стадии бета-версии, но посмотреть примеры результатов можно уже сейчас.
Способы организовать юзабилити-деятельность по дешёвке интересует не только отечественных специалистов. “Мы не будем проводить юзабилити-тестирование для этого проекта. У нас просто нет на это бюджета и времени”. Часто приходиться слышать такое? Нам особенно, ведь мы работаем в Ирландии - небольшой стране с такими же небольшими компаниями и бюджетами. Однако мы считаем анализ и исследования слишком важными, чтобы быстро сдаться. Часто мы вынуждены проводить тесты для наших клиентов быстро и недорого. Чтобы заинтересовать клиента нам необходимо четко показать, как тестирование помогает повысить прибыльность его бизнеса. Вот почему мы разработали методику и подобрали набор инструментов для быстрого и дешевого исследования UX.
В статье “Low-budget Prototyping Techniques” рассказывается о технологии, известной как быстрое прототипирование, и каким образом авторы смогли эффективно использовать его в проекте Vodafone Ireland.
Існуюць розныя школы па дызайну дастасаванняў пад iPhone. Хтосці аддае перавагу дызайну на паперы (я аддаю), хтосці будзе паслугавацца кампутарам, каб стварыць свой чарговы GUI, ад каторага будзе займаць дух.
Вось спіс некаторых прыладаў і шаблонаў для дызайну вашага наступнага аппліку.
У кніжцы Pragmatic Thinking and Learning: Refactor Your Wetware аўтар Andy Hunt раіць ужываць асадку і паперу, каб выкарыстоўваць правае паўшар\’е галаўнога мозгу і вызваліць свой творчы патэнцыял. Тым часам пры ўжыванні кампутару, вы будзеце сканцэнтраваныя на дэталях, а не на дасканалым user experience.
Яшчэ адна хіба пры ужыванні кампутару - гэта калі вы пакажаце свой дызайн кліенту, ён таксама сканцэнтруецца на дэталях:
- Калі ласка, ці можна змяніць цень гэтае чырвонае кнопкі, ён надта чырвоны?
Паказваючы дызайн намаляваны ўручную, вы дазволіце кліенту толькі ўявіць, як фінальны продукт можа выглядаць. Так што такая тут справа, што ўлева, што ўправа: вам лепей напэўна ведаць, на што чакае кліент, і ужываць адпаведную тэхніку.
