Алексей Стикс Art Director MEAT Agency «Дизайн система для мобильных и веб проектов»

1. ДИЗАЙН СИСТЕМА
ДЛЯ МОБИЛЬНЫХ И ВЕБ ПРОЕКТОВ
! "

2. КТО ЭТОТ ПАРЕНЬ?

3. Алексей Стикс
Art director & UI+UX Designer
@meat.agency
Mentor in UI+UX.Pro Couse
@meatstudies
be.net/stiques

4. ВАША ОЧЕРЕДЬ

5. Дизайнеры?

6. Работаете в ?

7. ДИЗАЙН СИСТЕМА
ДЛЯ МОБИЛЬНЫХ И ВЕБ ПРОЕКТОВ
! "

8. КАК Я ПРОЕКТИРУЮ
ДИЗАЙН СИСТЕМУ НА АУТСОРСЕ
! " # $ % ☺

9. КАК ЭТО СЛУЧИЛОСЬ?

10. ЧТО ТАКОЕ
ДИЗАЙН СИСТЕМА?

11. Дизайн-система
это целостный визуальный язык и его
техническое отражение в виде библиотеки
компонентов на едином репозитории, а также
сопутствующих дизайнерских шаблонов.
Paradigm. Mail.ru

12. Дизайн-система
это постоянно эволюционирующий свод
правил, который определяет порядок
создания продукта.
Alfa bank

13. ?????

14. Дизайн-система
Набор элементов, правил, и рекомендаций
которые помогают ускорить работу,
и сохранять визуальную целостность
в дизайне продукта

15. “Это не дизайн система,
а ui kit, потому что не прописаны
принципы и позиционирование”

16. 3 базовых составляющих дизайн системы
- Визуальный набор элементов
- Программный набор компонентов
- Документация

17. + правила анимации
+ правила коммуникации
+ правила формирования контента

18. ВИЗУАЛЬНЫЙ НАБОР ЭЛЕМЕНТОВ
+
ДОКУМЕНТАЦИЯ

19. С чего начать?

20. Составить пак базовых
популярных элементов?

21. Составить пак базовых
популярных элементов?
НЕТ

22. Так с чего же?

23. WIREFRAMES

24. THANX CAPTAIN

25. ЧТО НЕНАДО ДЕЛАТЬ

26. Пытаться выявлять и переиспользвать компоненты
на ранних этапах проектирования

27. Отделение работает
Пн-Сб 10:00-19:00
Вещи
Тип посылки
В дороге
Статус
Добавить название Копировать ссылку на страницу Документы для получения
Додатково
Вес посылки
25 кг
Лучше время для получения
11:00-12:00
134 грн
Общая стоимость
!
Оплатить
Харьков. Отделение №3242 улица Блюхера 16"
Куда
Киев. Отделение №242 улица Хрещатик 16"
Откуда
25 октября 18:00
Когда отправлено
Когда прибудет
25 квітня
!

28. !
Відділення працює
Пн-Сб 10:00-19:00
Прямує до одержувача
Речі
Тип відправлення Вага відправлення
25 кг
Приблизна дата отримання
25 квітня
Кращий час для отримання
11:00-12:00
134 грн
Вартість
Київ (Відділення №3)
!Харків (Відділення №3) вул. Трудова, 1в.
"
Документи для отримання посилання Копіювати лінк
Оплатить

29. Отделение работает
Пн-Сб 10:00-19:00
Вещи
Тип посылки
В дороге
Статус
Добавить название Копировать ссылку на страницу Документы для получения
Додатково
Вес посылки
25 кг
Лучше время для получения
11:00-12:00
134 грн
Общая стоимость
!
Оплатить
Харьков. Отделение №3242 улица Блюхера 16"
Куда
Киев. Отделение №242 улица Хрещатик 16"
Откуда
25 октября 18:00
Когда отправлено
Когда прибудет
25 квітня
Відділення працює
Пн-Сб 10:00-19:00
Прямує до одержувача
Речі
Тип відправлення Вага відправлення
25 кг
Приблизна дата отримання
25 квітня
Кращий час для отримання
11:00-12:00
134 грн
Вартість
Київ (Відділення №3)
"Харків (Відділення №3) вул. Трудова, 1в.
!
Документи для отримання посилання Копіювати лінк
Оплатить

30. Формировать библиотеку из символов
которые составили в скетче вайфреймов

