Прототип сайта и графический редактор Figma. Инструкция пользователя.

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

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

Наиболее популярный инструмент для создания прототипа — графический редактор Figma. Прототип будущего сайта в Figma выглядит следующим образом (Пример 1): 

Пример 1

Ориентироваться в безликой структуре без опыта довольно сложно, а еще сложнее разобраться в редакторе Figma. 

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

1. Открываем прототип в Figma по ссылке от дизайнера. Если у вас есть аккаунт Google, Figma предложит войти в редактор с учетными данными google.com. Нажимаете “Продолжить, как …”. Далее появится всплывающее окно “create account” (зарегистрировать аккаунт), которое можно закрыть. Для просмотра прототипа совсем не обязательно регистрироваться в Figma. Но, если вы желаете оставлять внутри свои комментарии — в этом случае регистрация необходима.

2. Увеличиваем прототип и настраиваем масштаб. Когда вы первый раз откроете прототип в Figma, увидите проект целиком на весь экран в очень уменьшенном масштабе (Пример 2). Для того, чтобы увеличить масштаб и детально рассмотреть каждую страницу можно зажать клавишу Ctrl и крутить колесо мыши “вперед-назад”. Либо воспользоваться панелью в правом верхнем углу и масштабировать проект до нужного размера (на выбор там есть несколько значений — Пример 3). Чтобы посмотреть прототип в масштабе 100%, необходимо одновременно нажать клавиши CTRL и “0”.

Пример 2 

Пример 3

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

4. Добавляем комментарии через специальный значок (Пример 4). Помните, что писать комментарии в редакторе может только авторизованный пользователь. Если у вас есть такая возможность – оставляйте заметки по ходу движения по прототипу. Это поможет избежать ошибок, несостыковок, переделок в дальнейшей работе. И у дизайнера будет больше времени на доработку. Лучше внести все правки сейчас, потому что на этапе дизайна каждый забытый блок или модальное окно будут стоит гораздо дороже.



Пример 4

5. При необходимости возвращайтесь к первоначальной версии прототипа, когда проект целиком уменьшается в один экран. Для этого достаточно одновременно нажать кнопки Shift и “1”. Это очень удобная функция при просмотре прототипа большого объема. 

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

 
После того, как прототип будет согласован, разработчики начнут работать над дизайном. Черно-белая схема станет красочной, оживленной и привлекающей внимание (Пример 5). 

 

Пример 5