Прототипирование для чайников: как сделать хорошую игру

Содержание

Введение

Любая работа, связанная с творчеством, требует предварительного анализа, продумывания и создания схем, чертежей, эскизов, коим является и прототип – это результат прототипирования – эскиз или набросок страниц со всеми элементами, которые на них будут:

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

Рис. 1 – Готовый прототип сайта, выполненный в разработанной для этого программе

На данном этапе нет места красоте, ни о каких элементах дизайна речь не идёт. Главная задача – понять:

  • что где будет находиться;
  • как пользователь будет взаимодействовать с ресурсом;
  • как осуществляется обратная связь, взаимодействие страницы с пользователем, если она динамичная.

Он позволяет согласовать с заказчиком многие моменты в структуре сайта, вникнуть в тонкости того, что хочет клиент увидеть в конечном продукте.

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

Такие доработки выливаются в задержки и дополнительные финансовые затраты (или убыток).

Прототипирование можно сравнить с планом будущего дома: упущение мелкого, но важного элемента может дорого стоить.

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

Рис. 2 – Основное отличие прототипа (показан слева) от макета (справа)

УСЛОВИЯ ПАРТНЕРСКОЙ ПРОГРАММЫ

1. Участники партнёрской программы.
Участниками партнёрской программы могут быть физические и юридические лица. Под физическими лицами понимаются граждане РФ, иностранные граждане, лица без гражданства, а так же предприниматели без образования юридического лица.

2. Оплата услуг партнёра.
Мы будем выплачивать Вам комиссию, установленную в размере до 20% от стоимости оплаченного заказа.

3. Способы оплаты.
Все партнёрские выплаты производятся в рублях любым удобным для Вас способом

4. Минимальная сумма к оплате.
Минимальная сумма к оплате установлена в размере 3000 руб. В случае, если заработанная Вами партнёрская комиссия не превышает 3000 руб, деньги остаются на Вашем аккаунте до тех пор, пока сумма комиссии не достигнет по крайней мере 3000 руб. Оплата партнёрских комиссий производится каждый месяц, с 1 по 10 число.

5. Партнёрская комиссия.
Партнёрская комиссия будет выплачена, только если заказ оформлен и оплачен покупателем, которого привели Вы.

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

6. Условия
Покупатели, совершающие заказы через партнёров, считаются покупателями ASTY.PRO и подчиняются ее правилам. Правила работы компании могут быть изменены без предварительного уведомления.

7. Разногласия
В случае возникновения разногласий, стороны будут стремиться урегулировать возникшие разногласия путем переговоров. В случае, если стороны не придут к соглашению, то спор подлежит рассмотрению в суде РФ.

Выплачиваем до 20% от чека, приведенного вами клиента!!!

 
ПОЧЕМУ ВЫГОДНА ПАРТНЕРСКАЯ ПРОГРАММА?

  • Выплаты любым удобным способом
  • Высокие проценты(до 20% с заказа)
  • Бонусы и розыгрыши среди партнеров

БРОНЗОВЫЙ

до 100 000 руб.

СЕРЕБРЯНЫЙ

от 100 000 до 250 000 руб.

ЗОЛОТОЙ

от 250 000 руб.

§ Риски прототипирования API и БД

Как обычно, есть и ложка дёгтя. Она небольшая, но в нашем случае бочку с мёдом испортит безвозвратно. Если коротко, то она звучит как «хреново спроектировал». И это не шутка. Если отнестись к прототипированию халатно, то вместо оптимизации разработки вы получите обратную ситуацию, дестабилизацию.

На самом деле, такое прототипирование здорово расслабляет программистов. Они рассчитывают на вас, ваши доки и прототипы. И если в обычной ситуации им бы пришлось нести за всё ответственность самим (что, по понятным причинам, повышает внимательность к архитектурным деталям), то в этом случае они могут и не заметить какого-то недостатка, пока не станет слишком поздно.

Ниже я собрал наиболее вероятные ошибки прототипирования БД и API.

Не унифицировали имена параметров, сущностей, методов и тп (либо не прописали правила такого именования) — в результате при развитии API и БД получили целый зоопарк разных названий, не связанных единой семантикой. Погружение новых участников в проект стало происходить медленнее, а старым участникам стало требоваться больше времени, чтобы разобрать собственный код месячной давности.

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

