Wireframes для мобильных приложений: инструкция по созданию

Не заставляйте запоминать много информации

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

предлагайте помощь прямо здесь, в контексте, вместо того чтобы тренировать память пользователей;

Например в Facebook Ads Manager можно быстро разобраться с непонятными целями рекламы и установить нужную. Скриншот: Skillbox

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

What should a wireframe contain?

So, now you know what a wireframe is. But you still need to know what elements go into making a good wireframe. Based on the experience of a wide range of designers, we summarize below the key elements of a good wireframe:

Information design

For a website, information elements should be arranged logically and intuitively so that users get clear guidance on what to do and what they can expect. So, design elements such as the body content, share buttons, contact information, headers, footers, and so forth should all be included on the website.

Navigation design

The navigation system of a website should be a structure that allows users to move between pages freely and quickly, using simple commands. A website’s navigation design may contain multiple navigation systems, such as global, local, supplementary, contextual, or courtesy navigation. BTW, it’s always a good idea to follow the rules of navigation design if you want your users to have the best experience possible.

Interface design

Interface design in a wireframe should provide users with the basic visual elements of the site including logo, buttons, pictures, text, drop-down menus, and so forth.

Возможные ошибки: как их исключить?

Возможная ошибка: уделять слишком много внимания деталям и затягивать процесс проектирования.

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

Возможная ошибка: открыть доступ к редактированию всем участникам команды. Это приводит к путанице с версиями и недопониманию.

Решение: обновления вносит только один человек.

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

Решение: прорабатывать страницы поэтапно, модульно.

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

Решение: использовать общепринятые стандарты. Вносить новшества, но с учетом уже наработанного опыта.

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

Остались вопросы? Свяжитесь с Umbrella IT прямо сейчас!

Фото: Shutterstock.com

Что такое User-flow?

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

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

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

Шаг 3: Выбираем инструмент

Вот некоторые из популярных инструментов в произвольном порядке:

Balsamiq

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

Он работает практически на любой платформе: Mac, Windows и Linux, также существует веб версия, если вы предпочитаете работать в облаке. Сторонние приложения, такие как iMockups для iOS, например, также поддерживают экспортные форматы Balsamiq.

Omnigraffle

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

Поскольку приложение Omnigraffle разрабатывалось специально для создания схем, у него есть продвинутые функции, как, например, автоматическое размещение, настраиваемые стили объектов, умные направляющие и инструменты для диаграмм. Некоторые из этих функций доступны и в пакете Adobe CS, но если его у вас нет, то Omnigraffle предлагает неплохую цену (~$100) за возможность создавать детальные вайрфремы.

Axure

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

Flairbuilder

Новичок Flairbuilder очень хорошо работает с взаимодействиями.

У него также есть огромная библиотека элементов, поддержка шаблонов страниц и возможность экспорта прототипа для просмотра его онлайн.

Keynote/Powerpoint

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

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

Adobe CS

Для тех, кто уже знаком с пакетом Adobe, Fireworks, Illustrator и Indesign вполне могут служить инструментами для создания вайрфреймов с учетом их определенных плюсов и минусов.

Fireworks

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

Illustrator

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

В чем он выигрывает? В возможности экспорта в PSD редактируемых слоев, отличной поддержке копирования/вставки в Photoshop, а также в возможностях верстки текста, которые можно сохранять, изменять и многократно использовать, почти как в CSS.

Indesign

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

Я выбираю Indesign, когда мне надо сделать интерактивный многостраничный прототип высокой точности. Единственным «но» для меня является слабая поддержка экспорта в Photoshop для последующего создания дизайн-макетов.

ProtoShare

«Прототипирование с широкими возможностями без проблем.» Недавняя 9 версия с новой панелью инструментов wysiwyg (примечание переводчика: what you see is what you get — что видишь, то и получаешь). Стоит попробовать.

Отрисовать дизайн сайта или приложения

Интересные решения для оформления: дизайнерские иконки, подбор цветов и стилей.

След от курсора

