Что такое wireframe в веб дизайне
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.
Метод быстрого прототипирования позволяет за минимальное время создавать прототипы, тестировать их, а затем использовать полученные результаты в проектировании еще до начала разработки. Это позволяет улучшать дизайн в процессе разработки, вместо того, чтобы тестировать уже готовый продукт.
Используйте простейший прототип, чтобы уточнить основные моменты проекта. Когда это будет сделано, вы сможете перейти к визуальному дизайну.
Пожалуйста, опубликуйте ваши мнения по текущей теме материала. За комментарии, лайки, дизлайки, подписки, отклики огромное вам спасибо!
Пожалуйста, оставляйте ваши отзывы по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, лайки, дизлайки, подписки, отклики!
Вайрфреймы – третий лишний в UX-дизайне. Как обойтись без них?
Бело-серые квадраты со стрелками и плейсхолдерами обычно являются символами UX-дизайна. Они считаются неотъемлемой частью процесса создания программного обеспечения. Но так ли это на самом деле?
А теперь налейте себе чашечку любимого кофе, и давайте вместе подумаем, почему нам больше не нужны цифровые вайрфреймы для создания приложений.
Что такое вайрфреймы?
Если создание вайрфреймов для вас — привычное дело, можете пропустить этот раздел и перейти к «Недостаткам вайрфеймов».
Вайрфреймы — это схематичные разметки экрана. Их цель — показать, что из себя будет представлять проект.
Классические вайрфреймы строятся из серых и белых блоков. Допускается использование символов. Но никаких изображений в вайрфрейме быть не должно. Если все-таки без них не обойтись, рекомендуется использовать плейсхолдеры.
Вайрфреймы предназначены для отображения замысла проекта в простой и понятной форме. Они просматриваются и одобряются стейкхолдерами и разработчиками. Над ними работают до того, как дизайнер начинает создавать высококачественные мокапы, на которые требуется гораздо больше времени.
Кроме того, эти наброски помогают убедиться, что архитектура контента спланирована корректно. Очень важно следить за тем, чтобы в вайрфрейме были указаны уместные текстовые ресурсы, а не какие-то пустые плейсхолдеры.
Наконец, вайрфреймы позволяют легко визуализировать навигационные схемы и процессы. Зачастую наброски прототипов строятся именно благодаря им. Таким образом, дизайнеры без проблем могут проверить и утвердить какие-то аспекты плана проекта.
Достоинства вайрфреймов
Прежде чем пускаться в критику, давайте сначала поговорим о положительных сторонах. Есть ряд причин, по которым их использование может быть полезно.
Они быстрые
Они немного медленнее скетчей, но все же, вайрфреймы создаются гораздо быстрее мокапов (особенно тех, которые создаются в Photoshop). В этом помогут такие приложения, как Axure, Justinmind Prototyper или Balsamic.
Однако совсем недавно появились UI скетч-приложения, которые работают в несколько раз быстрее (например, Sketch — очень мощное и шустрое приложение).
Они позволяют корректировать направление дизайна
Наброски, совершаемые в процессе мозгового штурма, позволяют нам просмотреть все идеи в цифровом формате, который имитирует «живые» проекты. Позже их можно использовать при создании быстрых прототипов для тестирования удобства использования.
Любой человек из проектной группы может посмотреть, как смотрится контент. Благодаря этому есть возможность что-то подправить или скорректировать прежде, чем начнется работа над более сложными заданиями.
Они могут определять документацию и требования
Сегодня многие работают по гибкой методологии разработки. Если вы не работаете по каскадной модели, то, скорее всего, знаете, что иногда необходимо одновременно работать с разными типами заданий на разных уровнях.
Аналитикам нет нужды ждать мокапов — они могут начать подготовку функциональных спецификаций на основе вайрфреймов. Команда разработчиков, в свою очередь, может начать работать над макетами.
Недостатки вайрфреймов
После прочтения предыдущего раздела вы, наверно, думаете, что вайрфреймы — это идеальное решение для небольших и быстрых стартапов. Лично мне кажется, что вайрфреймы — это своеобразная фикция корпоративного мира. Почему? Для ответа на этот вопрос давайте посмотрим, за что критикуют вайрфреймы.
Люди не понимают, как с ними работать
Вайрфреймы создаются в цифровом формате, и люди обычно просматривают их на экране. Стейкхолдеры воспринимают вайрфреймы как недоработанную версию конечного продукта, и в итоге могут отклонить какие-то интересные идеи и задумки, так как считают, что это плохо смотрится на экране.
Вообще, стейкхолдеры не должны сами додумывать на основе вайрфреймов, как будет выглядеть конечный продукт. Однако им нужно проверять ход работы. Неправильное толкование изображаемого может повлечь за собой негативные отзывы. Я не раз сталкивался с подобными ситуациями. Конечно, стейкхолдеры не виноваты, что не видят желаемой картинки. Наша задача как дизайнеров — взять на себя ответственность за то, что они видят, и делиться нашими идеями в понятной и доступной форме.
«Стейкхолдеры не должны сами додумывать на основе вайрфреймов, как будет выглядеть конечный продукт».
Они уже не такие быстрые
В те времена, когда Photoshop был основой основ в мире UI-дизайна, вайрфреймы, конечно, действительно экономили наше время. Но сейчас появляется все больше и больше инструментов для дизайнеров, и индустрия процветает. Для Adobe Software появилось множество альтернатив, среди которых Sketch, Figma или даже UXPin. Создатели Photoshop увидели это и начали работу над приложением Adobe XD.
На самом деле, лично мне не приходится тратить больше времени на создание качественного мокапа в Sketch, чем на разработку вайрфрейма. Если вы пользуетесь подобными инструментами, нет смысла тратить время на серые квадратики.
Они могут препятствовать креативности
Многие дизайнеры воспринимают эти схематичные наброски слишком серьезно, и после создания вайрфреймов не могут заставить себя спроектировать интересный и привлекательный UI. Конечный дизайн в итоге выглядит как разрисованный вайрфрейм.
Более того, если вайрфрейм был одобрен стейкхолдером, а документация уже почти готова, дизайнеру, которому вдруг во время создания мокапа пришла в голову гениальная идея, для осуществления своего замысла придется столкнуться с рядом формальных трудностей.
Что использовать вместо вайрфреймов
При работе над дизайном в первую очередь вы должны визуализировать свой продукт, так как необходимо увидеть собственными глазами, как это будет выглядеть в целом. Затем необходимо добавить больше деталей и конкретики, утвердить разработанную схему и наметить направление, по которому будет следовать работа.
Вайрфреймы — это средняя ступень процесса дизайна. Они не дадут вам понять, какое влияние окажет конечный продукт на пользователей. Поэтому они не представляют собой особой ценности. Если же вы внимательнее сфокусируетесь на предыдущих стадиях — мозговом штурме, пути клиента и UI-скетчинге — вы легко сможете перепрыгнуть на стадию разработки качественного дизайна.
В первую очередь, сфокусируйтесь на общей картине вашего проекта. Лучший способ — это делать наброски на бумаге и маркерных досках во время стадии мозгового штурма. Намеченные диаграммы и схемы дадут вам понять, куда вам нужно двигаться дальше, и это могут подтвердить некоторые эвристические данные.
Многие дизайнеры считают, что скетчи — это вайрфреймы на бумаге, но это два совсем разных понятия. При создании скетчей вы представляете общую концепцию UI-дизайна. При создании же вайрфреймов вам необходимо продумывать какие-то детали и схемы, что может отключить на время вашу креативность. Если вы планируете создавать вайрфреймы, им всегда должны предшествовать скетчи.
И вроде вы уже начали привыкать, что нужно все время делать эти дурацкие бело-серые схемы. Но теперь пора начать о них забывать.
Лучше всего сразу переходить к созданию высококачественных мокапов, которые будут с максимальной точностью отражать все ваши идеи. А такие быстрые и мощные приложения как Sketch или Adobe XD помогут вам в этом.
Для наилучшего эффекта, прежде чем перейти к работе над тем или иным проектом, вы можете подготовить сет из стандартных UI-элементов. Соберите их в гид по стилю и используйте в качестве символов (в программе Sketch или XD). Разработка системы дизайна — это отличная способность, которая усовершенствует процесс работы над материалами и поможет вам поддерживать согласованность между всеми элементами проекта.
А как насчет прототипов?
Вайрфреймы были идеальны для создания некачественных прототипов. Но теперь, благодаря появлению таких инструментов как Invision, UXPin, Principle, Flinto Origami или XD, создание высококачественных прототипов стало гораздо проще. Упомянутые приложения очень быстрые и удобные в использовании, а у некоторых из них даже есть возможность для создания моушн-дизайна и анимации на продвинутом уровне.
Поэтому нет никакого смысла пользоваться вайрфреймами для создания прототипов с целью тестирования удобства использования. Если вам срочно потребуется испробовать какие-то идеи, лучше используйте скетчи.
Плюсы дизайна без использования вайрфреймов
Если вы последуете приведенным выше советам, вы определенно заметите некоторые улучшения.
Показав мокапы стейкхолдерам и другим разработчикам из команды, вы получите гораздо больше положительных отзывов. Людям не придется уточнять, как страница будет выглядеть в конечном итоге, так как они уже будут видеть некое подобие скриншота.
К тому же, пока вы будете работать над созданием страниц, вы быстрее сможете проверять в деле какие-то идеи и задумки. А средняя стадия — вайрфреймы — исчезнет, так что цифровая схема продукта будет выглядеть в формате страниц и скриншотов.
Заключение
Вайрфреймы воспринимаются как фундаментальная часть процесса дизайна. Однако, в настоящее время существует множество рациональных доводов против их использования. Если вы не хотите постоянно работать с вайрфреймами, старайтесь чаще делать скетчи во время мозгового штурма, а затем открывайте все необходимые приложения и работайте над созданием уже высококачественных материалов.
Что такое вайрфреймы и как их использовать в дизайне интерфейсов
В работе дизайнера есть много профессиональных терминов: мокапы, дизайн-макеты, прототипы, кернинг и другие слова. Каждый специалист графики должен знать, что кроется за этими понятиями.
В этой статье мы разберёмся с англоязычным словом 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 воплотит в жизнь любую креативную идею. Наши специалисты учтут пожелания, разработают набросок, а после и готовый макет. Затем в работу включатся программисты, которые превратят картинку в приложение или сайт.