Создание каждого экрана, вероятно, занимало всего несколько минут; не волнуйтесь, их автор не прочь переписать их с нуля. На данный момент наиболее важным является конечная простота использования, поэтому выполнение нескольких итераций является нормальным и ожидаемым. Хотя описанный выше сценарий представляет собой более полный процесс, у некоторых команд нет необходимых ресурсов. Вот самый простой из возможных способов проектирования, который мы рекомендуем.
Так как у заказчика и каждого члена команды своё видение функционала, то при обсуждении только наглядное представление поможет расставить всё по своим местам. В своём опыте начала использовать прототипирование с 2010-го года и как раз при работе с нашими клиентами, для веб-сайтов. Прототип малой детализации чаще всего применяется для окончательного утверждения расположения функциональных блоков с заказчиком или другим ответственным лицом (product owner). При создании переходов по кнопкам и ссылкам между страницами используется для пользовательского тестирования.
Вайрфреймы — фундамент проекта или лишний этап?
Как и с любым дизайн-процессом, не бойтесь делать итерацию, за итерацией, за итерацией. Я задала размер 1280 x 900, так как я буду использовать cssgrid, который позволит легко изменять размер экрана от мобильного до максимум 1140 пикселей. Существует много теории о системе сеток, но, не вдаваясь в детали, я определю сетку как “структурированное и простое расположение элементов”. Если десктопные приложения вам не по нраву, то есть такие инструменты как mockflow, hotgloo и mockingbird.
Каталог контента представляет собой таблицу, в которой перечислены все материалы, которые нужно использовать, разделенные по страницам. Каталог контента помогает разрабатывать контент-ориентированный дизайн и понять, какие элементы являются наиболее важными. Если не хотите платить за специализированные платформы, то можно использовать программное обеспечение для презентаций, такое как Keynote или Powerpoint. Но при этом усложняется работа над проектом в команде, так как придется отправлять wireframe по электронной почте.
Когда использовать прототип?
Каркас — это изображение веб-страницы с низкой точностью, которое выделяет основные части страницы. Они не интерактивны и содержат мало информации, но создают минимальный дизайн, который служит руководством для проекта. Как только он становится интерактивным, он считается прототипом. Прототипирование, как один вайрфрейм это из начальных процессов разработки веб-сайта или приложения, дает представление о том, как веб-сайт будет выглядеть и работать. Эти прототипы могут даже создаваться автоматически или в таких инструментах, как PowerPoint или Keynote, чтобы получать информацию от пользователей о творческих процессах команды.
Этот образец иллюстрирует каркас с низкой точностью для главной страницы, поиска и разделов календаря веб-сайта компании по аренде жилья Airbnb. Каркасы, включенные в этот список, используются для концептуализации контента, функциональности и информационной архитектуры готового веб-сайта. Они помогают вам визуализировать, как этот сайт может выглядеть и функционировать страница за страницей. Дизайнер построил сетку и использовал ее для распределения информации и компонентов дизайна по 12 столбцам в этом примере каркаса. Прежде чем приступить к проектированию, создайте сеточную структуру, что впоследствии сэкономит вам время.
Почему лучше не пропускать этап вайрфрейминга в работе над проектом?
Макеты и каркасы играют важную роль в создании лучшего веб-сайта. Во-вторых, макеты помогают нам более эффективно направлять наших клиентов в процессе разработки веб-сайта . Когда мы помогаем нашим клиентам понять, что это за цель, мы можем более эффективно сотрудничать и, в конце концов, создать лучший и привлекательный веб-сайт.
Суть использования инструмента как раз и заключается в этом подходе. Для дизайна проекта о защите окружающей среды не нужны детализированные изображения пейзажей. Вайрфрейм — концепция создания структуры дизайна интерфейса. Не обязательно при работе над одним проектом разрабатывать поочередно вайрфреймы, мокапы, а затем и прототипы. В некоторых случаях можно обойтись и одним-двумя форматами.
Шаг 2: Планируем
UX-дизайнеры, похоже, неоднозначно относятся к вайрфреймингу, и некоторые называют их пустой тратой времени. Вместо того, чтобы пытаться объединить функциональные / макетные и креативные / брендинговые аспекты веб-сайта за один шаг, каркасные конструкции гарантируют, что эти элементы обрабатываются по очереди. Это позволяет клиентам (и другим членам команды) предоставлять обратную связь на более раннем этапе процесса. Каркасные модели легче обеспечивают обратную связь, чем законченный дизайн. Наконец, вайрфреймы позволяют легко визуализировать навигационные схемы и процессы. Зачастую наброски прототипов строятся именно благодаря им.
- На вайрфреймах любые изменения и доработки делаются гораздо проще и быстрее.
- Balsamiq – простой и интуитивный инструмент для создания низкодетализированных вайрфреймов на десктопе или в облаке.
- Поддерживает совместную работу, облачное хранение, командные библиотеки компонентов и множество интеграций.
- Каркасы могут быть совместными усилиями, поскольку они служат связующим звеном между информационной архитектурой и визуальным дизайном.
- Если заказчик не имеет технической подготовки, объясняем ему, что это еще не конечный результат, а только схема.
Считается, что wireframe в процессе, если вы не можете приступить к проектированию по нему. Принимать решения на основе “сырого” wireframe, это все равно, что ждать приближения ночного кошмара. В wireframe все выглядит схематично, но за этими чертежами стоят многие часы раздумий. Каждый небольшой блок должен быть спланирован и расположен в нужном месте.
Когда использовать вайрфреймы?
Каркас веб-сайта, иногда называемый схемой страницы или планом экрана, представляет собой визуальное представление каркасной архитектуры веб-сайта. Все это позволяет существенно снизить временные затраты для создания макета будущего сайта. Использование всех возможностей позволит сэкономить десятки минут на каждую страницу создаваемого сайта или приложения. Каркас должен быть визуальным ориентиром для структуры вашего сайта и того, как по нему будет перемещаться.Внешний вид и внешняя привлекательность на этом этапе не являются факторами. Ваша основная забота о каркасе должна заключаться в том, чтобы представить ваш контент интуитивно понятным и естественным способом, знакомым пользователям этого вида услуг. Каркасы служат промежуточным звеном между набросками на бумаге и ручкой и вашим первым прототипом.
Twitter — высокоточный каркас мобильного приложения:
Каркасы дают основу для сосредоточения внимания на путях конверсии и архитектуре страницы. Гораздо проще (и, в конечном итоге, быстрее) создать черновик и настроить в очень наглядном, но быстро изменяемом каркасе, чем после того, как дизайн начался. Учитывайте все свои элементы и функции — и добавляйте, изменяйте или удаляйте — сейчас, прежде чем накладывать красивый дизайн. Он заставляет всех объективно смотреть на простоту использования веб-сайта, пути конверсии, наименование ссылок, размещение в навигации и размещение функций. Каркасные модели могут указывать на недостатки в архитектуре вашего сайта или на то, как может работать конкретная функция.Всегда лучше обнаружить эти проблемы на раннем этапе. Каркасы — это простые черно-белые макеты, которые определяют определенный размер и размещение элементов страницы, функции сайта, области конверсии и навигацию для вашего сайта.