UI ПРАКТИКА // ЧАСТЬ 2 // ДАШБОРД

❤️ Поддержи канал:
https://www.donationalerts.com/r/ruslan_uxui

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

Макет: https://www.figma.com/file/CS6hWMLXO3hrcfV9qVlzQL/%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B-UI-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D0%B0.-%D0%A8%D0%B0%D1%80%D0%B8%D0%BF%D0%BE%D0%B2-%D0%A0%D1%83%D1%81%D0%BB%D0%B0%D0%BD-%D0%9B%D1%8D%D0%BD%D0%B4%D0%B8%D0%BD%D0%B3?node-id=246%3A1994

Столбчатая диаграмма: https://bit.ly/2VHZAl2
Классификация графиков: http://infographer.ru/klassifikaciya-grafikov-i-ix-naznachenie/
Как сделать график понятным: https://vc.ru/design/145809-5-sposobov-sdelat-grafik-ili-diagrammu-ponyatnymi-i-klientam-i-kollegam-i-sebe
Типы диаграмм в гугл таблицах, неплохая памятка: https://support.google.com/docs/answer/190718?hl=ru
Визуализация данных в material (eng): https://material.io/design/communication/data-visualization.html#types
Интерактивные демки графиков из библиотеки Highcharts (eng): https://www.highcharts.com/demo

00:00 - Вступление
00:23 - Суть задания
01:00 - Что дано в начале?
01:20 - Про требования
01:40 - Задаём вопросы
03:15 - Что после вопросов получится?
05:20 - Как подойти к цвету и типографике
06:11 - Про красный квадрат (модуль/множитель 8px)
06:26 - Будь проще к себе :)
07:12 - Правило 60/30/10
08:26 - Создаём простую палитру
10:45 - Начало работы
11:05 - Про навигацию
12:00 - Намечаем шапку
12:52 - Намечаем навигацию
13:18 - Делаем сетку
13:45 - Рисуем шапку
14:50 - Рисуем сайдбар - боковую панель с навигацией
15:20 - Правим поля у сетки
16:16 - Выделяем контраст между фоном и блоками
17:20 - Добавляем границы у компонентов
18:50 - Делаем проработку пунктов меню
26:30 - Заканчиваем с шапкой
30:00 - Показываем раздел, в котором сейчас юзер находится
30:33 - Заметка про мои решения и твое видение
32:00 - Начинаем рисовать первый блок
57:15 - Начинаем рисовать второй блок
01:15:22 - Начинаем рисовать третий блок
01:28:45 - Начинаем рисовать четвёртый блок
01:38:00 - Начинаем рисовать пятый блок
01:40:45 - Про то как можно подходить и обдумывать адаптив
01:44:08 - Начинаем адаптировать под мобилку

Музыка:
You & I by Soyb & Amine Maxwell
https://soundcloud.com/soybmusic
https://soundcloud.com/aminemaxwell
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
Free Download / Stream: http://bit.ly/l-you-and-i
Music promoted by Audio Library https://youtu.be/NS71HLgd9q4

Видео UI ПРАКТИКА // ЧАСТЬ 2 // ДАШБОРД канала Ruslan Sharipov