Предыдущий ролик Следующий ролик  

Видео урок: Инструменты для создания прототипов

Основы веб-дизайна

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

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

PowerPoint и KeyNote. Здесь вы видите несколько прототипов, созданных мною совсем недавно в KeyNote. И PowerPoint, и KeyNote - мощные инструменты представления информации. Эти инструменты можно использовать для создания прототипов разной степени точности. Тот факт, что в них можно, например, связывать слайды, использовать анимацию и переходы, импортировать ресурсы разных типов, делает их действительно идеальными инструментами для создания прототипов разных видов, даже если большинство людей первоначально не рассматривало их в качестве инструментов для данной деятельности. В облачный сервис Adobe Creative Cloud входит несколько продуктов, например, Photoshop, Illustrator, Fireworks и Dreamweaver, которые могут использоваться для создания прототипов. Более поздние продукты компании Adobe, например, Muse, Edge Animate и Edge Reflow, также могут довольно быстро моделировать сложные веб-взаимодействия. По некоторым причинам люди не включают программу Acrobat в список инструментов для создания прототипов.

На самом деле Acrobat - превосходный инструмент для этого. Ему присущи такие черты, как кликабельные ссылки, элементы интерактивных форм и способность внедрять мультимедиа, к примеру, видео, напрямую в PDF-файлы. Кроме того, поскольку программа Acrobat Reader настолько широко распространена, прототипы, сделанные в программе Acrobat, очень просто воспроизводить. Visio и OmniGraffle - наиболее часто используемые инструменты для создания прототипов. Несмотря на то что первоначально Visio использовался для создания схем, главное его преимущество заключается в схематичном представлении сайтов и приложений, а также в создании прототипов, которые моделируют технологический процесс приложения.

Подобно Visio, OmniGraffle отлично подходит для создания схем, карт контента, а также моделирования разных типов процессов для приложения. Visio используется только в Windows, OmniGraffle - только в Mac OS, хотя OmniGraffle может импортировать и экспортировать файлы Visio. Некоторые инструменты были разработаны конкретно под создание веб-прототипов. Такие инструменты, как Axure RP Pro и Balsamiq, обладают функциями многих инструментов. С их помощью можно разрабатывать схемы сайта, а также создавать прототипы с низким или высоким уровнем точности.

Рекомендую также ознакомиться с ресурсами justinmind.com и antetype.com. Оба эти ресурса обладают расширенными функциями работы с прототипами, что позволяет быстро создавать прототипы и делиться ими с другими. Все чаще дизайнеры создают прототипы с помощью HTML и CSS. Сейчас вы видите подобный, очень простой, кликабельный HTML прототип. На самом деле у такого подхода есть несколько славных преимуществ. Например, вы уже работаете с той технологией, с помощью которой, в конечном счете, будет создаваться сайт, и можете просмотреть полученный результат прямо в браузере. Чтобы ускорить разработку HTML прототипов, большинство дизайнеров пользуются такими фреймворками, как Bootstrap и ZURB Foundation. В эти фреймворки встроены стили, с помощью которых можно управлять дизайном и разметкой. Также в них присутствуют скрипты, позволяющие моделировать функциональность. Неважно, пользуетесь ли вы при создании прототипов фреймворком или делаете это самостоятельно, по большому счету, конечный результат зависит только от вашего решения, которое обычно основывается на стандартах кодирования и на том, как быстро вам нужно приступить к созданию следующего прототипа.

Если вы собираетесь создавать прототипы в первый раз, то советую остановиться на той технологии, с которой вы уже знакомы. Несмотря на наличие огромного количества инструментов, предназначенных исключительно для создания прототипов, есть вероятность, что вы уже когда-то работали с программой, которую можно использовать для создания всего необходимого. Инструменты и технологии постоянно совершенствуются. Старайтесь организовать такой рабочий процесс создания прототипов, в результате которого будут генерироваться прототипы нужных вам типов, а затем внедряйте инструменты, с помощью которых можно создавать такие прототипы.