От прототипа к дизайну: 5 преображений проектов

От прототипа к дизайну:
5 преображений проектов

Насколько прототип может отличаться от дизайн-макета и какие изменения стоит вносить на этапе прототипирования

Под прототипом будем понимать черно-белый чертеж будущего сайта. Хотя понятий, связанных с прототипированием, намного больше: есть мокапы (цветные), есть вайрфреймы (которые просто серые), есть прототипы (которые серые плюс кликабельные). Главные плюсы прототипов — наглядность и относительная дешевизна. Можно потыкать мышкой свой будущий проект, еще до дизайна, верстки и программирования.

Прототип — черно-белый чертеж будущего сайта

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

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

Прототип — план, который помогает понять:

• что есть на странице,
• зачем оно там,
• там ли вообще находится,
• и как оно работает.

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

Бумажная выкройка на манекене. Фото из Интернета

Но при взгляде на черно-белый чертеж проекта визуальные элементы сложно игнорировать. Шрифты, размеры и расположение блоков бросаются в глаза и отвлекают от главного — структуры. Страх из-за неопределённости (каким будет дизайн ведь пока непонятно) нашёптывает клиенту в ушко: шрифт какой-то обычный, верстка обычная… А ты же хотел не по сетке, блоки маленькие, а у нас все фотки с фотосессий крупные. И так далее. Появляются справедливые вопросы — можно ли это поменять?!

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

Опасение 1: стандартная сетка

Вы прошерстили Awwwards и вдохновились проектами с нестандартной вёрсткой: это поможет выделиться на фоне унылых конкурентов. Но на прототипе вы видите чёткую линейную структуру. Волноваться не стоит — расскажите о своих визуальных предпочтениях перед следующим этапом (мудбордом — обсуждением сайтов, которые вам нравятся и подходят проекту по стилистике). А пока лучше сосредоточиться на структуре страницы.

Взгляните на проект Lakk&Roll: на прототипе мы показали ключевые блоки, необходимость которых выявили на аналитике. На мудборде выяснилось, что заказчику нравится мозаичная структура на сайтах и пастельные оттенки — в итоге получился макет, значительно отличающийся от первоначальной вёрстки страницы.

Прототип, часть мудборда и итоговый макет для проекта Lakk&Roll

Вывод: вёрстка на дизайн-макете может серьёзно отличаться от вёрстки на прототипе.

Опасение 2: стандартные цвета и шрифты

Вам нравятся сайты с тёмным фоном или крупной типографикой — они кажутся более выразительными и запоминающимися. Особенно когда в отрасли так не принято. А перед вами прототип в градациях серого со стандартными шрифтами — как так?!

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

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

Прототип, кусочек мудборда и итоговый макет для проекта Senetsy

Вывод: со шрифтами и цветом не играем — прототипы в градациях серого со стандартными шрифтами более продуктивны.

Опасение 3: стандартные блоки

Как правило в прототипах используются прямоугольные формы блоков (за редким исключением — если какие-то формы можно подсмотреть в вашем фирменном стиле).

Слева — проект сети клиник 3Z, где в брендбуке заказчика мы обнаружили очень интересные формы, которые сразу разместили на прототипе. Справа — проект Mr.Diamond, для которого мы создавали концепцию с нуля.

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

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

Прототип, фрагмент мудборда и итоговый макет для проекта «ИнтерактивЦентр»

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

Опасение 4: расположение блоков

Какие блоки поставить выше, какие — ниже, а какие спрятать в спойлер? Это зависит от приоритета информации. Дешевле и быстрее всего менять порядок блоков именно на этапе прототипирования. На живом проекте это будет уже несколько сложнее (хотя в нашем портфолио есть проекты, в которых порядок блоков можно задавать из админ-панели сайта, или менять этот порядок по результатам A-B-тестов). Тем не менее, продумать приоритеты на прототипе — правильная стратегия.

В проекте ГрандКапитал клиент попросил поменять приоритетность блоков — опыт и новости индустрии поднялись на уровень вверх, а блок о клиентах опустился ниже.

Вывод: на этапе прототипирования проще и дешевле менять расположение блоков (и добавлять/убирать их).

Опасение 5: контент-импотент

На прототипе тексты приблизительные: где-то «рыбный» текст, где-то описания со старого сайта. Такой контент (заголовки, описания, иногда — иконки) не влияет на структуру самой страницы, и его можно безболезненно поменять даже после запуска сайта.

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

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

