Mockplus (Web, macOS, Windows)

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

Именно поэтому Mockplus произвел на нас такое впечатление, что занял место в этом списке.

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

Наконец, хотя доступно настольное приложение, Mockplus похож на Figma в том, что вы можете выполнять все свои каркасные разработки из веб-браузера и быть уверенным, что вы всегда работаете с самой последней версией.

Цена Mockplus: Бесплатно для базового тарифного плана с громкой связью до 10 пользователей и 10 проектов; от 5,95 долларов США за пользователя в месяц для неограниченного количества проектов в облачном плане. Mockplus Classic, приложение для создания прототипов настольных компьютеров, стоит от 199 долларов в год для индивидуального плана.

Какое каркасное приложение мне следует использовать?

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

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

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

Глоссарий терминов

• Векторная графика: Векторная графика — это изображение, состоящее из точек, линий и кривых, основанных на математических точках.Из-за этого он может бесконечно масштабироваться, не становясь «нечетким». Большинство значков и логотипов изначально создаются с помощью инструментов векторного графического дизайна.

• Растровая (пиксельная) графика: Растровые изображения состоят из растровых изображений или сеток отдельных крошечных квадратных пикселей. Если маленькое растровое изображение увеличено (или масштабировано для размещения на большом холсте), качество изображения снизится, и оно станет нечетким. Фотографии — это распространенная форма растрового изображения.

• Компоненты пользовательского интерфейса: Обычно используемые компоненты пользовательского интерфейса (UI) — это кнопки, флажки, индикаторы выполнения, меню навигации и т. Д.При запуске дизайна вы можете предпочесть использовать набор готовых компонентов пользовательского интерфейса, чтобы ускорить процесс начального каркаса.

• Артборд: Многие дизайнерские приложения позволяют создавать один или несколько артбордов в одном файле дизайна. Думайте о каждой монтажной области как о отдельном холсте или бумаге. Они полезны, когда вам нужно создать несколько отдельных дизайнов, но вы не хотите каждый раз переключать файлы.

• Мокап: В то время как каркас обычно состоит из основного текста и фигур, которые служат в качестве заполнителей, макет — это полностью разработанный интерфейс, который включает цвета и изображения.

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

• Низкая точность: Грубые и упрощенные конструкции (например, каркасные модели) считаются низкокачественными.

• Высокое качество: Точно настроенные и отполированные дизайны, которые кажутся похожими или идентичными готовому продукту, считаются высококачественными.

• UI: UI обозначает пользовательский интерфейс и относится к тому, как приложение или дизайн выглядят для пользователей (подумайте: цвет и шкала шрифтов).

• UX : UX означает взаимодействие с пользователем и относится к тому, как пользователь будет взаимодействовать с приложением или дизайном, например, оптимальное размещение кнопок или логический переход от одного раздела к другому.

Эта статья была первоначально опубликована в декабре 2018 года.

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

Этот пост был первоначально опубликован 15 октября 2018 г. и последний раз обновлялся 26 июля 2020 г.

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

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

Если вы работаете с клиентом, вайрфреймы также являются отличным способом продемонстрировать свой опыт UX и вовлечь его в процесс проектирования на ранней стадии.

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

1. Простой нарисованный от руки каркас

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

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

2. Каркас низкой точности

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

3. Каркас с пользовательским путем

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

4. Каркас с несколькими вариантами поиска

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

Нам нравится, как она сделала всю важную информацию максимально доступной без ущерба для стиля.

5. Детальный нарисованный от руки каркас

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

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

6. Каркас высокой точности

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

7. Интерактивный каркас Hi-Fi

Мы не смогли устоять перед включением этого hi-fi интерактивного примера каркаса от JT Grauke, который изобретательно использует простые формы и всплески цвета, чтобы оживить макет.

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

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

8. Каркасный gif каждого шага

От low-fi до hi-fi до законченного. Нам нравится эта каркасная гифка от Марко Перича, которая показывает весь процесс в действии — от начальных набросков контента до полностью разработанного сайта приложения с фотографиями, шрифтами и цветами. Доказательство того, что грамотно спроектированный каркас действительно является секретом отличного дизайна.

