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

В статье поговорим о мокапах. Разберёмся, как правильно их использовать, и в каких случаях шаблоны оказываются бесполезными.

Что такое мокапы

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

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

Новички часто путают скетчи, вайрфреймы, мокапы и прототипы. Чтобы разрешить все споры, кратко расскажем про каждый инструмент. Скетч — набросок от руки, который очень далёк от реального продукта. Wireframe — схема проекта, отражающая только визуальный «скелет» без иллюстраций и декоративных элементов. Прототип — рабочая модель, которая уже походит на конечный продукт. И наконец мокап — графическая «оболочка», похожая на проект исключительно внешним видом.

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

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

Мокап — вайрфрейм в красивой обёртке. Вместо чёрно-белых линий и скучных схем появляются иллюстрации и цвета. Инструмент часто сравнивают с макетом, но эти формы представления отличаются. У каждого формата свои особенности и преимущества, поэтому очень важно не путаться в них и подбирать правильные решения под конкретную задачу

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

Недостаточно просто знать инструменты прототипирования, надо правильно их использовать и уметь выбирать идеальные решения. Если стоит задача презентовать идею — выбираем скетч, когда есть время на раскрытие деталей — вайрфрейм. Если важна точность и композиция — на помощь приходит мокап. Дизайнеру необязательно в совершенстве знать особенности каждого инструмента. В большинстве случаев приложения и сайты превращаются в готовые продукты из вайрфреймов и макетов в Photoshop.

Особенности мокапов

Хороший mockup — высокоточный прототип продукта, который должен получиться в результате. Он создаёт устойчивый визуальный образ и раскрывает все стороны интерфейса. Участники команды заказчика могут не просто увидеть набросок на бумаге или чёрно-белый вайрфрейм без деталей, а по-настоящему погрузиться в разработку.

Мокапы — не панацея, они подходят для определённых задач, о которых мы поговорим в следующем разделе статьи. Благодаря визуальной точности готовые шаблоны идеально подходят для презентации цифровых продуктов. Их главная задача — собрать обратную связь и защитить дизайнера от бесконечных доработок.

Предположим, что клиент попросил разработать дизайн курьерского приложения под iOS и чётко обозначил сроки. Исполнитель сначала делает вайрфрейм, утверждает базовую структуру, а только потом переходит к разработке макета. Когда наступает время презентовать будущий проект, он вспоминает о мокапах и готовит презентацию с несколькими слайдами.

Дизайнер загружает мокап разных моделей iPhone и показывает, как будет выглядеть приложение в реальности. Заказчик быстро находит критичные недочёты, а дизайнер понимает, над чем ещё надо поработать. Готовые шаблоны экономят время всех участников рабочего процесса.

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

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

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

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

Какие задачи можно решать с помощью мокапов

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

Важно понимать, что mockup тоже не идеален. Придётся потратить время, чтобы найти готовый шаблон под свои задачи, который сможет раскрыть характеристики digital-проекта. В интернете много сайтов с библиотеками мокапов, но точно придётся перебрать несколько готовых вариантов, чтобы найти подходящее решение.

Сделать быструю презентацию

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

Так вот мокапы — это VR-очки, позволяющие в деталях рассмотреть проект, который должен получиться после завершения разработки. Они созданы для быстрой презентации, но подходят не для всех задач. В некоторых случаях лучше обойтись без готовых шаблонов и сосредоточиться на быстром прототипировании или полноценном макете.

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

Наполнить UI

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

При использовании готовых шаблонов отталкивайтесь от особенностей проекта. Их должно быть ровно столько, сколько понадобится для создания визуального ряда. Не вставляйте картинки для красоты.

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

Получить обратную связь

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

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

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

Найти критичные недочёты

До появления продукта в открытом доступе надо исправить все ошибки. Особенно те, которые сильно влияют на пользовательский опыт. В условиях высокой конкуренции нельзя давать целевой аудитории лишний повод усомниться в надёжности компании. Сайт или приложение отражают подход бизнеса к выстраиванию взаимоотношений с клиентами. Если интерфейс будет неудобным или непродуманным, люди будут ассоциировать негативный опыт с компанией.

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

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

Как использовать мокапы

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

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

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

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

Некоторые графические дизайнеры используют для разработки интерфейсов нестандартную схему. На первом шаге они делают каркас или вайрфрейм, затем переходят к мокапу и передают его разработчику. В данном случае под мокапом подразумевается готовый шаблон, который уже можно переносить в вёрстку. Сторонники этого подхода утверждают, что прототипы можно легко исключить из цикла разработки. Якобы они отнимают много времени, а без них проектирование ускорится в несколько раз.

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

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

Проблемы мокапов

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

В некоторых случаях проще отрисовать объекты самостоятельно. Это актуально только если у дизайнера есть соответствующие навыки. Тем, кто создаёт интерфейсы в Фигме, будет непросто создать с нуля дизайн смартфона или бейджика. Лучше потратить время на поиск подходящего шаблона и воспользоваться его преимуществами для презентации.

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

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

Мокапы — максимально полезное изобретение дизайнеров, которое можно использовать для решения разных задач. В интернете большое количество готовых объектов с бесплатными исходниками в разных форматах. Достаточно ввести ключевой запрос, проверить источник на надёжность и отредактировать файл при необходимости.

Веб-студия IDBI разработает цифровое воплощение любых идей. Свяжитесь с нами, чтобы обсудить детали проекта.