Креативный разработчик и 3D-дженералист Натан Гордон поделился своей разработкой — фреймворком OGL. Это библиотека кодов WebGL, которая избавляет от необходимости писать сложные коды вручную. Библиотека легкая, например, классы OGL, которые нужны для этого эксперимента, в сжатом виде весят 13kb.

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

Пример реализации на сайте deplacemaison.com

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

Деформация надписи или фона

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

В этом примере настроили неподвижный фон и деформирование надписи от движений курсора:

Демонстрационный пример

Полезная подборка CSS хаков

Варианты на сайте оформлены в удобных окошках: можно сразу посмотреть результат и скопировать варианты в HTML, SCSS, JS.

Демонстрация интерактивных кнопок

Определение цветов по картинке

На страницах tympanus.net разработчики поделились собственным экспериментом — инструментом Color Extraction Effect для определения цветовой гаммы с картинки. Он сканирует картинку, определяет все ее цвета и из них выбирает небольшую палитру удачно сочетающихся друг с другом оттенков.

Демонстрация работы

Инструмент использует Vibrant.js от Jari Zwarts для извлечения цветов из изображений.

Бесплатный набор иконок для фитнес-проекта

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

Демонстрация иконок из набора

Бесплатный набор иконок в разных цветах

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

Демонстрация набора

Бесплатный сет иконок Smart House на Dribbble

Аккуратный и лаконичный набор иконок «Умный дом», который сделал дизайнер Roman Malashkov. Бесплатная для личного и коммерческого использования лицензия. В пакете 24 иконки для бытовых приборов и других обозначений по теме.

Примеры доступных иконок

Бесплатный пак стикеров по «Игре престолов»

Дизайнер Alex Kunchevsky поделился набором из четырех красочных стикеров по сериалу «Игра престолов». Он разрешил использовать их в личных или коммерческих проектах, так что вы можете их напечатать или разместить на сайте, баннере или в приложении.

Стикеры из набора

Расскажите, какую подборку инструментов, идей или шаблонов вам было бы интересно увидеть в блоге?

Составила Маргарита Морозова, обновила Елена Жмурина

Шаг 8: Высокоуровневый вайрфрейм

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

Это может быть и использование цвета:

Смысл в том, что на стадии графического дизайна/кодирования вы будете уже наводить красоту, а не пробовать и экспериментировать. Лучше быстро делать циклы с итерациями (обратная связь <-> вайрфрейм) в удобных для вас инструментах для создания вайрфремов, чем двигать слои и пиксели в Photoshop.

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

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

Wireframe контента

Определите первую версию wireframeс блоками контента.

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

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

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

TOP 5 инструментов для комплексного дизайна и анимации интерфейсов (UI/UX)

1. Figma — онлайн-сервис для дизайна веб-сайтов и интерфейсов

Figma свежий инструмент. Она идеальна даже для командной работы в реальном времени. Figma работает шустро и прямо в браузере. Есть также и desktop-приложение, но оно работает только при подключении интернета.

Figma построена на технологиях electronjs, а значит вы сможете дизайнить на любой платформе: Windows, Mac, ChromeOS и даже Linux. А еще приятный бонус, ваши дизайны сохраняются моментально в облаке, а значит вся работа всегда в сохранности и готова к демонстрации клиентам.

Работайте и штурмите одновременно всей командой дизайнеров в многопользовательском режиме;
Доставайте инструмент где угодно: Windows, Linux, ChromeOS и Mac;
В коробке шикарный Pen tool;
Подходит для ui-дизайна мобильных приложений, просто установите на свой гаджет: Figma Mirror;
Инструменты для передачи дизайнов в разработку;
Если у вас проект в .sketch просто откройте его в Figma;
Figma – бесплатный редактор (Freemium);
Теперь и с арсеналом плагинов
Анимации уступают в эффектности и плавности Principle и InVision Studio;

Sketch все еще очень популярный инструмент. А в связке с InVision Studio и арсеналом плагинов, Sketch дает из коробки комплексное решение по движению дизайнерских задач: от вайрфреймов и интерактивных прототипов до передачи всей дизайн-системы разработчикам.

