Mock up это: Что такое mockup (мокап), зачем нужны мокапы для фотошопа? – О бедном мокапе замолвите слово / Habr

Что такое mockup (мокап), зачем нужны мокапы для фотошопа?

Чтобы показать работу в более реалистичном виде используется psd mockup. Трехмерное изображение объекта позволяет заказчику оценить продукцию и при необходимости внести корректировки.

Что такое мокап (mock-up)?

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

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

Mockup для фотошопа состоит из специально подготовленного файла в формате psd, на котором можно размещать свой дизайн.

Кому нужны мокапы для фотошопа?

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

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

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

Как использовать psd mockup

Вы скачиваете готовый шаблон мокапа в формате psd (например, вы можете найти необходимый мокап на нашем сайте).

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

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

Большинство шаблонов ориентировано на англоязычную аудиторию. В мокапах можно найти текстовый слой, который называется «You design here». Для внесения изменений достаточно кликнуть по нему 2 раза.

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

 

О бедном мокапе замолвите слово / Habr

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

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

О прототипах или Называйте вещи своими именами

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

1. Sketch (набросок, эскиз) — первоначальный моментальный набросок от руки того, что бредет в голову.
2. Wireframe (блок-схема) — схема или чертеж, представляющие «скелет» страницы сайта или приложения. Никаких украшений, только расположение и примерные размеры заголовков, текстовых блоков, иллюстраций, мультимедиа- и навигационных панелей.
3. Prototype (прототип) — модель для тестирования концепции или процесса. Могут быть вставлены картинки, появиться цвето-тональные градации и т.д.
4. Simulation (симулякр, симуляция, полнофункцональный прототип) — на сложных проектах тоже модель для тестирования концепции или процесса, но — Hi-Fi (high fidelity — высокой точности, в отличие от протопипа, который является моделью низкой точности — Lo-Fi). Для создания симуляций (или симулякров, если угодно) обычно используется программа iRise. Там используются библиотеки визуалов, позволяющие изобразить страницы очень близко к конечному виду, есть выпадающие списки, кнопки, меняющие свой вид при наведении, навигация между экранами, поп-апы и т.д.
5. Mockup или mock-up (макет) — неработающая модель, выполненная в натуральную величину и выглядящая так, как будет выглядеть работающий экземпляр. То есть, сделанная в фотошопе веб-страница, отданная на верстку — это мокап. А дизайном она станет, когда появится интерактивность. Вообще-то, мокапы могут быть относительно динамичными и интерактивными, но об этом — как-нибудь потом.

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

О принципах работы дизайнера или Почему прототипы — это хорошо

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

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

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

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

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

1. Вариант идеальный для дизайнера визуалов, с точки зрения UX простейший как амёба: веб-дизайнерское онлайн-портфолио.
Тут он сам себе — заказчик и исполнитель, и с UX справляется легко. Карьера обычно начинается с этого и других несложных сайтов, выполняемых командой из 2-3 человек, где дизайнер общается с заказчиком тет-а-тет и пребывает в полной уверенности, что все, не касающееся программирования — его дизайнерская епархия. Зачастую с этой уверенностью он и идет дальше по профессии.

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

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

Проект, естественно, разбивается на короткие отрезки — спринты (обычно длиной в месяц-полтора), и группа UX в плотном, ежедневном взаимодействии с директорами сервисов начинает от спринта к спринту постепенно формировать модели работы юзеров с разными модулями и основные принципы работы с продуктом. Группа UX может состоять из 2-3 и более UX-дизайнеров и дизайнера визуалов.

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

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

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

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

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

P.s. Ответы на вопросы, заданные не мне 😉

Публикации Прототипируй это последовали Вопросы к посту Алекса Рублева про дизайн. Хотя спрашивали не меня, могу ответить из цеховых рядов.

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

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

Или, может быть мне не такие дизайнеры попадались?
Если вы не боитесь узнать страшнобеспощадную правду, то уровень ваших дизайнеров соответствует уровню ваших проектов: «От десятков до сотен человекочасов, денег, крови и пота — чтобы получить интерфейс, удобный людям. И пять часов работы дизайнера, до или после.»
— Расходы на визуал составляют полпроцента проектной сметы? — Значит, для вас качество визуала — дело стопятидесятое. Получите и распишитесь! Думаете, в эпплах и гуглах работают по тому же принципу — «ну, всё готово, ща наймем кого-нибудь, чтоб за 5 часов разукрасил»? — Отнюдь, у них там целые дизайнерские отделы сидят!

Да, заказчику виднее, влияет ли уровень исполнения визуала на прибыльность проекта. Но что значит «до или после»? Есть же общепринятая, тысячекратно проверенная методология разработки информационных систем, определяющая последовательность: запрос заказчика > бизнес-анализ > UX > визуальный дизайн > программирование > QA и т.д. И неважно, делается ли проект методом винтажного ватерфолла или эджайлом со спринтами — последовательность одна и та же. Можно, конечно, извернуться и двинуть телегу впереди лошади, но зачем? Видимо, затем, что руководству проектами визуалы по барабану: до сделают или после, тот дизайнер или этот — лишь бы эта возня творческих личностей съела поменьше денег. А нормальные дизайнеры почему-то любят, когда к их вкладу в продукт относятся серьезно. И обычно у них есть выбор, где работать. Се ля ви…

