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

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

Через какое-то время мы поняли, что потратили много времени на проектирование, почему? Доработки занимали все время. Ревизии были сложными; нам пришлось настроить макеты, графику и типографику. Все было разочаровывающим, катастрофическим для сроков проекта, тревожным для клиентов и утомительным для нас. Потребовалось некоторое время, прежде чем мы поняли, что нам нужен другой подход. Мы решили вернуться к первоначальному процессу «Square One», который мы игнорировали ранее, «каркасному построению». Мы начали с каркасов серых ящиков, включили их в наш процесс проектирования, затем перешли к другому процессу и добавили его в процесс проектирования.В конце модель встала на место, благодаря «каркасному построению», это сэкономило наше время и помогли нам решить проблемы раньше, поэтому я считаю вайрфрейм «первыми воротами» в процессе проектирования.

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

Кто знает, на самом раннем этапе вы можете распознать потенциальную проблему юзабилити в своих проектах. Иногда отличная концепция проекта со строгими (URS) требованиями пользователя во время начального процесса кажется, что они встают на свои места. Опять же похуже бывает, когда мы начинаем составлять планы по бумагам: «Что случилось?» мы проигнорировали каркас, который занимает всего несколько минут, чтобы набросать план, чем красочный Photoshop. Лучше начать настройку раньше, чем позже.

Вайрфрейминг как инструмент тайм-менеджмента

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

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

Вайрфрейминг для связи с клиентом

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

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

7 удивительных фактов о вайрфреймах

1 Повышает опыт командной работы

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

2 Прозрачное общение

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

3 Вовлекайте клиентов

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

4 разных подхода

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

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

5 Основа для тестирования

Имея 3 или 5 прототипов, вы можете протестировать эскиз проекта с реальными пользователями. Есть мнение, что тестировать можно только с готовым HTML-прототипом, но это не так. Также для тестирования можно использовать нарисованные от руки каркасы. Вы можете спросить у пользователя, какие кнопки он хотел бы нажать; они также могут получить отзывы о тегах имен и, наконец, они могут помочь проверить, имеют ли они правильную визуальную иерархию. Тестирование с помощью каркаса помогает выявить проблемы раньше.

6 Более быстрый проект

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

Вайрфрейминг в Photoshop

Серые коробки и зарисовки в фотошопе.

Шаг 1: Соберите дополнительные требования от клиентов, затем «запустите» полноцветный фотошоп и начните вайрфрейминг.

Шаг 2: Создайте документ на основе системы 960 сеток (1100 пикселей в ширину и 760 в высоту). Вы можете узнать об этом в разделе «Настройка сетки в Photoshop».

Шаг 3: Инструмент «Заливка» (G) используется для заливки фона светло-серым цветом, чтобы объяснить, что будет фоновый цвет или изображение.

Шаг 4: Выберите инструмент «Прямоугольник» на панели инструментов и нарисуйте прямоугольник, чтобы обозначить область содержимого. Мы используем систему сетки 960; моя нарисованная коробка будет иметь ширину 940 пикселей. Сделайте цвет переднего плана белым с помощью «Paint Bucket Tool», чтобы он выделялся на сером фоне.

Шаг 5: Чтобы сделать процесс намного быстрее, просто (введите букву D), чтобы установить передний план на черный или любой другой цвет, который вам подходит, а фон на белый или любой другой цвет. Затем нарисуйте черные прямоугольники для представления областей содержимого. Опять же, вы можете изменить непрозрачность фона, чтобы он выглядел серым или любого другого цвета.

Шаг 6: Внутри сетки добавьте прямоугольник, чтобы представить что-нибудь. В этом случае «Кнопка входа» введите значение непрозрачности («30»), чтобы уменьшить непрозрачность прямоугольника («30») после того, как прямоугольник будет нарисован. Вы можете добавить текст с помощью инструмента «Текст» (T) на панели инструментов «Текст», чтобы добавить текст «ВХОД» поверх поля. Добавьте еще один прямоугольник, чтобы создать область навигации, снова уменьшите значение непрозрачности, чтобы сделать ее серой.

Шаг 7: Добавьте прямоугольники, чтобы создать области столбцов контента. Используйте двухколоночный макет с немного большим столбцом основного контента и меньшим столбцом для изображения главной страницы. Установите непрозрачность для столбцов на 10%, а также добавьте еще один прямоугольник для представления нижнего колонтитула в нижней части страницы.

Страница 8: В области содержимого добавьте фиктивные тексты с помощью команды Photoshop «Текст» > «Вставить Lorem Ipsum».

Другие приложения

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

ОмниГраффл

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

Ниндзя Мок

Мой любимый, БЕСПЛАТНЫЙ для использования, он имеет очень хорошие функции и трафареты, которые можно использовать для создания концепции интерактивного проекта. Это позволяет пользователям работать в автономном режиме и в Интернете.

Прекрасные диаграммы

Это хорошо для начинающих, это БЕСПЛАТНО, а интерфейсы просты для понимания.

Бальзамик

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

Гугл Диск Рисование

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

Глиффи

Gliffy проще в использовании, он привлекательнее и предлагает функции диаграмм, такие как блок-схемы и планы, у него есть диаграммы Венна с сетевыми процессами и UML с экспортом в SVG, PNG и JPEG.

Лумзи

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

Мокупс

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

Источник записи: instantshift.com