Работает только на Mac;
Огромный выбор плагинов (Anima, Craft, Material и др.);
Наработанная база бесплатных ресурсов, среди которых: ui-киты, библиотеки, шаблоны и т.д.;
Прекрасен в паре с Principle и Invision Studio;
Уступает Figma в решении задачи командноого штурма, так как не не поддерживает совместное редактирование в многопользовательском режиме;
Некоторые дизайнеры жалуются на Mirroring sketch artboards, когда требуется отладить дизайны прямо на мобильном гаджете;

InVision Studio – бомбический продукт для дизайна интерактивных систем (ux/ui), а возможности InVision Cloud просто отпад. Если вам нужно сделать продвинутые анимации или разработать адаптивную дизайн-систему и передать все это дело в разработку, то этот инструмент вам просто не заменим. Очень профессиональный и технологичный инструмент.

Заточена для Windows и Mac OS;
В InVision Studio прекрасный timeline и в нем потрясающе приятно вытачивать как UI, так и UX с учетом всех тонкостей поведения продукта;
Студия ускоряет дизайн адаптивных лейаутов, так как заточена на этот процесс и приятные нюансы с адаптацией берет на себя;
Расширятся возможностями Invision Cloud (сбор обратной связи, тестирование прототипов на мобильных гаджетах, менеджер дизайн-систем);
InVision Studio бесплатный продукт, а в комплексе с InVision Cloud позволяет проверить все возможности системы на одном комплексном проекте;
Позволяет создавать приятные мягкие анимации и эффекты перехода;

4. Adobe XD — программа для разработки интерфейсов от Adobe

Adobe XD призван сделать ваш процесс прототипирования просто реактивным. Для этого здесь всегда под рукой инструменты клонирования (repeat grids), поэтому набросать макет или оперативно наполнить списки контентом – здесь как на раз два. Если вы уже использовали плагин Craft для Sketch, то считайте, что это здесь уже в доступно из коробки.

Годится для работы на Windows и Mac OS;
Аналог Craft для Sketch здесь уже доступен из коробки;
Тестирование прототипов прямо на мобильных устройствах;
Есть определенные ограничения при работе с компонентами;
Анимации слабые (заточен на прототипирование и сборку из готовых дизайнов);

5. Framer — инструмент прототипирования с поддержкой программирования

Framer X построен поверх framer.js, а значит вы можете создавать ui-компоенты для React и отлаживать UX/UI прямо в среде Framer X.

Пока только для Mac (но облачный инструмент уже во всю разрабатывают);
Можно импортировать .sketch;
Позволяет создавать React-компоненты;
Здесь вы можете создать любые ui-анимации и задать любое поведение в интерфейсе, так как можете прямо брать и программировать;
Зайти в инструмент без подготовки не просто. Местами нужно инженерное мышление;
Готовьтесь программировать;

Отчёт: география и посещаемость сайта

Отчёт в графической форме показывает объём посещений сайта wireframe.cc, в динамике, с привязкой к географическому размещению активных пользователей данного сайта.
Отчёт доступен для сайтов, входящих в TOP-100000 рейтинга Alexa. Для всех остальных сайтов отчёт доступен с некоторыми ограничениями.

Alexa Rank – рейтинговая система оценки сайтов, основанная на подсчете общего количества просмотра страниц и частоты посещений конкретного ресурса. Alexa Rank вычисляется исходя из показателей за три месяца. Число Alexa Rank – это соотношение посещаемости одного ресурса и посещаемости прочих Интернет-порталов, поэтому, чем ниже число Alexa Rank, тем популярнее ресурс.

Возможные ошибки: как их исключить?

Возможная ошибка: уделять слишком много внимания деталям и затягивать процесс проектирования.

Решение: обновления вносит только один человек.

Решение: прорабатывать страницы поэтапно, модульно.

Решение: использовать общепринятые стандарты. Вносить новшества, но с учетом уже наработанного опыта.

Остались вопросы? Свяжитесь с Umbrella IT прямо сейчас!

Фото: Shutterstock.com

Mockplus

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

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

Настолько чистый, насколько возможно

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

Такой вайрфрейм показывает именно структуру

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

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

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

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

Editing

Basic editing instructions