По какой-то причине не были задокументированы (в случае простого прототипа) или реализованы (в случае прототипа сложного) некоторые ошибки API. Программисты справедливо рассудили, что «нет в доках — не делаем». Приложение стало крашиться или вести себя непредсказуемо. На отладку и обратный инжиниринг стало уходить много времени.

Забыли про связи между некоторыми сущностями (или упустили их свойства), из-за чего была неверно создана база данных. Так как существующая часть БД оказалась уже задействована, пришлось вводить дополнительные таблицы. Усложнилось развитие и масштабирование продукта.

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

Создать прототип сайта

Бесплатные сервисы для создания прототипа сайта перед отрисовкой дизайна и программированием

Создание прототипов в Figma

Известный бесплатный инструмент для отрисовки наглядных интерактивных прототипов страниц сайта.

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

Настройка всплывающего окна заявки

Клиент может прямо на прототипе оставлять комментарии к элементам.

Создание прототипов в Lucidchart

Lucidchart — инструмент для создания диаграмм, блок-схем, алгоритмов, диаграмм кадров организации, планировок этажей, диаграмм Венна, SWOT-анализов и макетов сайтов, так что он подходит и для прототипирования сайтов и приложений. Полный список инструментов.

Фрагмент демонстрационного прототипа

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

У инструмента есть расширение для Google Chrome, так что с его помощью можно быстро добавить диаграммы из Lucidchart в документы и таблицы Google.

Рисование прототипа веб-страницы в Pencil

Бесплатная программа с открытым исходным кодом для рисования прототипов страниц сайта.

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

Отрисовка страницы сайта в программе

Скачать Pencil для Windows или Mac.

Выравнивание текста по сетке с помощью Sassline

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

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

Фрагмент примера страницы с линейками

PSD-шаблон для посадочной страницы

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

К примеру, мы нашли бесплатный psd-шаблон для одностраничного сайта, которым поделился дизайнер Arifur Rahman Tushar.

Внешний вид страницы

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

Мы проверили файл в Adobe Photoshop 2017: открывается, слои на месте, но скорее всего понадобится докачать шрифты.Скачать шаблон

Типы прототипов

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

  • по способу изготовления (аналоговый, то есть на бумаге, или цифровой), 
  • по степени проработки деталей, 
  • по UX (традиционный, то есть в виде изображения, или интерактивный, с которым можно взаимодействовать). 

Термин прототип неоднозначный. Путаница возникает из-за того, что на английском слово prototype означает конкретный тип – живой прототип, который можно прокликать. А то, что мы называем прототип (по сути простая схема страницы), по-английски называется wireframe (вайрфрейм). 

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

Скетч 

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

Это самый дешевый и быстрый способ визуализировать идею без необходимости долго объяснять ее «на пальцах». Этот способ прототипирования подходит для быстрой коммуникации внутри команды, меньше – для презентации идеи перед заказчиком. Причина проста – клиентам трудно представить, как все будет выглядеть в результате, и вы нарветесь на дополнительный цикл вопросов, ответов и уточнений. 

Бывает и обратная ситуация: на переговорах клиент не может донести свои пожелания словами и просит дать ему бумагу или встает к флипчарту и начинает набрасывать скетч. Эта ситуация нормальная, рекомендую дать клиенту эту возможность, затем посмотреть результат и прокомментировать. Задача менеджера проектов здесь – оценить, удачное ли решение предложено, какие коррективы нужны и необходимо ли приложить этот скетч к документам по проекту. 

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

Вайрфрейм (Wireframe) 

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

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

Мокап (Mockup) 

Мокап – это расширенная версия вайрфрейма, в нем допустимо «накидать» цветовые решения, добавить изображения, шрифты, иконки. Он нужен, чтобы утвердить последовательность блоков, общую стилистику, а также продумать некоторые визуальные фишки. Здесь точно пригодятся финальные версии текстов. В результате получается симпатичное изображение, которое не стыдно показать клиенту. 

Я рекомендую воспользоваться простым чек-листом того, что должно быть отражено в мокапе: 

  • план страницы; 
  • готовый копирайтинг;  
  • расположение элементов;
  • состояния элементов (пометки, что и как работает); 
  • референсы для изображений и типографики. 

Прототип (живой прототип) 

По всем правилам, prototype – это интерактивный вариант вайрфрейма (такое определение дает агентство Сибирикс). Он четко показывает, как работают элементы будущего сайта без дополнительных пометок, комментариев или ТЗ. С ним можно взаимодействовать практически так же, как с готовым сайтом.  