9. Инфографика предварительного плана

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

10. Создание мобильной и настольной версий

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

Здесь вы можете увидеть отличный мобильный каркас в сочетании с каркасом рабочего стола.

Заключительные мысли

Как и во всех творческих проектах, правильная подготовка является ключом к созданию прочного каркаса.

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

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

Джорджина Гатри Джорджина — перемещенная британка, в настоящее время работающая во Франции копирайтером-фрилансером.Прежде чем переехать в более солнечный климат, она работала писателем в агентстве B2B в Бристоле, Англия, где она также родилась. В свободное время любит старые фильмы и готовит (плохо).

Как создавать каркасы за 6 простых шагов

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

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

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

Но прежде чем мы углубимся, что такое каркас?

Что такое каркас?

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

Теперь давайте рассмотрим этапы создания каркаса.

Проведите исследование, чтобы получить ясность и направление

Может возникнуть соблазн сразу же начать изливать свои каркасные идеи, но прежде, чем вы это сделаете, подумайте о более крупной цели: разработке привлекательного пользовательского интерфейса (UI). А для этого вам нужно будет оценить требования вашего дизайн-проекта и ожидания заинтересованных сторон и конечных пользователей.

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

Вот как вы можете пройти этот шаг:

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

Упростите возврат к данным исследования

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

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

Вот несколько быстрых способов сделать это:

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

Сопоставление пользовательских потоков для удовлетворения потребностей пользователей

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

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

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

Пример пользовательского потока для посетителя веб-сайта электронной коммерции ( Источник )

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

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

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

• Карта нужна пользователю, задав себе вопрос: какой цели пытаются достичь посетители веб-сайта / приложения? Какие функции они ищут? Какие у них могут быть начальные вопросы? Какая информация может им понадобиться для плавной навигации?
• Создайте схему последовательности операций, которая включает точку входа пользователя на веб-сайт / приложение и все шаги, которые он может предпринять до финальной транзакции.
• Убедитесь, что пользовательский поток логичен и учитывает все возможные потребности пользователя при навигации.

Создайте минималистичный макет для каркаса

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

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

Кроме того, при проектировании конструкции не поддавайтесь искушению добавить слишком много деталей — на данном этапе лучше меньше, да лучше. Забудьте о шрифтах и ​​цветах, просто сосредоточьтесь на создании ориентировочного дизайна, а не на последнем.

Вот несколько вопросов, на которые вы можете ответить, чтобы сделать этот шаг правильно:

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

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

Определите уровень верности и заполните детали

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

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

После того, как вы определились с уровнем точности, вот как вы можете заполнить детали в каркасе:

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

Пройдите тестирование!

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

Тестирование также поможет выявить любые важные элементы, которые могут отсутствовать, или любые дополнительные требования, которые необходимо решить. Например, вместо двух полей на странице входа в систему (одно для имени пользователя и другое для пароля) ваш каркас имеет только одно. Или, может быть, на домашней странице нет панели навигации, хотя, по логике, она должна быть. Такие промахи необходимо исправить до того, как каркас перейдет в процесс проектирования.

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

Определение критериев для нового теста в UserTesting ( Источник )

Вот как вы можете проверить свой каркас:

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

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

Готовы к блицкригу? Не так скоро!

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

Инструмент для создания каркасов может помочь вам значительно сократить время, необходимое для разработки каркаса. Вы можете просто использовать перетаскиваемые элементы-заполнители и готовые каркасные шаблоны. Инструмент также позволяет легко сотрудничать с членами команды или клиентами и получать отзывы в режиме реального времени.Кроме того, вы можете интегрироваться с такими приложениями, как Adobe Creative Cloud или Jira, для создания высококачественных каркасов.

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

Отличный способ начать разработку проектов

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

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

• Какие элементы будут отображаться в пользовательском интерфейсе?
• Как будут организованы элементы?
• Как будет работать интерфейс?
• Как пользователь взаимодействует с приложением / сайтом?

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

