Mock up (мокап). Зачем нужен и как его сделать?

«Мокап» – это узкоспециальный термин, которым пользуются в основном дизайнеры. В прямом значении слово мокап означает макет. С его помощью профессионал создает трехмерную визуализацию чего угодно, например упаковки или полиграфии. Часто он используется в рекламе. Простой пример: сеть быстрого питания «Макдональдс». Аппетитный гамбургер на изображении – не фотография, а визуальная идеализация того, что хочется купить и съесть. Если предлагаемый товар находится внутри среды, то смотрится лучше и выгоднее, чем обычный скриншот (снимок).

Что это?

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

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

Зачем он нужен?

Мокапы нужны профессиональным дизайнерам, фрилансерам, художникам, которые трудятся на заказ и создают удивительно красивые работы. Позже они презентуются клиенту в лучшем виде. Мокап создается с целью продемонстрировать историю картинки или надписи, которая улучшает продукт и помогает покупателям сделать выбор в его пользу. Технически мокапы – PSD-файлы с редактируемыми смарт-объектами (слои в программе «Фотошоп», которые позволяют вставить дизайн в нужное место). Мокапами могут быть и фотографии. Например: блокнот, лежащий на столе, или визитка. Мокап можно сделать самостоятельно, купить или бесплатно скачать готовый.

Как его создать?

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

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

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

Сферы применения

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

Мокап сайта

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

Каркас сайта создается в черно-белом цвете, что позволяет разработчику наметить расположение главных элементов: логотипа, меню, контента, рекламных блоков. После каркаса дизайнер разрабатывает прототип сайта: цвет и стиль. На помощь приходят одиннадцать полезных инструментов. Они выручат при создании всех деталей сайта. Обратите внимание на программы InVision, UXPin, Marvel App, Gliffy, OmniGraffle, Moqups, Axure, JustinMind, Mockingbird, HotGloo, Mockplus.

Например, Mockplus – простой инструмент дизайнера. Он помогает создать каркас, перейти от черно-белого варианта к цветному. Данный инструмент позволяет использовать более двухсот компонентов, которые намного упрощают создание сайта. На помощь дизайнеру приходят и другие программы. С их помощью легко создавать элементы сайта, прорабатывать детали, учиться. Самый распространенный и простой способ получить навыки – сделать мокап визитки.

Графический редактор

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

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

Легкий и популярный вариант среди новичков – это мокап визитки. Откройте скачанный файл, надпись и текст. Перейдите к готовому мокапу, нажмите на значок «Смарт-объект» (это должно быть изображение визитной карточки), выберите в меню «Редактировать содержимое». В новой вкладке откроется объект, готовый для изменения. Далее активируйте созданную надпись или текст и перенесите на поверхность визитки. Надпись можете трансформировать, поменять размер, выбрать наиболее подходящее место ее расположения. Сохраните проект.

Источники

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

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

Вайрфреймы, прототипы и мокапы — Проекторат

В работе UX-проектировщика часто встречаются слова wireframe, prototype и mockup. Опытные коллеги, конечно, в курсе, чем отличается одно от другого и для чего используется. А для новичков и непросвещённых разработчиков и менеджеров мы перевели ту часть статьи Wireframing, Prototyping, Mockuping — What’s the Difference, где всё это объясняется.

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

Wireframe

Что такое вайрфрейм?

Вайрфрейм — это низко детализированное представление дизайна. Он чётко должен показывать:

• Основные группы содержимого. Что?
• Информационную структуру. Где?
• Описание взаимодействия пользователя с интерфейсом и его примерную визуализацию. Как?

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

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

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

Внешний вид должен быть эстетичным, но очень простым. Чёрно-серо-белый — типичная палитра вайрфрейма (вы можете добавить синий, чтобы обозначить ссылки).

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

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

Когда использовать вайрфреймы?

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

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

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

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

Prototype

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

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

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

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

Когда использовать прототип?

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

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

Учтите, что прототипирование — это довольно дорогостоящая и длительная форма разработки и обсуждения дизайна. Я рекомендую создавать прототипы, которые потом можно повторно использовать при разработке (да, это значит, что вам придётся кодить HTML, CSS и, возможно, JS). Это особенно эффективно в относительно простых проектах.

Если всё сделано правильно, то в сочетании с юзабилити-тестированием прототипирование себя окупит.

Mockup (mock-up)

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

Мокап — это средне или высоко детализированное статичное представление дизайна. Очень часто мокап — это черновик дизайна или даже фактический дизайн-макет. Хороший мокап:

