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

Для начала нам нужно википедиевское объяснение понятия мокапа (да и всех остальных дизайнерских понятий стадии готовой работы). Будем идти последовательно, начиная с идеи и заканчивая готовым продуктом

Эскиз

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

Схема (каркас)

Схема или, по другому, каркас — это уже выверенный рисунок/схема того эскиза со всеми деталями. Продумка структуры сайта, где какие блоки располагаются или арматура с силуэтами скульптуры — это всё схема (или каркас). Туда же входят такие понятия как Вайрфрейм, миндмап и другие, но на них мы останавливаться не будем.

Прототип

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

Дизайн-макет

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

Что же такое Мокап (mockup)?

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

Примеры мокапа:

Mockup (макет) Boeing 2707 в музее авиации им. Гиллера

Mockup (макет) Американского шатла в полную величину

Mockup (макет) интерьера, выполненный в настоящую величину и сфотографированный.

Мокапы применяются в производстве, архитектуре, программировании, текстиле, военном деле и прочих сферах. Танк без двигателя и внутренностей, выполненный в полном размере из пластика и выглядищий как настоящий; кухня, с открывающимися дверцами, стеклами и выдвижными ящичками, но выполненная в миниатюре; дизайн интерьера, выполненный в 3D Max во всех деталях, очень похожий на фотографию — всё это mockup, то бишь макеты.

Из всего вышесказанного мы можем вычленить одно:

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

Получается, что в русском языке слово «мокап» уже не совсем то, что в английском mockup. Как мы уже узнали mockup c английского — это и есть макет, но в русском языке слово «мокап» приобрело иной характер. Это можно наглядно увидеть в поисковиках

Как мы видим, тут никаких шатлов или макетов домов в миниатюре нет. Здесь, в основном, фотографии дизайна кружек, текстиля с логотипами, и другими изображениями, которые можно менять с помощью Adobe Photoshop. Вот мы и подбираемся к определению слова «Мокап».

Мокап — это изображение готовой работы (фотография или реалистичная иллюстрация), выполненная в формате psd и имеющая смарт-слой, в котором можно заменить тот или иной рисунок на своё изображение, получив, таким образом, демонстрацию работы в реалистичной фотографии (или иллюстрации)

Кто-то может со мной не согласиться. Определение слова «мокап» в такой форме не каждому может показаться правильным, но согласитесь, когда мы вбиваем в поисковую строку «мокап визитки», мы хотим получить не дизайн готовой визитки, ни фотографию довольных клиентов с визиткой, а конкретный PSD файл, в котором будет фотография с изображением визитки в реальном мире, куда мы в 2 клика сможем поместить дизайн своей визитки. Так что определение выше имеет право на существование.

Может пора признать, что мы подразумеваем под словом «Мокап»? У меня всё! Мнения и негодования оставляйте в комментариях. Пока.

Написать комментарий

Последний уровень дизайна пользовательского интерфейса

Каркас — это каркас. Прототипы демонстрируют поведение. Мокапы — это кожа.

В этой статье мы объясним, почему макеты так же важны, как каркасы и прототипы, и как выбрать правильный метод.

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

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

Помимо выделения времени на ответы на важные визуальные вопросы, мокапы имеют ряд других преимуществ:

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

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

• Ранние версии — Легче вносить изменения в макет, чем на более поздних этапах кодирования (если сам макет не закодирован).

В процессе проектирования макеты появляются в конце фазы lo-fi и в начале фазы hi-fi. Это может означать разные вещи для разных методов — например, макет может быть сделан сразу после создания каркаса или может быть отложен до завершения тестирования прототипа lo-fi.

Однако мы также рекомендуем провести тестирование при переходе с lo-fi на hi-fi. Концепции общей картины, такие как навигация и поток, сложнее изменить с высокой точностью, поэтому их следует повторить, прежде чем погрузиться в макет Hi-Fi.

Фотография предоставлена: Sketch App

Как объясняется в бесплатном руководстве по мокапам, помните следующие советы:

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

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

Далее мы посмотрим, какие конкретные поля обрабатывает макет.

Присоединяйтесь к лучшим дизайнерам мира, использующим UXPin.

Анатомия мокапа

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

• Макет содержимого — Как отображается содержимое, например F-образный или Z-образный узор, карточки или текст. Вы также должны учитывать размер каждого фрагмента контента и то, сколько вы хотите разместить на экране за раз.

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

