Нам нужно в краткие сроки сделать дизайн нескольких страниц приложения. Как все примерно должно располагаться я указал. Пропорции тоже примерно подогнал. Мы возьмем дизайны этих страниц и на их основе будем делать еще примерно еще штук 10 похожих (например вместо ввода Phone будет ввод Email и пр.^). Эти страницы будут общими для всяких разных приложений разных клиентов. Соответственно нам надо чтобы они как-нибудь отличались. Первое чем они будут отличаться это иконкой и названием приложения. Далее я думаю фоном этих экранов. Верстать пиксель в пиксель эти дизайны мы не будем мы будем брать компоненты
onsen.io/theme-roller/ и использовать их с минимальными изменениями (желательно!). Соответственно для отрисовки прошу использовать представленные компоненты по ссылке. Делать дубли тоже не нужно, мы их нарисовали для себя например страница Enable/Disable и Error отличаются только текстом и иконкой. Достаточно нарисовать один из них. Страница Access Denied также отличается только текстом достаточно одной. Но внимание компоненты которые есть имеют исполнение в двух вариантах iOs, Android. Они очень похожи, но есть различия (например в высоте кнопки, или вообще в исполнении) тут важно не напороться на то что например какой-то текст будет близко к кнопке, и при переключении с iOs на Android кнопка наползет на текст из за того что они отличаются по высоте. Конечно компоненты мы будем верстать друг за другом, но мало ли, хочется избежать таких косяков.
Таким образом еще раз:
1. Берем компоненты только с
onsen.io/theme-roller/ 2. Учитываем что они могут различаться
3. В дизайне будем прорисовывать только один стиль iOS (вот тут можно поиграться с тем как выглядит компонент на разных ОС
onsen.io/v2/api/vue/v-ons... )
4. Не рисуем дубли
5. Используем прототипы с надписью "РИСУЕМ" остальные такие же, так что нет смысла
realtimeboard.com/app/boa... 6. Рисуем в разрешении для iPhone 5.
7. Размеры иконок берем стандартные из компонентов или из руководства по стилю
8. Один экран (любой) рисуем в 2-3 цветовых гаммах чтобы понимать где прозрачность а где фон и как все будет смотреться в других цветах. Отсюда мы например можем узнать что если клиент выбирает темный фон, то где-то надо инвертировать цвета текста например.
material.io/design/color/... 9. Базовые цвета предлагаю брать с нашего сайта mobsted.com
10. Креатив заключается в правильном подборе компонентов, их расположению.
11. Одинаковые элементы должны иметь одинаковое позииционирование (например заголовок экрана всегда на одном месте, кнопка назад тоже)
12. Уделите внимание пропорциональности элементов, их "читаемости" и однозначности глядя на каждый из экранов должно быть понятно где мы находимся, что от нас требует приложение сейчас , и как вернуться с текущего экрана на другой, если у нас изменились цели.
13. Рисуем быстро, показываем 1-2 экрана по готовности, получаем одобрение и заканчиваем остальные.
14. Все вопросы задаем сюда.