• Представляет информационную структуру, визуализирует контент и демонстрирует базовую функциональность в статике;
• Поощряет оценку визуальной стороны проекта.

Мокапы часто путают с вайрфреймами из-за названий таких программ как Mockingbird, Mockup Builder, Balsamiq Mockups.

Когда использовать мокап?

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

Делиться хорошо!

Мокап — это… Что такое Мокап?

Мокап (Mokap)
Место рождения	Земной Мир
Появления	Mortal Kombat: Deadly Alliance Mortal Kombat: Armageddon
Раса	человек
Боевые стили	Тай Чи (MK:DA) Карате (MK:DA) Таэ Квон До (MK:DA) Джит Кун До (MK:A) Вин Чун (MK:A)
Оружие	нет
Мировоззрение	добро
Актёры	компьютерная модель

Мокап (англ. Mokap) — впервые появился в Mortal Kombat: Deadly Alliance в качестве секретного персонажа. Он актёр захвата движения (Motion capture) с обширным знанием восточных единоборств.

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

Сюжет

Mortal Kombat: Deadly Alliance

Бывший учитель восточных единоборств из северной части Чикаго, человек, которого все называют просто «Мокап», был вызван Джонни Кейджом для участия в съёмках фильма «Mortal Kombat: Deadly Alliance». Мокап отправился в Голливуд, чтобы начать первую сессию записи движений состоящую в основном из приёмов стилей Журавля и Змеи (хотя ни тот, ни другой стиль Мокап в играх не использовал).

[1]

Mortal Kombat: Armageddon

В своём окончании в MK: A: Мокапу удалось победить Блейза. Но взрыв от уничтожения элементаля уничтожил всех, кто присутствовал в битве около пирамиды Аргуса. Мокап был разорван на части, а его душа отправилась на небо Эдении, став созвездием, которое стали называть «Мокап». Легенда о воине спасшем Эдению от Армагеддона будет жить вечно. ^[2]

Спецприёмы

• Огненный шар: Мокап запускает пылающий снаряд в своего оппонента. (MK:DA)
• Магический подъём: Мокап использует телекинез, чтобы поднять противника в воздух и потом швырнуть его о землю. (MK:A)
• Таранный удар / Мощные руки: Мокап подкатывается к оппоненту и наносит мощный удар рукой, в МКА *Мокап использует во время удара обе руки. (MK:DA, MK:A)
• Кувырок / Удар лебедя’ Мокап делает кувырок на 360° градусов. В МКА белая полоса следует за этим ударом. (MK:DA, MK:A)
• Свет, Камера, Мотор: Мокап поворачивается и выстреливает белым снарядом в противника. (MK:A)

Интересные факты

• Мокап был добавлен в
  MKDA в самом конце разработки игры, поэтому у него нет собственных стилей, оружия, спецприёмов или добиваний.
• Мокап — это своего рода посвящение Карлосу Песине — актёру, который в классических игра серии исполнял роль Рейдена, а с переходом серии в 3D стал постоянным актёром захвата движения на съёмках.

Примечания

Ссылки

• Официальные сайты игр:
• Вики-проект Mortal Kombat
• Ссылки на статьи

