Содержание
Цифровые продукты — интерфейсы сайтов, программ, приложений — не создаются в одно мгновение. Они требуют тщательной предварительной разработки, планирования, визуализации, макетирования. Только после этого рождается рабочая версия, поступающая сначала на рассмотрение заказчику, а затем — в пользование его клиентам.
Веб-дизайн изобилует специализированной терминологией, в которой легко теряются не только заказчики, не знакомые с особенностями профессионального сленга, но и сами разработчики. Так, в процессе разработки digital-проектов активно задействованы понятия «вайрфрейм», «макет сайта», «мокап» и «прототип сайта», которые порой создают серьезную путаницу. У них схожее значение, в связи с чем их легко перепутать. Некоторые и вовсе полагают, что все эти термины означают одно и то же. Все это усложняет общение заказчиков с дизайнерами и зачастую вызывает недопонимание.
В целом прототип, варфрейм и мокап — это макеты будущего информационного продукта. Однако у них есть существенное отличие — уровень проработки и возможности демонстрации функционала будущего интерфейса. Каждый из них показывает проект со своей стороны, с большим или меньшим уровнем детализации.
Для чего вообще нужны макеты в UX/UI-дизайне?
Макетирование — начальный этап разработки любого цифрового проекта, и разработка сайтов не исключение. Именно макет демонстрирует заказчику, что и где будет находиться, как выглядеть и каким образом функционировать.
UX- и UI-дизайн (user experience и user interface design), отвечающий за дизайн-процесс при создании веб-проектов, отличается гибкостью и во многом зависит от сложности разрабатываемого продукта, численности работающего над ним коллектива и выделенных сроков.
В UX/UI-дизайне существует три основных типа макетов:
- вайрфрейм — отражает структуру будущего продукта,
- мокап (макет сайта) — его визуальную концепцию,
- прототип — функционал.
Обычно проектирование интерфейса включает в себя последовательную разработку всех трех типов макетов. Но в ряде случаев, например, при создании лендингов и других упрощенных проектов, разработчики ограничиваются только одним или двумя из них.
Вайрфрейм
Вайрфрейм (от английского «wireframe» — каркасный) представляет из себя черно-белый упрощенный набросок структуры и содержания будущего проекта. Он создается на первоначальном этапе разработки и отражает общую картину проекта, без акцента на визуальные особенности.
Сущность
По своей сути вайрфрейм — это подробный монохромный план проекта, например, страницы сайта.
Он демонстрирует:
- какие блоки контента находятся на сайте;
- где именно они располагаются;
- как они структурно связаны друг с другом;
- как пользователь взаимодействует с ними (в общих чертах).
Вайрфрейм намечает местоположение элементов проекта: кнопок, виджетов, изображений, текстовых блоков и пр.
Можно провести аналогию между вайрфреймом и детализированной картой города. На ней обозначены улицы, дома, объекты, направления движения между ними. Благодаря такой карте человек может ознакомиться со структурным устройством города. Но карта черно-белая, не иллюстрированная. Ее изучения недостаточно, чтобы прочувствовать красоту города.
Так и вайрфрейм демонстрирует устройство проекта, не задействуя интерактив. Анимация, особенности взаимодействия элементов, результаты из активации требуют уточнения в комментариях в нему. Сам он никакого функционала не реализует.
Назначение
Подготовка варфрейма — ключевой этап при создании дизайна проекта. Он определяет расположение и взаимосвязь блоков контента. На основе него и его комментариев составляется техническое задание (ТЗ) для всех участников процесса: разработчиков, SEO-специалистов, копирайтеров, менеджеров проекта и др.
Вайрфрейм хорош в качестве инструкции для создателей проекта, но не подходит для тестирования.
Особенности создания
Вайрфрейм является приблизительным наброском структуры digital-продукта. Он в общих чертах фиксирует идею его устройства и не требует много времени на прорисовку. Это только ориентир для разработчиков, схематичное изображение проекта. На этот каркас затем будут накладывать визуализацию и функционал.
Основной принцип при подготовке вайрфрейма — упрощенность. Это статичное изображение интерфейса. В нем не требуется отрисовывать в подробностях каждый элемент — кнопки, иконки — и акцентировать внимание на визуализации деталей. Главное здесь — структура расположения элементов. Визуально макет должен соответствовать правилам эстетики, но при этом быть максимально упрощенным.
Для разработки вайрфреймов простых проектов необходима информация о назначении продукта, его целевой аудитории, конкурентах. В случае более сложных продуктов потребуется подробное ТЗ с перечнем функций, которые нужно реализовать.
В формате такого макета возможно отразить различную информацию. Можно отрисовать его для структуры:
- одной страницы;
- нескольких страниц;
- различных пользовательских путей и пр.
Уровень детализации может различаться:
- низкая детализация — эскиз от руки или максимально упрощенный план, созданный на компьютере;
- высокая детализация — подробный план с пояснениями к каждому элементу, связям между ними и другими комментариями.
Низкодетализированный макет актуален при коммуникации между специалистами команды разработчиков, без дополнительной презентации заказчика с ним лучше не знакомить. Высокодетализированный вайрфрейм будет понятен заказчику и без презентации.
Сроки разработки
Макет с низкой детализацией можно набросать в течение нескольких минут, на создание высокодетализированного обычно уходит не менее 1-2 дней.
С помощью чего создается
Для простого вайрфрейма хватит нескольких листов бумаги, карандаша или ручки, для детализированного используют графические и векторные редакторы, такие как Sketch или Figma.
Мокап (макет) сайта
Мокап (от английского «mockup» или «mock-up» — макет) является полноцветным и детализированным наброском дизайна. Это живописный аналог вайрфрейма. В нем уже присутствует полная палитра оттенков, конкретные изображения элементов (кнопок, иконок, шапки сайта), фон страниц, текстовые шрифты и прочая атрибутика.
Сущность
Мокап является масштабируемой или полноразмерной дизайн-концепцией продукта. Акцент в нем делается на визуальную составляющую. Дизайн здесь накладывается на утвержденный ранее каркас вайрфрейма.
Мокап демонстрирует:
- структуру информации;
- расположение и визуализацию контентных блоков;
- основной функционал в статике.
Такой тип макета нужен для согласования с заказчиком визуальной части проекта.
Назначение
Мокап необходим для создания индивидуального стиля и настроения digital-проекта. В нем продумываются общая концепция дизайна и мелкие визуальные детали.
Мокапы разрабатываются для согласования с заказчиком или для проведения исследований с помощью фокус-групп, выбирающих наиболее оптимальный вариант дизайна. Такие макеты достаточно просто прорисовываются и позволяют оперативно получить обратную связь от заказчика или его представителей, внести коррективы в проект и эффективно работать дальше.
Особенности создания
Мокап допустимо презентовать в двух формах:
- статичного макета, выполненного в виде jpg-иллюстрации;
- динамичного макета, выполненного с использованием превью-инструментов типа InVision, Sketch Cloud или Figma Preview Mode.
Динамичные макеты предпочтительней, поскольку обладают большей наглядностью. Превью-инструменты дают возможность продемонстрировать заказчику через браузер, как будет выглядеть его продукт. В них можно зафиксировать отдельные элементы, например шапку сайта, скроллить страницы, добавить анимацию блокам. Так макет выглядит более реалистично, наполнено и сочно. В случае разработки сайта заказчик получит возможность увидеть, как дизайн смотрится непосредственно на носителе.
Динамичные макеты нередко публикуются еще и на демонстрационных площадках типа Behance или Dribbble, где есть возможность получить оценку их пользователями.
При создании мокапа дизайнеры могут использовать близкие по стилистике шаблонные изображения, а после согласования дизайна с заказчиком — уже обращаться к иллюстраторам за прорисовкой индивидуальных картинок. А могут подключать иллюстраторов еще на этапе разработки мокапа и согласовывать его с уже отрисованной визуализацией.
Аналогично и с анимацией. Для создания более простой подойдут программы с анимированными и интерактивными прототипами, например, Principle. Для усложненной потребуется участие в проекте motion-дизайнера.
Сроки разработки
На подготовку первой страницы или экрана уходит 2-4 дня. Работа с последующими идет уже по шаблону более ускоренными темпами.
С помощью чего создается
Для разработки интерфейсных мокапов удобны редакторы Sketch, Figma, Adobe XD, InVision, Framer X, UxPin и др.
Прототип
Прототип (от английского «prototype» — опытный образец) представляет собой интерактивную модель будущего продукта. Фактически это продолжение мокапа, который подвергся верстке и наложению функционала. В отличие от своего предшественника, он кликабелен, с его помощью пользователь не только оценивает внешний вид и структуру готовящегося проекта, но и особенности его работы.
Сущность
Если проводить аналогию с постройкой здания, то прототип — это физический макет сооружения с действующим функционалом: открывающимися дверями, движущимися лифтами и пр.
Прототип digital-проекта показывает:
- особенности работы интерфейса — в нем кликабельны разделы, закладки, кнопки, иконки;
- большинство элементов, реализация которых запланирована в итоговом варианте работы.
Прототип не нуждается в комментариях, поясняющих, как все функционирует. Он показывает это наглядно, в реальном времени, при взаимодействии пользователя с ним.
Назначение
Прототип — это рабочий инструмент для проверки логики функционала, отладки пользовательских сценариев. Это идеальный тип макета для тестирования. Он позволяет выявить огрехи, нестыковки в архитектуре и юзабилити, исключить их перед тем, как направлять проект в разработку.
Составлять ТЗ по прототипу удобнее, чем по вайрфрейму, реализованный после тестирования прототипа проект более эффективен и рационален.
Особенности создания
Прототипирование — затратная процедура, требующая ресурсов, времени, труда специалистов — дизайнеров и верстальщиков. Но только оно позволяет качественно протестировать юзабилити сайта или приложения еще до этапа программирования, помогает отточить пользовательские пути и общую логику интерфейса.
В работе над крупными проектами без прототипов не обойтись. Именно с их помощью на практике проверяется функционал, анализируются его положительные и отрицательные стороны, получается отклик от пользователей. Несмотря на дороговизну и трудозатраты, такой тип макетов экономически целесообразен: он экономит время и деньги, которые могли бы понадобиться на доведение до ума неудачного функционала.
Для сокращения издержек эксперты советуют разрабатывать такие прототипы, на базе которых возможно осуществлять следующие проектные этапы: программинг и финальную верстку. Такими прототипами являются макеты, созданные с применением языков HTML, CSS и JS-кода.
Несколько общих правил прототипирования:
- к разработке приступают только после определения целевой аудитории, маркетинговой стратегии, каналов сбыта;
- дизайн макета – максимально лаконичный, не отвлекающий внимание пользователя чрезмерно броскими цветовыми и анимационными эффектами;
- схожесть прототипа с реальным функционалом проектируемого продукта – максимальная;
- в макете необходимо учесть все основные пользовательские сценарии.
В процессе тестирования прототипа рекомендуется предоставлять его участникам минимум информации о том, как и что они должны делать. Нужно просто обозначить задачу — и наблюдать за их действиями. Чем больше они «наломают дров», тем более качественным получится конечный результат. Так логика и сценарии не просто пройдут валидацию, а будут эффективно протестированы — с выявлением ошибок и недочетов, устранение которых впоследствии улучшит продукт. Если у пользователей в ходе испытаний рождается множество вопросов и сомнений, функционал необходимо пересматривать и дорабатывать.При тестировании лучше вести видеозапись, а участников просить озвучивать все их мысли и ощущения от взаимодействия с прототипом.
Сроки разработки
Если прототип создается на базе утвержденного мокапа, работа по нему сводится только к перелинковке страниц. Этот процесс занимает около 1-2 дней. В случаях, когда мокап отсутствует, а прототип строится на базе высокодетализированных вайрфреймов, понадобится больше времени — от 3 дней до недели и более.
С помощью чего создается
Для подготовки прототипов используют редакторы Invision, Webflow, Sketch, Figma, Adobe XD. Если проект не сложный, и макет разрабатывается человеком, непосредственно контактирующим с клиентом, вполне достаточно будет конструкторов сайтов типа Wix, WordPress, Tilda.
Какой тип макетов лучше применять?
Не существует строгого правила, которое диктовало бы необходимость использования всех трех типов макетов при работе над одним digital-проектом. Успех реализации продукта не зависит напрямую от соблюдения последовательности вайрфрейм—мокап—прототип. В ряде случаев достаточно обойтись одним или двумя из этих форматов, а иногда это даже целесообразно в рамках экономии средств, ресурсов и времени.
Выбор определяется следующими параметрами:
- Потребности заказчика. Если для него важен только внешний вид продукта, можно ограничиться мокапом. Если необходим полный комплект документов для ТЗ, лучше выбрать вайрфрейм. Если заказчик хочет принимать участие в разработке гипотезы и логики проекта, понадобится детализированный прототип.
- Запас времени и ресурсов. В работе над срочными и бюджетными проектами можно обойтись мокапами. Для сложных продуктов с расширенным функционалом обязательно потребуются прототипирование и тестирование.
- Уровень коммуникации в коллективе. Если участники команды, работающей над проектом, легко понимают друг друга, вайрфрейм отрисовывать не обязательно. При трудностях во взаимодействии и понимании лучше задокументировать вайрфрейм и прототип, дабы избежать путаницы.
С учетом перечисленных условий разработчики и заказчик выбирают наиболее оптимальный для них способ взаимодействия.
Преимущества использования макетов
Прототипирование в любой его форме облегчает взаимопонимание между заказчиком и коллективом разработчиков, а также делает разработку экономичной.
Главные преимущества применения макетов:
- визуализация клиентских требований к структуре, дизайну и функционалу;
- оперативность внесения правок, без лишней перерисовки и верстки;
- исключение или минимизация правок на последующих этапах разработки;
- объективная оценка сроков и стоимости работ;
- визуализация промежуточных этапов и четкое понимание дальнейших шагов;
- поддержание командного духа благодаря частому и активному общению с заказчиком при многократных согласованиях;
- рационализация будущего продукта.
Каждый согласованный макет является гарантией того, что проект будет реализован качественно и в срок.
Инструменты для макетирования
Даже ведущие digital-агентства и веб-студии в своей деятельности отдают предпочтение простым, интуитивно понятным и зачастую бесплатным онлайн-сервисам.
Инструментарий таких ресурсов не требует специальной подготовки и знаний, его легко сумеет освоить даже стажер, не знакомый с версткой и дизайном. Почти все они имеют интерфейс, функционирующий по принципу конструктора и использующий технологию drag-and-drop (перетаскивание элементов), и содержат массу шаблонов, готовых решений разной тематики.
Кроме того, подобные веб-сервисы для прототипирования предоставляют возможность коллективного редактирования файлов в дистанционном режиме.
Balsamiq Mockups
Удачный сервис для быстрой разработки макетов с низкой степенью детализации. Скорость — ключевое преимущество Balsamiq Mockups. Ресурс позволяет осуществлять макетирование пользовательских интерфейсов веб-сайтов, мобильных приложений и десктопных программ, сохраняя результаты в виде PNG-, PDF- или XML-файлов.
Figma
Кросс-платформенный онлайновый инструмент с усложненным функционалом. Позволяет UX/UI-дизайнерам и веб-разработчикам создавать как дизайн-макеты, так и полноценные живые прототипы. Figma предоставляет доступ к макету через браузерное окно, что очень удобно для демонстрации результатов заказчикам. Предусмотрена также функция совместной редактуры проектов — очевидное преимущество для команды. Не самый простой сервис, но его функционал стоит того, чтобы потратить несколько дней на обучение работе с ним.
Wireframe.cc
Минималистичное, простое и понятное веб-приложение, доступное для новичков. Идеально подходит для отрисовки простых вайрфреймов. Содержит готовые шаблоны браузерных окон и экранов мобильных устройств, «умные» элементы, которые добавляются по технологии drag-to-draw. Позволяет добавлять комментарии к интерфейсу и сохранять макеты с доступом к ним по ссылке.
Draftium
Платформа для совместной работы над прототипами веб-сайтов и приложений и сбора отзывов о них от других пользователей сервиса. Содержит встроенные шаблоны, работающие по принципу конструктора. Важная функция — возможность выгрузки созданного макета в конструктор сайтов Weblium. Это очень удобно при создании лендингов: проект можно быстро выполнить под ключ, используя только Draftium и Weblium.
Заключение
Изготовление макетов и прототипов — это обязательный этап при создании цифровых продуктов. Они экономят бюджет и время, минимизируют дорогостоящие коррективы на последующих этапах — дизайна, программирования и верстки.
Вариантов макетирования и инструментов для его осуществления множество. Всегда можно выбрать наиболее удобный и наглядный для эффективной работы команды и взаимодействия с клиентом.