Пример мокапа или макета сайта (Low Fidelity Design)
Пример wireframe — мокап с повышенной детализацией (High Fidelity Design)
Пример прототипа сайта
Проработка структуры сайта и навигации между разделами для оценки стоимости и объема работ
Проработка структуры сайта и отдельных страниц в майнд картах
Пример скетчинга для наброска гипотез
● Прототипы с низкой детализацией (мокап);
● Прототипы с высокой детализацией (wireframe).
Слева — мокап с низкой детализацией, в центре и справа — wireframe с высокой детализацией.
Пример статичного прототипа с высокой детализацией
Пример интерактивного прототипа
Пример скетча для проработки структуры сайта
Пример скетча для проработки структуры сайта
Пример функционального прототипа
Пример UX-kit — набор элементов, на которых будет строиться UI дизайн
Прототип, выполненный в градациях серого. Важные кнопки целевого действия выделены более темными тонами.
Проработка навигации сайта: какая страница открывается при переходе по ссылке, что происходит при нажатии на кнопку.
Пример построения прототипа в Figma
Построение структуры сайта в XMind
Интерфейс программы Mockingbird
Интерфейс сервиса Gliffy
Возможности программы Creately
Функционал прототипирования в Axure
Возможности прототипирования в Sketch
Интерфейс Adobe XD
Adobe Photoshop — на 2022 год не лучший выбор для веба
Пример вайрфрейма, созданного в FlairBuilder
Скетчинг в NinjaMock
Сервис для прототипирования Moqups
Проработка структуры сайта в LucidChart
Прототипирование на основе шаблонов Draftium
Процесс разработки макета сайта с помощью Marvel
Макет созданный в Wireframe
Интерфейс Just in mind
Прототипирование с адаптацией от iPlotz
Скетчи в Balsamiq
Проработка мокапов с использованием Mockflow
Интерфейс приложения POP
Скетчинг при помощи программы Invision
Прототипирование интерфейса мобильного приложения в Origami
Пример мокапа, разработанного Proto.io
Возможности для прототипирования приложения Principle
Создание интерфейса с использованием готовых блоков и элементов ProtoPie
Рабочая панель Frame Box
Возможности инструментов Omnigraffle
Интерфейс программы ConceptDrawPro
Интерфейс Pencil
Интерфейс ProtoShare
Процесс создания прототипа в HotGloo
Скетч в Mockup Builder
Мокап в Mockup Builder
Рабочая панель Vectr
Функционал перехода на другую страницу Mockplus
Пример вайрфрейма от UXPin
Рабочая панель Flinto
Рабочая панель Fluid
Прототипирование кодом во Framer