Warframe cc что это
Несколько лет назад я понял, что большинство моих друзей IT-шников, не дизайнеров называли результаты своей деятельности синонимичными понятиями. Они предполагают, что вайрфрейм, прототип и мокап — это одно и то же, выполненный из сероватых блоков набросок конкретной идеи.
Проблема такого упрощенного видения заключается в том, что они никогда не могут предвосхитить, чего ожидать от работы специалиста из области UX-дизайна, и легко могут запутаться. «По какой причине эта область не кликабельна?», «Я даже не понял, что мне нужно кликать мышкой именно тут», — такого рода комментарии раздражающе часто встречаются среди UX дизайн-проектов (User Experience Design — целью которого является дизайн взаимодействия с пользователем). Смешивания двух понятий — вайрфрейма и прототипа, – это все равно, что приравнивание архитектурного проекта (детализированный план будущего здания) и демонстрационного здания (который иногда строится без фронтальных стен).
Хотя вы, конечно, можете попробовать жить в таком здании (понимая, что вся его красота будет заключаться в прекрасном виде на великолепные рядом стоящие здания), но вам не удастся поселиться с комфортом на его наброске, который представляет собой лишь листок бумаги.
Демонстрационное здание и план дома – это различные способы коммуникации в архитектуре:
- Проект служит планом здания, указывающим, как оно должно быть построено
- Демонстрационное здание представляет собой тест-драйв для будущих жителей
Аналогичное разделение может быть применено к вайрфреймам, прототипам и мокапам. Они выглядят по-разному, они передают информацию разного рода и служат разным целям.
Однако демонстрационное здание и план дома имеют нечто общее – они оба представляют финальный продукт, т.е. настоящий дом. И опять же именно такая же аналогия может быть применена для сравнения вайрфрэймов, прототипов и мокапов – все эти документы являются разными формами представления финального продукта.
Хотите верьте, хотите нет, но различия между прототипами, вайрфрэймами и мокапами – это первое, чему я старался обучить членов моей UX-команды.
Да, это действительно важно.
Давайте рассмотрим в деталях, что такое вайрфреймы, прототипы и мокапы, чтобы вы поняли идею, что используется в конкретных ситуациях.
Резюме
Процесс разработки wireframe
- Инвентаризация контента.
- Визуальная иерархия.
- Wireframe контента.
- Детальный wireframe.
- Простейший прототип.
Теперь рассмотрим каждый этап более подробно.
разбираем разницу между прототипами, макетами и вайрфреймами
Вайрфрейм
Вайрфрейм (от англ. Wireframe) — это, по сути, тот же мокап, только в черно-белом виде и с упором не на визуальную составляющую, а на структуру и содержание. Его создают на начальном этапе работы над проектом, чтобы составить общую картину будущего проекта.
- Показывает, что расположено на сайте.
- Показывает, где это расположено.
- Показывает, как элементы будут взаимодействовать (без интерактива).
Если проводить аналогию, то вайрфрейм можно назвать детализированной картой города, где указаны все улицы, заведения, схемы движения. Но эта карта черно-белая и без иллюстраций. Она нужна, чтобы человек мог подробно разобрать структуру города, но она не подходит, чтобы он мог насладиться его красотой.
Главный принцип здесь — упрощенность. Не нужно зацикливаться на визуальных деталях и отрисовывать каждую кнопку и иконку (как это, например, делают в мокапе). Лучше сосредоточиться на деталях структуры и расположения элементов.
Разработка варфрейма — ключевой этап создания дизайна, так как от него затем отталкиваются и другие участники процесса: разработчики, SEO-шники, копирайтеры и т.д. Wireframe плохо подходит для этапа тестирования, однако очень полезен как инструкция для разработчиков.
Прототипы
1. Что такое прототипы?
Прототип, который часто путается с вайрфреймом, — это середина на пути к высококачественному изображению финального продукта, стимулирующего взаимодействие с пользовательским интерфейсом.
Они должны позволить пользователю:
- Воспринимать контент и взаимодействие с интерфейсом
- Тестировать основные взаимодействия по аналогии с финальным продуктом
Прототип – это симуляция финального взаимодействия между пользователем и интерфейсом. Он может выглядеть не совсем так, как будет выглядеть финальный продукт, но очень похоже на него (определенно не сероватый набросок). Взаимодействия должны быть точно смоделированы и иметь значительное сходство с финальным опытом. Независимость между интерфейсом и механикой бэкенда обычно упускается для снижения затрат и ускорения цикла разработки.
2. Когда использовать прототип.
Прототипы используются в полной мере в тестировании пользователей. Такие симуляции финального взаимодействия формируют основу для качественных юзабилити-тестов еще до того, как начинается разработка.
Прототипы обычно не являются лучшей документацией, которую вы можете представить, поскольку они требуют он «читателя» некоторых усилий, чтобы понять интерфейс. С другой стороны, прототипы это наиболее привлекательная форма дизайн документации, так как интерфейс отчетливый, и простой.
Имейте в виду, что прототипирование достаточно дорогая и время-затратная форма дизайн коммуникации. Я бы предположил создание прототипов, которые могут быть использованы повторно в дальнейших разработках (это значит, что вы должны уметь писать HTML, CSS и, возможно, JS-код). Это особенно эффективно в относительно простых проектах.
Выполненные правильно, в сочетании с тестированием пользовательского интерфейса, прототипы могут показать себя с выгодной стороны.
Вайрфреймы (Wireframes)
1. Что такое вайрфрейм?
Вайрфрейм – это образ дизайна низкой точности. Он должен четко показывать:
- Основою группу контента (Что?)
- Структуру информации (Где?)
- Описание и базовая визуализацию взаимодействия между интерфейсом и пользователем (Как?)
Вайрфреймы не бессмысленный набор серых блоков, хотя он выглядит примерно так. Рассматривайте его как скелет вашего дизайна и помните, что вайрфреймы должны изображать каждую деталь финального продукта.
«Изображение» — здесь это ключевой термин, который поможет вам найти требуемую точность, удобный темп. Вы не можете показать слишком много деталей, но, с другой стороны, вы должны создать точный образ финального дизайн-продукта, не упускающего ни одной его важной детали. Вы прокладываете тропинку для целого проекта и людей, которые работают вместе с вами (разработчики, графические дизайнеры, копирайтеры, менеджеры проекта – им всем нужен хорошо сделанный вайрфрейм). По сути, вы создаете карту города. Каждая улица представлена на карте, но ее визуальное изображение упрощено. Вы можете прочувствовать архитектуру города, если посмотрите на карту, но не сможете воспринять его красоту.
Визуализация должна быть построена по правилам эстетики, но сильно упрощена. Черный, серый и белый – это типичные цвета, которые вам понадобятся (разве что вы можете добавить синего в конкретные ссылки).
Если что-либо занимает слишком много времени на подготовку (например, выбор иконок, загрузка изображений), вы должны представить его в упрощенном виде (например, используя «заполнители» — прямоугольники, пересеченные линиями крест на крест для изображений, плюс подобающее описание). Мы обычно называем вайрфреймы данными низкой точности (lo-fi).
Запомните, хорошо созданный вайрфрейм изображает дизайн предельно точным образом и прокладывает дорогу для всей команды.
2. Когда использовать вайрфрэймы.
Вайрфреймы обычно используются как документация к проекту. Поскольку они являются статичным и фиксированным способом отображения интерфейса, их нужно соответствующе описать (от краткого пояснения, до сложной технической документации, если это необходимо).
Однако они могут быть использованы не по столь формальному назначению. Так как они удобны и просты в использовании, они полезны как быстрые наброски для внутренней коммуникации в команде. Если девелоперы спрашивают, как что-то должно быть выполнено, ответ можно представить как быстро выполненный вайрфрейм.
Имейте в виду следующее: UXpin – это старт-апы с реально быстрыми циклами разработки (выпуск каждые пару дней). Мы используем вайрфреймы для быстрой визуализации заданий (даже самых небольших!). Это уничтожает всякое недопонимание и это очень дешево.
Вайрфреймы редко используются как материал для тестирования, хотя они могут помочь получить обратную связь на начальном этапе исследования, в котором вы еще не заботитесь о методологической бедности воплощения, но уже пытаетесь получить быстрые результаты.
Вайрфреймы в контексте целостного дизайн-процесса могут быть удивительно эффективны и, не смотря на то, что за последние несколько лет они получили несколько негативных отзывов, по-прежнему незаменимы на начальных этапах комплексных проектов.
7 бесплатных инструментов Wireframe для проектирования интерфейсов и процессов
У разработчиков есть такое понятие, как Wireframe – детализированное представление дизайна, в котором с помощью блоков и связей представлены все важные элементы конечного продукта. Его применение позволяет хорошо описывать задачи проекта и задействованных в нем специалистов. Группы разработчиков, которые используют Wireframe при проектировании, стали его применять и для неформального внутреннего общения, когда проще быстро нарисовать схему задачи, чем объяснять ее словами. Поэтому создание Wireframe применимо не только для разработки интерфейсов или приложений, но и в других сферах проектирования процессов – например, при внедрении ITSM.
Для описания внедряемых ИТ-процессов и их взаимодействия с другими направлениями деятельности компании наравне с текстовой документацией удобно и наглядно можно применять Wireframe. В этой статье мы расскажем о 7 бесплатных инструментах для визуализации проектируемых процессов. Создавая с их помощью каркас будущей работы, вы сможете сэкономить много времени и усилий на стадии реализации проекта.
7 бесплатных инструментов для проектирования Wireframe
На самом деле таких приложений больше, но мы выбрали те, у которых меньше всего компромиссов. Это не временно бесплатные версии, а те, которые будут работать всегда и не потребуют через какое-то время оплаты. Конечно, их бесплатность и открытость накладывает некоторые ограничения по сравнению с аналогичным, но платным вариантом, поэтому мы специально остановимся на таких нюансах.
Lucidchart
Lucidchart – полнофункциональный и бесплатный инструмент для создания Wireframe интерфейса и другого проектирования. Позволяет нескольким пользователем одновременно работать над одной схемой и имеет расширение для Chrome, что делает возможным быстрое добавление диаграмм Lucidchart в документы и таблицы Google, если вы используете их для совместной работы.
Пользователи отмечают, что система облачная и интегрируется с множеством других широко используемых продуктов, а также предлагает ряд шаблонов, которые позволят быстро начать работу над вашими проектами. Тем не менее к ее минусам можно отнести недостаточную интуитивность и сложность в настройке рабочего пространства. Также Lucidchart периодически начинает тормозить и медленно работать.
Ограничения бесплатной версии:
- один пользователь;
- проекты ограничены 60 объектами.
Стоимость обновления до платной версии: минимальный тарифный план Lucidchart стартует с 5 долларов США в месяц для одного пользователя, а командные тарифы начинаются с 20 долларов США в месяц.
InVision
Вы можете использовать облачное решение InVision для проектирования процессов, мобильных приложений, сайтов и для создания документации по архитектуре проекта и визуализации связей. Приложение имеет инструменты совместной работы, вы можете получать комментарии и отзывы от коллег по команде, а наличие интерактивных функций позволяет реалистично представить конечный продукт.
Пользователям данного решения нравится удобный и интуитивно понятный интерфейс. Также они отмечают возможность создания профессионально выглядящих прототипов с высокой детализацией, которые отлично подходят для демонстрации итогового результата другим заинтересованным сторонам. Однако возможности визуализации еще стоит доработать, а прототипы, получаемые в других системах, выглядят иначе, чем в InVision.
Ограничения бесплатной версии:
Стоимость обновления до платной версии: самый дешевый тариф InVision стоит 15 долларов США в месяц и позволяет работать над тремя проектами.
Moqups
Moqups – еще один облачный инструмент для дизайна процессов, который содержит большую библиотеку блоков и иконок. Он предоставляет возможность не только создания диаграммы из базовых элементов, но и импорта ваших собственных изображений в соответствии с внешним видом проекта. Редактор drag-n-drop позволяет команде интуитивно разрабатывать блок-схемы и прототипы будущих проектов.
Пользователям Moqups нравится легкость и понятность интерфейса приложения, возможность создания диаграмм простым перетаскиванием готовых элементов, а также легкость обмена проектом с коллегами по команде и клиентами. Тем не менее они хотят, чтобы набор элементов был еще больше, а также появилась бы возможность работы с системой офлайн. Это приложение отлично подходит для проектирования процессов, наравне с дизайном интерфейсов.
Ограничения бесплатной версии:
- один проект;
- проект ограничен 300 объектами;
- хранилище на 5 МБ.
Стоимость обновления до платной версии: самый дешевый тариф Moqups стоит 13 долларов США в месяц для одного пользователя и неограниченного числа проектов.
Wireframe.cc
Wireframe.cc – отличный вариант для пользователей, которым нужен простой, незагроможденный пользовательский интерфейс. Вместо панелей инструментов Wireframe.cc предлагает всплывающие окна, которые появляются, когда они вам нужны, и остаются скрытыми, когда вы работаете в другой области приложения. Вы можете делиться прототипами со всей командой для совместного редактирования, и любой другой человек может оставлять комментарии к вашему проекту, если вы поделитесь с ним ссылкой. Правда, эта функция требует платной разблокировки.
Пользователи отмечают, что такой минималистичный интерфейс отлично подходит для создания макетов с невысокой точностью и детализацией. Для большего необходимо переходить на платную версию или выбирать другой инструмент. Также пользователи жалуются, что в Интернете недостаточно обучающих видео о том, как начать работу с системой.
Ограничения бесплатной версии:
- нет учетных записей пользователей;
- все макеты являются общедоступными;
- прототипы ограничены одной страницей.
Стоимость обновления до платной версии: стоимость премиальных версий Wireframe.cc начинается с 16 долларов США в месяц для одного пользователя и неограниченного числа проектов.
MockFlow
MockFlow предлагает обширную библиотеку шаблонов, которые помогут вам создать схемы процессов, диаграммы, макеты интерфейса сайта и приложения и визуализировать другие проекты. Вы также можете выбрать и использовать сторонние шаблоны, макеты и элементы. Встроенная коллекция изображений и элементов включает в себя формы, блоки навигации, фигуры и значки, поэтому вы можете создавать самые разнообразные макеты и прототипы.
По обзорам пользователей бесплатная версия MockFlow предлагает множество функций и проста в использовании. Однако в системе есть несколько ошибок, которые еще не исправлены.
Ограничения бесплатной версии:
- один проект;
- до двух пользователей;
- ограниченный доступ к библиотеке и интеграции со сторонними решениями.
Стоимость обновления до платной версии: платные тарифы MockFlow начинаются с 14 долларов США в месяц для одного пользователя и неограниченного числа проектов.
Fluid UI
Облачное решение Fluid UI предлагает разработчикам библиотеку более чем из 2000 элементов. Вы можете создавать интерактивные прототипы и анимации страниц, чтобы лучше понять, как будет выглядеть ваш конечный продукт. Также можно воспользоваться приложениями для Android и iOS Fluid UI, чтобы посмотреть, как ваш прототип будет выглядеть на мобильном интерфейсе.
Ограничения бесплатной версии:
- один проект;
- десять страниц;
- нет возможности загрузки своей графики;
- ограничения в использовании библиотеки;
- отсутствие возможности для членов команды оставлять комментарии или отзывы.
Стоимость обновления до платной версии: обновление до самого дешевого тарифного плана Fluid составляет всего 8,95 долларов США в месяц и открывает доступ к более продвинутому функционалу – например, к анимированным переходам. Чтобы иметь возможность совместной работы с коллегами по команде, вам нужно перейти на план «Pro» Fluid UI, который стоит около 19 долларов США в месяц.
Pencil – единственный в своем роде инструмент для создания Wireframe офлайн, и он обладает открытым исходным кодом, что делает все функции доступными пользователям бесплатно. Последнее обновление Pencil было опубликовано в июне 2017 года.
Система позволяет создавать многостраничные макеты со ссылками между страницами. Преимущество для веб-разработчиков – при экспорте макетов на веб-страницу HTML, Pencil сохраняет ссылки, поэтому вы можете использовать полные макеты приложений или веб-сайтов со ссылками на страницы. Pencil также предлагает ряд шаблонов, библиотеку элементов и возможность импорта внешних объектов. Вы можете использовать трафареты Android и iOS для дизайна интерфейсов под мобильные устройства.
Ограничения бесплатной версии:
Pencil – это инструмент с открытым исходным кодом, поэтому бесплатная версия является полнофункциональной.
Инструменты Wireframe для ITSM
Мы сделали краткий обзор недорогих инструментов, которые позволяют создавать макеты, проектировать процессы и получать обратную связь от членов команды в режиме реального времени.
Каждый из этих инструментов может быть отличным дополнением к ServiceNow Agile Development (SDLC) – модулю, позволяющему управлять методами гибкой разработки Scrum, при разработке программного обеспечения и его сопровождения на протяжении всего жизненного цикла – от создания, тестирования до внедрения. Также, создание схем и диаграмм играет важную роль в проектировании ИТ-процессов при переходе на сервисную модель, так как позволяет визуально представить все элементы процесса и связи между ними.
Если вам необходим надежный инструмент для перехода на сервисную модель предоставления ИТ-услуг, оцените возможности и преимущества популярной и успешной сервисной платформы ServiceNow. Получить консультацию по ее внедрению и возможностям вы можете, обратившись к специалистам компании «ИТ Гильдия» – официального сертифицированного партнера ServiceNow.
Андрей Батурин
В веб-дизайне есть много профессиональных терминов, но особую путаницу у заказчиков и даже разработчиков, не знакомых с дизайном, вызывают понятия вайрфрейм, мокап и прототип. Нередко считают, что это одно и то же, и из-за этого при общении с дизайнером возникает недопонимание. Чтобы вы могли избежать такого недопонимания в будущем, мы подробно разберем особенности каждого из этих понятий.
И прототип, и варфрейм, и мокап — это все финальные варианты будущего сайта. Но в чем же тогда их отличие? В том, что они показывают проект с разных сторон. Сейчас расскажем подробнее.
3. Wireframe контента
Определите первую версию wireframe с блоками контента.
Wireframe контента определяет только то, где размещаются публикации, а не то, как они будут представлены. Для этого подходят сетки, если используемый вами инструмент поддерживает их.
Когда сначала создаете wireframe для самого маленького экрана, вы можете расставить приоритеты. Альтернативой является одновременное проектирование всех элементов с последующим вычитанием менее важных. Но подобный подход часто приводит к необходимости отката.
После того, как вы разработаете базовый макет, можно начинать добавлять дополнительную информацию.
Мокап
Мокап (mockup) — это в дословном переводе “макет”. Представляет собой не сильно детализированный набросок дизайна.
Вот его основные характеристики:
- Показывает, как будет структурирована информация.
- Показывает расположение контента и базовый функционал (без интерактива).
- Нужен, чтобы дизайнер и заказчик утвердили визуальную часть.
Мокап используют, когда нужно быстро согласовать с заказчиком визуальную часть будущего сайта, так как создать мокап можно относительно быстро. Также он помогает получить фидбек заказчика и его пожелания по дизайну.
Мокап
1. Что такое мокап?
Мокап – это середина на пути к высоко-точному, статичному дизайн-образу. Часто мокапы – это графические наброски или даже актуальный графический дизайн.
Хорошо сделанный мокап:
- Представляет структуру информации, визуализирует контент и демонстрирует основной функционал в статике
- Поощряет людей к перепроверке визуальной стороны проекта
2. Когда использовать мокап.
Мокапы особенно полезны, если вы хотите добиться быстрого утверждения у стейкхолдера. Благодаря их визуальной натуре мокапам не сопротивляются из-за низкой точности исполнения и вместе с тем их гораздо быстрее создать, чем прототипы. Они хорошо подходят для получения обратной связи, и в контексте целого дизайн-проекта помогут в формировании большой главы финальной документации.
1. Инвентаризация контента
Сначала нужно создать каталог контента, который представляет собой набор всех публикаций и их организацию.
Каталог контента представляет собой таблицу, в которой перечислены все материалы, которые нужно использовать, разделенные по страницам. Каталог контента помогает разрабатывать контент-ориентированный дизайн и понять, какие элементы являются наиболее важными.
Для создания хорошего каталога контента можно следовать этой последовательности действий:
- Перечислите весь контент с помощью URL-адресов и кратких описаний.
- Организуйте элементы контента сначала по темам.
- Определите каждый элемент контента на подходящую страницу, выписав дубликаты, которые относятся к нескольким страницам.
- Проинспектируйте каталог контента на наличие ненужного материала. Удалите контент, который не нужен.
- Если нужно, назначьте ответственных за определенные разделы или категории материалов.
В дальнейшем мы будем использовать каталог контента для создания визуальной иерархии.
Какую форму дизайна использовать в работе
Не обязательно при работе над одним проектом разрабатывать поочередно вайрфреймы, мокапы, а затем и прототипы. В некоторых случаях можно обойтись и одним-двумя форматами.
Выбор зависит от следующих условий:
- Особенности заказчика. Если вашему клиенту достаточно увидеть общий дизайн будущего сайта, можете сделать только мокап. Если ему нужна подробная документация для ТЗ, ваш выбор — вайрфрейм. Если он хочет сам повлиять на логику работы портала, в этом поможет подробный прототип.
- Ограничения по времени и ресурсам. Если проект срочный и бюджетный, можно ограничиться только мокапом. Если же это сложный сайт с тяжелым функционалом, вам может понадобиться прототип для масштабного тестирования.
- Уровень взаимодействия в команде. Если дизайнеры и разработчики понимают друг друга с полуслова, можно обойтись и без вайрфрейма. В противном случае структуру и функционал следует все же задокументировать, чтобы избежать путаницы.
Учитывая эти условия, вы можете выбрать для себя оптимальный вариант взаимодействия с заказчиками и членами команды при разработке дизайна.
— Обобщая, можно сделать вывод, что вайрфрейм — это черно-белое отображение структуры сайта; мокап — это визуализация дизайна сайта, а прототип — это рабочий вариант сайта для тестирования функционала.
Как начать?
Прежде чем вы выберите средство коммуникации в дизайн-процессе, вам нужно:
- Выделить конкретную проблему, которую вы пытаетесь решить
- Выделить свою целевую аудиторию
- Определить общие требования к продукту
Это минимум. Теперь подумайте, какое решение будет наиболее подходящим в вашем случае, принимая во внимание ваш продукт и команду. Какое будет наилучшим для вас? Формализованная документация или быстрый набросок и дискуссия лицом к лицу? Достаточно ли у вас времени и денег для сложных изысканий в области пользовательского опыта или вы лишь собираетесь в ближайшее кафе с несколькими набросками для потенциальных клиентов?
Какие навыки у вас есть? Умеете ли писать код? Оценивая себя, членов команды и проект, вы должны понять, какое решение будет правильным.
Вы, конечно, можете создать все эти варианты и … во многих случаях вы так и сделаете! Не бойтесь делать этот шаг. Все они имеют значение и, выполненные хорошо, приблизят вас к потрясающему дизайну.
Wireframe - что это такое и как создать полезный wireframe
В этой статье мы расскажем, что нужно знать, чтобы улучшить качество wireframe. Объясним, чем они полезны, рассмотрим инструменты для их создания и поэтапно распишем весь процесс создания wireframe.
5. Простейший прототип
Мы настоятельно рекомендуем преобразовать wireframe в простейший прототип, чтобы можно было начать тестирование как можно скорее.
С помощью правильной платформы вы легко сможете добавлять интерактивность, иногда даже просто перетаскивая элементы. Несмотря на то, что это базовая интерактивность, на ней можно будет достаточно точно определить проблемы юзабилити. Особенно в макете и навигации. Оптимизация этих областей и является целью wireframe.
Метод быстрого прототипирования позволяет за минимальное время создавать прототипы, тестировать их, а затем использовать полученные результаты в проектировании еще до начала разработки. Это позволяет улучшать дизайн в процессе разработки, вместо того, чтобы тестировать уже готовый продукт.
Используйте простейший прототип, чтобы уточнить основные моменты проекта. Когда это будет сделано, вы сможете перейти к визуальному дизайну.
Пожалуйста, опубликуйте ваши мнения по текущей теме материала. За комментарии, лайки, дизлайки, подписки, отклики огромное вам спасибо!
Что дает wireframe?
Wireframe использует заполнители, такие как поля с метками, для представления контента, который будет добавлен позже.
Дизайнеры используют wireframe из-за следующих преимуществ:
- Структурированный дизайн . Вы знаете, где все будет размещаться, еще до перехода к конкретным техническим деталям.
- Создание основы на раннем этапе . Меню навигация и макет определяют, как будет разрабатываться остальная часть проекта. Если есть проблема, лучше выявить ее в начале, а не на этапе детализированного прототипа.
- Дизайн сфокусирован на контенте .
- Больше возможностей для креатива и экспериментов . Wireframe легко создавать. Поэтому вы можете экспериментировать, не затрачивая много времени и усилий.
Как не запутаться при общении с веб-дизайнером
2. Визуальная иерархия
Благодаря каталогу контента, включающему в себя все элементы, легче определить, какие из них наиболее важны для каждой страницы.
Теперь необходимо распределить каждый элемент на первичные, вторичные или третичные элементы. Это можно сделать с помощью электронной таблицы.
Закажите дизайн сайта в нашей студии
Сэкономим вам время и учтем все ваши пожелания. Консультация бесплатна .
Создание wireframe
Wireframe могут быть созданы с помощью редактора изображений, специализированных инструментов или даже нарисованы на бумаге. Рассмотрим преимущества и недостатки каждого метода.
Такие платформы, как приложение UXPin , облегчают создание интерактивных wireframe, поддерживают разработку макетов и прототипов.
Если не хотите платить за специализированные платформы, то можно использовать программное обеспечение для презентаций, такое как Keynote или Powerpoint. Но при этом усложняется работа над проектом в команде, так как придется отправлять wireframe по электронной почте.
Некоторые дизайнеры предпочитают делать все в графических редакторах, таких как Sketch или Photoshop.
Прототипы
Прототип — это, если упрощать, сверстанная версия мокапа. То есть, мокап, на который наложили функционал сайта, и в котором пользователь уже может покликать кнопки и выполнить некоторые действия, чтобы посмотреть, как все работает.
- У него уже рабочий интерфейс — можно прокликать разделы и кнопки на сайте.
- Нужен, чтобы протестировать функционал перед тем, как раскатать финальный вариант.
- В прототипе работают большинство элементов, которые планируются в финальном варианте.
Разработка прототипа — затратный процесс в плане ресурсов: он отнимает много времени у дизайнеров и верстальщиков. Однако это отличная возможность протестировать удобство сайта, в том числе, еще до начала программирования, чтобы довести до ума логику интерфейса и пользовательский путь.
4. Детальный wireframe
Теперь нужно указать, где размещаются отдельные ссылки, иконки и изображения. При этом wireframe должен быть «мягким». Детальный каркас по-прежнему использует заполнители, блоки и неопределенные кнопки.
Не забывайте о потоках пользователей, так как они помогают оптимизировать размещение элементов. На этом этапе можно начать использовать шаблоны сканирования и более точно определить визуальную иерархию.
Читайте также: