Денис Волков

Нам нужно в краткие сроки сделать дизайн нескольких страниц приложения. Как все примерно должно располагаться – я указал. Пропорции тоже примерно подогнал. Мы возьмем дизайны этих страниц и на их основе будем делать еще примерно еще штук 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. Все вопросы задаем сюда.

Обязательно знание SASS!
sass-lang.com/

1. Необходимо на основе сверстанного шаблона, mobsted.com/wp-content/th... содержащего разные блоки (уже внутри есть адаптивная верстка), по рисункам (скетчам) создать 16 страниц (copy-paste блоки и copy paste тексты из рисунков)
Например, по рисунку во вложении (уменьшенный) – получится вот так mobsted.com/rent-custom-m...
У вас будет 16 таких рисунков и должны получиться 16 страниц. Тексты брать руками из рисунков, отдельно их нет.

2. Используя SASS привести в "божеский" вид все страницы, путем изменения высоты, ширины, отступов и пр. Так как блоки по отдельности смотрятся нормально, а вместе не сочетаются. Это творческая часть. Точного задания нет. Будем смотреть и примерно думать что делать.

3. Запустив все страницы (а это нам нужно чтобы было хоть в каком то виде и как можно быстрее), необходимо будет корректировать верстку для разных экранов. Сейчас на некоторых разрешениях – что-то обрезается, где-то шрифт мелкий и пр. Для запуска это не принципиально, но потом все нужно сделать качественно. НЕ СРАЗУ. Вариант сразу делать все адаптивно для всех экранов – только если вы мега быстро это делаете. Но по факту обычно не быстро, поэтому в 2 захода.

4. По мере верстки будут приходить иконки от дизайнера – надо их вставлять в страницы.

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

Пункты 1 и 2 – ориентировочное время 2-3 дня (по 8 часов)
Пункт 3. – не знаем, зависит от квалификации – ждем от вас
Пункт 4. На все иконки уйдет не больше 2-5 часов суммарно
Пункт 5. Неизвестно.

Оплата: 1 раз в неделю, четверг-пятница обычно на карту. Без предоплаты.


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

Например:

"Сделаю за 1 день, mail@mail.ru, 200 руб/час. Буду показывать вам скриншоты верстки и если все оплачиваете – отдаю верстку."
или
"Пункт 1 – 10 дней, миллион рублей. Пункт 2- 1 день, 3 рубля mail@mail.ru, делаю сразу у вас на сервере, оплата раз в неделю меня устраивает"