Живые прототипы используются для утверждения заказчиком сложных интерфейсов, а также для проведения UX-тестирования командой или фокус-группой.  

Отрисовать дизайн сайта или приложения

Интересные решения для оформления: дизайнерские иконки, подбор цветов и стилей.

След от курсора

Креативный разработчик и 3D-дженералист Натан Гордон поделился своей разработкой — фреймворком OGL. Это библиотека кодов WebGL, которая избавляет от необходимости писать сложные коды вручную. Библиотека легкая, например, классы OGL, которые нужны для этого эксперимента, в сжатом виде весят 13kb.

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

Пример реализации на сайте deplacemaison.com

Не перестарайтесь с анимациями и украшениями на странице — если скорость загрузки сайта значительно увеличится, пользователи не будут долго ждать и уйдут.

Деформация надписи или фона

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

В этом примере настроили неподвижный фон и деформирование надписи от движений курсора:

Демонстрационный пример

Полезная подборка CSS хаков

Варианты на сайте оформлены в удобных окошках: можно сразу посмотреть результат и скопировать варианты в HTML, SCSS, JS.

Демонстрация интерактивных кнопок

Определение цветов по картинке

На страницах tympanus.net разработчики поделились собственным экспериментом — инструментом Color Extraction Effect для определения цветовой гаммы с картинки. Он сканирует картинку, определяет все ее цвета и из них выбирает небольшую палитру удачно сочетающихся друг с другом оттенков.

Демонстрация работы

Инструмент использует Vibrant.js от Jari Zwarts для извлечения цветов из изображений.

Бесплатный набор иконок для фитнес-проекта

Дизайнер Jacek Janiczak выложил набор иконок, который он разработал под фитнес-проект, с разрешением использовать их в коммерческих целях. Иконки хоть и сделаны для фитнес-тематики, но выглядят вполне универсально.

Демонстрация иконок из набора

Бесплатный набор иконок в разных цветах

В наборе 48 иконок в разных цветовых вариациях, в сумме получается 144 значка. Иконки можно редактировать и использовать для личных и коммерческих проектов.

Демонстрация набора

Бесплатный сет иконок Smart House на Dribbble

Аккуратный и лаконичный набор иконок «Умный дом», который сделал дизайнер Roman Malashkov. Бесплатная для личного и коммерческого использования лицензия. В пакете 24 иконки для бытовых приборов и других обозначений по теме.

Примеры доступных иконок

Бесплатный пак стикеров по «Игре престолов»

Дизайнер Alex Kunchevsky поделился набором из четырех красочных стикеров по сериалу «Игра престолов». Он разрешил использовать их в личных или коммерческих проектах, так что вы можете их напечатать или разместить на сайте, баннере или в приложении.

Стикеры из набора

Расскажите, какую подборку инструментов, идей или шаблонов вам было бы интересно увидеть в блоге?

Составила Маргарита Морозова, обновила Елена Жмурина

Как мы делаем прототип сайта: 5 ключевых правил от NAJES

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

Что такое прототип – определяемся с терминологией

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

Маркетологи из Convert Monster приступают к прототипированию после брифа с клиентом и агрегации требований к проекту (цели и задачи проекта, исследование рынка, конкурентов, целевой аудитории и план лендинга) и отводят на разработку от 3 до 7 рабочих дней в зависимости от сложности проекта.  

Общая последовательность действий такая:  

  • бриф; 
  • агрегация требований + согласование с клиентом;  
  • прототип (структура блоков и тексты) + согласование с клиентом; 
  • дизайн + согласование с клиентом; 
  • верстка + согласование с клиентом;  
  • тестирование сайта. 

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

Если в работе многостраничный сайт, то редко когда нужно прототипировать все страницы, достаточно спланировать ключевые: главную, каталог, карточку товара, страницу чек-аута. 

Product Evolution Canvas

Product Evolution Canvas (PEC) – это инструмент для компаний, создающих различные продукты, отлично подходящий для мозговых штурмов. Он состоит из двух компонентов – это:

  1. Временные рамки.
  2. Три этапа эволюции продукта.

Временные рамки – это, как понятно из названия, время. А что такое эволюция продукта? Давайте рассмотрим подробнее.

3 этапа эволюции продукта

Эволюция продукта – это весь процесс от создания прототипа до готового товара.

Он делится на три этапа:

  1. Моделирование минимально-жизнеспособного продукта (прототипа или по-другому MVP).
  2. Создание основного продукта (который перекрывает основные потребности потенциальных клиентов).
  3. Производство полнофункционального продукта (идеальное решение проблемы пользователя).

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

Канвас эволюции продукта помогает ответить на вопросы коллег, клиентов и инвесторов о функционале продукта. Например:

  1. Что может ваш продукт?
  2. Как вы будете развивать свой продукт?
  3. Что нас ждёт в будущем?
  4. Что в итоге получится?

Кроме того, Product Evolution Canvas упрощает:

  1. Разработку стратегии улучшения продукта.
  2. Установку дедлайнов.
  3. Генерацию идей.
  4. Презентацию продукта.
  5. Мотивацию команды на работу.

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

Как работать с PEC

Работа с PEC предполагает прохождение трех этапов:

1  
На первом этапе спрашивайте себя: «Что делает мой продукт функциональным?»
2 На втором этапе задавайте вопрос: «Как мне улучшить свой продукт, чтобы он соответствовал главным пользовательским сценариям?»
3 На третьем этапе уточняйте: «Какие элементы стоит добавить в продукт, чтобы он полностью раскрыл заложенный в нём потенциал?»

Канвас можно применять для разработки продуктов и услуг практически в каждой сфере деятельности человека. Нужно выполнить всего лишь четыре простых шага:

  1. Нарисовать канвас на листе формата А4 или магнитной доске. Заполнить его элементами продукта.
  2. Повесить в комнате, в которой работает ваша команда.
  3. Постоянно дополнять.
  4. Использовать в презентациях для пользователей и инвесторов.

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

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

Прототипировать можно:

  1. Физические продукты, такие как автомобиль, зубная паста, спортивное снаряжение и т.п.
  2. Сайты. Их прототипируют, чтобы быстро получить представление о том, как они примерно будут выглядеть в готовом состоянии.
  3. Программы и приложения.
  4. Интерфейсы.
  5. Опыт.

В зависимости от того, что мы прототипируем, технологии прототипирования будут различаться.

Как выглядит прототип сайта — пример

Для чего нужен прототип сайта

Рассмотрим, какие вопросы можно решить при помощи эскиза.

Общий язык между сторонами

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

Приложение к договору

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

Внешний вид веб-ресурса

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

Сокращение сроков

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

Зачем нужен прототип сайта в разработке

текстамиформами захватаПример прототипа сайта.

  1. Сайт разрабатывается не ради галочки, а на основе маркетингового анализа продукта, целевой аудитории, конкурентов и поведенческих факторов;
  2. Заказчик видит каждый этап разработки и понимает ценность продукта. Маркетолог детально вникает в его бизнес-процессы, ситуацию на рынке услуг, ищет идеи для отстройки, пытается создать лучшее решение в нише. Такая работа изначально не может стоить дешево;
  3. Клиент понимает, какие фотографии или видеоматериалы нужно собрать и заранее планирует фотосессию команды, продукта, офиса или склада;
  4. Процесс согласования проекта сокращается в разы, так как маркетолог может внести правки в режиме онлайн и тут же показать их заказчику;
  5. В прототипе удобно оставлять комментарии по дизайну. Дизайнер заранее получает доступ к прототипу и может совместно с маркетологом работать над разработкой структуры;
  6. Маркетолог и дизайнер работают не параллельно, а в едином ключе: совместно обсуждают структуру, заложенный в прототипе контент, маркетинговые фишки. Обмен опытом и разносторонний взгляд на создание сайта увеличивает шансы на более высокую конверсию и удобство пользователя.

2) Обзор методов, инструментов и исполнителей. Синяя или красная таблетка?

IxDA Discussion: What tools do you use for prototyping?Алексею КопыловуСкорость создания прототипаИнтерактивностьблога Юрия Ветрова «Интерактивные прототипы».ДетализацияНеобходима повторная отрисовкаДоступность для всех участников проектаВозможность внесения изменений(Потребность 2. Быстро создавать интерактивные, детализированные прототипы, доступные всем участникам проекта, с возможностью вносить изменения)

Бумажное прототипирование

Скорость создания прототипа:Интерактивность:Детализация:Необходима повторная отрисовка:Доступность для всех участников проекта:Возможность внесения изменений:

Прототипирование с помощью доски

Скорость создания прототипа:Интерактивность:Детализация:Необходима повторная отрисовка:Доступность для всех участников проекта:Возможность внесения изменений:

Axure Pro

Скорость создания прототипа:Интерактивность:Детализация:Необходима повторная отрисовка:Доступность для всех участников проекта:Возможность внесения изменений:

InDesign

Скорость создания прототипа:Интерактивность:Детализация:Необходима повторная отрисовка:Доступность для всех участников проекта:Возможность внесения изменений:

Visio

Скорость создания прототипа:Интерактивность:Детализация:Необходима повторная отрисовка:Доступность для всех участников проекта:Возможность внесения изменений:

Программы из пакета Office

Скорость создания прототипа:Интерактивность:Детализация:Необходима повторная отрисовка:Доступность для всех участников проекта:Возможность внесения изменений:gulevich«Обзор инструментов для UI-дизайнера и Информационного архитектора»HumanoITиспользовании Axure ProUsethicsпрототипировании интерфейсов в InDesignArticswirefram’ах выполненных в Visioдинамике web 2.0 в них(Потребность 3. Учитывать невысокий уровень знаний и опыта у человека выполняющего прототипирование)(Потребность 4. Веские и достаточные аргументы в пользу прототипирования. Выгода должна выражаться цифрами)российскиезарубежныеkremienОригинал статей Нильсена на эту тематику:http://www.useit.com/alertbox/process_maturity.htmlhttp://www.useit.com/alertbox/maturity.htmlПроектирование интерфейса как часть разработки ТЗПроектирование пользовательских интерфейсов. Краткий обзор процессаЧасть1Часть 2Часть 3Бонус:Стенсилы для Visioаналогичные на GUUIIСтенсилы для InDesignРезультаты поиска.

Прототип практически ничего не говорит о каждой конкретной странице

Да, сформировать доверие к проекту и вызвать определённые эмоции ничуть не менее важно, чем правильно расположить блоки на странице. А доверие и правильные эмоции — епархия двух специалистов: редактора (он же контентщик) и дизайнера

Одна сторона медали — текст определённого объёма, правильная подача, эмоциональная окраска, другая — грамотно подобранная графика, шрифты, цвета, расположение и оформление. Но продаёт вся медаль, а не какая-то её сторона. Или не продаёт.

Что полезнее для заказчика или фокус-группы: не очень аккуратный «почти конечный» дизайн страницы с «почти конечными» текстами, цветами, фотками, шрифтами — или чёрно-белая страничка с текстом из «Яндекс.Рефератов» и прямоугольниками с подписью «фотка улыбающегося ребёнка»?

Популярные статьи

  • 6.9K
  • 18 мин.

Продажи на маркетплейсах: как продавать на Wildberries, Ozon, Aliexpress

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

  • 18 февраля 2021
  • Повышение продаж

  • 26 октября 2020
  • Повышение продаж

  • 7K
  • 15 мин.

Коронавирус разбушевался: как выжить бизнесу в кризис

Коронавирус, карантин, кризис – этот ассоциативный ряд способен вызвать панику даже у человека с железными нервами. Владельцы бизнеса изо всех сил стараются удержаться на плаву, судорожно придумывая идеи для получения прибыли, но ничего не выходит… Рассказываем, как бизнесу выжить в кризис и какие расходы нужно оптимизировать.

  • 31 марта 2020
  • Повышение продаж

Разновидности

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

Делятся прототипы на два вида:

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

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

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

Создание взаимодействий

В Axure любой элемент прототипа может быть триггером для действий, так мы присвоим объекту определённую логику поведения. Это помогает смоделировать работу сайта.

Рассмотрим, как сделать в прототипе кликабельное меню, чтобы перемещаться по сайту с помощью ссылок в шапке сайта. Для этого кликаем на раздел «Блог» и в свойствах элемента (Properties) выбираем действие OnClick.

Триггер OnClick срабатывает при клике мыши по элементу, что прекрасно подходит для создания ссылок. Сделаем так, чтобы при клике в этом же окне открывался раздел с блогом.

Для этого выбираем Open Link («Открывать ссылку») → Current Window («В текущем окне») → Блог (какую страницу открывать). Весь процесс настройки:

Для чего нужен прототип сайта?

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

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