Mortal Kombat
Основные игры	Mortal Kombat · Mortal Kombat II · Mortal Kombat 3 · Mortal Kombat 4 · Deadly Alliance · Deception · Armageddon · Mortal Kombat (2011)
Аддоны и порты	Ultimate Mortal Kombat 3 · Trilogy · Gold · Advance · Tournament Edition · Unchained · Arcade Kollection
Аркадные игры	Mythologies: Sub-Zero · Special Forces · Shaolin Monks · MK vs. DCU
Кино и телевидение	Смертельная битва · Истребление · Господство · Завоевание · Перерождение · Защитники Земли · Путешествие начинается · Наследие
Персонажи	Ашра · Барака · Блейз · Бо Рай Чо · Горо · Дайро · Дарриус · Джакс · Джейд · Джерек · Джонни Кейдж · Драмин · Дэйгон · Кабал · Кай · Камелеон · Кано · Кинтаро · Кира · Китана · Кобра · Куан Чи · Кун Лао · Кэнси · Ли Мэй · Лю Кан · Мавадо · Милина · Мокап · Молох · Мотаро · Мясо · Нитара · Ночной Волк · Нуб Сайбот · Онага · Райдэн · Рейн · Рептилия · Рэйко · Саб-Зиро · Сайракс · Сарина · Сектор · Синдел · Скарлет · Скорпион · Смоук · Соня Блейд · Страйкер · Су Хао · Сюдзинко · Таня · Тэйвен · Фрост · Фудзин · Хамелеон · Хотару · Хавик · Шан Цзун · Шао Кан · Шива · Шиннок · Эрмак
Создатели	Эд Бун · Джон Тобиас
Прочее	Fatality · NetherRealm Studios
Категории: Персонажи Mortal Kombat Вымышленные актёры Wikimedia Foundation. 2010. Мокану, Спиридон Спиридонович Мокашево (Вологодская область) Полезное Смотреть что такое «Мокап» в других словарях: Список персонажей Mortal Kombat — …   Википедия Mortal Kombat: Deadly Alliance — Разработчик Midway Издатель Midway Дата выпуска …   Википедия Mortal Kombat: Armageddon — Разработчик Midway (Xbox, PS2) Just Games Interactive (Wii) Издатель Midway …   Википедия Список рас Mortal Kombat — Список известных рас вселенной Mortal Kombat Раса Представители Люди Кунг Лао, Соня Блэйд, Кано, Джакс, Кай, Кабал, Джонни Кейдж, Кенси, Кира, Кобра, Мавадо, Хсу Хао, Страйкер, Шуджинко, Джерек, Ночной Волк, Мокап, Шанг Цунг Призраки Скорпион …   Википедия Смертельная битва (фильм) — У этого термина существуют и другие значения, см. Смертельная битва. Смертельная Битва Mortal Kombat …   Википедия Mortal Kombat (серия) — Mortal Kombat Жанр Файтинг Разработчики Midway Из …   Википедия Sibilant Interactive — российская компания разработчик компьютерных игр. С момента своего основания весной 2005 года компания постоянно растет и расширяется. Сейчас штат сотрудников Sibilant Interactive насчитывает более 70 специалистов. На данный момент прекращена… …   Википедия Милена (Mortal Kombat) — Mileena (Милина) Место рождения Внешний мир Появления Mortal Kombat II Ultimate Mortal Kombat 3 Mortal Kombat Trilogy Mortal Kombat Gold Mortal Kombat Advance MK: Decepti …   Википедия Таня (Mortal Kombat) — Tanya (Таня) Место рождения Эдения Появления Mortal Kombat 4 Mortal Kombat Gold MK: Deception MK: Unchained MK: Armageddon Раса …   Википедия Mortal Kombat II — Разработчик Midway Издатель Midway …   Википедия

Что такое вайрфрейм, мокап и прототип

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

Чтобы разобраться, мы поговорили с UX/UI-дизайнером Олей Черненькой. И по ее видению составили Q&A-гайд, который объяснит разницу между этими понятиями.

Зачем нужны макеты?

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

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

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

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

Посмотреть курс

 

Что такое вайрфрейм?

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

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

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

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

Источник: проект Эдиты Яблонска, dribbble.com

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

Источник: проект Адама Калина, dribbble.com

Время создания: низкодетализированный можно нарисовать за несколько минут, высокодетализированный — за 1-2 дня.

Где создается: для низкой детализации достаточно бумаги и карандаша, для высокой — любого графического или векторного редактора (Sketch, Figma).

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

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

Мокап можно презентовать как статичный макет в формате JPG или как макет, сделанный с помощью InVision, Sketch Cloud, Figma Preview Mode. 

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

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

Источник: проект Tran Mau Tri Tam, dribbble.com

Время создания: первая страница занимает 2-4 дня. Дальше — когда уже знаешь, в какой стилистике работать — процесс идет быстрее.

Где создается: Sketch, Figma, Adobe XD.

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

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

Источник: проект Арио Памунгкаса, dribbble.com

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

Время создания: если дизайн-концепция готова, остается только пролинковать страницы — на это уходит 1-2 дня. Иногда этап мокапа пропускают и делают прототип на основе детализированных вайрфреймов.

Где создается: Sketch, Figma, Adobe XD, Invision.

Лайф/тайм-сейверы в разработке макетов 

#1. Задавай вопросы на старте. Если на этапе постановки задачи понимаешь, что чего-то не понимаешь, — не стесняйся, спрашивай. Лучше уточнить в самом начале, чем потратить время, сделать неправильно — и вернуться в исходную точку.

#2. Общайся с командой в процессе работы. Не закрывайся — держи коллег по проекту в курсе, показывай сырые макеты, обсуждай спорные моменты. Так будет меньше шансов отклониться от общего видения продукта.

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

Mockup vs высокодетализированный прототип: что выбрать для проекта

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

И mockup, и высокодетализированные прототипы относятся к визуальному уровню проектирования.

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

