В чем показать макет прототип

Прототип вашего сайта: согласовываем правильно

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

Ведь заказчики в большинстве случаев далеки от разработки, и многие аспекты функционирования web-ресурса, которые очевидны для верстальщиков и дизайнеров, им не понятны. Упуская их из виду на стадии принятия прототипа, клиенты, а вместе с ними и digital-агентства, рискуют добавить себе проблем на этапе создания макета сайта и дальнейшей верстки страниц.

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

Фокус на конфигурации и функциональности

Почему прототип согласовывают прежде, чем готовый макет веб сайта? Потому что он не вызывает у заказчика эмоции своим внешним видом. В прототипе использованы обычные шрифты и нейтральные цвета, ведь на его обсуждении негативно скажутся любые изображения, кроме базовых, таких как логотип, компоненты интерфейса и 2-3 типовых товара, если разрабатывается online-shop. Излишняя визуализация сбивает с толку, смещая вектор дискуссии от анализа функциональности к обсуждению внешнего вида страницы.

А ведь клиенту нужно сосредоточиться на главном:

• структуре,
• функциональности,
• работоспособности веб-ресурса.

Так что светлые блоки с серыми квадратами на презентации прототипа — вполне нормальное явление.

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

Обсуждение и внесение корректировок

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

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

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

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

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

Семантика и структура сайта

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

Интеграция сторонних сервисов

Любой сайт дополняется функционалом, подключаемым извне. Как правило, это разного рода калькуляторы, сервисы оплаты и доставки, емейл рассылки, складского и бухгалтерского учета, CRM и т.д. При этом рекомендуется формировать прототип с учетом масштабирования бизнеса. Если реализация некоторых интеграций выходит за рамки бюджета либо сейчас не требуется, рационально заложить их в макет дизайна сайта сразу, а уже после, в процессе работы, принимать решение об их использовании и подключать по необходимости.

Сбор обратной связи

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

Результатом совместной работы над проектом станет:

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

Прототип, блочная схема, макет – что выбрать?

Пару лет назад я понял, что многие из моих коллег(не дизайнеров) по разному называют результаты моей работы. Они предположили, что блочная разметка (wireframe), прототип (prototype) и макет (mockup) – это одно и тоже – своего рода сероватый, квадратный, эскиз поясняющий гениальные идеи.

Проблема данного обобщения в том, что они не всегда знают, чего ожидать от работы UX дизайнеров (User Experience designers), и по-этому часто путаются. «Почему, черт возьми, этот элемент не активен?», «Ну, я не знал, что должно было произойти после клика по этой ссылке. » – подобные комментарии раздражают многих в UX дизайн проектах…

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

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

Блочная схема (wireframe)

1. Что такое блочная схема?

Блочная схема является низко детализированным представлением дизайна продукта.
Она должна четко отображать:
— основные группы содержимого (что?)
— структуру информации (где?)
— описание и основные визуализации взаимодействия пользователя и системы (как?)

Блочная схема – это не просто бессмысленные наборы серых блоков (хотя на первый взгляд может показаться именно так). Их необходимо рассматривать в качестве основы дизайна и не забывать, что схема должна отражаться все важные части конечного продукта.

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

2. Когда используется блочная схема.

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

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

Прототип (prototype)

1. Что такое прототип?

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

Прототип используется для:
— отражения основных способов взаимодействий с пользователям;
— тестирования взаимодействия разрабатываемой системы с пользователем в качестве готового продукта.
Прототип представляет собой имитацию окончательного взаимодействия между пользователем и программой. Он может не выглядеть так же, как конечный продукт, но должен быть достаточно подробным.

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

2. Когда использовать прототип?

Полный потенциал прототипов раскрывается при проведении юзабилити-тестирования. Подробное моделирование взаимодействия системы с пользователем дает возможность проверить удобство интерфейса ещё до начала разработки.
Обычно прототип не является «чистовым» отображением готового продукта. С другой стороны, прототип является наиболее привлекательной формой проектной документации, позволяющей в доступной форме донести задачу.
Помните, что прототипирование весьма дорогой и трудоемкий вид деятельности. Я бы советовал создавать прототипы, которые могли бы использоваться в разработке (да, это означает, что вам придется писать часть HTML, CSS кода). Это особенно эффективно в относительно простых проектах.
Если все сделано правильно, то в сочетании с юзабилити-тестированием, прототипирование может дать хорошие результаты.

Макет (mockup)

1. Что такое макет?

