te-st.ru
Как самостоятельно создать интерактивный прототип сервиса или приложения Вебинар | 13.11.2015
Алексей Ница nitsa@te-st.ru event-редактор вебинары и видеоуроки Теплицы
te-st.ru
te-st.ru
https://te-st.ru социальные сети: /TeplitsaST
te-st.ru
записи вебинаров te-st.ru/category/webinars
te-st.ru
плейлист записей вебинаров j.mp/teplitsa-webinars
te-st.ru
плейлист видеоуроков j.mp/teplitsa-screencasts
План вебинара • • • • •
что такое мокап (прототип) сайта или приложения в каких случаях стоит использовать прототипы какие основные шаги существуют при создании прототипа какие сервисы использовать для создания прототипов как самостоятельно создать прототип сайта или мобильного приложения
te-st.ru
Мосkups – макеты, прототипы
te-st.ru
te-st.ru
Макет чашки
te-st.ru
Mockup для фирменного стиля
te-st.ru
Макет визиток
te-st.ru
Макет сайта
Интерактивный прототип Соединенные между собой нарисованные экраны будущего приложения или сайта с помощью взаимосвязей и ссылок. В результате получается модель, в которой работают кнопки и основная навигация.
te-st.ru
te-st.ru
Экраны будущего приложения
te-st.ru
Страница будущего сайта
Когда и зачем создавать прототип? • • • •
на первых этапах разработки сервиса или приложения – выявить ошибки проверить общую структуру и навигацию проверить UX – опыт взаимодействия пользователя с вашим сайтом или приложением когда ограниченное время для разработки приложения или сервиса, а нужно показать результат (хакатоны, воркшопы и др)
te-st.ru
Основные шаги при создании интерактивного прототипа
te-st.ru
Основные шаги 1. Выбрать, для какого устройства будет сделан прототип (десктоп - сайт, какое мобильное устройство) 2. Выбрать инструмент для создания прототипа (с дизайном или без) 3. Создать структуру сайта или приложения (страницы, разделы, меню, навигация) 4. Создать (нарисовать) экраны приложения или страницы сайта 5. Связать эти экраны с помощью кнопок и ссылок 6. Проверить финальный результат и внести правки (начиная с пункта 3) te-st.ru
te-st.ru
dangry.ru/lukin
te-st.ru
goodui.org
Инструменты
te-st.ru
te-st.ru
mockflow.com
te-st.ru
moqups.com
te-st.ru
invisionapp.com
te-st.ru
marvelapp.com
Полезные ресурсы • • • • •
allthefreestock.com – бесплатные фото, мокапы canva.com – дизайн iconfinder.com – бесплатные иконки thenounproject.com – бесплатные иконки makerbook.net – бесплатные ресурсы для дизайна
te-st.ru
Видеоуроки
• • •
Как создать реалистичный прототип с помощью Marvelapp Как создать макет сайта с помощью Moqups Как создать дизайн в canva.com
te-st.ru
Вопросы и ответы
te-st.ru
te-st.ru