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

Для кого это полезно?

В закладки
  • Для тех, кто проектирует мобильное приложение;
  • Для дизайнеров;
  • Для менеджеров.

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

Непонимание происходит из-за незнания прототипа сайта.

Почему важен прототип в дизайне?

  • Он сокращает процесс разработки.
  • Уменьшает время работы за счет снижения количества операций.

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

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

  • Изначально он выглядит как схематичный черновик веб-ресурса.
  • Представляет из себя структуру (workflow) любого сайта.
  • Анимированная картинка, которая своими движения показывает, как работает целый ресурс.

Процесс создания сайта по этапам схож с разработкой его прототипа. А именно, - два этапа, Структура и Прототип, одинаково важны для создания того и другого.

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

Как появился прототип

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

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

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

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

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

Итак, схема продуктивной работы над созданием приложения: Эскиз - Концепция дизайна - Прототип статичный - Прототип интерактивный - Дизайн.

Схема наиболее оптимальная, т.к.:

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

Эскиз:

  • Разметка блоков
  • Связи между страницами
  • Обозначены якорные объекты

Прототип-статика:

  • Весь контент на странице (понятен объем текста)
  • Акценты (якорные объекты)
  • Обозначены места для изображений
  • Показаны интерактивные объекты
  • Оттенки серого

Прототип детальный:

  • Модульная сетка
  • Предфинальные тексты
  • Анимация
  • Все состояния объектов/форм и пр.
  • Интерактивность (страницы, объекты)
  • Базовые цвета

Дизайн-концепция

  • Цвета
  • Образ
  • Стилистика и декор в общих чертах
  • Подобраны шрифты, но не проработана стилистика

Дизайн

  • Типографика
  • Цвета
  • Стилистика и декор
  • Картинки
  • Финальные тексты

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

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

Мудборд и концепция дизайна

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

  • примеры по стилю;
  • примерный прототип;
  • цвета;
  • стилистика и декор в общих чертах;
  • готовые шрифты без стилистики.

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

Кому полезен мудборд:

  • фотографам,
  • стилистам,
  • дизайнерам интерьеров,
  • коллажистам,
  • рекламщикам (для креативной концепции).

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

{ "author_name": "Павел Лебедев", "author_type": "self", "tags": [], "comments": 1, "likes": -5, "favorites": 15, "is_advertisement": false, "subsite_label": "design", "id": 122536, "is_wide": false, "is_ugc": true, "date": "Thu, 23 Apr 2020 15:48:43 +0300", "is_special": false }
0
1 комментарий
Популярные
По порядку
1

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

Ответить

Прямой эфир