Покажите реальность: почему в презентации важны мокапы
Объясняем, почему мокап — больше, чем просто макет.
Автор: Яков Чайкин, редактор esprezo
Эксперт: Лилия Бикбова, партнёр esprezo и тренер по презентациям
7 мая 2020
Эксперт: Лилия Бикбова, партнёр esprezo и тренер по презентациям
7 мая 2020
Мокап (англ. mockup или mock-up) — в дословном переводе «макет», а в привычном смысле — изображение реального предмета, на которое можно наложить дизайн логотипа, обложки или скриншот. Мокапы нужны, чтобы показать, как изображаемый объект — например, экран программы — будет выглядеть в реальной жизни.
Статья пригодится всем, кто часто презентует продукты и услуги. В материале объясняем, почему использовать мокапы важно для человеческого восприятия и что будет, если их проигнорировать.
В конце делимся подборкой сервисов, которые помогут найти подходящий мокап и правильно оформить скриншоты для презентации.
Статья пригодится всем, кто часто презентует продукты и услуги. В материале объясняем, почему использовать мокапы важно для человеческого восприятия и что будет, если их проигнорировать.
В конце делимся подборкой сервисов, которые помогут найти подходящий мокап и правильно оформить скриншоты для презентации.
Ошибка, которая испортит презентацию
Начнём с антипримера: однажды начинающая IT-студия сделала для клиента мобильное приложение. Результаты работы программисты презентовали на проекторе в офисе заказчика.
Студия сделала красивые слайды с прямоугольными картинками экранов приложения и показывала, как они будут меняться в ответ на действия пользователя. И всё бы хорошо, но по неопытности разработчики не вставили экраны своего приложения в мокап смартфона. Тут и начались проблемы.
Студия сделала красивые слайды с прямоугольными картинками экранов приложения и показывала, как они будут меняться в ответ на действия пользователя. И всё бы хорошо, но по неопытности разработчики не вставили экраны своего приложения в мокап смартфона. Тут и начались проблемы.
Без мокапа пропорции скриншота кажутся неестественными. Экран приложения «повис» в воздухе, и его реальные пропорции в телефоне представить сложно. Приложение: Alarm Clock Xtreme Free
Заказчик смотрит на большой экран проектора и плохо представляет, как приложение будет смотреться на маленьком экране телефоне. Начинаются замечания.
«Вот эта кнопка слишком большая, а здесь огромный шрифт. У людей же небольшие экраны, ничего не поместится. А знаете, всё вообще какое-то „кирпичное“. Давайте хотя бы шрифт сделаем рукописным, чтобы стало красивее», — говорит он.
Разработчики возражают, что на телефоне всё будет выглядеть меньше: кнопка будет как раз такой, чтобы попадать пальцем. Ведущий дизайнер студии говорит, что шрифт подбирали экспериментально, чтобы хорошо читался при маленьком размере, а рукописный будет сложно разобрать.
К несчастью, представить в голове меньший масштаб заказчику трудно. Клиенту кажется, что он прав, а его замечания не воспринимают всерьёз. Отношения портятся, заказчик думает, что нанял неразумных студентов. Замечаний становится больше, недоверие растёт, сроки затягиваются. И, хотя студия поняла свою ошибку и на следующей встрече презентовала работу в мокапах, из-за проваленных сроков оплату за проект урезали.
«Вот эта кнопка слишком большая, а здесь огромный шрифт. У людей же небольшие экраны, ничего не поместится. А знаете, всё вообще какое-то „кирпичное“. Давайте хотя бы шрифт сделаем рукописным, чтобы стало красивее», — говорит он.
Разработчики возражают, что на телефоне всё будет выглядеть меньше: кнопка будет как раз такой, чтобы попадать пальцем. Ведущий дизайнер студии говорит, что шрифт подбирали экспериментально, чтобы хорошо читался при маленьком размере, а рукописный будет сложно разобрать.
К несчастью, представить в голове меньший масштаб заказчику трудно. Клиенту кажется, что он прав, а его замечания не воспринимают всерьёз. Отношения портятся, заказчик думает, что нанял неразумных студентов. Замечаний становится больше, недоверие растёт, сроки затягиваются. И, хотя студия поняла свою ошибку и на следующей встрече презентовала работу в мокапах, из-за проваленных сроков оплату за проект урезали.
С мокапом у экрана приложения появились естественные границы. Представить реальный размер элементов на экране стало проще — для этого достаточно сопоставить их с размерами рамок и экрана смартфона. Приложение: Alarm Clock Xtreme Free
Мокап — больше, чем просто макет
Мокап — способ создать вокруг объекта реальность и вдохнуть в него жизнь.
Когда IT-cтудия показала заказчику приложение без мокапа, клиент увидел прямоугольное изображение на слайде, а не экран мобильного телефона. При попытке мысленно наложить увиденное на реальный размер происходило искажение, пропорции шрифта и кнопок казались заказчику нереалистичными.
В голове у клиента изображение на слайде и реальный мир существовали порознь. В этом главная задача мокапа — «привязать» то, что вы показываете, к реальности.
Когда IT-cтудия показала заказчику приложение без мокапа, клиент увидел прямоугольное изображение на слайде, а не экран мобильного телефона. При попытке мысленно наложить увиденное на реальный размер происходило искажение, пропорции шрифта и кнопок казались заказчику нереалистичными.
В голове у клиента изображение на слайде и реальный мир существовали порознь. В этом главная задача мокапа — «привязать» то, что вы показываете, к реальности.
Всё дело в нашем восприятии. Любой предмет в реальном мире мы распознаём по двум составляющим: через его физические свойства и «отношения» с другими вещами.
Возьмём шариковую ручку. Органы чувств фиксируют её физические свойства: продолговатая, цилиндрическая, блестящая, пластмассовая. Под такое описание подходит что угодно: цветной фломастер, трубочка для коктейля, жердь для попугая или цилиндрический тюбик с мыльными пузырями.
Мы понимаем, что перед нами ручка, зная, как этот набор физических характеристик взаимодействует с окружающим миром. Если взять ручку, поднести к листу бумаги на столе и провести по нему, получится линия. Именно связь с другими вещами из реального мира делает из «пластмассовой штуковины» ручку.
Это наблюдение кажется банальным, когда речь идёт о простых бытовых вещах. Но что если перед вами предмет, который вы видите впервые?
На популярном англоязычном ресурсе reddit существует отдельная ветка обсуждения r/whatisthisthing, где пользователи публикуют фото неизвестных вещей, а другие участники помогают понять их предназначение. Обсуждение загадочных предметов показывает ситуацию, когда связь предмета с реальностью неясна. Чтобы описать вещь, люди сравнивают её с чем-то визуально похожим. Например, с консервным ножом в третьем примере: *https://clck.ru/NJvfm.
Возьмём шариковую ручку. Органы чувств фиксируют её физические свойства: продолговатая, цилиндрическая, блестящая, пластмассовая. Под такое описание подходит что угодно: цветной фломастер, трубочка для коктейля, жердь для попугая или цилиндрический тюбик с мыльными пузырями.
Мы понимаем, что перед нами ручка, зная, как этот набор физических характеристик взаимодействует с окружающим миром. Если взять ручку, поднести к листу бумаги на столе и провести по нему, получится линия. Именно связь с другими вещами из реального мира делает из «пластмассовой штуковины» ручку.
Это наблюдение кажется банальным, когда речь идёт о простых бытовых вещах. Но что если перед вами предмет, который вы видите впервые?
На популярном англоязычном ресурсе reddit существует отдельная ветка обсуждения r/whatisthisthing, где пользователи публикуют фото неизвестных вещей, а другие участники помогают понять их предназначение. Обсуждение загадочных предметов показывает ситуацию, когда связь предмета с реальностью неясна. Чтобы описать вещь, люди сравнивают её с чем-то визуально похожим. Например, с консервным ножом в третьем примере: *https://clck.ru/NJvfm.
* Роскомнадзор заблокировал Telegram, поэтому последняя ссылка может не открыться. Чтобы перейти на сайт подключите VPN-сервис. Например: Windscribe, Hotspot Shield, TunnelBear или NordVPN.
В этом смысл мокапа: если его не использовать, предмет лишается своей привязки к другим объектам, и человеку становится сложно правильно интерпретировать то, что он видит. В случае с презентациями — то, что показано на слайде. Благодаря мокапу зритель сразу воспринимает предмет как часть реального мира, а не вещь «в вакууме».
Когда пригодятся мокапы
Общее правило: если вам нужно показать то, что реально существует — используйте мокап, который эту реальность передаст. Хотите показать скриншот с ноутбука или изображение на телевизоре? Используйте мокапы ноутбука и телевизора: в нашей бесплатной Базе знаний есть сервисы, которые с этим помогут.
Мокап — это не только способ оформлять изображения на экранах устройств. Мокапом может быть что угодно: макет книги, обложку которой вы нарисовали; или модель комнаты, в которой будет стоять новая мебель. Ещё один простейший пример мокапа — манекен для одежды.
Дизайнеры рекламы демонстрируют, как будет смотреться плакат, используя реальную фотографию конкретного билборда. Проект рекламы просто накладывают на билборд в графическом редакторе.
Архитекторы показывают проекты зданий, помещая их на своё будущее место, чтобы люди понимали, как объект будет выглядеть в городской среде.
Мокап — это не только способ оформлять изображения на экранах устройств. Мокапом может быть что угодно: макет книги, обложку которой вы нарисовали; или модель комнаты, в которой будет стоять новая мебель. Ещё один простейший пример мокапа — манекен для одежды.
Дизайнеры рекламы демонстрируют, как будет смотреться плакат, используя реальную фотографию конкретного билборда. Проект рекламы просто накладывают на билборд в графическом редакторе.
Архитекторы показывают проекты зданий, помещая их на своё будущее место, чтобы люди понимали, как объект будет выглядеть в городской среде.
«Хрустальный корабль» — концепция развития Охтинского мыса в Санкт-Петербурге. Здание в центре только предстоит построить, но его проект уже интегрирован в реальный ландшафт города. Фото: «Газпром нефть»
Важно не перестараться. Не используйте макеты «для стиля», вставляйте в мокап только то, что зрителям будет важно представить в реальности. Например, чертёж здания для презентации профессиональным строителям вряд ли нужно накладывать на виды города — у чертежа иная задача.
Что запомнить
- В презентациях продуктов всегда используйте мокапы. Они помогают зрителю понять масштаб и место объекта среди других вещей в реальном мире. Воспользуйтесь нашей подборкой сервисов — мы собрали лучшие.
- Мокапы — не только изображения телефонов и ноутбуков. Речь про всё, что имеет смысл изобразить на модели реальности: обложку на книге, принт на чашке или футболке, рекламный плакат на билборде.
- Не переборщите — вставляйте в мокап только то, что поможет зрителю представить объект в реальном мире. Не вставляйте в экраны монитора всё подряд.
Что запомнить
- В презентациях продуктов всегда используйте мокапы. Они помогают зрителю понять масштаб и место объекта среди других вещей в реальном мире. Воспользуйтесь нашей подборкой сервисов — мы собрали лучшие.
- Мокапы — не только изображения телефонов и ноутбуков. Речь про всё, что имеет смысл изобразить на модели реальности: обложку на книге, принт на чашке или футболке, рекламный плакат на билборде.
- Не переборщите — вставляйте в мокап только то, что поможет зрителю представить объект в реальном мире. Не вставляйте в экраны монитора всё подряд.
Подпишитесь на смысловую рассылку esprezo.
Каждый месяц отправляем новые программы, статьи и видео. Без спама.
Нажимая кнопку «Получать пользу», вы соглашаетесь c правилами обработки персональных данных.