• Использование цвета — Цвета вызывают различные эмоции, и их эффекты меняются в зависимости от окружающих цветов. Вы можете ознакомиться с бесплатной электронной книгой «Дизайн веб-интерфейса для человеческого глаза» (том 1) для получения более подробной информации.

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

3 типа мокапов

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

Программное обеспечение для графического дизайна

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

Обратной стороной является то, что эти программы не позволяют добавлять взаимодействия к вашим макетам (поэтому мы решили интегрировать их с Photoshop и Sketch).

Фотография предоставлена: Превращение мокапов Photoshop в интерактивные прототипы

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

Мокап приложений

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

Фотография предоставлена: Создание быстрых каркасов и мокапов

Код

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

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

Присоединяйтесь к лучшим дизайнерам мира, использующим UXPin.

Сотрудничество с разработчиками над мокапами

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

• Объясняйте детали, используя атомарный дизайн — Атомный дизайн Брэда Фроста разбивает все на мелкие компоненты, чтобы вы могли лучше донести свои идеи.

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

• Понимание основ разработки — Веб-дизайн — это не изолированность. Знание основ работы других отделов — не только разработки, но и маркетинга, продаж, исследований и т. Д. — просто создает лучший проект. Если вы немного знаете, чем занимаются разработчики, вы сможете более продуктивно поговорить о том, что находится в макете.

Дополнительные советы по совместной работе можно найти в бесплатном карманном руководстве «Создание макетов пользовательского интерфейса, которые разработчики не будут ненавидеть».

Дополнительная консультация

Для более тщательной обработки макетов, а также макетов и прототипов, загрузите бесплатный пакет UX Design Builder’s Bundle.

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

Вы также получаете Руководство по каркасному построению и Окончательное руководство по прототипам в общей сложности 350 страниц. Совет основан на реальных примерах таких компаний, как Google Venture, Apple и других.

Присоединяйтесь к лучшим дизайнерам мира, использующим UXPin.

Как создать макет вашего дизайна

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

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

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

Именно поэтому мы создали это руководство, чтобы помочь вам понять концепцию, технические особенности и подводные камни, связанные с проектированием макетов.

Начните создание макета на ранней стадии процесса проектирования

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

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

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

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

Выберите лучшие инструменты для создания макета

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

Для начала грубое наложение с использованием параметра «Наклон» («Правка»> «Преобразование> Наклон»), чтобы подогнать дизайн к трехмерному объекту, может быть полезно для первого этапа проверки работоспособности дизайна, читабельности текста и изображение не искажается формой товара. Изложив основы, вы можете перейти к более сложным инструментам, чтобы создать убедительный макет.

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

• Сначала сделайте свой дизайн смарт-объектом («Слой»> «Смарт-объекты»> «Преобразовать в смарт-объект»).Это сохранит исходный контент исходного изображения, что позволит вам легко заменить один дизайн на другой и повторно использовать шаблон макета для будущих проектов. Узнайте больше о смарт-объектах здесь.
• Используйте инструменты трансформации, чтобы вращать, наклонять и правильно размещать дизайн на желаемом изображении.
• Выберите режим наложения в верхнем левом раскрывающемся меню на панели «Слои», чтобы имитировать освещение и текстуру (какой из них вы выберете, будет зависеть от изображения в вашем конкретном документе — умножение и наложение, как правило, хорошие варианты).
• Дополнительные методы, такие как рисование, фильтры настройки и эффекты Photoshop, такие как «Пластика», сделают ваш макет более убедительным в зависимости от типа создаваемого макета. Посмотрите это видео, чтобы получить подробное руководство по некоторым из дополнительных инструментов!

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

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

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

Сделайте презентацию центром вашего макета

Не вводите макет в заблуждение

Важно показать дизайн различными способами, но начните с плоского изображения дизайна, чтобы клиент знал, как будет выглядеть фактический файл дизайна. Как только вы это сделаете, не стесняйтесь переходить к 3D-рендерингу конечного продукта с дизайном.

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

Сделайте конкретный макет

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