• Текстовый контент: статьи, тексты и описания со старого сайта, видение новых текстов или даже свежий контент от копирайтера, которого нет на старом сайте.
• Инфографика или факты для нее. Особенно если нужно рассказать о процессах или показать значимые цифры.
• Визуальный контент (картинки и фотографии) — чтобы понять, какого они формата и как их можно использовать на новом сайте.

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

В проекте Парацельс на этапе дизайна благодаря правкам на этапе прототипирования появляются более корректные формулировки на дизайне:

Вывод: контент на прототипе — как правило, приблизительный, и его можно заменить из админ-панели сайта (если только он радикально не влияет на структуру страниц). Готовьте контент загодя!

А если кратко?

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

На этапе прототипирования визуал — второстепенное. Основное внимание уделяют структуре и функциям проекта.

Прототип показывает расположение блоков, при этом вёрстка на итоговом макете может отличаться.

На прототипах с шрифтами и цветом элементов не играем. Типографика и цветовые предпочтения выбираются на следующем этапе.

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

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

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

Как создать прототип сайта: пошаговая инструкция

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

Вас еще может заинтересовать отдельная статья про создание прототипов интерфейсов — добавляйте в закладки.

Содержание:

1. Что такое прототип сайта
2. Для чего нужен прототип сайта заказчику
3. Задачи, которые решает прототип сайта для команды разработчиков
4. Виды и примеры прототипов сайта
5. Как создать прототип сайта
6. Рекомендация по созданию прототипов
7. Что еще почитать о системе дизайна сайтов
8. Вывод и рекомендация

Что такое прототип сайта

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

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀

Подписывайтесь на канал в
Telegram
|
ВКонтакте,
Instagram,

Facebook

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

Пример современного прототипа сайта в InVision Studio:

InVision Studio — новый мощный инструмент для продуктового дизайна (UX/UI) на Windows/macOS. InVision идеальна, когда требуется проработать уникальную концепцию приложения или сайта с учетом всех нюансов поведения 👇

Для чего нужен прототип сайта заказчику

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

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

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

Начните с чертежей и плана дома (карта сайта и прототип), утвердите месторасположение, дизайн-проект, график работ и ресурсы и согласуйте с клиентом — таких же целей и помогает достичь прототип.

Чем прототип помогает в проектах:

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

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

Задачи, которые решает прототип сайта для команды разработчиков

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

Виды и примеры прототипов сайта — способ вырастить сайт постепенно

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

1. Эскиз на бумаге (скетч) — хорош для поиска конструкции

Эскиз — это схематичная разметка блоков, из которых состоит сайт. Создать такой прототип можно на бумаге ручкой/карандашом или в онлайн-инструменте (например, в Balsamiq). На данном этапе очень важно поработать руками.

«Работайте руками: сидение перед компьютером днями напролет убивает нас и нашу работу: нам необходимо чувствовать, каково это создавать что-то своими руками.»

«Отойдите от компьютера: компьютер может помочь в редактировании идей, но блокирует генерирование творческого потока — вы начинаете сами себя исправлять, еще толком не сформулировав идею.»

Остин Клеон, 10 уроков творческого самовыражения

Чем хорош: такой уровень детализации хорош для поиска компоновок и согласования крупным планом разделов сайта (карта сайта). Он не сковывает лишними деталями и помогает разместить ценную информацию.

Пример наброска информационной архитектуры (IA)

2. Статичный прототип с низкой детализацией (LoFi Wireframe) — превращаем идею в документ для согласования объема работ

Этот этап помогает проработать детали: отточить размеры объектов и пропорции и делать все заметки читабельными для всех участников и клиента.

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

Пример LoFi Wireframe.

3. Статичный прототип с высокой детализацией (HiFi) — фаза активной работы с содержанием (текст, иллюстрации, фото)

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

Чем хорош: фокусирует на сообщениях и расстановке акцентов на существенных для истории моментах. 

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

Пример HiFi Wireframe.

4. Интерактивный прототип с высокой детализацией (Interactive Hi-Fi)

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

Чем хорош: когда ставки высоки, помогает снять все вопросы перед запуском веб-разработки и упрощает тестирование и приемку сайта.

5. HTML-прототип в Webflow или Tilda

Альтернативный подход к созданию прототипов. HTML-прототипы ценят клиенты, которые нацелены на быстрый запуск, рост и доработку проекта прямо на живом. Такой прототип естестественным образом превращается в полноценный сайт.

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

Как создать прототип сайта — пошаговая инструкция по созданию прототипа

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