31. 11:00-12:00
Кращий час для отримання
Пн-Сб 10:00-19:00
Відділення працює
25 квітня
Приблизна дата отримання
Івано-Франківськ
Куди
вул. Івана Курбасовіча 123/321 (Відділення №2)
Відділення
Київ (Відділення №2)
Звідки
Документи для отримання посилання Копіювати лінк
145 грн
Вартість
Речі
Тип
25 кг
Вага
Прямує до одержувача
Сплатити онлайн

32. 11:00-12:00
Кращий час для отримання
Пн-Сб 10:00-19:00
Відділення працює
25 квітня
Приблизна дата отримання
Івано-Франківськ
Куди
вул. Івана Курбасовіча 123/321 (Відділення №2)
Відділення
Київ (Відділення №2)
Звідки
Документи для отримання посилання Копіювати лінк
145 грн
Вартість
Речі
Тип
25 кг
Вага
Прямує до одержувача
Сплатити онлайн
Відділення працює
Пн-Сб 10:00-19:00
Прямує до одержувача
Речі
Тип відправлення Вага відправлення
25 кг
Приблизна дата отримання
25 квітня
Кращий час для отримання
11:00-12:00
134 грн
Вартість
Київ (Відділення №3)
!Харків (Відділення №3) вул. Трудова, 1в.
"
Документи для отримання посилання Копіювати лінк
Оплатить

33. Пытаться постоянно дубилровать
комбинированые символы

34. 25 квітня
Приблизна дата отримання
25 квітня
Дата получения
Пн-Сб 12:00-19:00
Отделение работает
25 квітня
Приблизна дата отримання
Документи для отримання посилання Копіювати лінк
Ул. Супер меня. 232(Отделение 23)
Отделеніе
Киев. Отделение №23
Откуда
Івано-франовск
Куда
25 кг
Вес
Вещи
Тип посылки
1400 грн
Цена
Сплатити онлайнПрямує до одержувача

35. 25 квітня
Приблизна дата отримання
25 квітня
Дата получения
Пн-Сб 12:00-19:00
Отделение работает
25 квітня
Приблизна дата отримання
Документи для отримання посилання Копіювати лінк
Ул. Супер меня. 232(Отделение 23)
Отделеніе
Киев. Отделение №23
Откуда
Івано-франовск
Куда
25 кг
Вес
Вещи
Тип посылки
1400 грн
Цена
Сплатити онлайнПрямує до одержувача

36. 10:00-15:00Пн-Пт 13:00-12:00Сб
Відділення працює
24 серпня
Приблизна дата доставки
Ивановский Станиславмиргород
Отримувач
Сплатити
140 грн
Вартість
Речі
Тип
2225 кг
Вага
Приховати деталі
Oчікує надходження від відправника
59 0003 1164 5811
Додати назву
Переадресація
Зміна адреcси доставки посилання
Зміна Отримувача
Зміна адреcси доставки посилання
Повернення
Посилання які коштують до 14 999 грн
Увiйдiть або зареєструйтесь щоб скористатися навединими послугами
Відділення № 23 Івано-Франківськ вул Кузьми 12
Куди
Київ
Звідки
Документи для отримання Копіювати лінк

37. 10:00-15:00Пн-Пт 13:00-12:00Сб
Відділення працює
24 серпня
Приблизна дата доставки
Ивановский Станиславмиргород
Отримувач
Сплатити
140 грн
Вартість
Речі
Тип
2225 кг
Вага
Приховати деталі
Oчікує надходження від відправника
59 0003 1164 5811
Додати назву
Переадресація
Зміна адреcси доставки посилання
Зміна Отримувача
Зміна адреcси доставки посилання
Повернення
Посилання які коштують до 14 999 грн
Увiйдiть або зареєструйтесь щоб скористатися навединими послугами
Відділення № 23 Івано-Франківськ вул Кузьми 12
Куди
Київ
Звідки
Документи для отримання Копіювати лінк
11:00-12:00
Кращий час для отримання
Пн-Сб 10:00-19:00
Відділення працює
25 квітня
Приблизна дата отримання
Івано-Франківськ
Куди
вул. Івана Курбасовіча 123/321 (Відділення №2)
Відділення
Київ (Відділення №2)
Звідки
Документи для отримання посилання Копіювати лінк
145 грн
Вартість
Речі
Тип
25 кг
Вага
Прямує до одержувача
Сплатити онлайн

38. Как же всетаки
формировать
библиотеку компонентов?

39. LESS IS BETTER
Ditter Rams

40. Анализируете часто повторяющиеся элементы,
и старайтесь переиспользовать их,
и добавлять новый если
визуально уже существующий смотрися хуже

