Дизайн ПО - отрисовка нескольких форм для веб приложения

Для существующей офлайн программы планируется разработка браузерной версии.

.

В первую очередь предполагается перевести к браузерному виду три формы (см. скрины существующих форм 01,02,03), и служебные элементы.

Формы будет делаться в веб интерфейсе, желательно, чтобы нарисованное можно было сверстать без особых сложностей.

.

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

Фирменные цвета сероголубой, фиолетовый и бирюзовый (ссылка на сайт www.crm-soft.ru, там же можно увидеть логотип).

.

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

.

Если вдруг Вы готовы помимо отрисовки, выполнить еще верстку - просьба это указать.

.

Оплата - Сбербанк. Возможна оплата яндекс мани, или вебмани. Оплата рубли. 

СТОИМОСТЬ работ - я предполагаю от 10000 до 20000 руб., но возможен и более широкий разброс. Постоплата.

Я предполагаю уложиться в неделю. Это оценка объема работ, сроки не сильно важны.

.

Ниже перечислены формы и элементы, которые надо отрисовать

======================================

ФОРМА ЗАПИСИ (см. скрины "01-запись-01.png" и "01-запись-02.png")

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

.

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

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

.

Детальное описание что какой элемент обозначает - в процессе работы. 

.

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

.

Нужны рекомендации по изменению цветов при выводе формы на печать.

======================================

ФОРМА ВИЗИТ (см. скрин "02-визит.png")

.

Детальное описание что какой элемент обозначает - в процессе работы. 

Форму рисуем только в компьютерном виде

======================================

ФОРМА ПАЦИЕНТ (см. скрин "03-пациенты.png")

.

Детальное описание что какой элемент обозначает - в процессе работы. 

Форму рисуем только в компьютерном виде

======================================

ПРОЧИЕ ЭЛЕМЕНТЫ:

1. контекстное меню

2. тултип

3. заголовок программы (шрифт, цвет шрифта, фон)

4. основное меню, дочерние меню основного меню (если будет отличаться от контекстного меню) в компьютерном режиме

5. основное меню в смартфонном режиме. Вместо ленты меню с выпадающеми списками - пиктограмма вызова меню, и кликабельная строка где находится пользователь (вида "Корень > Уровень меню 1 Настройки > Текущая форма Запись") (Вариант - оставить только пиктограмму вызова меню). По клику открывается строка где находится пользователь + выбор элементов текущего уровня меню. 

6. тулбар (кнопки для открытия часто используемых форм). Надо ли перерисовывать пиктограммы ?

7. информационное сообщение. Текст+кнопки Да Нет Отмена (см. скрин "04-инф сообщение.png").

8. простая диалоговая форма (см. скрин "06-заявка.png")

======================================

ФОРМА ВЫБОРА ЭЛЕМЕНТОВ (см. скрин "05-форма выбора.png")

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

Элементы формы: 

1. Поле для ввода текста для фильтрации списка по содержимому (может быть скрыто)

2. Элементы списка (достаточно крупные, чтобы можно было ткнуть пальцем). Для множественного выбора нужно два варианта элементов: включенный и выключенный.

3. Кнопка подтверждения выбора (может быть скрыта, используется если нужно выбрать несколько элементов)

4. Отмена выбора (может быть скрыта, может вообще от нее откажемся)

======================================

КАЛЕНДАРЬ

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