Здесь я собрала ключевые шаги как ориентир. Каждый шаг достоин отдельной статьи. Используйте их как ориентир в ваших проектах.

Шаг 1. Скетч сайта (Sketching Low-Fi Wireframes)

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

Совет по созданию: используйте заметки на полях, чтобы зафиксировать, о чем будет блок страницы. Чем больше полотно, тем крупнее берите пишущий инструмент. Если вы делаете наброски в тетрадке, карандаш отлично подойдет. Взяли целый блокнот? Переключитесь на маркер. Подошли к доске? Берите маркеры с самым толстым наконечником. Так вы не увязнете в лишних деталях. Помните, что цель состоит в том, чтобы получить общее представление.

Скетчинг и разметка информационной архитектуры страницы.

Шаг 2. Цифруем скетч и добавляем деталей (High Fidelity Wireframe)

После того как вы создали несколько скетчей и отсекли неподходящие, вы можете взять те, что годятся, и довести до готовности — вывести на уровень высокоточных прототипов в оттенках серого. Неважно, используете вы Figma или Sketch. Цель состоит в том, чтобы лучше структурировать Lo-Fi эскизы. Начертите сетку, начните добавлять изображения, заголовки и текст.

Совет по созданию: применяйте тональную шкалу. Тональная шкалаперебралась в Дизайн сайтов и интерфейсов из классического рисунка.

Классические макеты (wireframes) тоже создают в черно-белом цвете или оттенках светлого и темного. Такой подход помогает настроиться на выращивание дизайна слой за слоем: поиск композиции и проработка визуальных весов, затем заливка контента, добавление минимальных цветов и затем глубокая стилизация.

Дополнительно:

• Как нарисовать тональную шкалу: https://drawingpractice.ru/osnovy-risovaniya/kak-narisovat-tonalnuyu-shkalu/, https://urokiakvareli.ru/risovanie-tona-kak-narisovat-tonalnuu-skalu
• Что такое Wireframe?: https://ux-journal.ru/bazovyj-kurs-ux-chto-takoe-wireframe.html
• Образцы структурных схем страниц (wireframes) от ведущих UX-дизайнеров: https://ux-journal.ru/obraztsy-strukturnyh-shem-stranits-wireframes-ot-vedushhih-ux-dizajnerov.html
• Пять визуальных принципов, которые помогут направить внимание пользователя в нужное русло: https://ux-journal.ru/bazovyj-kurs-ux-vizualnyj-ves-kontrast-glubina-razmer.html
• Искусство формы: https://www. ozon.ru/context/detail/id/3987196/

Превращаем скетч в полноразмерный прототип с деталями (HiFi).

Шаг 3. Прорабатываем стиль и образы с учетом метафоры и ценностей бренда (High Fidelity Wireframe)

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

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

Стилизуем прототип фирменным стилем.

Типовые элементы — Wireframe-Kit для прототипирования

Wireframe kit — это готовый набор упрощенных графических элементов для прототипирования сайта или интерфейса.

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

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

Старт c готовым Wireframe Kit и доработки под свои цели и задачи. Вводим в Google Images/Яндекс.Картинки «Low-fidelity wireframing kit for Figma» и «Figma Wireframe Kit», качаем и пробуем.

Рекомендация по созданию прототипов

Принципы фундаментальные. В них вы найдете концепцию Jobs-to-be-Done, элементы атомарного дизайна, фундамент для дизайн-системы, связь с психологией восприятия.

1. Первый экран: сделайте привлекательный заголовок, полезный текст под заголовком и две кнопки действия (основная — заказать, вспомогательная — изучать). В заголовке заявите о вашей фишке, а в тексте под заголовком раскройте принцип работы.
2. Черно-белый: не отвлекайтесь на цвета. Тональной шкалы достаточно, чтобы нарисовать картину любой сложности.
3. Навигация и сценарий: проверьте плавность сценария и достижимость бизнес-целей. Хороший прототип годится для юзабилити-тестирования на целевой аудитории.
4. Сначала история и только потом сетка: сетка — инструмент организации контента и способ сделать аккуратно. Начните с рассказа о продукте и компании.
5. Тексты и контент: используйте максимально приближенные к реальности тексты и фото. Если на старте не хватает текстов, временно позаимствуйте их у конкурентов.
6. Компоненты и привычки: в прототипах старайтесь не изобретать новые элементы управления, используйте популярные и знакомые образы.
7. Гармония и чутье: редактируйте композиции и историю на уровне прототипа, иначе на поздних фазах дизайна придется возвращаться и переделывать заново.
8. Документ, план и объем работ: прототип — серьезный документ. С ним вы уже можете вместе с программистами оценить объем работ.
9. Заметки на полях: заметки помогают зафиксировать идеи по взаимодействию с пользователем, ценный бизнес-контекст. Старайтесь не держать проектную информацию в памяти — «сохраняйтесь» почаще.