Mockup — мокап — это визуальный прототип, который показывает основную структуру страницы и основные UI элементы на ней.

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

Рекомендуем:UX-прототипирование стартапов. Основные этапы

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

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

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

Что такое высокодетализированный прототип

Высокодетализированный (high fidelity) прототип – это вид прототипа, который повторяет весь функционал сервиса, сайта, приложения. В нем нарисованы абсолютно все элементы в нужных размерах, реализованы (промоделированы) все ключевые функции.

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

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

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

Пример высокодетализированного high fidelity прототипа

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

Можно ли прототипировать сразу в коде?

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

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

Материалы по теме:Почему нужно обновлять UI сайта каждые 5 лет?

Но есть проекты, для которых это хорошо. Например при проектировании стартапов. И на то есть причина: возможность сделать так, как не было ни у кого ранее. В то же время хорошей практикой для стартапа, целью которого не является визуальная новизна, будет взять UI-kit под ваш любимый frontend-фреймворк (например такой, как Vuetify) и дальше делать всё на нём.

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

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

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

В своей работе мы используем проверенные опытом UX-подходы, такие как поведенческая модель Б. Дж. Фогга, модель Нира Ейяла для создания пользовательской привычки и постоянное тестирование.  

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

04.06.2019

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

Бесплатные мокапы и инструменты для дизайна

Опубликовано: 2021-09-16

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

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

Умные объекты — это очень круто. Если вы когда-либо уменьшали изображение в фотошопе, а затем растягивали его до большого размера, вы, вероятно, получили «пиксельную» историю, потому что Photoshop искажает файлы.

То же со шрифтами и эффектами. Во избежание этого стоит превратить все элементы в смарт-объекты. Чтобы создать смарт-объект, откройте любое изображение в Photoshop. Затем преобразуйте фоновый слой в нормальный, дважды щелкнув по нему и нажав ОК, или создав его дубликат, нажав комбинацию клавиш Ctrl + J. Затем щелкните правой кнопкой мыши преобразованный / дублированный слой и выберите «Преобразовать в смарт-объект» в контекстном меню. После того, как вы это сделаете, на миниатюре слоя появится небольшой значок, что означает, что слой является смарт-объектом.

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

Смарт-объекты редактируются как отдельный файл в отдельном окне (создается временный файл .psb, который прикрепляется к основному файлу). Изменение и сохранение этого файла приведет к изменению основного изображения.

Использовать мокапы очень просто.

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

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

После этого закройте это окно, выбрав «Да», когда вас спросят, хотите ли вы сохранить его.

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

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

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

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

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

Adobe Photoshop поможет создать такие мокапы, так как эта программа больше всего подходит для этих целей.

Где я могу найти стоковые фотографии?

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

Что нужно учитывать при выборе изображений:

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

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

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

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

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

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

Как использовать мокап? Вот 3 простых шага.

Шаг 1. Поиск и загрузка

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

.psd файл, который является исходным файлом, который вы редактируете.

.jpg файл, предварительный просмотр шаблона в действии

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

Шаг 2. Откройте и найдите смарт-объект

Разархивируйте файл и посмотрите, что внутри. Как упоминалось ранее, вы найдете предварительный просмотр .jpg, исходный файл .psd и некоторую документацию по продукту.

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

Следующий шаг — найти смарт-слой и открыть его.

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

Шаг 3. Разместите свой контент

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

Просто замените содержимое, которое вы только что открыли, желаемым изображением. Нажмите кнопку «Сохранить», как только закончите. Теперь вернитесь к исходному файлу PSD, и все изменится автоматически.

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

FAQ про мокапы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

Мокап | Определенный дизайн | InVision

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

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

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

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

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

В двух словах:

• Каркас: структура и функциональные требования (статические)
• Мокап: каркас, но с визуальным оформлением (статический)
• Прототип: макет, но с взаимодействиями (динамический)

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

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

Структура

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

Структура разрабатывается на этапе создания каркаса, но представлена ​​в виде макета.

Содержание

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

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

UI

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

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

Поверхность

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

Различные типы мокапов

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

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

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

Мокапы веб-сайтов

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

Что такое мокап и зачем он нам

Оксана ПлетенUI / UX дизайнер

Давайте ответим на ваши самые частые вопросы «Что», «Как» и «Почему» о макетах

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

Зачем мне это знать?

