Mock up это: определение, особенности и принципы создания

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

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

Эскиз

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

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

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

Прототип

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мокап (mock-up) в реставрационной стоматологии: дань моде или необходимость, которая даст лучший результат (2496) — Терапия — Новости и статьи по стоматологии

Меня часто спрашивают — зачем я делаю прямые мокапы?

Мокап для меня — это 50% успеха, поскольку:

1. Это возможность отработать цвет и форму до начала чистовой реставрации.

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

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

4. Я могу отсылать технику оттиски на ваксап, но… это займет не меньше недели, а я на мокап 1 зуба затрачиваю от 5 до 20 минут в зависимости от сложности ситуации.

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

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

7. При непрямых (керамических) реставрациях технику остается лишь скопировать мокап по оттиску и не ломать голову над моделировкой.

Клинический случай

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

Прямой композитный мокап в течение 2,5 часов, во время которого мы выбрали оттенок из трех предложенных мной, отработали форму и размер передних зубов, выровняли центральные резцы по вестибулярной поверхности (правый был выдвинут вестибулярнее), вывели вертикаль и горизонт. И все это без препарирования зубов!

После мокапа изготовил депрограммер Койса.

Через три недели избирательное пришлифовывание суперконтактов, преп под керамические виниры, замена металлокерамических мостовидных конструкций во 2 и 3 квадрантах. Далее — имплантация в 1 и 4 квадрантах. Нижние передние зубы отбелим.

Фотоотчет работы

вверх | Определение макета Merriam-Webster

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

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.

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

Введение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Определение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что такое мокап? (+ Как создать макет в 2021 году)

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

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

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

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

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

Полезно разбить каждую часть этого определения.

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

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

Для чего нужны макеты?

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

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

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

Каким образом мокапы используются в процессе веб-дизайна?

С точки зрения этапов, мокапы находятся примерно в середине процесса веб-дизайна. Что касается времени, они все еще находятся на ранней стадии проектирования.

Свободный процесс проектирования выглядит так:

• Идея
• Каркас
• Макет
• Прототип
• Запуск

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

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

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

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

Есть несколько важных отличий, которые помогут вам сохранить четкость вайрфреймов и мокапов:

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

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

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

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

Вот более подробное описание каркасов и мокапов и их основных различий.

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Определение мокапа, что это такое и нужно ли расставлять дефисы?

Наиболее распространенное определение макета — это черновик готового продукта или визуально визуализированное представление готового продукта.

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

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

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

Происхождение мокапа

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

Следует ли переносить макет через дефис?

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

Пример предложений с использованием мокапа

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

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

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

Переработка определения мокапа

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

Определение макета в публикации

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

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

Похожие записи