Мокап ликбез — все что нужно знать про мокапы

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

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

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

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

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

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

Пользоваться мокапами очень просто.

• Скачиваем нужный PSD, открываем его и ищем слой с примерным названием «Your design here» или что-то подобное.
• Дважды щелкаем на иконке смарт-слоя — открывается новое окно, куда и нужно перетащить свой паттерн или картинку.
• После этого закрываем это окно, выбрав «Да» при вопросе нужно ли сохранить.

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

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

freedesignresources.net/category/free-mockups/

store.mockupzone.com/free-files/

graphicburger.com/mock-ups/

www.mockupworld.co/all-mockups/

www.graphicsfuel.com/category/mockup-templates/

pixelbuddha.net/freebies/tag/mockups

Большая коллекция бесплатных мокапов с Биханса www.behance.net/collection/20880985/Best-Free-Mockup

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

Показывайте свои работы красиво — пользуйтесь мокапами

Mock up («мокап») — это… Зачем нужен и как его сделать?

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

Что это?

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

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

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

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

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

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

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

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

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

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

Мокап сайта

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

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

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

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

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

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

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

Источники

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

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

Mock up («мокап») — это… Зачем нужен и как его сделать?

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

Мокап – что это?

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

Зачем нужен Mock Up?

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

Как создать Мокап?

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

Область применения

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

Как создать мокап сайта?

Со знанием дела создать мокап сайта могут только профессиональные дизайнеры. Причина данного явления достаточно проста: специалисты не паникуют, когда заказчик требует доработать какие-то детали. Мокап позволяет дизайнеру увидеть идею, совершенствовать и развивать ее в дальнейшем. Веб-каркас представляет собой схематичный план интернет-страницы. Дизайнер сначала рисует его на листе бумаги от руки. Это необходимо для того, чтобы эффективнее использовать инструменты графических редакторов. Каркас сайта создается в черно-белой гамме. Это позволяет разработчику наметить расположение основных элементов: меню, логотипа, рекламных блоков, контента. Когда работа над каркасом будет завершена, дизайнер разрабатывает прототип сайта, а именно подбирает стиль и цвет. В данном случае на помощь дизайнеру приходят 11 полезных инструментов. Они будут полезны при создании всех элементов сайта. Особе внимание рекомендуется обратить на следующие программы: UXPin, InVision, MarvelApp, Gliffy, Moqups, OmniGraffie, Axure, Mockingbird, JustinMind, Mockplus, HotGloo. Достаточно простым документом для дизайнера является Mockplus. Он позволяет создавать каркас, переходит от черно-белого варианта к цветному. Этот инструмент дает возможность использовать более 200 компонентов, которые значительно упрощают процесс создания сайта.

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

Источники

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

Что такое mock-up в веб-дизайне

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

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

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

Термины, которые часто можно встретить, подыскивая мокап для сайта – это wireframe, sketch и prototype. Кто-то считает, что термины означают одно и то же, кто-то – что это абсолютно разные понятия.

Разница между mock-up, wireframe, sketch и prototype

Sketch (скетч) – это набросок, зарисовка идеи. Может выглядеть вот так:

Или так:

То есть, конкретики маловато, все пока на стадии обдумывания.

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

Mock-up. Работая над дизайном сайта

Мокапы в дизайне сайтов при помощи мокапа можно увидеть, как он (сайт) будет выглядеть: какими будут его шрифты (тип, размер), цвета, как будут смотреться на нем картинки, фото, блоки с видео. После окончания работ интернет-площадка обычно выглядит точно так же, как mock-up – первоначально созданный или, как это чаще бывает, с внесенными в ходе обсуждений изменениями. Хороший пример мокапа для трех версий сайта: дескотпной, для iPad и iPhone.

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

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

Программы для создания мокапов

Мокапы можно создавать при помощи HTML/CSS, кто-то отдает предпочтение графическому обеспечению, онлайн-ресурсам:
1. Cтарому доброму Adobe Photoshop.
2. Adobe Fireworks.
3. bohemiancoding.com.
4. gomockingbird.com
5. mockups.me. Предоставляется месяц бесплатного использования.
6. balsamiq. Месяц можно использовать бесплатно.
7. mockupbuilder.com. Предлагаются 2 бесплатных недели.
8. moqups.com. Есть возможность пользоваться бесплатно, но будут некоторые ограничения.
9. mockflow.com. Бесплатная версия предполагает наличие не всех функций.
10. hotgloo.com. Даются 15 бесплатных дней.

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

• freepsd.ws;
• pixeden.com (раздел Web – Psd web templates).

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

mock-up prototype sketch wireframe дизайн

FAQ про мокапы

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

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

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

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