Многие владельцы продуктов склонны считать, что фронтенд-разработчик — это человек, который будет заботиться о «ощущении» и «внешнем виде» приложения. Это правда, но они позаботятся о инженерной части, а не о фактическом выборе цветов, форм и шрифтов. Большинство разработчиков не одобряют такие запросы. Таким образом, когда вы пишете сообщение о вакансии «Ищете фронтенд-разработчика с хорошими навыками UI / UX», вы упускаете суть.Чтобы получить элегантное и удобное приложение, вам нужно обратиться к экспертным услугам по дизайну пользовательского интерфейса. Разработчики не будут создавать макет. Дизайнеры сделают это.

---

Итак, давайте посмотрим:

1. Что такое макет?
2. Как создаются макеты?
3. Сколько времени занимает разработка мокапа?
4. Каковы преимущества мокапов?
5. С чем можно спутать макет?
6. Почему это важно?
7. Наконец, как сэкономить на мокапе и когда этого можно избежать?

---

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

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

• Макет содержимого — это способ отображения содержимого на странице или экране. Например, он может следовать диаграмме Гутенберга, компоновке Z-образного или F-образного макета.
• Цветовая схема обозначает оттенки и цвета, которые вы используете в своем проекте. Разные цвета вызывают у пользователя разные эмоции.Поскольку цвета могут влиять на взаимодействие с пользователем и поведение, вам следует выбирать каждый из них с умом. Вы также должны учитывать цветовой контраст, чтобы текст был разборчивым, а элементы были видны.
• Типографика включает типы шрифтов, размеры и стили, интервалы между текстом и выравнивание. Ни один из этих инструментов визуального дизайна не должен затруднять чтение или отвлекать.
• Интервал — это решение, какое пространство оставить пустым, а какое заполнить. Негативное пространство — один из самых мощных инструментов дизайна, который позволяет вам найти идеальный баланс между пустотой и перегруженностью вашей страницы.
• Визуальные элементы навигации — это способ встраивания структуры проекта, которая к этому моменту должна быть уже завершена. Это может быть раскрывающееся меню, боковой или нижний колонтитул или набор стрелок, переключателей и ползунков.
• Другие визуальные элементы включают в себя все, от фоновых изображений и значков до других декоративных элементов.

Например, мы разработали Workbooking , а вот макеты:

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

Как создаются мокапы?

Мокапы создаются в любом программном обеспечении для визуального дизайна, например Sketch , Ad o Photoshop , Figma и других инструментах для создания макетов.

Сколько времени занимает разработка макета?

Каждый дизайнер UI / IX индивидуален. Существует столько же подходов к разработке мокапов, сколько дизайнеров UI / UX. Не существует универсального стандарта верности макета или сроков разработки.Некоторые дизайнеры предпочитают Mobile-First подход, в то время как другие предпочитают Desktop-First. Все нужно уточнять у вашего дизайнера.

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

Прежде чем запрашивать оценку разработки макета, вы должны понимать следующее:

• Сколько страниц или экранов нужно будет нарисовать UI / UX-дизайнеру?
• Есть ли руководство по стилю, которому должен следовать дизайнер или он должен его разработать?
• Какие функции будут у вашего веб-сайта или приложения? Как пользователь перемещается по вашему приложению?
• Какие размеры экрана вам нужны?

Ответ на каждый из этих вопросов определит, сколько времени это займет.

Каковы преимущества мокапов?

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

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

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

С чем можно спутать мокап?

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

1. Каркас

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

2. Прототип

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

3. Конструкция

«Дизайн» — наиболее абстрактное понятие в области дизайна UI / UX. Это и процесс проектирования, и результат проектирования. С одной стороны, дизайн означает процесс, когда дизайнер работает над задачей, поставленной клиентом, и пытается представить свое видение через правильный выбор цветов, форм и шрифтов.С другой стороны, дизайн — это то, как ваше приложение выглядит и работает.

Почему это важно?

• Без макета — без наценки! Front-end разработчики используют мокапы, чтобы оценить, сколько времени займет разработка. Хотя макеты статичны, не забудьте сообщить своим разработчикам, какие части следует двигать или анимировать. Например, если на странице есть несколько ползунков, код займет больше времени, чем если бы это было просто статичное изображение. Если вы не предоставите им макеты, они не смогут дать справедливую оценку.
• Без макета — без HTML кодирования! Мокапы приложений или веб-сайтов для фронтенд-разработчиков похожи на пейзажи для художников: они смотрят на них и воспроизводят. В противном случае они не смогут реализовать нужные вам цвета, формы и шрифты. Что бы они ни делали, это не оправдает ваших ожиданий.
• Нет макета — нет инвесторов! Впечатляющие мокапы часто являются способом покорить сердца своих партнеров и выиграть еще один раунд инвестиций. Если вы продемонстрируете инвесторам свежий вид своего приложения, которое поражает своей уникальностью и элегантностью, средства у вас в кармане.
• Нет макета — нет пользователей! Ваш веб-сайт или приложение должны хорошо выглядеть, если вы хотите, чтобы они нравились вашим пользователям. Он должен быть удобным и интуитивно понятным, чтобы пользователь не потерялся. Если функциональность навигации непонятна, если ее внешний вид сбивает с толку, если она не удобна для пользователя — она ​​не будет работать. Эти недостатки легче всего выявить и исправить на этапе создания макета.

