Wireframes, Mockups, Prototype — что, куда, зачем

Elena Saharova
May 22, 2015 · 4 min read

by Elena Saharova


В интернете существует множество статей на тему, что же такое Wireframing, зачем он нужен и как его использовать.

Одни говорят, что в wireframe нужно ставить уже существующий текст, другие наоборот, о том, что это всего лишь каркасный набор экранов (концепция), который после того, как попал в руки ui дизайнера отправится в корзину — за ненадобностью.

Разберемся, что же такое wireframes, mockups и prototype в работе над веб — сервисом, приложением или корпоративным сайтом.

Авторское определение:

Wireframes — это организация полного функционала конечного продукта, в виде структуры с представлением элементов интерфейса и навигации, их взаимодействия друг с другом. Как правило, в wireframes не используется типографика, цвет и любые другие графические элементы оформления, так как основное внимание уделяется функциональности, поведению и содержанию. Wireframes фокусируется на том, как экраны взаимодействуют между собой, а не на то, как они выглядят.

Для того, чтобы начать работу над любым сервисом, нужно понимать весь список функционала, который требуется для реализации проекта, в иделе — как и что может выводить backend на экран.

Затем нужно определить бизнес-цели и творческие идеи проекта, количество сценариев и правила отображения элементов (обычно предоставляются со стороны бэкенда)

Wireframe должен отвечать следующим принципам:

  1. Real Size —необходимо использовать реальные размеры рабочей области, чтобы понимать, какое количество элементов будет оптимальным для него.
  2. Storytelling — не стоит забывать, что wireframing — это прежде всего пользовательский путь. История, которую вы доносите до пользователя должна быть простая и удобная.
  3. Animation — на этапе вайрфрейминга стоит сразу продумать, как будут вести себя элементы интерфейса, переходы между экранами, инпуты, дропдауны и т.д., где будут тапы, а где свайпы.
  4. Clear — wireframe должен отвечать всем требованиям BDD (behavior-driven development), так как после окончания работы над вайрфреймом, он будет служить пользовательским сценарием для отдела разработки.

Основное правило вайрфрейминга — не воспринимать его, как каркас, на который после будет натянут дизайн, это только набор обязательного функционала.

Чем же Wireframes отличается от Mockups и Prototype?

Опять же приведу авторское определение Mockups, как первой иттерации работы над проектом.

Mockups — путь погружения пользователя в продукт и распределение цепочек касания с ним для совершения целевого действия. Чаще используется копирайтерами и основывается на пользовательском опыте с точки зрения маркетинга и продаж.

Следовательно, Mokups не предусматривает никакого пользовательского опыта с точки зрения организации элементов навигации по интерфейсу и взаимодействия с ним.

Теперь рассмотрим, что же такое в действительности Prototype.

Замечу, что prototype, может быть только интерактивным, если вашу работу над продуктом нельзя прокликать, то это только дизайн-макет.

Prototype — это средне- или высоко- детализированное представление конечного продукта, которое имитирует взаимодействие пользователя с интерфейсом. Создается для того, чтобы протестировать основные гипотезы, созданные на этапе вайрфрейминга.

Cуществует множество сервисов для работы над прототипами

Проблема многих сервисов для прототипирования в том, что они либо очень ограничены в тактильных ощущениях с вашим продуктом или наоборот очень сложные и отнимают много времени для достяжения того эффекта, который задумывался.

На мой взгляд, нет ничего лучше для прототипирования, как FramerJS, стоит изучить основы JavaScript, чтобы делать качественные и быстрые прототипы, которые в дальнейшем будут облегчать жизнь фронтенда.

Так же отмечу Flinto, как самый простой, но дающий неплохой результат на выходе, сервис.

Итак, если рассмотреть все этапы работы над веб-сервисом, приложением или корпоративным сайтом, то процесс может представлять из себя следующее:

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

Понимание процессов создания конечного продукта, облегчит жизнь вам и многим вашим коллегам, да и просто наведет порядок в предоставлении требований от клиента. Функционируйте, друзья.

Elena Saharova

Written by

designer (artdirector) www.eessoo.co

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade