Прототипирование это неотъемлемая часть процесс создания сложного сайта. Создание прототипов дает возможность проверить идеи, изложенные в концепции или ТЗ, без затрат на написание кода.
- Miro
- Wireframe.cc
- Moqups
- Adobe Xd
- Fluid UI
- UXPin
- Balsamiq Mockups
- Axure RP
- Photoshop (да, он все еще сохраняет существенную долю на рынке веб-дизайна)
Скетч — это схематический набросок низкой точности. Удобен для моментального тестирования идей. Рисуется от руки на бумаге, а также на доске во время брейншторм-сессий.
Вайрфрейм — схема интернет-страницы низкого уровня детализации. Передает структуру страницы, расположение важных элементов. Цель разработки каркаса — смоделировать основу пользовательского интерфейса.
Мокап — статичный прототип средней или высокой детализации. В нем уже есть все составляющие визуального дизайна: цветовая схема, образцы шрифтов, баннеры, логотипы.
Максимально приближен к готовому сайту (без серверной части). Характерны высокая точность и динамические элементы, реагирующих на клики мышки, а также возможна анимаций. Интерактивный прототип сайта — это тестовая модель будущего веб-приложения.
- Обнаружение проблем интерфейса на ранней стадии.
- Проработку нескольких вариантов визуального стиля и UI.
- Презентация проекта стейкхолдерам.
- Проведение юзабилити тестирования еще до фактической разработки.
- Эффективное распределение задачи в команде.
Проектирование — ключевой процесс в создании сайта. Это этап разработки программного обеспечения, на котором определяются основные функциональные компоненты будущей системы. Проектирование позволяет продумать весь проект в общих чертах, чтобы затем реализовывать задуманное поэтапно.
Сейчас набирает популярности понятие Discovery Stage – стадия превращения идеи проекта в техническое задание, которое можно реализовать. Это именно тот смысл, который мы вкладываем в этап проектирования.
Прототип — это схематическое представление страниц сайта в виде динамического наброска, эскиза, где отображены взаимодействия и структурные элементы будущего сайта. Например, меню, регистрация, поиск, статьи и так далее. Прототип позволяет понажимать на кнопочки и почувствовать взаимодействие с сайтом так, как будто он уже разработан.
Таким образом, прототипирование состоит из четырех фаз:
- Эскиз (скетч) — это схематический набросок низкой точности. Удобен для моментального тестирования идей. Рисуется от руки на бумаге, а также на доске во время брейншторм-сессий.
- Каркас (вайрфрейм) — схема интернет-страницы низкого уровня детализации. Передает структуру страницы, расположение важных элементов. Цель разработки каркаса — смоделировать основу пользовательского интерфейса.
- Макет (мокап) — статичный прототип средней или высокой детализации. В нем уже есть все составляющие визуального дизайна: цветовая схема, образцы шрифтов, баннеры, логотипы.
- Интерактивный прототип — максимально приближен к готовому сайту (исключая серверную часть). Для него характерны высокая точность и наличие динамических элементов, реагирующих на клики мышки. Также возможна прорисовка анимаций. Интерактивный прототип сайта — это тестовая модель будущего веб-приложения. С помощью него можно проводить пользовательское тестирования до этапа программирования.
101
23.07.2020