Как сэкономить на мокапе или когда этого можно избежать?

Ни в коем случае не разрабатывать макет. Я сказал ранее, что отсутствие макета означает отсутствие кода. Тем не менее, если ваш веб-сайт или приложение должны быть очень простыми или пользовательский интерфейс и взаимодействие с пользователем не важны, вам необходимо утвердить макеты и передать их разработчикам.

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

Используйте набор UI материалов. Если вы создаете прототип или MVP , и функциональность имеет гораздо большее значение, чем внешний вид, вы можете попросить своего разработчика просто использовать набор UI материалов. Он будет выглядеть довольно стандартно, но аккуратно и аккуратно. Это позволит вам сэкономить от 50 до 4800 долларов в месяц на процессе визуального дизайна.

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

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

Разработайте макет вместе с нами!

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

Что такое мокапы? — Mockuuups Studio

Макет — это реалистичное представление того, как будет выглядеть продукт. Это может быть почти все, что мы используем ежедневно. Это может быть iPhone, iPad, Macbook, Apple Watch или другие смартфоны или планшеты. Макет — это масштабная или полноразмерная модель дизайна или устройства, используемая для обучения, демонстрации, оценки дизайна или рекламных акций. В Интернете можно найти два разных названия — mockup и mock-up, но это один и тот же продукт.

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

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

Gumroad — самая мощная платформа, позволяющая создателям продавать напрямую своей аудитории

Taasky красивый, простой и удобный диспетчер задач

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

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

Mockuuups предоставляют шаблоны Photoshop и Sketch с высоким разрешением для дизайнеров и компаний. Здесь вы можете найти макеты iPhone 5s и iPhone 6 с красивым фоном сзади. Также есть еще несколько серий шаблонов. Studio One — это iPhone 6 и iPad mini, макеты с красивым нейтральным цветным фоном позади.Моя любимая часть сайта — Халява! Каждые несколько недель мы добавляем несколько новых БЕСПЛАТНЫХ макетов для вашего нового проекта или прототипов. Если вы дизайнер-фрилансер и пытаетесь создавать проекты, это действительно полезно.

Давайте посмотрим на несколько примеров макетов iPhone и iPad:

Если вы дизайнер, который работает над большим количеством проектов или работаете в огромной компании, для вас есть одно выгодное предложение. Пакет Mockuuups — все пакеты вместе в одном наборе со специальной скидкой 30%.Вы получите все макеты iPhone и iPad в одном месте. Если сегодня мокапы вам не нужны, вы будете использовать их в будущих проектах.

Идите, скачайте и попробуйте!

Что, почему и как мокапов

Дизайн • UX-дизайн • Дизайн веб-сайтов Jerry Cao • 4 марта 2015 г. • 8 минут ПРОЧИТАТЬ

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

Как обсуждалось в The Guide to Wireframing , макеты, каркасы и прототипы можно спутать друг с другом, что затрудняет поиск точной информации по каждому из них.Однако все они являются неотъемлемыми частями процесса UX-дизайна, поэтому каждой из них следует уделять должное внимание.

Источник: Стенд UX

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

Слово о формулировке

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

Конструктор электронных писем

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

Попробуйте бесплатноДругие продукты

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

1. Каркасные модели

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

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

Источник: Пользовательское тестирование и дизайн

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

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

2. Мокапы

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

Источник: Мокап через UXPin

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

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

3. Опытные образцы

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

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

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

Обычный процесс проектирования начинается с прототипа low-fi (аналогично тому, что делает Apple , создавая сотни ранних прототипов), а затем переходит в высокоточные прототипы. Таким образом, вы получаете преимущества дизайна, ориентированного на клиента, благодаря раннему тестированию (по совету известного предпринимателя Эндрю Чен ) , а также четким спецификациям, продемонстрированным высокой точностью (как объяснил партнер SVPG Марти Кейган).

Источник: UXPin

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

Различия между каркасами и мокапами

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

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

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

Источник: UXPin Low-Fidelity Yelp Design

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

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

