Mockup что это: определение, особенности и принципы создания
определение, особенности и принципы создания
Начинающие дизайнеры наверняка слышали про такую вещь, как мокап. Сегодня мы научимся с ним работать, ведь мокап – это действительно эффективный способ дополнить фирменный стиль, а также увидеть свои наработки на живом продукте.
Что же такое мокап?
Мокап (англ. 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 раза.
Перед дизайнером должно открыться новое окно, в которое нужно перетащить картинку с вашим дизайном. На завершающем этапе необходимо сохранить изменения в смарт-объекте и уже после сохранить общее изображение мокапа с вашим дизайном.
О бедном мокапе замолвите слово / Хабр
На прошлой неделе появилась публикация
Прототипируй это, определенная самим автором как «холиварная».
Раз уж разговор зашел о святом, почему бы не подкинуть пару веток в костер?
Я дизайнер интерфейсов. И я люблю мокапы.
Да и почему бы мне их не любить, если я только и делаю, что их делаю?
О прототипах или Называйте вещи своими именами
Для начала отметим, что мокапы и прототипы — отнюдь не одно и то же. В нерусском ИТ-словаре существуют несколько терминов для визуалов, соответствующих разным стадиям работы над ИТ-продуктом. Границы этих терминов размыты, но, тем не менее, увидев нечто интерфейсно-графическое, классифицировать его нетрудно.
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 в веб-дизайне
От тех, кто занимается дизайном сайтов и не только, часто можно слышать, что mock-up файлы – это что-то незаменимое и нужное. Шаблоны с ними распространяются платно и бесплатно, дизайнеры делятся опытом их создания. То есть, штука точно полезная.
Если по-простому, mock-up файлы помогают создавать макеты, чтобы увидеть дизайн «в деле». Большой популярностью по понятным причинам пользуются мокапы для визиток, мобильных приложений, обложек для музыкальных дисков, тары для напитков, упаковки для продуктов питания, вывесок и тому подобное.
Применяя термин mock-up к дизайну интернет-сайтов, можно сказать, что это макеты страниц. С их помощью владелец сайта может понять, в каком направлении работает дизайнер, и насколько оно верно. Дизайнер, в свою очередь, может увидеть, насколько реальная картинка соответствует той, что сложилась в голове. Мокапы полезны и тем, что помогают определиться, где и как стоит размещать контент.
Термины, которые часто можно встретить, подыскивая мокап для сайта – это wireframe, sketch и prototype. Кто-то считает, что термины означают одно и то же, кто-то – что это абсолютно разные понятия.
Разница между mock-up, wireframe, sketch и prototypeSketch (скетч) – это набросок, зарисовка идеи. Может выглядеть вот так:
Или так:
То есть, конкретики маловато, все пока на стадии обдумывания.
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 дизайн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-файлы. Их можно сказать на платных и бесплатных ресурсах, или делать своими руками. Можно найти готовый мокап и использовать его для демонстрации основной работы. Попробуйте самостоятельно сделать надпись для открытки или буклета. Для начала нужно продумать идею, определиться с цветом и сделать набросок на листе бумаги. После этого можно воплощать задумку в графическом редакторе. Для новичков самым легким и популярным вариантом является мокап визитки. Вам нужно открыть скачанный файл, текст и надпись. После этого перейдите к готовому мокапу, нажмите на значок «Смарт-объект» и выберите в меню пункт «Редактировать содержимое». В новой вкладке появится объект, в который можно будет внести изменения. После этого активируйте созданный текст и перенесите его на поверхность визитки. Вы можете трансформировать надпись, менять ее размер и выбирать наиболее подходящее место расположения. Когда работа будет завершена, сохраните проект.
Источники
В создании мокапов нет ничего сложного. Они помогают упростить основную работу дизайнера, сэкономить время и силы. При желании вы можете создать свою собственную базу таких файлов и заняться их продажей. Для этого необходимо использовать хороший фотоаппарат, обладать некоторыми навыками съемки, уметь правильно выставлять освещение, а также иметь чувство вкуса и стиля. В качестве источников изображений можно использовать различные ресурсы, которые продают готовые картинки для демонстрации дизайна чего-либо. Если вы не хотите тратить деньги на покупку мокапов, существует множество бесплатных источников. Вы легко может найти в свободном доступе тысячи красивых изображений на любую тему.
Что такое Мокап (mockup). Разбираемся в определениях
20 июня 2020, 12:45Здравствуйте, товарищи дизайнеры и близкие к ним люди. В понятиях мокапы, макеты, прототипы и так далее есть некая путаница. Мы часто путаем прототип с эскизом, а макет с мокапом. Давайте вместе разберемся в этой статье, что такое мокапы и как их использовать.
Для начала нам нужно википедиевское объяснение понятия мокапа (да и всех остальных дизайнерских понятий стадии готовой работы). Будем идти последовательно, начиная с идеи и заканчивая готовым продуктом
Эскиз
Это первое, что появляется после идеи. Ведь чтобы объяснить дизайнеру свою идею нужно ему её показать. И обычно, всё начинается с набросков, которые наспех заносятся в блокнот. Это и есть эскиз.
Схема (каркас)
Схема или, по другому, каркас — это уже выверенный рисунок/схема того эскиза со всеми деталями. Продумка структуры сайта, где какие блоки располагаются или арматура с силуэтами скульптуры — это всё схема (или каркас). Туда же входят такие понятия как Вайрфрейм, миндмап и другие, но на них мы останавливаться не будем.
Прототип
Прототип — это работающая версия каркаса. Если это сайт, то это полноценный сайт, только без дизайна и функционала, но покликать, повертеть, посмотреть на компьютере его можно. Если это прототип автомобиля, то у него скорее всего будет много работающих частей, но ездить он пока еще не будет уметь.
Дизайн-макет
Вот мы и подбираемся к нашему неоднозначному другу. Дизайн-макет — это готовая, с точки зрения визуала и функционала, работа, требующая внимания заказчика для последующих доработок и сдачи заказа. На английском языке это понятие пишется так — Mockup
Что же такое Мокап (mockup)?
Мокап (с анг. mockup — макет) — в производстве и дизайне это масштабная или полноразмерная модель конструкции или устройства, используемого для обучения, демонстрации, оценок дизайна и прочее. Мокапы используются, в основном, для получения отзывов от пользователей.
Примеры мокапа:
Mockup (макет) Boeing 2707 в музее авиации им. Гиллера
Mockup (макет) Американского шатла в полную величину
Mockup (макет) интерьера, выполненный в настоящую величину и сфотографированный.
Мокапы применяются в производстве, архитектуре, программировании, текстиле, военном деле и прочих сферах. Танк без двигателя и внутренностей, выполненный в полном размере из пластика и выглядищий как настоящий; кухня, с открывающимися дверцами, стеклами и выдвижными ящичками, но выполненная в миниатюре; дизайн интерьера, выполненный в 3D Max во всех деталях, очень похожий на фотографию — всё это mockup, то бишь макеты.
Из всего вышесказанного мы можем вычленить одно:
Mockup — это демонстрация почти готовой работы, виртуальной, как макет дизайна или осязаемой как проект дома из картона.
Получается, что в русском языке слово «мокап» уже не совсем то, что в английском mockup. Как мы уже узнали mockup c английского — это и есть макет, но в русском языке слово «мокап» приобрело иной характер. Это можно наглядно увидеть в поисковиках
Как мы видим, тут никаких шатлов или макетов домов в миниатюре нет. Здесь, в основном, фотографии дизайна кружек, текстиля с логотипами, и другими изображениями, которые можно менять с помощью Adobe Photoshop. Вот мы и подбираемся к определению слова «Мокап».
Мокап — это изображение готовой работы (фотография или реалистичная иллюстрация), выполненная в формате psd и имеющая смарт-слой, в котором можно заменить тот или иной рисунок на своё изображение, получив, таким образом, демонстрацию работы в реалистичной фотографии (или иллюстрации)
Кто-то может со мной не согласиться. Определение слова «мокап» в такой форме не каждому может показаться правильным, но согласитесь, когда мы вбиваем в поисковую строку «мокап визитки», мы хотим получить не дизайн готовой визитки, ни фотографию довольных клиентов с визиткой, а конкретный PSD файл, в котором будет фотография с изображением визитки в реальном мире, куда мы в 2 клика сможем поместить дизайн своей визитки. Так что определение выше имеет право на существование.
Может пора признать, что мы подразумеваем под словом «Мокап»? У меня всё! Мнения и негодования оставляйте в комментариях. Пока.
С наилучшими пожеланиямиЭрадж Шамс
Написать комментарий
Последний уровень дизайна пользовательского интерфейса
Каркас — это каркас. Прототипы демонстрируют поведение. Мокапы — это кожа.
В этой статье мы объясним, почему макеты так же важны, как каркасы и прототипы, и как выбрать правильный метод.
Что такое мокап?
Обычно макеты средней и высокой точности отражают выбор дизайна для цветовых схем, макетов, типографики, иконографии, визуальных элементов навигации и общей атмосферы продукта.
Помимо выделения времени на ответы на важные визуальные вопросы, мокапы имеют ряд других преимуществ:
- Интуитивно понятно для заинтересованных сторон — Благодаря более высокой точности макеты требуют меньше контекста, чем низкокачественные документы, такие как каркасы. Заинтересованным сторонам будет легче увидеть конечный продукт.
- Реалистичная перспектива — Одно дело — принять все визуальные решения, а другое — увидеть, как все они работают вместе, приближаясь к реальности.Мокапы могут помочь выявить проблемы, которые не так очевидны на бумаге (например, цветовые различия или преступления меньшего размера, которые остаются незамеченными).
- Ранние версии — Легче вносить изменения в макет, чем на более поздних этапах кодирования (если сам макет не закодирован).
В процессе проектирования макеты появляются в конце фазы lo-fi и в начале фазы hi-fi. Это может означать разные вещи для разных методов — например, макет может быть сделан сразу после создания каркаса или может быть отложен до завершения тестирования прототипа lo-fi.
Однако мы также рекомендуем провести тестирование при переходе с lo-fi на hi-fi. Концепции общей картины, такие как навигация и поток, сложнее изменить с высокой точностью, поэтому их следует повторить, прежде чем погрузиться в макет Hi-Fi.
Фотография предоставлена: Sketch App
Как объясняется в бесплатном руководстве по мокапам, помните следующие советы:
- Сузьте свои концепции — Причина, по которой макеты появляются после каркаса, заключается в том, что вам сначала нужно исключить другие варианты общей картины.Если вам непонятна структура навигации, не делайте макеты для обеих версий — сначала определитесь с одним.
- Изучите продукты конкурентов — Прежде чем выбирать собственные визуальные эффекты, взгляните на то, что делают ваши конкуренты. Однако не копируйте их — ищите области, которые можно улучшить, или шаблоны пользовательского интерфейса, которые пользователи захотят использовать во всех продуктах этого типа. Быстрый эвристический обзор может помочь количественно оценить ваши наблюдения.
Далее мы посмотрим, какие конкретные поля обрабатывает макет.
Присоединяйтесь к лучшим дизайнерам мира, использующим UXPin.
Подпишитесь на бесплатную пробную версию. Попробуйте бесплатно!Анатомия мокапа
Проще говоря, анатомия макета пользовательского интерфейса должна быть идентична структуре страницы, которую он представляет. Это означает, что на этапе создания макета вы должны учитывать:
- Макет содержимого — Как отображается содержимое, например F-образный или Z-образный узор, карточки или текст. Вы также должны учитывать размер каждого фрагмента контента и то, сколько вы хотите разместить на экране за раз.
- Контрастность — Используйте инструмент цветового контраста, чтобы проверить читаемость текста на фоне. Вы также можете использовать цветовой контраст, чтобы улучшить видимость некоторых элементов, например призывов к действию.
- Использование цвета — Цвета вызывают различные эмоции, и их эффекты меняются в зависимости от окружающих цветов. Вы можете ознакомиться с бесплатной электронной книгой «Дизайн веб-интерфейса для человеческого глаза» (том 1) для получения более подробной информации.
- Интервал — Негативное пространство — это не пустое пространство, которое нужно заполнить — это мощный элемент дизайна.Соответствующее количество пустоты улучшает понимание и разборчивость пользователя и действует как мощный инструмент в визуальной иерархии. Чем больше отрицательного пространства вокруг элемента, тем больше он привлекает внимание.
- Визуальные элементы навигации — К настоящему времени информационная архитектура должна быть завершена, поэтому вам просто нужно подумать, как она будет выглядеть. Например, если у вас есть раскрывающееся меню или ящик, теперь вы можете погрузиться в детали, такие как цвет, интервал, типографика и порядок.
3 типа мокапов
Мы можем разделить инструменты мокапов на три различных типа — программное обеспечение для графического дизайна, приложения для создания макетов и закодированные макеты — каждый со своими преимуществами и недостатками.
Программное обеспечение для графического дизайна
Из-за упора на визуальные эффекты некоторые дизайнеры предпочитают создавать макеты в программах графического дизайна, с которыми они наиболее знакомы. Программное обеспечение, такое как Photoshop, создано для создания изображений с идеальным пикселем.
Обратной стороной является то, что эти программы не позволяют добавлять взаимодействия к вашим макетам (поэтому мы решили интегрировать их с Photoshop и Sketch).
Фотография предоставлена: Превращение мокапов Photoshop в интерактивные прототипы
Другой недостаток заключается в том, что вам нужно знать, как использовать программное обеспечение, что обычно является сложным, поскольку оно предназначено для большего количества визуальных манипуляций, чем просто создание макетов.Если ваши макеты не требуют максимально возможной точности, программное обеспечение для графического дизайна может оказаться излишним.
Мокап приложений
Инструменты, созданные специально для дизайна цифровых продуктов, такие как наше приложение UXPin или Sketch, основаны на существующем опыте работы с классическими инструментами, такими как Photoshop.
Фотография предоставлена: Создание быстрых каркасов и мокапов
Код
Закодированные мокапы — это эффективный способ сэкономить время и ресурсы, если вы технически уверены в себе.В дальнейшем тоже не будет сюрпризов — если визуальный элемент не может быть создан в коде, его просто исправляют прямо сейчас.
Если вы не очень опытны, вы, скорее всего, сможете изучить больше концепций в специализированном инструменте, чем в коде.
Присоединяйтесь к лучшим дизайнерам мира, использующим UXPin.
Подпишитесь на бесплатную пробную версию. Попробуйте бесплатно!Сотрудничество с разработчиками над мокапами
Мокапы пользовательского интерфейсаявляются одними из самых важных документов для разработчиков, потому что именно там они определяют, как создавать визуальные эффекты и даже если это возможно.Вот несколько советов, которые помогут упростить процесс сотрудничества и передачи обслуживания:
- Объясняйте детали, используя атомарный дизайн — Атомный дизайн Брэда Фроста разбивает все на мелкие компоненты, чтобы вы могли лучше донести свои идеи.
- Обращайте внимание на интерактивные и анимированные элементы — Поскольку макеты статичны, движение и интерактивность не всегда очевидны с первого взгляда. Конкретно укажите на них, чтобы вы могли как можно раньше узнать, возникнут ли какие-либо трудности в серверной части.
- Понимание основ разработки — Веб-дизайн — это не изолированность. Знание основ работы других отделов — не только разработки, но и маркетинга, продаж, исследований и т. Д. — просто создает лучший проект. Если вы немного знаете, чем занимаются разработчики, вы сможете более продуктивно поговорить о том, что находится в макете.
Дополнительные советы по совместной работе можно найти в бесплатном карманном руководстве «Создание макетов пользовательского интерфейса, которые разработчики не будут ненавидеть».
Дополнительная консультация
Для более тщательной обработки макетов, а также макетов и прототипов, загрузите бесплатный пакет UX Design Builder’s Bundle.
Этот комплект содержит наше популярное Руководство по мокапам, полную электронную книгу, полную передовых методов создания макетов пользовательского интерфейса.
Вы также получаете Руководство по каркасному построению и Окончательное руководство по прототипам в общей сложности 350 страниц. Совет основан на реальных примерах таких компаний, как Google Venture, Apple и других.
Присоединяйтесь к лучшим дизайнерам мира, использующим UXPin.
Подпишитесь на бесплатную пробную версию. Попробуйте бесплатно!Как создать макет вашего дизайна
Итак, вы создали нокаут-дизайн — теперь пора представить его вашему клиенту.Вот здесь и пригодятся мокапы. Макет — это полная визуализация вашего дизайна на одном или нескольких продуктах клиента, таких как этикетки, визитки, канцелярские товары и вывески. Более сложный макет может показать книгу клиента на книжной полке или в руках читателя, показывая мир, в котором будет обитать продукт.
Дизайн MartisLupusВ целом, это первый взгляд на то, как дизайн будет работать для клиента и его клиентов, а также реализация видения вашего бренда.
Создание точного макета важно, потому что оно показывает клиенту, чего именно он может ожидать от конечного продукта — при условии, что макет сделан хорошо.Когда дизайнер демонстрирует чрезмерно стилизованный макет, клиент получает результат дизайна, который сильно отличается от того, что он ожидал. И если ваш макет неточно передает бренд, значит, он недостаточно хорошо спланирован.
Именно поэтому мы создали это руководство, чтобы помочь вам понять концепцию, технические особенности и подводные камни, связанные с проектированием макетов.
Начните создание макета на ранней стадии процесса проектирования
— Все начинается в тот момент, когда вы садитесь за дизайн.Иллюстрация Асаэля Вараса
Вы должны начать работу над своим макетом в тот момент, когда вы начнете работать над своим дизайном. Думая о своем дизайне как о реальном продукте в реальном мире на каждом этапе проекта, вы избавляете себя от необходимости переводить его в функциональный продукт позже.
Если вы разрабатываете футболку, нарисуйте ее на фигуре человека, чтобы вы могли увидеть, как ваш дизайн будет цепляться, растягиваться и драпироваться на реальном человеческом теле. А теперь сделайте еще один шаг — что еще на них надето? Где они его носят? Почему они его носят — это часть рабочей формы или это то, что его носитель может немного нарядить на ночь?
Тот же принцип применяется к чему-то вроде упаковки: подумайте о материалах, которые будут использоваться в упаковке, и о том, как она будет на самом деле структурирована.Кто покупает товар? Почему они выбрали его продукту конкурента? Каков их образ жизни, что их волнует, почему они верны этому бренду?
Здесь много информации. Вы видите, когда используете приложение, как вы им пользуетесь и что это то, чем вы можете наслаждаться с другом. Дизайн приложения разработан ufoface.Эти вопросы не только помогут вам создать эффективный дизайн, но и дадут вам фору в представлении вашего дизайна в реальном контексте, что важно, когда дело доходит до выбора изображений для последующего использования в макете.Знакомство с демографической группой потребителей продукта ответит на большинство ваших вопросов. В конце концов, бренд, который использует упаковку из конопли и натуральные красители, обслуживает совершенно иную демографическую группу, чем тот, который использует яркую пластиковую упаковку. Загляните в голову потребителя. Ваш клиент уже находится в голове своего потребителя, поэтому познакомьте его с вашим макетом.
Выберите лучшие инструменты для создания макета
—
С точки зрения программного обеспечения есть несколько способов создания мокапов.Наиболее распространенным является создание их с нуля с помощью Photoshop, где вы можете манипулировать изображениями, которые принадлежат вам, чтобы показать, как ваш дизайн будет выглядеть на определенных объектах.
Для начала грубое наложение с использованием параметра «Наклон» («Правка»> «Преобразование> Наклон»), чтобы подогнать дизайн к трехмерному объекту, может быть полезно для первого этапа проверки работоспособности дизайна, читабельности текста и изображение не искажается формой товара. Изложив основы, вы можете перейти к более сложным инструментам, чтобы создать убедительный макет.
Прежде чем вы начнете создавать сцены в своих макетах, используйте программное обеспечение для форматирования дизайна на 3D-рендеринге готового продукта. Это даст вам приблизительное представление о том, насколько хорошо дизайн читается на объекте. Этикетка продукта Хавьера Милла.Методы создания шаблонов макетов различаются в зависимости от типа объекта (будь то плоская поверхность, изогнутый, морщинистый и т. Д.), Но по большей части все они сводятся к инструментам преобразования, режимам наложения и смарт-объектам.
- Сначала сделайте свой дизайн смарт-объектом («Слой»> «Смарт-объекты»> «Преобразовать в смарт-объект»).Это сохранит исходный контент исходного изображения, что позволит вам легко заменить один дизайн на другой и повторно использовать шаблон макета для будущих проектов. Узнайте больше о смарт-объектах здесь.
- Используйте инструменты трансформации, чтобы вращать, наклонять и правильно размещать дизайн на желаемом изображении.
- Выберите режим наложения в верхнем левом раскрывающемся меню на панели «Слои», чтобы имитировать освещение и текстуру (какой из них вы выберете, будет зависеть от изображения в вашем конкретном документе — умножение и наложение, как правило, хорошие варианты).
- Дополнительные методы, такие как рисование, фильтры настройки и эффекты Photoshop, такие как «Пластика», сделают ваш макет более убедительным в зависимости от типа создаваемого макета. Посмотрите это видео, чтобы получить подробное руководство по некоторым из дополнительных инструментов!
Вы также можете использовать Экшены Photoshop, чтобы ускорить рабочий процесс. С помощью Photoshop Actions вы можете записать себя, шаг за шагом создавая макет. После сохранения шагов в действие, вы можете применять их к новым изображениям снова и снова, чтобы создавать новые макеты одним нажатием кнопки.Если вы хотите узнать больше о работе с Экшенами Photoshop, ознакомьтесь с этим руководством.
Самый простой способ создать мокап — использовать веб-сайт-генератор мокапов. С помощью этих генераторов вы просто загружаете свой дизайн и перетаскиваете его на объект, макет которого хотите создать. Как вы, вероятно, ожидали, у вас будет намного меньше вариантов, когда вы сделаете макет таким образом, и ваши макеты будут выглядеть довольно стандартно. Но это решение, если вы ищете что-то более быстрое.
Всегда убедитесь, что фотография или экшен Photoshop, которые вы используете, лицензированы для коммерческих проектов.В противном случае вы нарушаете авторские права. Узнайте больше о том, как использовать стоковую фотографию здесь.
Сделайте презентацию центром вашего макета
—
Не вводите макет в заблуждение
Начните с демонстрации плоского дизайна, а затем переходите к более креативным макетам. Дизайн dalibor πychВажно показать дизайн различными способами, но начните с плоского изображения дизайна, чтобы клиент знал, как будет выглядеть фактический файл дизайна. Как только вы это сделаете, не стесняйтесь переходить к 3D-рендерингу конечного продукта с дизайном.
Вы делаете макет, чтобы продемонстрировать, как именно ваш дизайн вписывается в бренд клиента. Или, если ваш макет — это их фирменный стиль, как они в нем будут выглядеть. С учетом сказанного, основная цель макета — произвести впечатление на зрителя, продемонстрировать клиенту ваше полное видение без необходимости верить вам на слово. В конечном итоге вы продаете дизайн. Но вы не продаете это напрямую; вы показываете клиенту, каким может быть его будущее, если он купит дизайн.
Сделайте конкретный макет
Очень важно, чтобы вы максимально адаптировали свой макет под клиента. Типовые макеты выглядят, ну, типовые:
Эти макеты служат для того, чтобы дизайны выглядели 3D, но они ничего не говорят своим потенциальным клиентам, кроме отсутствия мышления о бренде. Очень легко поменять один дизайн на другой, одну компанию на другую. Здесь нет глубины, только рисунки на стенах, которые могут быть в любом здании и где угодно.Каждая компания имеет богатую, уникальную культуру, и эффективный макет расширяет возможности этой культуры, показывая, как в нее вписывается новый дизайн. Когда ваш клиент смотрит на ваш макет, он должен сказать: «Это мы. Вот кто мы. Это то, что нам нужно ».
Хорошо продуманный макет выглядит как видение будущего. Разработка логотипа goopanic.Сравните их с дизайном Lalu Academia Des Artes справа и обратите внимание, насколько более эффективно настроенный макет передает, как дизайн будет выглядеть на стене клиента.
Хотя это еще один макет настенного дизайна, он выходит за рамки общих макетов, помещая дизайн в конкретную и реалистичную среду. Он показывает ученикам, как те, кто посещает школу, и помещает их в реальные сцены, которые разыгрываются каждый день в кампусе: болтают в коридоре, в то время как другие работают в лабораториях и прислоняются к фасаду здания, наблюдая за проезжающими машинами.
Состав отличного макета презентации
Эффективный макет не просто делает дизайн трехмерным — он воплощает его в жизнь.Когда вы работаете над макетом, помните следующие советы:
- Покажите продукт в действии. Думайте об этом как о диораме, изображающей продукт в его естественной среде обитания.
- Держите макет сфокусированным. Если вы демонстрируете интерьер здания со своим дизайном на баннерах и вывесках, не отвлекайте зрителя множеством конфликтующих элементов. Да, ваш макет может быть заполнен потребителями, но они не должны отвлекать от дизайна, который вы демонстрируете.
- Держитесь подальше от стоковых фотографий.Они не адаптированы к вашему клиенту и, как следствие, редко эффективно передают дизайн.
- Подумайте, как дизайн может адаптироваться к различным условиям в дизайне бренда. Можете ли вы сделать из него выкройку? Могут ли измениться цвета?
- Продемонстрируйте несколько хорошо продуманных макетов «сцен» с дизайном. Это расширит ваше видение для клиента.
Макет может сделать скучный дизайн более интересным, чем он есть на самом деле.Когда вы просматриваете макет, обязательно сначала внимательно посмотрите на плоский дизайн, чтобы убедиться, что он действительно соответствует вашим ожиданиям. Таким образом, реальный дизайн закрепляется в вашем сознании, а не в макете, что может помешать вам мысленно оправдать неудачный выбор дизайна и элементы, которые не относятся к бренду, потому что вы в восторге от макета.
Дизайн макета — это начало разговора, а не конец
— Дизайн Тео Деку.
Надеюсь, к настоящему времени вы улучшили свой макет игры, но это не значит, что ваша работа сделана.Независимо от того, насколько хорош ваш макет, в конце концов, это в основном инструмент для презентации. Ваш клиент может продолжать получать запросы на доработку самого дизайна или того, как он выглядит на рендерингах. Вот почему вы делитесь файлом с плоским дизайном вместе со своими макетами.
Макет — это способ для всех, кто участвует в проекте, увидеть, куда он движется, и при необходимости перенаправить его. Цель не обязательно заключается в том, чтобы предоставить что-то, что клиент с энтузиазмом одобрит без изменений (хотя это приятно, когда это происходит!), А в том, чтобы начать разговор, который приведет вас к версии дизайна, которая соответствует тому, что они ищут. для.Сильные макеты делают возможной продуктивную беседу.
Графический дизайн — твоя пробка?
Зарегистрируйтесь как дизайнер на 99designs и присоединяйтесь к нашему глобальному творческому сообществу!
Каркас, макет, прототип — в чем разница
Введение
Вы часто слышите такие термины, как sketch , wireframe , mockup и prototype при работе с компанией, занимающейся веб-разработкой, но действительно ли вы понимаете, что означают эти термины? Вы бы знали, когда использовать каркас, а когда — прототип?
Давайте начнем с причин, по которым вам следует начинать с эскиза, каркаса, макета или даже прототипа:
- Чтобы провести мозговой штурм или выяснить, что вы хотите построить.Они созданы, чтобы помочь вам определить свои ожидания.
- Сэкономьте деньги на разработчиках и четко опишите, что вам нужно для сборки.
- Используйте их, чтобы привлечь инвесторов, первых клиентов и соучредителей.
При общении с командой разработчиков важно понимать эти термины.
Исходя из нашего опыта, 2-3 звонков и примерно 2,5 часа бизнес-анализа необходимы, чтобы определить, что именно нужно построить.В то время как создание макетов для простого мобильного приложения занимает минимум 5-8 часов.
Как выглядит процесс разработки приложения?
На приведенном ниже графике показаны все этапы типичного пути разработки представления дизайна. Важно выполнять эти шаги каждый раз, когда вы создаете новый продукт.
TL; DRНачните с простого наброска на чистом листе бумаги. Затем создайте каркас , который упорядочивает содержимое и функции вашего приложения.Добавьте цвета, значки, изображения и логотипы в свой каркас для макета . В завершение оживите ваши макеты с помощью интерактивных элементов.
В чем разница между эскизом, каркасом, макетом и прототипом?
# 1 ЭскизПо сути, это просто необработанный рисунок от руки на листе бумаги, который дает вам представление о вашем приложении с низкой точностью. Это самый быстрый способ подготовить идею к мозговому штурму. Даже простой набросок может описать вашу идею лучше, чем слова.Генерируйте идеи, меняйте детали, визуализируйте то, что у вас на уме; все зависит от вашего воображения. Этот шаг необходим для перехода к этапу каркаса .
Мой любимый инструмент для этого: Ручка и шаблоны на бумаге.
# 2 Что такое каркас?Каркас эквивалентен скелету или простой структуре вашего веб-сайта / приложения. Каждый из них используется для описания функциональности продукта, а также отношений между представлениями (что произойдет, когда вы нажмете определенную кнопку).На этом этапе обычно принимаются решения о том, что (контент / функции) и где разместить на веб-сайте или в приложении. Этот шаг не распространяется на дизайн продукта.
Мой любимый инструмент для этого: Balsamiq
# 3 Что такое мокап?В Brainhub мы никогда не начинаем создавать приложение, пока не закончены макеты. С таким представлением вы можете начать работу над процессом разработки, а разработчик сможет воплотить ваши макеты в реальность. Любой макет обеспечит изображение средней точности.Добавьте цвета, шрифты, текст (Lorem ipsum), изображения, логотипы и все остальное, что будет формировать ваш каркас. Ваш результат — статическая карта приложения. Подумайте о практике пользовательского интерфейса при формировании этого шага. Если у вас нет возможности перенести макеты на следующий этап, просто передайте это на аутсорсинг.
Мой любимый инструмент: Sketch
# 4 ПрототипПрототипы предлагают высококачественное представление вашего приложения. Это похоже на макет, обогащенный элементами UX, взаимодействиями, анимацией и всем остальным, что вы хотите испытать при нажатии кнопок.Этот шаг не всегда требуется для создания приложения. Если вы не разработчик, я настоятельно рекомендую иметь прототип, чтобы рассказать о своей идее друзьям, семье и потенциальным инвесторам. Единственное, чего не хватает, так это функциональности. Это может дать вам ощущение использования настоящего приложения, но это всего лишь изображения, связанные друг с другом.
Получите обратную связь от своих клиентов с помощью прототипа и измерения.
Мой любимый инструмент для этого: UXPin
Дополнительные ресурсы:
- Презентация UXPin по той же теме -> здесь,
- Проницательное обсуждение на Quora разницы между каркасом, макетом и прототипом -> здесь,
- Еще одно обсуждение той же темы -> здесь.
Одна картинка — это больше тысячи слов. Ниже вы можете увидеть основное различие между каркасами и мокапами .
Что такое мокап и для чего он нужен?
Определение
Макет — это концептуальный инструмент, который особенно используется в веб-разработке. По сути, это ранний набросок веб-сайта или веб-приложения. Мокапы в основном используются для создания концепции, чтобы преобразовать идеи и концепции в конкретный дизайн.Обычно они включают окончательную структуру навигации и подробные элементы дизайна, так что они часто напоминают окончательный дизайн веб-сайта.
Мокапы варьируются от простых шаблонов без функциональности до интерактивных прототипов, созданных с помощью специального программного обеспечения для создания макетов. Небольшие проекты часто не требуют использования макетов. В этом случае шаблоны создаются непосредственно в HTML и CSS или готовые шаблоны адаптируются к индивидуальным требованиям.
Отличие от каркаса и прототипа
Хотя термины «каркас», «прототип» и «макет» часто используются как синонимы, это независимые концептуальные инструменты.Это три различных типа или стадии проектирования, которые выполняются перед фактическим программированием.
Каркас представляет собой самую раннюю версию шаблона в веб-разработке и, в отличие от макетов, не содержит цветов, текста (типографика) или визуального контента (фотографии, графика). Эту первую подобную эскизу концепцию можно либо создать на компьютере с помощью специального программного обеспечения для создания каркасов, либо нарисовать вручную. Поскольку каркасы — это первый черновик, в них отсутствует какая-либо функциональность, поэтому они считаются концептуальными чертежами с низкой точностью.
Мокапы основаны на существующей каркасной структуре и представляют собой следующий этап проектирования. Используя текстовые и визуальные элементы, макет может быть очень похож на дизайн конечного продукта. Вот почему для презентаций часто предпочитают мокапы. Хотя макеты изначально были статичными, теперь можно создавать интерактивные макеты и предоставлять им простые функции, такие как внутренние ссылки, с помощью современного программного обеспечения для создания макетов. В зависимости от сложности и объема макеты могут очень близко подходить к так называемому «прототипу».
Многослойные сложные макеты служат основой для прототипов, которые, в зависимости от их сложности, считаются концепциями средней и высокой точности. Прототипы почти напоминают конечный продукт. В отличие от традиционных статических макетов, прототипы интерактивны и обычно уже содержат все запланированные функции веб-сайта или приложения.
Применение макетов
Современная веб-разработка использует макеты во время разработки веб-сайтов или приложений, чтобы представить их клиентам или тестовой аудитории в рамках контроля качества и демонстраций.Эти макеты часто отображают окончательную версию приложения или веб-сайта с полной функциональностью, что позволяет оценить предыдущие разработки. Во время этой оценки идеи, требования и пожелания клиентов и пользователей в отношении дизайна, пользовательского интерфейса, структуры и объема функций могут быть сопоставлены и проверены. Благодаря уже очень точному представлению готового продукта, возможные проблемы и неточности в дизайне, функциональном объеме или структуре контента веб-сайта могут быть быстро и эффективно устранены, так что они не войдут в прототип.
Преимущества мокапов
Использование мокапов в веб-разработке имеет много преимуществ. Поскольку вы можете создавать макеты с относительно небольшими усилиями и обеспечивать реалистичное впечатление о конечном продукте, вы можете использовать их для проверки удобства использования и выявления потенциальных ошибок и источников ошибок, прежде чем тратить много времени на разработку. Проблемы могут быть выявлены до создания прототипа, и риск необходимости полностью изменить дизайн продукта во время разработки сводится к минимуму.Таким образом, использование макетов для веб-разработки может сэкономить много денег и времени.
Инструменты для создания макетов
Вы можете использовать программы редактирования презентаций и изображений, такие как Microsoft PowerPoint или Adobe Illustrator, для создания простых макетов. Однако по сравнению со специальным программным обеспечением для создания макетов их довольно сложно использовать и они предлагают меньше функций. Специальные инструменты для создания макетов предоставляют вам множество элементов шаблона и возможность быстро и легко создавать модульные макеты, а также простые последовательности взаимодействия.
Скриншот инструмента создания макетов сайта moqups.com.
Самыми известными инструментами создания макетов для веб-сайтов и приложений являются:
- Бальзамик
- Панцирь
- Поп
- РамаAPP
- мокапы
Ссылки по теме
Похожие статьи
Что такое мокапы? | Школа кодов викингов
Мы уже говорили о мокапах, но пора уделить им более тщательное внимание.
По сути, макет — это просто набросок, который представляет, как будет выглядеть сайт:
Это означает, что потребует наименьших усилий, чтобы дать вам наиболее полезный взгляд на то, что вы собираетесь строить.
Мы живем в мире, где нам нужно действовать быстро и максимально гибко воплощать наши идеи. Создание макетов обеспечивает идеальный баланс между реалистичным представлением конечного продукта и простотой модификации. Вы можете создать макет сайта всего за несколько минут, используя такие инструменты, как Balsamiq (который вы увидите в следующих демоверсиях), а это чуть больше времени, чем требуется, чтобы набросать его вручную.
Мокапыполезны как на творческой фазе проекта — например, когда вы пытаетесь выяснить свои пользовательские потоки или правильную визуальную иерархию, — так и на стадии производства, когда они будут представлять целевой продукт.
Создание макетов как часть вашего творческого процесса и процесса разработки позволяет вам быстро и легко придумать и повторить на своем сайте, прежде чем вы вложитесь в фактический процесс кодирования. У вас будет что-то осязаемое, чтобы показать потенциальным клиентам или полезные рекомендации по работе, когда вы начнете двигаться вперед.
Небольшие затраты времени на изучение этого навыка в несколько раз сэкономят его в будущем.
Верность
Mockups — это не какой-то отраслевой стандарт, который нужно запоминать и придерживаться — существует столько же различных способов создания макетов сайтов, сколько дизайнеров и разработчиков в мире.Тем не менее, общий способ определить «грубость» ваших макетов — использовать термин «верность».
Верность — это мера того, насколько близок ваш макет к конечному продукту. Мокап с низкой точностью — это, по сути, простой набросок:
Высококачественные макеты, подобные тем, которые сделаны в фотошопе, в основном представляют собой идеальные по пикселям изображения окончательного сайта:
В нашем случае мы будем балансировать между ними двумя, стремясь создавать мокапы, достаточно точные для построения, но достаточно простые для быстрого создания.
Вайрфреймы против мокапов против прототипов
Стоит прояснить еще одну распространенную путаницу. Люди часто используют термины «каркас», «макет» и «прототип» как синонимы, но они представляют разные вещи.
- Каркас действительно предназначен для структурного представления вашего сайта.
- Мокап конкретизирует статический визуальный вид сайта (например, с большим количеством изображений и цветных деталей)
- Прототип специально предназначен для демонстрации взаимодействия пользователя с этим дизайном (так что он больше не статичен)
Обратите внимание, что эти определения на самом деле не связаны напрямую с верностью — у вас может быть прототип с действительно низкой точностью, который просто определяет ключевые взаимодействия с пользователем, или каркас высокой точности, содержащий все элементы страницы.
Читать вайрфреймы, прототипы, макеты — в чем разница? № от Marcin Treder из DesignModo за хорошее рассмотрение различий между этими вещами.
Прочитали. Вы не путали каркасные модели с мокапами? от Creately для более четкого различия между ними.
В нашем случае мы немного стираем границы между макетами и прототипами — большая часть того, что мы производим и используем, будет статическим представлением конечного продукта (классический вариант макета), но мы также будем указывать взаимодействие пользователя с нашим дизайном, который начинает немного больше относиться к территории «прототипов».
Дело здесь не в том, чтобы теряться в терминологии, а просто делать то, что работает. Вы заметите различия, если проведете больше времени в отрасли.
Как мы используем мокапы
Одна из самых приятных частей создания веб-сайтов — это взять идею из головы и увидеть, как она оживает прямо перед вами на этапе творчества. С макетами вы можете делать это невероятно быстро, и вы можете выполнять итерацию по новым проектам или потокам всего за несколько щелчков мышью (вместо того, чтобы изменять существенные части разметки или кода на рабочем сайте).
Наш процесс разработки, как проектов, которые мы назначаем, так и методов, которые мы обучаем, будет во многом зависеть от использования мокапов. Они являются одновременно инструментами создания идей (для UX и дизайнерских решений) и ссылками, к которым можно вернуться, когда вы начнете создавать код.
После того, как творческий процесс перешел в производственный процесс, макет представляет вашу цель. Очень полезно иметь что-то, к чему можно вернуться, когда вы возитесь с бэкендом и почти не помните, что именно вы создаете.
Вы можете вспомнить из предыдущего мини-курса, что наш высокоуровневый процесс создания сайтов выглядит примерно так:
- Определите пользователя и его цели
- Создание макета сайта, который выполняет эти задачи
- Разбейте макет на отдельные части («истории»)
- Для каждой истории начните с макета ее конечного результата (например, конкретной функции) и создайте инфраструктуру данных, серверную часть и интерфейсную часть, необходимые для ее фактического создания.
- Проверить, рефакторинг и отгрузить.
Таким образом, макет не только дает нам общее направление и масштаб сайта, но мы разбиваем его на части и используем эти части, чтобы направлять наш процесс разработки, что подробно рассмотрено в предстоящем мини-курсе по проектированию.
Вы скоро познакомитесь с мокапами, и мы надеемся, что вы поймете, насколько они полезны в творческих и производственных процессах. Они будут использоваться в будущих заданиях, и вам также будет предложено создать некоторые из них.
Объяснениекаркасов и мокапов | Lucidchart Blog
Когда вы представляете себе процесс проектирования веб-сайта или приложения, вы, вероятно, думаете о сложном кодировании и цифровых интерфейсах, необходимых для воплощения этих дизайнов в жизнь.
Но большинство проектов начинаются с гораздо более простого масштаба.
Каркасные модели с низкой точностью — это простой, но бесценный инструмент для планирования и разработки проектов. Делаете ли вы наброски на доске или используете цифровой холст, каркасы помогают членам команды и заинтересованным сторонам, участвующим в различных дизайнерских решениях, сотрудничать и планировать приложения, прежде чем воплощать эти идеи в реалистичные модели и прототипы.
Каркасные модели, макеты и прототипы
При разработке приложения или веб-страницы дизайнеры и разработчики пользовательского интерфейса и пользовательского интерфейса используют ряд инструментов планирования, чтобы повторять свои идеи и обрисовывать в общих чертах свои решения. Существует три основных уровня визуальных контуров:
- Каркасы
- Мокапы
- Прототипы
Каждое решение помогает дизайнерам отображать и визуализировать свои планы дизайна с разной степенью детализации и функциональности на этапе разработки.
Что такое каркас?
Каркас — это скелетный план или каркас, который описывает базовый дизайн и функции пользовательского интерфейса (например, веб-сайта или приложения).
Цель каркаса — быстро и легко общаться:
- Содержимое страницы
- Структура и макет страницы
- Функции приложения
Другими словами, каркас описывает базовую структуру, функции, и содержание страницы.
Вайрфреймы могут быть как с низкой, так и с высокой точностью, в зависимости от ваших потребностей и предпочтений. Каркас с низкой точностью часто набрасывается на бумаге или на доске, и это полезный способ придумать базовый план вашего дизайна. Каркас высокой точности имеет больше деталей и может включать в себя простые рабочие процессы и взаимодействия.
Что такое макет?
Мокап — это следующая, более глубокая итерация схемы каркаса. Макет — это статический каркас, который включает в себя больше стилистических и визуальных деталей пользовательского интерфейса, чтобы представить реалистичную модель того, как будет выглядеть конечная страница или приложение.
Хороший способ думать об этом — это то, что каркас — это план, а макет — это визуальная модель.
Макет обычно включает дополнительные визуальные детали, такие как:
- Цвета, стили, графика и типографика
- Стилизованные кнопки и текст
- Графика навигации
- Расстояние между компонентами
Мокапы — полезные инструменты для понимания и передачи информации о том, что Окончательный интерфейс должен выглядеть как и дать заинтересованным сторонам возможность предварительно просмотреть варианты дизайна и стиля, прежде чем приступить к созданию приложения в виде функционального прототипа.
Что такое прототип?
Прототип — это ранняя модель продукта или дизайна, созданная для проверки концепции.
Прототип обычно представляет собой функциональную и интерактивную симуляцию, которая включает в себя все стилистические детали, предназначенные для конечного результата. Эта модель позволяет разработчикам увидеть, как их продукт работает в реальной среде, и проверить удобство использования своих дизайнов.
Основная цель — протестировать проект, прежде чем вкладывать время и деньги в разработку полного продукта.Прототип может помочь разработчикам устранить любые ошибки или недостатки дизайна, увидеть поток пользователей и взаимодействие на практике, а также обеспечить поддержку и участие заинтересованных сторон.
Дизайн с высокой точностью и с низкой точностью
Прежде чем мы сможем погрузиться в различные уровни каркасного дизайна, нам необходимо понять дизайн low-fi и high-fi.
Fidelity описывает уровень детализации и реалистичности дизайна. При создании каркаса или макета уровень точности может варьироваться от простого наброска на бумаге (низкая точность) до более подробного — и даже интерактивного — приложения (высокая точность).
Ниже мы разберем эти подходы к проектированию.
Что такое каркас с низкой точностью воспроизведения?
Каркас с низкой точностью обычно начинается с простого статического контура на бумаге или цифровом холсте, таком как Lucidchart.
Каркасные модели с низким качеством изображения помогают направлять процесс мозгового штурма, поскольку дизайнеры и разработчики набрасывают основные функции и рабочие процессы, которые могут понадобиться приложению. Поскольку проекты low-fi — это быстрые наброски, их легко пересматривать и развивать по мере того, как команда конкретизирует идеи.Если команда решит пойти в другом направлении, значит, они еще не потратили ценные ресурсы на реализацию этой идеи.
Когда использовать каркасные модели с низким качеством изображения
Каркасные модели с низким уровнем достоверности (low-fi) — это быстрый и простой способ визуализировать основные концепции и планы дизайна. Используйте низкокачественные каркасы для определения визуальных и типографских иерархий, планирования взаимодействий, навигации и переходов, а также для организации структуры интерфейса приложения.
Преимущества
Каркасные модели с низким качеством изображения имеют несколько ключевых преимуществ для раннего планирования дизайна:
Недорого: Все, что вам нужно, — это ручка и бумага, белая доска или цифровой холст.Поскольку вы создаете простую схему, вы еще не рискуете вложить дополнительные расходы в разработку дизайна.
Fast: Вы можете создать низкокачественный каркас за считанные минуты, что позволит вашей команде набросать и сравнить несколько идей за один присест. Низкокачественные каркасы — это больше о контуре, чем о деталях, поэтому вы можете использовать заполнители и простой текст для быстрой и эффективной передачи ваших идей.
Совместная работа: Каркасные модели с низким качеством изображения не требуют специальных навыков проектирования или кодирования, поэтому вы можете собирать информацию от разнообразной группы заинтересованных сторон, в том числе тех, кто не имеет технического образования.
Итак, когда следует использовать каркас с низким качеством изображения?
Каркасы с низким качеством изображения идеально подходят для совещаний по планированию проекта на раннем этапе, но могут поддержать мозговые штурмы на любой стадии разработки. Они также хороши, когда вы хотите получить отзывы от нескольких заинтересованных сторон, не имеющих опыта в дизайне. Любой может внести свой вклад и сотрудничать в разработке каркасного дизайна с низким качеством изображения.
Хотя большая часть каркасов будет иметь место на ранних этапах разработки, когда вы планируете проект, они также полезны на любом этапе, когда вам нужно вернуться к чертежной доске.
Например, если вы создаете прототип для первоначального дизайна и обнаруживаете проблемы с удобством использования или рабочим процессом, вы можете использовать каркас, чтобы набросать новые планы рабочего процесса или добавить взаимодействия, которые вы ранее пропустили.
Lucidchart упрощает планирование, совместное использование и интеграцию низкокачественных каркасных итераций в рабочие процессы проектирования, чтобы каждый член команды имел доступ к самой последней информации.
Избегайте дублирования работы и держите свою команду на одной странице, создавая и публикуя свои каркасы на одной панели для совместной работы.Интуитивно понятное решение для блок-схем Lucidchart интегрируется с вашими любимыми инструментами, чтобы упростить обмен файлами, поэтому вы можете подключать несколько файлов каркасов непосредственно к вашим картам процессов.
Что такое высококачественный каркас?
Каркасные модели с высокой точностью воспроизведения идут на шаг дальше, чем каркасы с низким качеством изображения, и включают больше деталей и иллюстрируют простые взаимодействия.
В отличие от низкоуровневых каркасов, высококачественные каркасы обычно кликабельны и демонстрируют основные взаимодействия и потоки приложений, такие как вход в систему или простую навигацию.
Когда использовать высококачественные каркасы
Высокоточные каркасы лучше всего применять после начального сеанса мозгового штурма, когда вы уже наметили базовую структуру и схему приложения. Обычно высококачественные каркасы создаются как следующая итерация дизайна на основе оригинального низкокачественного каркаса.
Высококачественные каркасы включают в себя детали цвета, стиля, типографики и интервалов — часто с базовыми взаимодействиями — поэтому дизайнеры, разработчики и другие заинтересованные стороны могут визуализировать план.
Используйте высококачественные каркасы, если вы хотите представить упрощенную, но реалистичную модель того, как будет выглядеть окончательный интерфейс и как он будет себя вести.
Этот каркас поможет членам команды и заинтересованным сторонам принимать обоснованные решения о том, какие элементы работают, какие элементы отсутствуют и какие проблемы с удобством использования могут возникнуть, прежде чем они потратят время на создание и тестирование прототипа.
Вайрфреймы с низкой точностью гарантируют, что инженеры создают то, что ожидают менеджеры по продуктам и профессионалы UX, экономя драгоценное время и деньги команд в общем процессе разработки.
Легко и наглядно составляйте карты и создавайте приложения на Lucidchart. Благодаря пользовательскому интерфейсу, iOS, Android и другим формам макетов, а также слоям и действиям, которые сделают ваш дизайн интерактивным, наше визуальное рабочее пространство поможет вам в кратчайшие сроки наметить низкокачественные каркасы.
Вайрфреймы против мокапов: что лучше?
Несмотря на их сходство, и каркасы, и макеты имеют свое уникальное значение в процессе веб-дизайна.
Каркасы веб-сайтов — это низкокачественные, «голые» чертежи, обычно представляемые с заполнителями для окончательного содержания, которые необходимо заполнить на более позднем этапе цикла разработки.
Создавайте макеты и макеты за считанные минуты с Justinmind
Скачать бесплатноWireframes призваны помочь представить, что происходит в дизайне, без того, чтобы команде дизайнеров приходилось тратить слишком много времени на детали.
Зачем нужен каркас?
Визуализируйте общий макет веб-сайта или приложения
Говорят, что картинка стоит 1000 слов, поэтому мы в первую очередь создаем каркас. Читать все спецификации будущего веб-сайта — это боль, и удивительно, что мы вообще это сделали.
Даже с очень «схематичным» каркасом каждый сможет увидеть, как будет выглядеть будущий дизайн. Да, и каркасные модели проясняют ситуацию! Они могут помочь нам организовать и поделиться своими идеями, а также избежать недопонимания.
Попробуйте сами, и вы увидите, что возможно, а что нет. Но помните, что каркасы служат для демонстрации общего макета и обычно не фокусируются на цвете или типографике.
Постройте доверительные отношения с пользователем и заинтересованными сторонами
Важно убедить пользователя в том, что он находится там, где хочет.Мы должны сообщить им, что они находятся в нужном разделе страницы (с помощью панировочных сухарей, цвета или других наглядных пособий).
Как только вы получите представление о своем веб-сайте, вам нужно подумать о людях, которые потенциально будут его использовать. Эти профили пользователей называются персонами.
Как только вы это сделаете, вы можете начать думать о своем веб-интерфейсе, всегда принимая во внимание человеческие взаимодействия, личности и поведение пользователей.
Точно так же каркасы отлично подходят для демонстрации вещей клиентам, поскольку они могут помочь в определении спецификаций и, в конечном итоге, используются для проверки и утверждения клиентом.
Имея в руках каркас, мы получаем гораздо лучшую картину конечного результата. Создание каркасов с помощью профессионального каркасного инструмента может сэкономить нам время в процессе разработки и избежать переделок.
Онлайн-каркас может быть быстро опубликован и прокомментирован между командами, и мы можем вносить в него текущие изменения, чтобы мы могли видеть, что делается в режиме реального времени.
Время — деньги, это все знают. Будь то концепция, дизайн или разработка, экономия времени также может означать экономию ресурсов.
Одной из основных причин создания каркаса конечного продукта является экономия времени, и поэтому он обычно разрабатывается с использованием более дешевых и простых технологий, чем те, которые используются в конечном продукте.
Почему бы вам не создавать каркасные модели?
В некоторых случаях клиент может не полностью понять суть каркаса или просто не согласен с основными целями, что не является отличным началом!
В этих случаях важно сначала согласовать четкое направление дизайна, а затем приступить к созданию конкретных макетов.
Бумага и цифровые каркасы
Многие дизайнеры потратят время на создание каркаса на бумаге, прежде чем они начнут создавать цифровую версию дизайна.
Это потому, что, хотя создание каркаса с низкой точностью является дешевым и быстрым, оно не может быть дешевле или быстрее, чем рисование ваших идей на листе бумаги — сам по себе сильный аргумент.
Но это еще не все. Некоторые дизайнеры, такие как Александр Скогберг, утверждают, что воплощение ваших идей для каркасов на бумаге поможет вам выявить проблемные области и потенциальные проблемы в дизайне намного раньше, чем обычные цифровые каркасы, сэкономив драгоценное время и усилия всех участников.
Одним из преимуществ рисования каркасов на бумаге является то, что каждый в команде может внести свой вклад. Собрав всех вместе сесть за стол для рисования, можно улучшить общение и расширить участие всех членов команды, которые ценят то, что их голоса слышны.
Помните, что не все, особенно члены команды, не являющиеся дизайнерами UX, будут знакомы с программным обеспечением, связанным с созданием каркасов. Но любой может взять ручку и сделать предложение.
Логично, что создание каркасов на бумаге даст вам ценное представление о дизайне на самых ранних этапах.Но на бумажных каркасах можно только пойти.
Считайте разработчиков в своей команде. Учитывая их знания и навыки, у них, вероятно, не возникнет проблем с логикой в вашем бумажном каркасе.
Но одним из ключевых преимуществ создания каркаса или прототипа является то, что большинство инструментов экспортируют эти проекты в код — большая победа для разработчиков. Больше не нужно беспокоиться о создании кода для дизайна, а лучше строить на основе, которую дает программное обеспечение каркаса.
С определенного момента вам нужно будет преобразовать ваш каркас в реальное программное обеспечение, которое может учитывать такие вещи, как взаимодействие и навигационный поток.
Если вы хотите провести какое-либо пользовательское тестирование, например, вам нужно выделить время на создание цифрового каркаса, даже если он низкокачественный.
Введение в макеты
Макет — это статический высокопрофессиональный визуальный проект дизайна или устройства, используемый для представления структуры информации, визуализации контента и демонстрации основных функций в статической форме.
В отличие от каркаса, макеты содержат визуальные детали, например цвета и типографику.В то время как каркасы являются заполнителями дизайна, макеты создаются, чтобы дать зрителю более реалистичное представление о том, как будет выглядеть конечный продукт.
Как объясняет Марсело Грасиолли: «Хотя макет способствует достижению цели каркаса по документированию и организации видения команды, он имеет дополнительное преимущество, которого нет у каркаса: с его превосходной визуализацией макет более полезен для заинтересованных сторон и инвесторов».
По сути, макет добавляет визуального богатства фундаменту, заложенному каркасом.
Упорядочивание деталей проекта
Мокапы могут помочь дизайнеру выявить визуальные элементы, которые противоречат друг другу, еще до того, как вы придете к окончательному окончательному проекту. Визуальные иерархии, которые показывают разницу между элементами дизайна, такими как шрифт и цвет, должны определяться на этапе создания макета в процессе проектирования.
Благодаря более совершенным визуальным элементам, чем каркасные модели, макеты позволяют заинтересованным сторонам фактически просматривать визуальную сторону проекта.
Мокапы гибкие, и это упрощает итерацию.Подобно работе с каркасом, макеты позволяют легко и быстро вносить изменения, которые могут складываться довольно быстро, поскольку они не требуют кода или программирования.
Перевод идей на язык заинтересованных сторон
Для клиентов и заинтересованных сторон представление цифрового макета может быть лучшим выходом, поскольку простого использования плоского дизайна может быть недостаточно с точки зрения визуализации и перевода идей.
Иногда клиенту слишком сложно понять конечный результат, просто взглянув на плоский графический файл, который, как правило, полностью вырывается из контекста.
Здесь макет размещен на каркасе, обеспечивая язык, на котором все могут общаться и понимать.
Обмен идеями между членами команды
Макет может не только служить средством обсуждения между дизайнером и пользователем или заинтересованной стороной, он также может выступать в качестве средства связи между членами проектных групп.
Мокапымогут помочь облегчить работу вне дисциплинарных границ, объединяя команды, работающие над разными целями.
Как протекает и работает ваш первоначальный дизайн? Глядя на макет, вы должны иметь хорошее представление о том, как будет выглядеть конечный продукт, и приблизительное представление о том, как он может функционировать (даже если функциональность еще не реализована).
Взгляд пользователя
Бумажные и низкокачественные макеты пользуются большим спросом у пользователей, потому что они дешевы. Но если пользователю представлена ранняя версия системы — макет цифрового пользовательского интерфейса среднего уровня точности, — который потребовал значительной работы, он может быть более склонен сосредоточиться на ценности дизайна.
Почему не стоит использовать мокапы?
Критика макета проистекает из того, что он требует значительного времени и ресурсов для создания чего-то, что затем нужно будет разобрать и собрать во время разработки.
Как показано на этих слайдах: «Мокапы экранов могут поддерживать процесс сбора требований, если их вводить в нужное время, но если они будут введены слишком рано, они могут стать проблематичными».
Инструменты для создания макетов и каркасов теперь становятся более ориентированными на пользователя.Таким образом, они не должны быть ограничены такими ролями, как IA (информационный архитектор) или UX-дизайнеры. Вайрфреймы принадлежат всем.
От дизайнеров до конечных пользователей и заинтересованных сторон: каждый должен иметь возможность создавать, тестировать и комментировать их. Но сами по себе экран с низким качеством изображения или бумажные макеты не могут уловить поток, проходящий через систему.
Как насчет компромисса? Высококачественные макеты экрана
Возможно, самая большая дискуссия вокруг дизайна макета — это необходимость или отсутствие такового для включения взаимодействий.Иногда вы хотите, чтобы ваш пользователь мог визуализировать ссылку или взаимодействие между элементами.
Например, какое информационное окно будет отображаться после нажатия кнопки или как цвет окна изменяется при наведении на него указателя мыши. В этом случае низкоуровневого каркаса или бумажного макета недостаточно.
Идеальное решение — это макет экрана с высокой точностью воспроизведения: модель, которая работает так же, как если бы это был настоящий веб-сайт или мобильное приложение, реагируя и взаимодействуя с пользователем.Другими словами, макет, который включает в себя некоторые из наиболее важных взаимодействий, которые будет иметь готовый продукт.
Наличие интерактивного макета имеет свои преимущества и недостатки. Когда дело доходит до преимуществ, нет слов о том, насколько ценно иметь дизайн, который можно протестировать на реальных пользователях.
Наличие чего-то, по чему пользователи могут перемещаться и нажимать, принесет много ценных отзывов по всем аспектам макета.
Одним из ключевых преимуществ тестирования вашего макета на пользователях является эффект освещения на вашем навигационном потоке — сложный аспект UX-дизайна, который ни один дизайнер не может себе позволить не протестировать как можно раньше.
Уравновешивание инвестиций и вознаграждения
Критики кликабельных макетов с высокой точностью говорят, что они занимают слишком много времени и требуют затрат на разработку продукта. Отчасти они правы, но только отчасти.
По логике вещей, время, необходимое для создания высококачественного мокапа, будет больше, чем для низкокачественного мокапа. Но потраченное время не будет напрасным — это потраченное время, которое укажет на недостатки вашего макета, прежде чем исправление этих недостатков станет дорогостоящим и напряженным.Этот дизайн может занять много времени, но эти взаимодействия не будут выброшены, когда вы начнете создавать прототип.
Вы хотите создать макет с высокой точностью, который включает в себя наиболее важные взаимодействия, такие как все, что связано с навигацией — результат будет работать как база, на которой будет построен ваш прототип.
В конце концов, время не будет потрачено зря, и в итоге будет выявлено и исправлено множество подводных камней. Кликабельные макеты для победы!
Другими словами, инвестируя время в интерактивный макет, вы сэкономите время на начальных этапах создания прототипа, так как самые важные взаимодействия уже будут там.
Конечно, создание интерактивных макетов или макетов с высокой точностью означает, что вам понадобится инструмент для создания макетов веб-сайта для создания всех этих взаимодействий и проведения соответствующего тестирования. К счастью, мы знаем только одно!
Зачем нужны макеты экрана High-fidelity?
- Ускорить сквозное концептуальное проектирование
- Снизить риск дальнейшего изменения требований клиентами
- Улучшить общение и понимание между разными членами команды.
- Тестирование непосредственно с использованием макета hi-fi экрана
И помните: никогда не создавайте каркасы или макеты веб-сайтов или мобильных приложений без ведома пользователя. Задавайте им вопросы, работайте в фокус-группах, задавайте вопросы и создавайте опросы.