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

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

Дизайнер также должен иметь опыт создания интерфейсов под конкретную платформу.

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

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

Для демонстрации и обсуждения дизайна или прототипов с клиентом или командой есть множество готовых сервисов. Все заточены под конкретные задачи. Как пример для удаленного обсуждения макетов мы часто используем сервис www.invisionapp.com Можно прямо там указывать на конкретные места и обсуждать их или связывать макеты в кликабельный прототип.

Получилось немного сумбурно, надеюсь, что помог.

У Adobe такое можно сделать масками. Но это скорее хак. То есть у вас есть слой без размытия и слой с размытием. Второй ограничивается маской и кладется над первым. Создается ощущение, что изображение размывается стеклом.

Такой эффект из коробки и без хаков умеет делать программа Sketch (только Mac). Для этого объекту нужно назначить эфффект Background Blur и убрать заливку (или сделать ее полупрозрачной).
Как все же сделать в Illustrator (пошагово):
Я буду показывать на примере Illustrator CC 2015, но расположение меню не должно сильно отличатся.

1) Создайте два одинаковых слоя с фоновой картинкой. Они должны располагаться точно один над другим. Назовем их Original и Blurred.


2) Выберите верхнюю картинку (Blur) и назначте ей эффект размытия:
Effect > Blur > Gausian Blur

3) Выше нее разместите прямоугольник, который будет маской. Назовем его Mask.


4) Теперь выберите слои Mask и Blur, а затем выполните команду:
Object > Clipping Mask > Make

В итоге должно получиться так:

Все очень индивидуально в зависимости от ваших навыков и целей.

Где показывать

• Если хотите показать разработчику, то показывайте в том формате в каком делаете.
  
• Если хотите показать миру, то выкладывайте либо в формате видео (YouTube, Vimeo) либо в формате гифок (Behance, Dribbble)
  
  
  

Как делать

Рассмотрим разные варианты.

1. Раньше многие использовали After Effects, чтобы быстро "нарисовать" анимацию. Но сейчас такое время, что если вы этого не делали, то учиться скорее поздно. Но в принципе это все еще актутально.
   
   
2. Если вы знакомы скажем с JS, то какие-то анимации можете изображать там. Плюс для разработчика здесь в том, что уже будут вычислены основные параметры анимаций. Быстро показывать можно, например, при помощи codepen.io
   
   
3. Чуть более навороченный уровень это прототипирование анимаций при помощи приложения Form (www.relativewave.com/form) или очень похожей на него надстройки для Quartz Composer — Origami от Facebook (facebook.github.io/origami)
   
   
4. Также есть неплохое решение от Pixate. Относительно гибкое в плане анимаций. Один проект бесплатно. Можно тестировать на устройстве. www.pixate.com
   
   
5. Раз такой вопрос, то вы скорее не очень близко знакомы непосредственно с написанием кода приложения. Оно и не обязательно, если вы дизайнер. Но в будущем, если заинтересуетесь, можно будет использовать для экспериментов готовые фреймворки. Например Spring (https://github.com/MengTo/Spring) или POP (https://github.com/facebook/pop)
   
   
6. Ну и на последок довольно неожиданное, но очень простое решение для быстрого прототипирования и тестирования анимаций — Keynote (программа для презентаций) от Apple. На эту тему была неплохая лекция на минувшем WWDC https://developer.apple.com/videos/wwdc/2015/?id=803

Удачи в работе :)

var isMobile = {
    Android:        function() { return navigator.userAgent.match(/Android/i) ? true : false; },
    BlackBerry:     function() { return navigator.userAgent.match(/BlackBerry/i) ? true : false; },
    iOS:            function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false; },
    Windows:        function() { return navigator.userAgent.match(/IEMobile/i) ? true : false; },
    any:            function() { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());  }
};
	
if ( !isMobile.any() ) {
    // Код не для телефонов
}

Как готовый вариант можно использовать pagePiling.js
alvarotrigo.com/pagePiling