Источник: UXPin

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

Не используйте мокапы

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

Источник: UXPorn

Энтони Ценг, главный редактор UX Movement, верит в силу как макетов, так и макетов. По его мнению, дизайн — это «синтез формы и содержания». Каркас описывает основную структуру контента, а макеты представляют видение формы. Таким образом, опытный дизайнер потратит соответствующее количество времени на совершенствование обоих, а это значит, что он будет использовать каркасы и макеты.

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

• Организация деталей — Мокапы могут помочь выявить любые конфликтующие визуальные элементы таким образом, чтобы они отражали окончательный дизайн. Как обсуждалось в Web UI Best Design Practices , мелкие детали, такие как цвет, контраст и визуальные иерархии, должны определяться на стадии макета (где их можно легко изменить) и закрепляться на стадии разработки.
• Реализация проекта — Как работает ваш первоначальный дизайн? С точки зрения удобства использования, макет позволяет протестировать визуальные детали и изменить их до того, как он будет передан в код.
• Погружение в перспективу пользователя — По мере того, как вы добавляете детали в каркас (или, может быть, прыгаете прямо в макет), вы постоянно смотрите и изменяете дизайн, который приближается к окончательному состоянию. Разница небольшая, но важная, поскольку верность мышлению помогает вам принимать дизайнерские решения с точки зрения пользователя.
• Гибкость — Изменения, перенесенные из каркаса, могут складываться довольно быстро, но сделать их в виде макета (сравнительно) легко по сравнению с CSS или HTML.

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

Контекст для мокапов

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

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

Источник: сотрудничество через UXPin

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

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

Еда на вынос

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

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

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

Нравится то, что вы читаете? Подпишитесь на наши главные новости.

Каркас против макета против прототипа

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

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

Как каркасы, макеты и прототипы соотносятся друг с другом?

Это помогает начать с некоторых высокоуровневых определений:

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

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

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

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

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

	Каркас	3
