wireframe cc что это

02.06.202203.06.2022 admin 0 Comments

Wireframe? Что это такое? Wireframe — это основа структурированного цифрового проекта, один из самых ранних и наиболее важных этапов проектирования.

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

Что дает wireframe?

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

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

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

Создание wireframe

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

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

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

Некоторые дизайнеры предпочитают делать все в графических редакторах, таких как Sketch или Photoshop.

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

Процесс разработки wireframe

Теперь рассмотрим каждый этап более подробно.

1. Инвентаризация контента

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

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

Для создания хорошего каталога контента можно следовать этой последовательности действий:

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

2. Визуальная иерархия

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

Теперь необходимо распределить каждый элемент на первичные, вторичные или третичные элементы. Это можно сделать с помощью электронной таблицы.

3. Wireframe контента

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

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

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

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

4. Детальный wireframe

Теперь нужно указать, где размещаются отдельные ссылки, иконки и изображения. При этом wireframe должен быть «мягким». Детальный каркас по-прежнему использует заполнители, блоки и неопределенные кнопки.

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

5. Простейший прототип

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

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

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

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

Пожалуйста, опубликуйте ваши мнения по текущей теме материала. За комментарии, лайки, дизлайки, подписки, отклики огромное вам спасибо!

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

Источник

Что такое вайрфреймы и как их использовать в дизайне интерфейсов

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

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

Общие понятия

Вайрфрейм — концепция создания структуры дизайна интерфейса. В переводе с английского языка означает каркас. В Рунете его называют более знакомым словом «прототип».

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

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

Концепция повсеместно используется зарубежными дизайнерами. В СНГ пространстве сначала проходит обсуждение технического задания с клиентом, а затем специалист приступает к работе. Вместо wireframe он создаёт дизайн-макет во всех красках.

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

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

На картинке ниже отображен принцип работы «каркаса». Сначала создали схему, а потом превратили её в интерфейс. Исходный набор элементов не изменился. Если вернуться к примеру с постройкой дома, мы просто добавили в помещение обои, ламинат и мебель.

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

Хоть вайфрейм и считается образом с низкой точностью, он чётко показывает:

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

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

Когда пригодится каркас

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

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

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

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

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

Аргументы в пользу прототипа:

5 шагов на пути к созданию эффективного вайрфрейма

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

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

Выслушайте клиента

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

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

Соберите информацию воедино

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

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

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

Выберите рабочий инструмент

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

Варианты:

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

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

Создайте структуру

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

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

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

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

Тестирование

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

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

Преимущества и недостатки

Сам по себе wireframe — всего лишь инструмент. В умелых руках он может сэкономить время и дать чёткое понимание того, как будет выглядеть user interface. Для новичков он поначалу будет выглядеть как очередной фактор, который затягивает разработку.

Преимущества вайрфреймов:

Недостатки:

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

Главная задача любого интерфейса — решать проблемы. Можно потратить несколько недель на красивый дизайн в стиле Material, но пользователям будет трудно выполнить определённые действия. Именно поэтому надо использовать полезные решения вроде wireframe. Они показывают, в каком направлении надо развиваться и помогают добраться до пункта назначения.

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

Источник

Никакого дизайна: Почему на время создания прототипа нужно забыть о стиле Статьи редакции

Читатель ЦП, директор студии Samplar Антон Григорьев, подготовил перевод заметки UX Movement о том, почему при создании вайрфреймов (черновых прототипов сервиса) нужно отказаться от любого оформления.

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

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

Задача вайрфрейма

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

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

Почему важна визуальная чистота

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

Вайрфрейм отвечает на вопросы:

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

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

Стили, которые мешают визуальной чистоте

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

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

Цветные вайрфреймы

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

Вайрфреймы в градиентах серого

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

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

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

Блочные вайрфреймы

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

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

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

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

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

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

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

Заключение

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

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

Источник

7 бесплатных инструментов Wireframe для проектирования интерфейсов и процессов

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

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

7 бесплатных инструментов для проектирования Wireframe

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

Lucidchart

Lucidchart – полнофункциональный и бесплатный инструмент для создания Wireframe интерфейса и другого проектирования. Позволяет нескольким пользователем одновременно работать над одной схемой и имеет расширение для Chrome, что делает возможным быстрое добавление диаграмм Lucidchart в документы и таблицы Google, если вы используете их для совместной работы.

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