Эти макеты служат для того, чтобы дизайны выглядели 3D, но они ничего не говорят своим потенциальным клиентам, кроме отсутствия мышления о бренде. Очень легко поменять один дизайн на другой, одну компанию на другую. Здесь нет глубины, только рисунки на стенах, которые могут быть в любом здании и где угодно.Каждая компания имеет богатую, уникальную культуру, и эффективный макет расширяет возможности этой культуры, показывая, как в нее вписывается новый дизайн. Когда ваш клиент смотрит на ваш макет, он должен сказать: «Это мы. Вот кто мы. Это то, что нам нужно ».

Сравните их с дизайном Lalu Academia Des Artes справа и обратите внимание, насколько более эффективно настроенный макет передает, как дизайн будет выглядеть на стене клиента.

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

Состав отличного макета презентации

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

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

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

Дизайн макета — это начало разговора, а не конец

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

Макет — это способ для всех, кто участвует в проекте, увидеть, куда он движется, и при необходимости перенаправить его. Цель не обязательно заключается в том, чтобы предоставить что-то, что клиент с энтузиазмом одобрит без изменений (хотя это приятно, когда это происходит!), А в том, чтобы начать разговор, который приведет вас к версии дизайна, которая соответствует тому, что они ищут. для.Сильные макеты делают возможной продуктивную беседу.

Графический дизайн — твоя пробка?

Зарегистрируйтесь как дизайнер на 99designs и присоединяйтесь к нашему глобальному творческому сообществу!

Каркас, макет, прототип — в чем разница

Введение

Вы часто слышите такие термины, как sketch , wireframe , mockup и prototype при работе с компанией, занимающейся веб-разработкой, но действительно ли вы понимаете, что означают эти термины? Вы бы знали, когда использовать каркас, а когда — прототип?

Давайте начнем с причин, по которым вам следует начинать с эскиза, каркаса, макета или даже прототипа:

1. Чтобы провести мозговой штурм или выяснить, что вы хотите построить.Они созданы, чтобы помочь вам определить свои ожидания.
2. Сэкономьте деньги на разработчиках и четко опишите, что вам нужно для сборки.
3. Используйте их, чтобы привлечь инвесторов, первых клиентов и соучредителей.

При общении с командой разработчиков важно понимать эти термины.

Исходя из нашего опыта, 2-3 звонков и примерно 2,5 часа бизнес-анализа необходимы, чтобы определить, что именно нужно построить.В то время как создание макетов для простого мобильного приложения занимает минимум 5-8 часов.

Как выглядит процесс разработки приложения?

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

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

В чем разница между эскизом, каркасом, макетом и прототипом?

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

Мой любимый инструмент для этого: Ручка и шаблоны на бумаге.

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

Мой любимый инструмент для этого: Balsamiq

В Brainhub мы никогда не начинаем создавать приложение, пока не закончены макеты. С таким представлением вы можете начать работу над процессом разработки, а разработчик сможет воплотить ваши макеты в реальность. Любой макет обеспечит изображение средней точности.Добавьте цвета, шрифты, текст (Lorem ipsum), изображения, логотипы и все остальное, что будет формировать ваш каркас. Ваш результат — статическая карта приложения. Подумайте о практике пользовательского интерфейса при формировании этого шага. Если у вас нет возможности перенести макеты на следующий этап, просто передайте это на аутсорсинг.

Мой любимый инструмент: Sketch

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

Получите обратную связь от своих клиентов с помощью прототипа и измерения.

Мой любимый инструмент для этого: UXPin

Дополнительные ресурсы:

• Презентация UXPin по той же теме -> здесь,
• Проницательное обсуждение на Quora разницы между каркасом, макетом и прототипом -> здесь,
• Еще одно обсуждение той же темы -> здесь.

Одна картинка — это больше тысячи слов. Ниже вы можете увидеть основное различие между каркасами и мокапами .

Что такое мокап и для чего он нужен?

Определение

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

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

Отличие от каркаса и прототипа

Хотя термины «каркас», «прототип» и «макет» часто используются как синонимы, это независимые концептуальные инструменты.Это три различных типа или стадии проектирования, которые выполняются перед фактическим программированием.

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

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

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

Применение макетов

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

Преимущества мокапов

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

Инструменты для создания макетов

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

Скриншот инструмента создания макетов сайта moqups.com.

Самыми известными инструментами создания макетов для веб-сайтов и приложений являются:

• Бальзамик
• Панцирь
• Поп
• РамаAPP
• мокапы

Ссылки по теме

Похожие статьи

Что такое мокапы? | Школа кодов викингов

Мы уже говорили о мокапах, но пора уделить им более тщательное внимание.

По сути, макет — это просто набросок, который представляет, как будет выглядеть сайт:

Это означает, что потребует наименьших усилий, чтобы дать вам наиболее полезный взгляд на то, что вы собираетесь строить.

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

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

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

Небольшие затраты времени на изучение этого навыка в несколько раз сэкономят его в будущем.

Верность

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

Верность — это мера того, насколько близок ваш макет к конечному продукту. Мокап с низкой точностью — это, по сути, простой набросок:

Высококачественные макеты, подобные тем, которые сделаны в фотошопе, в основном представляют собой идеальные по пикселям изображения окончательного сайта:

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

Вайрфреймы против мокапов против прототипов

Стоит прояснить еще одну распространенную путаницу. Люди часто используют термины «каркас», «макет» и «прототип» как синонимы, но они представляют разные вещи.

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

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

Читать вайрфреймы, прототипы, макеты — в чем разница? № от Marcin Treder из DesignModo за хорошее рассмотрение различий между этими вещами.

Прочитали. Вы не путали каркасные модели с мокапами? от Creately для более четкого различия между ними.

В нашем случае мы немного стираем границы между макетами и прототипами — большая часть того, что мы производим и используем, будет статическим представлением конечного продукта (классический вариант макета), но мы также будем указывать взаимодействие пользователя с нашим дизайном, который начинает немного больше относиться к территории «прототипов».

Дело здесь не в том, чтобы теряться в терминологии, а просто делать то, что работает. Вы заметите различия, если проведете больше времени в отрасли.

Как мы используем мокапы

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

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

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

Вы можете вспомнить из предыдущего мини-курса, что наш высокоуровневый процесс создания сайтов выглядит примерно так:

1. Определите пользователя и его цели
2. Создание макета сайта, который выполняет эти задачи
3. Разбейте макет на отдельные части («истории»)
4. Для каждой истории начните с макета ее конечного результата (например, конкретной функции) и создайте инфраструктуру данных, серверную часть и интерфейсную часть, необходимые для ее фактического создания.
5. Проверить, рефакторинг и отгрузить.

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

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

каркасов и мокапов | Lucidchart Blog

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

Но большинство проектов начинаются с гораздо более простого масштаба.

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

Каркасные модели, макеты и прототипы

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

• Каркасы
• Мокапы
• Прототипы

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

Что такое каркас?

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

Цель каркаса — быстро и легко общаться:

• Содержимое страницы
• Структура и макет страницы
• Функции приложения

Другими словами, каркас описывает базовую структуру, функции, и содержание страницы.

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

Что такое макет?

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

Хороший способ думать об этом — это то, что каркас — это план, а макет — это визуальная модель.

Макет обычно включает дополнительные визуальные детали, такие как:

• Цвета, стили, графика и типографика
• Стилизованные кнопки и текст
• Графика навигации
• Расстояние между компонентами

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

Что такое прототип?

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

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

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

Дизайн с высокой точностью и с низкой точностью

Прежде чем мы сможем погрузиться в различные уровни каркасного дизайна, нам необходимо понять дизайн low-fi и high-fi.

Fidelity описывает уровень детализации и реалистичности дизайна. При создании каркаса или макета уровень точности может варьироваться от простого наброска на бумаге (низкая точность) до более подробного — и даже интерактивного — приложения (высокая точность).

Ниже мы разберем эти подходы к проектированию.

Что такое каркас с низкой точностью воспроизведения?

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

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

Когда использовать каркасные модели с низким качеством изображения

Каркасные модели с низким уровнем достоверности (low-fi) — это быстрый и простой способ визуализировать основные концепции и планы дизайна. Используйте низкокачественные каркасы для определения визуальных и типографских иерархий, планирования взаимодействий, навигации и переходов, а также для организации структуры интерфейса приложения.

Преимущества

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

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

• Fast: Вы можете создать низкокачественный каркас за считанные минуты, что позволит вашей команде набросать и сравнить несколько идей за один присест. Низкокачественные каркасы — это больше о контуре, чем о деталях, поэтому вы можете использовать заполнители и простой текст для быстрой и эффективной передачи ваших идей.

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

Итак, когда следует использовать каркас с низким качеством изображения?

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

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

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

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

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

Что такое высококачественный каркас?

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

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

Когда использовать высококачественные каркасы

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

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

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

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

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

Легко и наглядно составляйте карты и создавайте приложения на Lucidchart. Благодаря пользовательскому интерфейсу, iOS, Android и другим формам макетов, а также слоям и действиям, которые сделают ваш дизайн интерактивным, наше визуальное рабочее пространство поможет вам в кратчайшие сроки наметить низкокачественные каркасы.

Вайрфреймы против мокапов: что лучше?

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

Каркасы веб-сайтов — это низкокачественные, «голые» чертежи, обычно представляемые с заполнителями для окончательного содержания, которые необходимо заполнить на более позднем этапе цикла разработки.

Создавайте макеты и макеты за считанные минуты с Justinmind

Wireframes призваны помочь представить, что происходит в дизайне, без того, чтобы команде дизайнеров приходилось тратить слишком много времени на детали.

Зачем нужен каркас?

Визуализируйте общий макет веб-сайта или приложения

Говорят, что картинка стоит 1000 слов, поэтому мы в первую очередь создаем каркас. Читать все спецификации будущего веб-сайта — это боль, и удивительно, что мы вообще это сделали.

Даже с очень «схематичным» каркасом каждый сможет увидеть, как будет выглядеть будущий дизайн. Да, и каркасные модели проясняют ситуацию! Они могут помочь нам организовать и поделиться своими идеями, а также избежать недопонимания.

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

Постройте доверительные отношения с пользователем и заинтересованными сторонами

Важно убедить пользователя в том, что он находится там, где хочет.Мы должны сообщить им, что они находятся в нужном разделе страницы (с помощью панировочных сухарей, цвета или других наглядных пособий).

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

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

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

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

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

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

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

Почему бы вам не создавать каркасные модели?

В некоторых случаях клиент может не полностью понять суть каркаса или просто не согласен с основными целями, что не является отличным началом!

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

Бумага и цифровые каркасы

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

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

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

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

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

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

Считайте разработчиков в своей команде. Учитывая их знания и навыки, у них, вероятно, не возникнет проблем с логикой в ​​вашем бумажном каркасе.

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

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

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

Введение в макеты

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

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

Как объясняет Марсело Грасиолли: «Хотя макет способствует достижению цели каркаса по документированию и организации видения команды, он имеет дополнительное преимущество, которого нет у каркаса: с его превосходной визуализацией макет более полезен для заинтересованных сторон и инвесторов».

По сути, макет добавляет визуального богатства фундаменту, заложенному каркасом.

Упорядочивание деталей проекта

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

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

Мокапы гибкие, и это упрощает итерацию.Подобно работе с каркасом, макеты позволяют легко и быстро вносить изменения, которые могут складываться довольно быстро, поскольку они не требуют кода или программирования.

Перевод идей на язык заинтересованных сторон

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

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

Здесь макет размещен на каркасе, обеспечивая язык, на котором все могут общаться и понимать.

Обмен идеями между членами команды

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

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

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

Взгляд пользователя

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

Почему не стоит использовать мокапы?

Критика макета проистекает из того, что он требует значительного времени и ресурсов для создания чего-то, что затем нужно будет разобрать и собрать во время разработки.

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

Инструменты для создания макетов и каркасов теперь становятся более ориентированными на пользователя.Таким образом, они не должны быть ограничены такими ролями, как IA (информационный архитектор) или UX-дизайнеры. Вайрфреймы принадлежат всем.

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

Как насчет компромисса? Высококачественные макеты экрана

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

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

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

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

Наличие чего-то, по чему пользователи могут перемещаться и нажимать, принесет много ценных отзывов по всем аспектам макета.

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

Уравновешивание инвестиций и вознаграждения

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

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

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

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

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

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

Зачем нужны макеты экрана High-fidelity?

• Ускорить сквозное концептуальное проектирование
• Снизить риск дальнейшего изменения требований клиентами
• Улучшить общение и понимание между разными членами команды.
• Тестирование непосредственно с использованием макета hi-fi экрана

И помните: никогда не создавайте каркасы или макеты веб-сайтов или мобильных приложений без ведома пользователя. Задавайте им вопросы, работайте в фокус-группах, задавайте вопросы и создавайте опросы.