What	Быстрый набросок для передачи высокоуровневой концепции функциональности нового продукта	Реалистичный визуальный дизайн , который напоминает то, как будет выглядеть функциональность нового продукта	Интерактивный моделирование функциональности нового продукта
Цель	Для достижения консенсуса и сбора внутренних отзывов о том, как будут работать новые функции	Для облегчения более детальной критики визуальных элементов и функциональности, чтобы можно было внести изменения 90 693	Для сбора отзывов пользователей, тестирующих реальный опыт
Точность дизайна	Низкая	Средняя	Высокая
структура содержания	Дополнительные визуальные элементы, такие как логотипы, цвета и значки	Конечные интерактивные элементы и навигация
Затраченное время	Низкое	92 Среднее 908	Это черно-белые изображения, которые в значительной степени полагаются на серые поля и текст, чтобы представить, как будет выглядеть продукт. Они отличаются низкой точностью и быстротой создания и часто используются в сеансах мозгового штурма. Создание может быть выполнено с использованием бумаги и карандаша, белой доски или инструмента управления продуктом — и не обязательно, чтобы это делал дизайнер UX. Менеджеры по продукту могут вмешаться, чтобы помочь сориентироваться. Каркасы должны использоваться для достижения консенсуса по основным функциям концепции.Отсутствие визуальных элементов, таких как цвета и логотипы, является преднамеренным, поскольку критика должна быть сосредоточена на том, поможет ли предложенный макет или расположение пользователям, а не на визуальных деталях. Мокап Мокапы поднимают каркасные модели на новый уровень, добавляя варианты дизайна, такие как цветовые схемы, шрифты, значки и элементы навигации. Обычно создается более одного макета, что дает лицам, принимающим решения, множество вариантов для оценки. Фактический контент часто включается, чтобы сделать визуализацию более репрезентативной для конечного продукта.Требуется больше усилий для создания макетов и больше навыков. Дизайнер UX будет использовать цифровое программное обеспечение для создания и представления вариантов. Когда макеты представляются заинтересованным сторонам, рекомендуется более подробная визуальная критика. Реалистичные изображения позволяют легко оценить, что имеет смысл в дизайне с точки зрения пользователей. Сравнение мокапов помогает команде согласовать направление дизайна. Статический характер макетов позволяет легко вносить любые изменения или запросы. Прототип Прототипы разрабатываются, когда необходимо тестирование удобства использования и отзывы пользователей. Прототип будет очень похож на макет, но элементы интерактивности будут добавлены с помощью таких инструментов UX, как InVision и Sketch, а не кода. Таким образом, прототип не будет полностью функциональным, но элементы будут достаточно интерактивными для проверки основных концепций. После разработки прототипы становятся бесценным инструментом для пользовательского тестирования. Возможность увидеть, как реальный пользователь взаимодействует с продуктом или функцией, дает понимание всей команде продукта.После завершения раундов тестирования и внесения соответствующих отзывов прототип передается команде разработчиков для выполнения. Каркасные модели, макеты и прототипы вносят ясность в то, что действительно нужно клиентам, чтобы команды могли создавать продукт, который нравится пользователям. Многие продуктовые группы выбирают специализированное программное обеспечение для управления продуктом, чтобы централизовать продуктовую стратегию, а также создавать визуальные дорожные карты продукта и делиться ими. Такие инструменты, как Aha! включают в себя возможности создания макетов, а также интеграцию с файловыми хранилищами, чтобы команды могли легко получить доступ к последним разработкам вместе со своими планами продуктов. ибп | Глоссарий взаимодействия человека с компьютером Макеты используются дизайнерами в основном для получения отзывов пользователей о проектах и ​​дизайнерских идеях на ранних этапах процесса проектирования. Мокапы — это «очень ранние прототипы», сделанные из картона или других материалов низкого качества. Пользователь с помощью дизайнера может протестировать макет (представив, что он работает) и, таким образом, предоставить ценные отзывы о функциональности / удобстве использования / понимании основной идеи дизайна и т. Д. У макетов (и прототипов) множество преимуществ.Например: Мокапы вызывают критику со стороны пользователей, потому что они дешевы (могут быть сделаны из картона) и низкокачественны. Если пользователю представлена ​​ранняя версия системы, которая потребовала существенной работы, он / она, вероятно, будет более неохотно (а также способно) критиковать ее. При использовании макетов из картона или аналогичных материалов пользователь и дизайнер могут коллективно изменить дизайн, используя знакомые инструменты, такие как ручки, ножницы и т. Д.Таким образом, макеты являются средством обсуждения и посредником между дизайнером и пользователем. Макет может служить средством обсуждения не только между дизайнером и пользователем, но и между членами команды дизайнеров. Таким образом, макеты могут помочь облегчить работу вне дисциплинарных границ, объединяя разрозненную команду. Макеты позволяют проводить тестирование удобства использования на ранних этапах процесса разработки. Мокапы побуждают к экспериментам и узаконивают их, поскольку их изменение недорого. Мокапы сосредоточены на содержании и функциональности и отвлекают внимание от деталей графического дизайна. В макетах воплощена идея, воплощенная в популярном инженерном однострочнике: Вы можете исправить это сейчас на чертежной доске с помощью ластика или вы можете исправить это позже на строительной площадке с помощью кувалды. 12.0.1 Примеры макетов На рисунке 1 показан макет приложения-календаря для школьников из картона и пластика. Макет использовался для тестирования первых дизайнерских идей со школьниками и, таким образом, для получения обратной связи в процессе разработки. Альтернативные варианты написания: Mockup / mockups. Рис. 1. Картонный макет приложения-календаря для школьников После нескольких тестов с макетом он был преобразован в прототип, запрограммированный в Macromedia Flash (рисунок 2).Прототип был более «отполирован» и допускал больше интерактивности. Используя прототип, были протестированы различные сценарии использования (варианты использования) с пользователями, после чего прототип Flash был встроен в реальное приложение (запрограммированное на Java). Рис. 2: То же приложение календаря, на этот раз в качестве прототипа, созданного в Macromedia Flash. Большинство проектов может выиграть от использования макетов на ранних этапах процесса проектирования.На рисунке 3 показан макет веб-страницы, тестируемой пользователем. Рис. 3. Макет веб-сайта (источник и авторские права на изображение неизвестны) Обратите внимание: термины «макеты», «прототипы с низкой точностью» или «бумажные прототипы» «обычно используются как синонимы. No related posts. alexxlab Разное Синемаграфия на iphone: Синемаграфия в Instagram / Паразайт 29.11.2021 0 Разное Размеры css: Как задать ширину html страницы? 28.11.2021 0 Разное Брошюры примеры: 3300+ брошюры Шаблоны для бесплатной загрузки на Pngtree 27.11.2021 0 Разное Подбор шрифтовой пары: 404-Ошибка: 404 26.11.2021 0 Разное Как в инстаграмм сделать личный блог: Как сделать личный блог в Инстаграме: на телефоне, через Фейсбук 25.11.2021 0 Разное Буквы в стиле готика: Гарнированный готический шрифт стиля, помечает буквами A Иллюстрация вектора 23.11.2021 0 Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт