назад к блогу

Прототип сайта и графический редактор 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

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

В следующем материале на конкретном примере расскажем и покажем, как принять и проверить прототип. Следите за новостями.

Вас может заинтересовать
16 февраля 2024
Зачем нужен «Битрикс24»?
аналитика
16 февраля 2024
Хочется открыть службу доставки готовой еды, но есть сомнения?
разработка сайтов
16 февраля 2024
Как заказать дизайн-проект, чтобы получить рабочий продукт на выходе?
дизайн
16 февраля 2024
Как заказать дизайн-проект, чтобы получить рабочий продукт на выходе?
разработка сайтов
16 февраля 2024
8 секунд на размышление
разработка сайтов
15 февраля 2024
Как понять, что сайт устарел?
разработка сайтов
15 февраля 2024
4 приема для создания интересного контента
разработка сайтов
17 февраля 2024
Как правильно выбрать CMS? Чем они отличаются?
разработка сайтов
7 марта 2024
Кейс Level Up
дизайн
7 марта 2024
Кейс Level Up
разработка сайтов
1 марта 2024
Разработка корпоративного сайта AthleticsFit, сервиса автоматизации процессов доставки
разработка сайтов
16 февраля 2024
Про нашу техподдержку
аналитика
16 февраля 2024
Про нашу техподдержку
разработка сайтов
18 марта 2024
Собственное исследование рынка разработки
аналитика
18 марта 2024
Собственное исследование рынка разработки
дизайн
18 марта 2024
Собственное исследование рынка разработки
разработка сайтов
21 марта 2024
Всё, что нужно знать заказчику
разработка сайтов
25 марта 2024
Мобильное приложение для компании «Сибуголь»
дизайн
25 марта 2024
Мобильное приложение для компании «Сибуголь»
разработка сайтов
9 апреля 2024
Какое мобильное приложение выбрать для своей компании?
аналитика
9 апреля 2024
Какое мобильное приложение выбрать для своей компании?
дизайн
9 апреля 2024
Какое мобильное приложение выбрать для своей компании?
разработка сайтов
25 апреля 2024
Учимся принимать прототип вместе
дизайн
25 апреля 2024
Учимся принимать прототип вместе
разработка сайтов
2 мая 2024
Главное про нашу техподдержку
аналитика
2 мая 2024
Главное про нашу техподдержку
разработка сайтов
7 мая 2024
Jpeg, jpeg progressive или webp? Что выбрать?
дизайн
7 мая 2024
Jpeg, jpeg progressive или webp? Что выбрать?
разработка сайтов
13 мая 2024
Команда техподдержки: как устроена обработка заявок?
аналитика
13 мая 2024
Команда техподдержки: как устроена обработка заявок?
разработка сайтов
27 апреля 2024
“Мне не нужен дизайн. Нужен просто сайт нормальный”
дизайн
27 апреля 2024
“Мне не нужен дизайн. Нужен просто сайт нормальный”
разработка сайтов
16 мая 2024
Разработка интернет-магазина для фабрики ёлочных игрушек «Бирюсинка»
дизайн
16 мая 2024
Разработка интернет-магазина для фабрики ёлочных игрушек «Бирюсинка»
разработка сайтов
Обсудить проект
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности.
Обсудить проект
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности.
Ваша заявка успешно отправлена!

Мы получили Вашу заявку и свяжемся с Вами в ближайшее время.