Кто использует каркасы?

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

• КЛИЕНТЫ — лучше понимают, что будет развиваться, и могут судить, адекватно ли решение отвечает их потребностям.Они могут видеть, если что-то отсутствует в пользовательском интерфейсе, какие действия доступны и как элементы интерфейса скомпонованы. Довольно часто демонстрация каркаса заинтересованному лицу бизнеса поднимает важные аспекты, которые ранее не рассматривались. Это хорошо, потому что исправлять проблемы на этапе создания каркаса намного проще и дешевле, чем исправлять их позже, когда они устанавливаются в коде.
• МЕНЕДЖЕРЫ ПРОЕКТОВ — используют каркасы, чтобы гарантировать, что все заинтересованные стороны находятся на одной странице и согласны с тем, что будет построено.По мере продвижения проекта они могут использовать каркасы в качестве контрольных списков для отслеживания прогресса и проверки того, что все важное было учтено и реализовано.
• ДИЗАЙНЕРЫ — могут полагаться на каркасы как на чертежи для визуального дизайна пользовательского интерфейса. Каркасы предоставляют им скелетную структуру, которую они могут превратить в идеальные до пикселя макеты с цветами, шрифтами и другими элементами дизайна.
• РАЗРАБОТЧИКИ — используют макеты, чтобы понять функциональность решения и технические требования.Набор каркасов, собранных в раскадровку, может быть полезен разработчикам при определении того, как последовательность взаимодействий с пользователем должна работать вместе.

Как создавать каркасы

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

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

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

Я предпочитаю каркасный инструмент Microsoft PowerPoint. Это может показаться удивительным, учитывая, что существует множество инструментов, специально предназначенных для создания каркасов.Однако я думаю, что использование PowerPoint имеет несколько преимуществ:

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

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

Я думаю, что PowerPoint и PowerMockup — неплохая команда для создания каркасов. Однако каркасный дизайн — это не инструменты; это об изучении идей и поощрении общения. Это означает, что вы всегда должны использовать тот инструмент, который вам удобнее всего и который работает лучше всего.

Каркас в гибких проектах

Вайрфрейминг идеально подходит для гибкого мышления:

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

Исходя из моего опыта, неплохо было бы запустить Agile-проект, создав видение и наметив путь к нему во время «нулевой итерации».«Это время, когда команда создает свои первые каркасы, все еще на очень базовом уровне детализации, и обсуждает их внутри компании и с предполагаемыми пользователями. Цель здесь не в том, чтобы спроектировать весь продукт заранее, а в том, чтобы улучшить понимание целей проекта и заручиться поддержкой всех заинтересованных сторон. Затем можно постепенно детализировать общую картину и реализовать ее в ходе последующих итераций. Стоит рассмотреть предложение, чтобы определить каркасы в качестве результатов для итерации n, а их реализацию — в качестве результатов для итерации n + 1.

9 практических советов по созданию каркасов

Следующие советы по созданию эффективных каркасов содержат некоторые практические советы и упрощения, которые я усвоил за эти годы:

1) Не поддавайтесь искушению сделать свои каркасы красивыми

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

2) Получите обратную связь заранее и часто

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

1. Начните с набросков, передающих основную идею,
2. Запросите отзывы всех заинтересованных сторон, а затем
3. Итерируйте и уточняйте свои каркасы до тех пор, пока не будут выполнены все требования.

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

3) Не привязывайтесь слишком к своим каркасам

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

4) Взгляните на точку зрения пользователя

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

5) Не бойтесь экспериментировать

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

6) При необходимости используйте аннотации и примечания

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

7) Создавайте раскадровки для визуализации взаимодействий

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

8) Не раздавать макеты без надлежащего объяснения