Макет является средне или высоко детализированным статичным дизайном проекта. Очень часто макет представляет собой конечный дизайн частей или в целом проекта.
Качественно сделанный макет:
— передает структуру информации, визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений;
— позволяет людям понять, как будет выглядеть конечный продукт.
Макеты часто путают с структурными схемами, из-за названия некоторых компаний(gomockingbird.com, mockupbuilder.com).

2. Когда использовать макет.

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

Что же в итоге?

С чего начать?

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

Это минимум. А теперь подумайте, какой из результатов будет наиболее подходящим для вас. Рассмотрим ваш продукт и команду. Что будет лучше для всех вас? Формализованная документация, или неформальные наброски с совместной работой, дискуссии? У вас есть время и деньги на основательное юзабилити-тестирование, или вы собираетесь сделать пару эскизов от руки в местной кафешке?
Какими навыками вы владеете? Можете ли писать код?
Взглянув на себя и всю команду в целом, вы без труда определитесь с необходимым для вам методом.
Можно, конечно, воспользоваться ими всеми и… в большинстве случаев у вас все получится! Не бойтесь идти на этот шаг. У каждого из методов есть свои плюсы, и если все сделано правильно, вы получите отличный дизайн.

Вайрфрейм, макет, прототип: в чем разница?

Это самый первый этап в создании веб-сайта без деталей и подробностей. Его цель — показать структуру будущего сайта и основные тезисы к дизайну.

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

Как создать вайрфрейм?

Большинство веб-дизайнеров предпочитают эти программы:

• Sketch ;
• Wireframe.cc;
• Miro;
• Draftium .

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

Собери прототип сайта бесплатно Нужна только регистрация

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

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

• презентация для членов команды или клиентов для визуализации вашего проекта;
• презентация для инвесторов.

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

Как сделать макет?

Существует несколько популярных программ, используемых для создания макетов, таких как:

• Adobe Photoshop;
• Adobe Illustrator;
• Sketch ;
• Placeit;
• Proto.io .

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

Что такое прототип?

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

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

Как создать прототип?

Вы можете создавать прототипы с помощью разных программ:

• Principle ;
• Origami ;
• Axure RP.

Описанные выше инструменты популярны среди профессиональных веб-дизайнеров и UI / UX-дизайнеров. Но если у вас нет большого опыта в веб-дизайне, есть программы попроще.

Макет против прототипа

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

Вайрфрейм против прототипа

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

Макеты против вайрфрейма

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

Краткие выводы

Теперь вы знакомы с определением макета, а также увидели прототипы и примеры вайрфреймов. Это 3 этапа разработки веб-сайта, которыми определенно не следует пренебрегать.

Чтобы создать вайрфрейм, макет или прототип вашего будущего веб-сайта, вам не обязательно становиться гуру профессиональных программ для разработки пользовательского интерфейса / UX. Вы можете использовать довольно простые инструменты.

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

Создайте структуру сайта в Structura.app из готовых блоков, определите взаимосвязи между блоками и страницами. Поделитесь результатом со своими коллегами или клиентами, внесите необходимые правки.

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

Что еще можно почитать по теме:

Каркас, макет, прототип: что это такое?

Эта статья предназначена для начинающих дизайнеров UX / UI.

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

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

• Он показывает основные куски контента
• Он рисует схему и структуру макета
• На нем изображен самый простой пользовательский интерфейс

Существуют разные способы создания каркаса. Один из способов — нарисовать его в записной книжке следующим образом:

Другой способ — использовать инструменты каркаса, такие как UXpin, Balsamiq и т.д.

Существует множество инструментов, которые вы можете использовать.

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

Макет — это визуальный способ представления продукта. Каркас в основном представляет структуру продукта, макет показывает, как будет выглядеть продукт. Но тем не менее, макет не доступен для клика (точно так же, как и каркас). В отличие от каркаса, макет является либо средним, либо высокоточным отображением дизайна.

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

В отличие от каркаса, вы не можете набросать макет. Возможно, вам понадобится использовать макет, можете попробовать Marvel, InVision или Moqups.

Кроме того, если вы хотите проверить некоторые отличные макеты, вы можете пойти на dribbble.

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

Но это не конечный продукт!

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

Одним из преимуществ прототипа является то, что он очень интерактивен, позволяет пользователям ощущать интерфейс и узнавать, что им нравится или не нравится в нем. Mockplus, Adobe XD — инструмент прототипирования, который вы можете использовать.

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