Что еще почитать о системе дизайна сайтов

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

Веб-дизайн. Книга Дж. Гарретта. Элементы опыта взаимодействия | Гарретт Джесс. Подробнее →

Вывод и рекомендация

Прототип крайне полезен на практике. С ним вы уверены, что создаете то, что действительно полезно клиентам. Если вам требуется больше практики в создании прототипов, вы можете попробовать себя в роли веб-дизайнера (UX/UI) можете на платформе Breezzly. Здесь вас встретят дизайн-проекты во всех популярных инструментах (Figma, InVision Studio, Principle) и на всех видах популярных у клиентов проектов.

БЕСПЛАТНЫЙ Прототипирующий инструмент: Постройте интерактивные проекты прототипов

Figma

. Платформа дизайна All-One

DesignPrototygingDesign SystemsDownloads

Figjam

Столбная доска для команд

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

Плагины и виджеты

Расширьте возможности и автоматизируйте работу

События и прямые трансляцииПередовой опытОбразовательная программаГруппы пользователей

FrançaisDeutsch日本語

ВойтиНачать работу

Начать работу

Начать работу

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

Приступайте к работе

Создавайте прототипы, похожие на реальный опыт

Превратите файлы статического дизайна в интерактивный опыт — кодирование не требуется.

• Интуитивная сборка: Просто подключите элементы пользовательского интерфейса и выберите взаимодействия и анимацию.
• Взаимодействия: Определите малозаметные взаимодействия, такие как щелчок, наведение курсора, нажатие кнопки и т. д.
• Мобильный просмотр: Испытайте свои проекты в реальной жизни с помощью нашего мобильного приложения Figma, доступного для iOS и Android.

Покажите, а не рассказывайте свое видение взаимодействия

Избавьтесь от догадок при разработке, объяснив детали взаимодействия, которые вы представляете.

• Расширенные переходы с помощью Smart Animate: Автоматически анимируйте похожие объекты и создавайте детальные переходы.
• Динамические наложения: Создание нескольких слоев интерактивных наложений содержимого.
• Анимированные GIF-файлы: Используйте GIF-файлы для представления моушн-дизайна, видеоэлементов и тонких анимаций.

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

Бет Хорн, старший научный сотрудник Bulb

Сделайте все с помощью одного инструмента

Больше не нужно прыгать между инструментами. Создавайте дизайн, прототипируйте, делитесь и собирайте отзывы в Figma.

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

Другие способы использования прототипов Figma

Наблюдение за испытуемым на исследовательских сессиях

Взаимодействие с живыми прототипами в Notion или Dropbox

Узнайте, как Figma может помочь вам спроектировать от начала до конца

Дизайн

Learn more

Design Systems

Learn more

Design process

Learn more

• Twitter
• YouTube
• Instagram
• Facebook

Use Cases

• UI design
• UX design
• Graphic дизайн
• Каркас
• Диаграммы
• Мозговой штурм
• Шаблоны
• Удаленное проектирование
• Агентства
• Figma для образования

Explore

• Design features
• Prototyping features
• Design systems features
• Collaboration features
• Design process
• FigJam
• Pricing
• Enterprise
• Organization
• Professional
• Customers
• Security
• Integrations
• Контакты

Ресурсы

• Блог
• Передовой опыт
• Поддержка
• Developers
• Learn design
• Downloads
• What’s new
• Releases
• Careers
• About us
• Agency partners
• Privacy
• Status

Compare

• Sketch
• Adobe XD
• Invision Studio
• Framer
• Дизайн для Windows
• Miro

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

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

Как и зачем создавать прототипы часто остается загадкой. Спросите многих дизайнеров, и они склонят головы, как растерянные щенки. «Что ты имеешь в виду? Просто сделай это», — скажут они. И правда: все мы умеем создавать прототипы. Мы просто не знаем , как мы знаем .

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

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

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

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

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

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

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

Тим Браун, генеральный директор и президент IDEO

Прототипы можно рассматривать как механизм для демонстрации функциональности.

