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

alexxlab
Разное |

Содержание

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

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

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

Мокап (англ. mock-up) – это полноразмерная модель какого-либо дизайна, используемая для демонстрации и оценки стиля еще не выпущенного продукта. Это может быть либо макет 3D-модели, либо PSD-файл с фотографией. Цель у макета одна: наложить на шаблон ваш дизайн.

Давайте рассмотрим примеры мокапов.

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

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

Но не все мокапы такие.

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

А вот такие макеты используют бизнесмены, которые планируют открывать магазины или кафе.

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

Лучшие библиотеки мокапов

Я отобрал 5 лучших сайтов с богатыми библиотеками мокапов. Итак, знакомьтесь:

  • PSD Freebies – сайт с огромной коллекцией качественных мокапов (с него я и буду брать примеры). 
  • CSS Author – сайт со множеством мокапов, разделенных по категориям.
  • Mockup world – каталог качественных мокапов (представлено множество платных вариантов).
  • Mockups-design – мокапы для рекламной продукции (для визиток, флаеров и т.п.).
  • Mockup download – еще один хороший ресурс с платными и бесплатными шаблонами для дизайн-проектов.  

Работаем с мокапом в Photoshop

Давайте скачаем мокап по этой ссылке.

Я выбрал мокап обложки книги. Страничку мокапа нужно пролистать до конца и нажать на кнопку «Download».

В архиве у нас лежит .psd файл, его и открываем в Фотошопе (я использую «CC 2020»).

Нам нужно найти слой, на котором находится элемент для редактирования. Обычно такие слои выделяют и называют по-особенному. В данном примере слой назван довольно логично – «[YOUR IMAGE HERE]».

Два раза нажимаем на миниатюру возле имени слоя левой кнопкой мыши. Вуаля – дизайн обложки нашей книги открылся в новом проекте!

В этот слой мы можем добавлять все, что нам заблагорассудится. К примеру, я вставил сюда обложку книги «1984» Джорджа Оруэлла.

Теперь жмем Файл -> Сохранить, а затем открываем основной проект с мокапом.

Теперь у нас есть макет книги с нашим дизайном! И выглядит он вполне убедительно: нет никаких проблем с освещением или текстурой, это действительно настоящая книга!

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

Открываю проект.

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

С названием слоев у нас та же песня (оба мокапа с одного сайта).

Открываю шаблон в новом проекте двойным кликом по миниатюре слоя.

Я считаю, что здесь уместно смотрелся бы логотип «Леруа Мерлен», поэтому решил его сюда вставить.

Сохраняем файл и открываем основной проект. Готово!

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

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

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

Мокап (или 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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

Что такое 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 дизайн

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

На прошлой неделе появилась публикация

Прототипируй это

, определенная самим автором как «холиварная».

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

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

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

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


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 в плотном, ежедневном взаимодействии с

Что такое Мокап (mockup). Разбираемся в определениях