Вайрфреймы иногда трудно понять клиентам. Без надлежащего объяснения у них могут возникнуть трудности с пониманием того, чего вы пытаетесь достичь с их помощью.Лучше не оставлять клиентов наедине с каркасами; вместо этого используйте каркасы, чтобы вести с ними беседу. Проведите ваших клиентов по каркасам и немедленно ответьте на любые вопросы, которые могут возникнуть. Я обнаружил, что использование метафоры «архитектурный план» дает нетехническим людям хорошее представление о том, что такое каркасы.

9) Знай, когда закончишь

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

Заключение

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

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

Об авторе

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

Каркасные диаграммы для веб-сайтов и приложений

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

Информационная архитектура и каркасы

Информационная архитектура (IA) — это часть общего процесса разработки веб-сайтов и каркасов. мобильное приложение. Согласно Информационной архитектуре для Всемирной паутины существует четыре основных элемента:

• Организационные схемы и структуры: категоризация и структурирование информации
• Системы маркировки: представление информации
• Системы навигации: перемещение по информации
• Системы поиска: поиск и поиск информации

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

Дизайн навигации и каркасы

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

Дизайн пользовательского интерфейса и каркасы

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

Подробнее об инструментах каркаса пользовательского интерфейса

Как создать каркас

Обновлено 19.11.2019: Мы добавили видео с пошаговым руководством, чтобы упростить работу с каркасом. Смотри и учись!

Обновлено 02.11.2018: Мы добавили еще несколько советов для тех, кто только начинает работать с каркасом. Сообщите нам свое мнение!

Обновлено 07.06.2018: Мы добавили в этот пост раздел о том, что не следует включать в ваши макеты.Наслаждаться!

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

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

К счастью для вас, наша команда в InVision разработала этот процесс, и мы хотим поделиться с вами своим опытом на уровне экспертов.Так что возьмите ручку и бумагу (это не только для заметок!) И наденьте шляпу для мозгового штурма (у вас есть такая, правда?). Приведем макет.

Начало работы с каркасами

Перво-наперво. Каркас — это макет дизайна с низкой точностью , который служит трем простым, но точным целям:

1. Представляет информацию, которая будет отображаться на странице
2. Дает схему структуры и макета страницы
3. Он передает общее направление и описание пользовательского интерфейса

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

Swapnil Borkar делится забавным каркасом Freehand для целевой страницы Lyearn.

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

Один из моих любимых способов увидеть макеты в действии — использовать букмарклет Wirify ^{.Wirify позволяет превратить любую веб-страницу в каркас одним щелчком мыши, и он отлично подходит для получения вдохновения или рекомендаций, особенно когда вы только начинаете.}

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

Совет от профессионалов: Ваш опыт рисования полностью изменится, если вы удерживаете клавишу alt / option. Переходите от странных детских форм к почти совершенству одним нажатием кнопки:

GIF любезно предоставлен Джоном Муром на Medium

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

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

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

Что НЕ включать в каркас

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

Имейте в виду эти рекомендации:

• Сохраняйте цвета в оттенках серого: белый, черный и промежуточные оттенки серого.
• Используйте максимум два общих шрифта, возможно, один с засечками и один без засечек. Отображение иерархии информации с помощью шрифта по-прежнему можно отобразить, изменив размер шрифта и его стиль (полужирный, курсив и т. Д.).
• Избегайте яркой графики и изображений.Вместо этого попробуйте использовать простые прямоугольники и квадраты в качестве заполнителей со знаком «x» в середине поля, чтобы показать, где будет размещено изображение. Pro совет: Вы также можете сделать то же самое с видео, используя треугольник в качестве кнопки воспроизведения в центре поля.

Переход от каркасов к готовому продукту

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

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

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

Алекс Довгий отказался от ручки и бумаги и попробовал создать эти макеты с помощью Freehand. «Эта конкретная страница представляет собой сетку карточек с предварительным просмотром и основной информацией», — говорит Алекс.

Использование каркасов в процессе проектирования

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

Рози Аллабартон в своем посте на сайте Career Foundry предлагает вам задать себе следующие вопросы, чтобы начать работу:

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

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

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

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

Оцените все, что вам нужно для мозгового штурма, — Freehand.

No related posts.