Double-click an element to edit it. A context sensitive menu will appear. It contains only options applicable for this particular stencil type.

Selecting multiple elements

You can select multiple elements using one of two methods:

Click-and-drag from an empty area of the canvas moving the cursor upwards and to the left. A selection rectangle will appear and the elements that fit in the rectangle will be selected. In other words, drag-select works just like creating elements but in one direction only. Dragging the cursor in other directions will lead to creating an element.

Click holding SHIFT to select additional elements

Вайрфреймы (Wireframes)

1. Что такое вайрфрейм?

Вайрфрейм – это образ дизайна низкой точности. Он должен четко показывать:

Основою группу контента (Что?)
Структуру информации (Где?)
Описание и базовая визуализацию взаимодействия между интерфейсом и пользователем (Как?)

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

«Изображение» — здесь это ключевой термин, который поможет вам найти требуемую точность, удобный темп

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

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

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

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

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

Если что-либо занимает слишком много времени на подготовку (например, выбор иконок, загрузка изображений), вы должны представить его в упрощенном виде (например, используя «заполнители» — прямоугольники, пересеченные линиями крест на крест для изображений, плюс подобающее описание). Мы обычно называем вайрфреймы данными низкой точности (lo-fi).

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

2. Когда использовать вайрфрэймы.

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

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

Имейте в виду следующее: UXpin – это старт-апы с реально быстрыми циклами разработки (выпуск каждые пару дней). Мы используем вайрфреймы для быстрой визуализации заданий (даже самых небольших!). Это уничтожает всякое недопонимание и это очень дешево.

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

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

Отрисовка черновых схем страниц

Теперь осталось сделать итоговые наброски страниц на бумаге, а после этого — отрисовать черновые wireframes в электронном виде

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

Главное, чтобы это был не серый прямоугольник с текстом lorem ipsum. Пускай это будет банальная 5-балльная оценка по параметрам “игра актеров / сюжет / спецэффекты / итого” — в отличие от прямоугольника-заглушки, такое представление блока будет вызывать у клиента несогласие и стимулирует его высказывать свое видение рейтинга. А это отличный задел для предметного обсуждения концепции, а не абстрактного “в принципе, все примерно так и нужно”.

Достоинства вайрфреймов

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

Они быстрые

Они немного медленнее скетчей, но все же, вайрфреймы создаются гораздо быстрее мокапов (особенно тех, которые создаются в Photoshop). В этом помогут такие приложения, как Axure, Justinmind Prototyper или Balsamic.

Однако совсем недавно появились UI скетч-приложения, которые работают в несколько раз быстрее (например, Sketch — очень мощное и шустрое приложение).

Они позволяют корректировать направление дизайна

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

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

Они могут определять документацию и требования

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

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

Что дает wireframe?

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

Дизайнеры используют wireframe из-за следующих преимуществ:

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

Wireframe — это скелет дизайна.

Предотвращайте ошибки

В книге «Дизайн пользовательского интерфейса» Влад Головач говорит про сообщения об ошибках:

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

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

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

То неловкое чувство, когда ты ещё ничего не сделал, но форма регистрации уже вся красная. Скриншот: Skillbox

Существует два типа ошибок: промахи и ошибки.

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

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

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

Если ошибку нельзя предотвратить, то напишите понятное сообщение о ней. Якоб Нильсен, известный специалист по юзабилити, рекомендует:

Marvel (Web)

Best wireframe tool for pre-designed wireframe templates

While many apps allow you to add individual UI components like buttons and input boxes, Marvel includes a new option: UI blocks. These blocks are pre-designed sections built of multiple elements, like a Footer Block that includes a background color, footer menu text, site icon placeholder, and copyright text. The UI blocks make the webpage wireframing process move more quickly, so you can achieve an aesthetically appealing wireframe in a fraction of the time.

If you’re part of a multi-member design team, you can invite your coworkers to collaborate and comment on the wireframe, and you even compile a team library so that design elements can be snagged easily throughout the process.

The biggest drawback is that Marvel doesn’t give you a lot of tools for high-fidelity mockups, so you might find yourself hopping over to Sketch (which integrates) to create a more polished UI design.