Сегодня часто можно встретить выражение “Mock-up” от дизайнеров сайтов, но что это такое и с чем это едят? Если выражаться простым языком, мокапы – это шаблоны или макеты, которые дизайнеры показывают заказчику для согласования. Mock-up используют для создания упаковок, этикеток, визитных карточек, баннеров и страниц сайтов.
Мокапы помогают не только заказчику определиться со стилем будущей упаковки или карточки, но и воплощают в жизнь идею дизайнера, просто картинка в интернете не передает смысл дизайна, как он будет выглядеть в деле, а мокап показывает рисунок со всех сторон, непосредственно на товаре.
В Веб-дизайне мокапы используют для создания зарисовок сайтов, накладывают картинки и шрифты до получения желаемого результата, так называемый черновик дизайнера. Макет размещается в PSD файле в виде смарт объекта и отправляется заказчику, по итогам просмотра вносятся корректировки и отдаются в работу.
Mock-up решает следующие проблемы:
- Позволяет дизайнеру увидеть, как будет выглядеть в жизни идея.
- Помогает заказчику определится с дизайном.
- Экономит ресурс (например, нанесенный рисунок на коробку для молока не удовлетворяет потребности владельца и приходится перепечатывать партию).
- Удобно применять различные дизайны для сравнения.
Особенности Mock-up
Мокапы помогают увидеть интерфейс в действии в точности до мелочей, например, владелец пиццерии решил создать приложение для смартфонов для быстрого заказа продукции. Ставит задачу разработать дизайн интерфейса и сроки выполнения, исполнитель принимает заказ в работу и начинает воплощать в жизнь идею заказчика, а чтоб ускорить процесс вместо черно-белых вайрфреймов и набросков сразу приступает к созданию мокапов, заливает несколько слайдов в файл и отправляет заказчику на согласование.
Преимущество мокапа в создании дизайна для приложений заключается в том, что можно посмотреть, как будет выглядеть картинка в действии не только визуальная, но и физическая часть. При разработке важно не просто наложить подходящую картинку, но и представить себя на месте пользователя. Погрузиться в виртуальную реальность сложнее даже при использовании мокапов, поэтому перед дизайнерами всегда стоит нелегкая задача.
Например, если приложение создается для смартфонов iPhone, дизайнер должен визуально представлять как картинка будет смотреться именно на данных моделях телефонов. Не секрет, что различные приложения по-разному выглядят на компьютере, платформах Андроид и iPhone, поэтому важно учитывать этот момент при разработке веб-дизайна.
Mock-up незаменимый инструмент для программистов и дизайнеров, поэтому недостатки с “лихвой” покрываются достоинствами. Макеты легко поддаются редактированию, для работы можно использовать как готовые шаблоны, так и создавать собственный вариант. Мокап – как масса для лепки, позволяет сформировать нужный дизайн и рассмотреть с 4-х сторон.
Как пользоваться Mock-up
Чтобы начать пользоваться мокапами, нужно совершить несколько кликов компьютерной мышью:
- скачать и открыть PSD с нужным названием;
- открыть смарт-слой и в появившееся окно загрузить изображение;
- сохранить и закрыть документ.
Изображение автоматически принимает форму объекта, если результат не отвечает потребностям, можно выбрать другую картинку или изменить положение. На просторах интернета можно скачать бесплатные мокапы и отредактировать под собственные задачи или воплотить в жизнь свою идею, для этого достаточно изучить программу фотошоп.
Мокап-картинка с отпечатком деталей изображения часто путают с понятием скетч, хотя это разные понятия и по виду, и по функционалу. Скетч – это набросок будущего дизайна на электронном носителе или листе бумаги без проработки составляющих. По мокапу можно определить не только соответствие картинки и рабочего инструмента, но и полный образ заказа.
Нюансы готовых мокапов
Готовые и бесплатные макеты упрощают жизнь дизайнера, но не на 100%, чтоб презентовать клиенту Mock-up нужно найти подходящий шаблон для изображения с соответствующими значками, кружочками и квадратиками, в идеале, если “заковырки” совпадают или максимально похожи.
Если взять и изучить несколько сайтов в интернете, то можно понять, что большинство выполнены в едином стиле с применением шаблонов. Но заказчик может захотеть индивидуальный дизайн с творческим подходом, в таких случаях готовые макеты не подойдут и придется “включать” фантазию и создавать креативный проект.
Создание макета – трудоемкий процесс, требует соблюдения контуров, выемок, цветового фона и общего вида, поэтому вначале дизайнер использует готовые шаблоны, пытается “подогнать” изображение. Как правило, сложные дизайнерские проекты стоят дорого, и заказчики это понимают, поэтому разработкой индивидуальных дизайнов занимаются профессиональные агентства.
Отличие смарт-объекта от обычного изображения
Чем отличается стандартная картинка от смарт-объекта? Изображения теряют качество при скачивании или перемещении, а смарт-объект сохраняет исходные параметры. Поэтому мокап имеет высокое разрешение и позволяет передавать заказчику макеты без потери дизайнерских особенностей.
Смарт-объекты позволяют создать мокап для презентации заказчику готового дизайнерского решения, а обычные изображения передают лишь внешнюю картинку и по ней сложно определить, как будет выглядеть веб-сайт или приложение для смартфона. Технологии не стоят на месте, упрощают работу дизайнерам и экономят средства инвесторов.
Чтобы понять плюсы мокапов, достаточно привести несколько технологических примеров, просмотр фильма по телевизору или в кинотеатре, обыкновенные шторы или 3D и т.д. Детальный осмотр будущего веб-проекта позволяет заказчику своевременно внести корректировки в работу и избавляет исполнителей от бесконечных поправок.
Заключение
Подведем итоги, как создать качественную презентацию дизайнерского решения:
- для подготовки прототипов используют скетч и вайрфрейм. Инструменты помогают на начальных этапах создания дизайна;
- mock-up используется для оперативных доработок или, чтоб расширить и преобразить макет. Например, разместить на сайте дополнительное изображение;
- готовые шаблоны упрощают задачу, но не всегда решают. При использовании не стоит увлекаться, учитывайте пожелания клиента и тематику заказа;
- чтобы создать реалистичную атмосферу в рамках мокапа, изучите проект подробно в избежание не уместных вставок;
- при возникновении вопросов при разработке, своевременно задавайте их заказчику. Это сократит время на внесение правок;
- представлять для согласования скетч или вайрфрейм не имеет смысла, т.к. они не передают реалистичность продукта – дорабатывайте мокап;
- если над проектом трудится несколько дизайнеров – обсуждайте этапы работ над презентацией, распределяйте обязанности и действуйте сообща;
- корректировка недочетов должна происходить до запуска проекта в работу. Пользователи сравнивают интерфейс сайтов и приложений с компанией, которую представляют, и некачественно выполненный дизайн отрицательно скажется на репутации;
- готовый мокап-шаблон интерфейсов, который находится в общем доступе и может использоваться всеми пользователями. Есть вероятность встретить аналогичный дизайн сайта;
- пропустить разработку прототипа и перейти к созданию мокапа можно не всегда. При масштабных проектах потребуется соблюдения всех этапов веб-дизайна, поэтому при общении с заказчиком обсуждайте все нюансы;
- Не всегда есть возможность подобрать шаблон под задачу, поэтому будьте готовы к длительному поиску макета или к самостоятельной зарисовке.