Отрисовать дизайн сайта их имеющихся скриншотов

Нужно отрисовать в psd дизайн админ панели из скриншотов. 

В скриншотах можно посмотреть лейаут сайта + некоторые UI элементы. Часть UI элементов нужно будет нарисовать и додумать самостоятельно.

Часть ТЗ выкладываю ниже, все остальное можно будет получить уже при конкретном общении с потенциальным исполнителем:

I. Dashboard 1

Страница дашборда. Должна быть создана на основе дизайна скриншота dashboard.jpg, dashboard2.png, dashboard3.jpg. Структуру блоков и наполнение нужно взять из примера #1

На странице должны быть такие блоки:

• Информационный блок. Информационные блоки должны быть разноцветными (В примере #1 эти блоки называются Income, Orders, Visits, User activity)

• Графики (В примере #1 эти блоки называются Orders)

• Сообщения (В примере #1 эти блоки называются Messages)

• Таблица (В примере #1 эти блоки называются User project list)

• ToDo list (В примере #1 эти блоки называются ToDo list)

• Таблица + Карта (В примере #1 эти блоки называются Transactions worldwide)

Примеры

1. http://webapplayers.com/inspinia_admin-v2.5/dashboard_2.html

2. http://themes.suggelab.com/dynamic/index.html

3. http://www.keenthemes.com/preview/metronic/theme/admin_1/index.html

По дизайну понравилось как на макете #3 (Инфо блоки разноцветные + яркие мелочи на странице).

II. Dashboard 2

Страница дашборда. Должна быть создана на основе дизайна скриншота dashboard.jpg, dashboard2.png, dashboard3.jpg. Структуру блоков и наполнение за основу берем вот эту страницу http://webapplayers.com/inspinia_admin-v2.5/dashboard_5.html. Все должно быть так как на этой странице + к этому вверху добавляем еще одну линиею блоков. Это должны быть 4 блока как на этой странице http://www.keenthemes.com/preview/metronic/theme/admin_1/dashboard_2.html (тоже первая линия). 

В результате мы получаем 2 однинаковых типа блоков но один тип цветной второй белый (белый в Dashboard2 а цветной Dashboard1)

На странице должны быть такие блоки:

• Певоя линия блоков. 4 блока как в примере. Верхний ряд

• Вторая линия блоков. как в примере. В примере это первая линия

• Третья линия блоков. Как в примере. График

• Четвертая линия блоков. Как в примере. Таблица

III. Graphs

Должен содержать несколько графиков из библиотек

Графики должны выглядить как на dashboard2.png а реализованны на основе вот этих либ:

• Flot (http://www.flotcharts.org/). На странице должно быть 5 графиков (пример: http://webapplayers.com/inspinia_admin-v2.5/graph_flot.html). Список всех графиков в отдельности из документации:

• Pie Charts

• Canvas text

• Categories

• Real-time updates

• Toggling Series

• Google charts (https://developers.google.com/chart/). На странице должно быть 4 графика (пример: http://www.keenthemes.com/preview/metronic/theme/admin_1/charts_google.html). Сприсок графиков в равах:

• Region GeoCharts

• Rotating a Pie Chart

• Top-X Charts

• Dual-Y charts

• Morris.js (http://morrisjs.github.io/morris.js/). На странице должно быть 4 графика (пример: http://themes.suggelab.com/dynamic/charts-morris.html). Должны быть все графики как на странице ниже http://morrisjs.github.io/morris.js/.

• Chart.js (http://www.chartjs.org/).  На странице должно быть 8 чатов, как в примере http://themes.suggelab.com/dynamic/charts-chartjs.html. Ссылка на оригенальную документацию http://www.chartjs.org/docs/.

• Мини чаты. На странице должно ноходится несколько блоков (минимум 3) с мини чатами (пример http://themes.suggelab.com/dynamic/charts-other.html). Для этого используем либы:

• Sparkline - тут есть конструктор

• Easy pie chart

IV. Widgets

Страница виджетов. По факту это маленькие плашечки из которых мы можем составлять страницы, такие как dashboard. Вот пример страницы http://webapplayers.com/inspinia_admin-v2.5/widgets.html. В скриншотах есть пример dashboard4. Хотелось бы на этой странице видить как цветный так и белые блоки. Также блоки могут быть с бордером и без

V. Forms

Страница форм. На этой странице должны бытьвсе элементы со страницы http://www.keenthemes.com/preview/metronic/theme/admin_1/form_controls.html. То есть все блоки(default form, horizontal form, Horizontal Form Height Sizing и т.д.) которые есть на этой странице должны быть. Также во всех блоках должны быть теже самые поля и тоже расположение что и в примере. 

Написовать формы нужно в блоках, которые могут быть 3-ех типов

• блок без бордеров

• блок с бордерами

• блок с цветным бордером (синий, дополнительный цвет темы)

Пример дизайна формы фожно найти в скриншотах(form.png).

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

VI. Pages

Группа страниц. Должна содержать в себе такие страницы:

• Blank page. Просто пустая страница. Пример:http://themes.suggelab.com/dynamic/blank.html

• Page 404. Пример. http://webapplayers.com/inspinia_admin-v2.5/404.html. 

• Page 500. Пример: http://webapplayers.com/inspinia_admin-v2.5/500.html. 

• Lock screen. Пример: http://themes.suggelab.com/dynamic/lock-screen.html. 

• Login. Пример: http://webapplayers.com/inspinia_admin-v2.5/login.html. 

• Forgot password. Пример: http://webapplayers.com/inspinia_admin-v2.5/forgot_password.html. 

• Registration. Пример: http://webapplayers.com/inspinia_admin-v2.5/register.html. Для похожей страници есть скриншот: regform

• User profile. Пример: http://themes.suggelab.com/dynamic/profile.html. Нужно сделать все те же элементы которые есть и в примере

• Search Result. Страница результатов поиска. Пример: http://webapplayers.com/inspinia_admin-v2.5/search_results.html. 

VII. UI

• Typography. Одна из самых важных страниц. В ней нужно расписать всю типографию. Пример: http://webapplayers.com/inspinia_admin-v2.5/typography.html

• Icons. Иконки берем отсюда https://design.google.com/icons/. Пример страницис иконками http://webapplayers.com/inspinia_admin-v2.5/icons.html

• Buttons. Все кнопки которые есть на этой странице, должны быть и в макете http://webapplayers.com/inspinia_admin-v2.5/buttons.html

• Tabs. Должны быть все типы табов которые есть на этой странице http://www.keenthemes.com/preview/metronic/theme/admin_1/ui_tabs_accordions_navs.html. В скриншотах табы есть на: dashboard, settings, tasks. Дизайн брать из скриншотов

• Notifications & Tooltips. Вот пример страници. Нужно сделать все так как на ней. http://themes.suggelab.com/dynamic/notifications.html. Также нужны попапы, они тоже есть на этой странице. Нужно просто нажать на кнопку “Try it”. В скриншотах есть примеры попапов: popup, form. В система должно быть 4 типа системных сообщений (на странице примера они есть):

• Error ???

• Warning. Есть прмер в dashboard.jpg

• Notice ???

• Info Есть прмер в search.png

• Badges, Labels, Progress. Все элементы на странице должны быть как в http://webapplayers.com/inspinia_admin-v2.5/badges_labels.html

• Modals. Сделать все модальные окна как на этой странице http://themes.suggelab.com/dynamic/modals.html. Для этого есть скриншоты: popup, form. Этот пункт немного перекликается с  Notifications & Tooltips.

VIII. Grid

Страница бутстраповской сетки. Одна страница с примерами бутстрап сетки. Нужно нарисовать такуюже. http://webapplayers.com/inspinia_admin-v2.5/grid_options.html. Только все должно быть в нашем дизайне

IX. Tables

Страцина таблиц. В этом пункте нужно нарисовать 2 страницы:

• Страница с различными видами таблиц. Пример: http://webapplayers.com/inspinia_admin-v2.5/table_basic.html

• Стрвница с большыми таблицами. Пример: http://webapplayers.com/inspinia_admin-v2.5/table_data_tables.html

X. Maps

Страница с картами. Сделать все как на странице http://www.keenthemes.com/preview/metronic/theme/admin_1/maps_google.html. Только в нашем дизайне.

XI. Gallery

Страница галлереи изображений. Сделать копию вот этой страници http://themes.suggelab.com/dynamic/gallery.html. Только в стиле скриншотов