41. Что по итогу?

42. Sketch library
- Шрифты
- Иконки
- Цвета
- Кнопки
- Поля
- ...

43. ICONS

44. TEXT

45. Категория/Подкатегория/(или _)Тип
Text/14/Bold Ico/head_tracking
Правила нейминга

46. COMBINE SYMBOLS

47. Библиотека не должна хранить в себе
комбинированые символы по всем разделам
ВАЖНО!

48. Tracking components Map components
Например

49. COLORS

50. Хранить в библиотеке, и добавлять
в документ color
ВАЖНО!

51. Что еще стоит знать?

52. Модульность — 4px

53. В отступах возвращаемся к правилу
Less is better

56. ВИДЕО 1

57. АДАПТИВЫ
! "

58. 2560
1920
1680
1440
1366
1024
768
600
375
320

59. НА БРЕЙКПОИНТАХ,
НЕ ВСЕ ИДАЛЬНО
! ! !

60. РЕШЕНИЕ
У ЭЛЕМЕНТОВ МОГУТ
БЫТЬ СВОИ БРЕЙКПОИРНТЫ

63. ВИДЕО 2

64. ДОКУМЕНТАЦИЯ
!

65. ГДЕ?

66. ГДЕ?
GOOGLE DOCS

67. ГДЕ?
GOOGLE DOCS

68. ГДЕ?
GOOGLE DOCS
DROPBOX PAPPER

69. ГДЕ?
GOOGLE DOCS
DROPBOX PAPPER

70. ГДЕ?
GOOGLE DOCS
DROPBOX PAPPER
SKETCH PDF

71. ГДЕ?
GOOGLE DOCS
DROPBOX PAPPER
SKETCH PDF

72. КАК?
ОТДЕЛЬНЫЙ ДОК ПО ЭЛЕМЕНТАМ БИБЛИОТЕКИ
ОТДЕЛЬНЫЙ ПО КАЖДОМУ РАЗДЕЛУ

73. ПО РАЗДЕЛАМ
- Выписываете все компоненты и их состояния
- Пишите на каких адаптивах как ведет себя
- Показываете кликабельные элементы

74. Приховати деталі
Oчікує надходження від відправника
59 0003 1164 5811
Додати назву Приховати деталі
Oчікує надходження від відправника
59 0003 1164 5811
Додати назву
Показати деталі
Oчікує надходження від відправника
59 3442 2345 5533 — Івано-франківськ
Додати назву Показати деталі
Oчікує надходження від відправника
59 3442 2345 5533 — Івано-франківськ
Додати назву
Приховати деталі
Oчікує надходження від відправника
Посилання від матусі — 23 3432 2343 343
Редагувати
С названием
Развернутая
Не залогинен
Развернутая
Свернутая
Если карточка свернута, город указывается в статусе
*Если пользователь залогинен, и есть название, город не показывается
Свернутая
Залогинен
Блок 1 — Состояния

75. Блок 1 — Адаптивы
2560-880
при этих размерах экрана блок остается такого же размера и не резинится ни в какую сторону
Приховати деталі
Oчікує надходження від відправника
59 0003 1164 5811
Додати назву
Приховати деталіДодати назву
Oчікує надходження від відправника
59 0003 1164 5811
Приховати деталіДодати назву
Oчікує надходження від відправника
59 0003 1164 5811
Приховати деталіДодати назву
Oчікує надходження від відправника
59 0003 1164 5811
879-528
- Внешние отступы пропадают, карточка становится от края до края
- Внутрение отступы от краев с 24 до 16
- Шрифт Статуса,”додати назву” и “показать детали” меняется с 14-го на 12-й кегель
- Иконка уменьшается.
- С размера экрана 879-528 сама карточка резинится по горизонтали
527-320
528
Приховати деталіДодати назву
Oчікує надходження від відправника
59 0003 1164 5811
879
527
320
- “Додати Назву” и “показать детали” перестраивается вниз.
- У названия пропадает иконка
- С размера экрана 527-320 сама карточка резинится по горизонтали

76. Приховати деталі
Oчікує надходження від відправника
59 0003 1164 5811
Додати назву
Обычное
Блок 1 — Ховеры
Приховати деталі
Oчікує надходження від відправника
59 0003 1164 5811
Додати назву
Ховер

77. СЛЕДИТЕ ЗА ОБНОВЛЕНИЯМИ
FB: ALEKSEY STIQUES

78. СПАСИБО
!!!