Mobile-App-Desing-From-Idea-To-Product-DevelopmentOLD

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

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

Stages-of-designing-mobile-apps-from-scratch

Идея

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

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

Скетч

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

Mobile App Desing From Idea To Product Development - pic1Оцените разницу между скетчем и готовым продуктом

Сценарии взаимодействия и вайрфреймы

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

Mobile App Desing From Idea To Product Development - pic2

Вот наглядный пример одного из реальных вайрфреймов.

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

Макет

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

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

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

What's-next

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