Практическое объяснение того, как что-то работает, имеет ряд ценных преимуществ, в том числе:

• Воплощение в жизнь – Перед созданием каких-либо прототипов продукт полностью концептуален! Какое-то время это нормально, но в конечном итоге это должно стать чем-то, что заинтересованные стороны и пользователи в конечном итоге поймут и оценят. Прототип — это первый шаг на пути от концепции к реальности.
• Решить проблему — Иногда у нас возникает проектная задача без решения. Как навык прототипирование — отличный способ визуализировать проблему и быстро представить решения. Если это не сработает, выбросьте прототип и попробуйте снова.
• Итерация — Прототипирование происходит поэтапно, но результат один и тот же: развитие ваших идей. Каждая новая итерация, от эскизов до Hi-Fi, предлагает множество вариантов поведения и функций для тестирования. А с большим количеством данных мы можем выполнять итерации быстрее и эффективнее.
• Обнаружение непреднамеренных сценариев — Как только что-то становится видимым, у нас есть доступ к ограничениям нашего продукта для изучения, что также обеспечивает лучший контекст того, что должно быть там… и что не должно быть!
• Обнаружение проблем с юзабилити — Именно здесь живут многие дизайнеры: как только у продукта появляется какой-либо прототип, проблемы с юзабилити внезапно становятся легко обнаруживаемыми и устраняемыми.
• Презентация – Прототипы на любой стадии являются стандартом для презентации. Независимо от того, тестируете ли вы версию страницы или представляете продукт клиенту, прототип в той или иной форме должен присутствовать. А если нет, то можно поспорить, что кто-нибудь спросит, где он и почему его не включили.

Как начать процесс прототипирования

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

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

1. Каковы цели проекта?

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

2. Какие конкурентоспособные продукты люди используют в настоящее время?

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

3. Кто является аудиторией? Каковы их цели?

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

4. Что это за продукт и для чего он (устройство) предназначен?

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

5. Есть ли визуальные прецеденты для подражания?

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

6. Каковы результаты?

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

Прототип карты доставки (от Ramotion).

Нарисуйте свои прототипы

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

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

01 | Потоки пользователей — Следуйте идентификации потоков пользователей. Посмотрите, как пользователи достигают своих целей и как они взаимодействуют в системе.

02 | Информационные объекты — Каждый пользовательский поток будет отображать некоторые пользовательские входы и выходы. Определите, что они из себя представляют, как они связаны с поведением и ожиданиями пользователей, в какие взаимодействия они вовлечены и как они работают.

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

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

Пример рудиментарного эскиза автора.

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

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

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

Переход к цифровым технологиям (прототипы с низким и высоким уровнем точности)

Как только будет создано достаточно полных эскизов для продвижения вперед, пришло время их оцифровать. Будь то Adobe XD, Sketch, Framer, Flinto или что-то еще, создание цифровых версий эскизов — это первый шаг к их формализации. Таким образом, акцент смещается с творческого добавления необходимых элементов на организацию активов и структуры в дизайне.

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

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

Прототипирование с помощью Justinmind.

С каждым новым проводом и итерацией задавайте два основных вопроса: Учитывает ли эта страница свое предназначение в более широком пользовательском потоке? И имеет ли взаимодействие смысл (имеется в виду, понял ли пользователь, как выполнить действие)? Мы очень часто задаем эти вопросы. Чем больше мы делаем, тем больше вероятность того, что каждая новая итерация будет приближать прототипы к окончательному варианту.

Цифровые прототипы также намного проще тестировать, поскольку они не только более разборчивы, но и быстрее воспроизводятся и итерируются в массовом порядке. Именно здесь инструменты прототипирования UX, такие как InVision и Proto.io, очень удобны для создания интерактивных прототипов. Когда это кликабельно, становится легко проверить удобство использования различных аспектов, от отдельных кнопок до целых потоков.

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

С помощью некоторых инженерных ноу-хау или более мощных инструментов, таких как Justinmind или Axure, также можно создавать функциональные прототипы, которые интерактивны, а не просто щелкают мышью. Пользователи могут тестировать такие вещи, как заполнение форм, выполнение простых или сложных задач и фактическое использование приложения так, как оно предназначено для использования, без его фактической сборки. Дизайнеры, прошедшие подготовку в области взаимодействия человека с компьютером (HCI), в том числе многие дизайнеры Toptal, регулярно создают и тестируют функциональные прототипы.

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

Функциональный прототип, разработанный Автором.

Прототип с назначением

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

This entry was posted in Продвижение