Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

319 views

Published on

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

Published in: Design
  • Be the first to comment

  • Be the first to like this

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

  1. 1. ДИЗАЙН СИСТЕМА ДЛЯ МОБИЛЬНЫХ И ВЕБ ПРОЕКТОВ ! "
  2. 2. КТО ЭТОТ ПАРЕНЬ?
  3. 3. Алексей Стикс Art director & UI+UX Designer @meat.agency Mentor in UI+UX.Pro Couse @meatstudies be.net/stiques
  4. 4. ВАША ОЧЕРЕДЬ
  5. 5. Дизайнеры?
  6. 6. Работаете в ?
  7. 7. ДИЗАЙН СИСТЕМА ДЛЯ МОБИЛЬНЫХ И ВЕБ ПРОЕКТОВ ! "
  8. 8. КАК Я ПРОЕКТИРУЮ ДИЗАЙН СИСТЕМУ НА АУТСОРСЕ ! " # $ % ☺
  9. 9. КАК ЭТО СЛУЧИЛОСЬ?
  10. 10. ЧТО ТАКОЕ ДИЗАЙН СИСТЕМА?
  11. 11. Дизайн-система  это целостный визуальный язык и его техническое отражение в виде библиотеки компонентов на едином репозитории, а также сопутствующих дизайнерских шаблонов. Paradigm. Mail.ru
  12. 12. Дизайн-система  это постоянно эволюционирующий свод правил, который определяет порядок создания продукта.  Alfa bank
  13. 13. ?????
  14. 14. Дизайн-система Набор элементов, правил, и рекомендаций которые помогают ускорить работу, и сохранять визуальную целостность в дизайне продукта
  15. 15. “Это не дизайн система, а ui kit, потому что не прописаны принципы и позиционирование”
  16. 16. 3 базовых составляющих дизайн системы - Визуальный набор элементов - Программный набор компонентов - Документация
  17. 17. + правила анимации + правила коммуникации + правила формирования контента
  18. 18. ВИЗУАЛЬНЫЙ НАБОР ЭЛЕМЕНТОВ + ДОКУМЕНТАЦИЯ
  19. 19. С чего начать?
  20. 20. Составить пак базовых популярных элементов?
  21. 21. Составить пак базовых популярных элементов? НЕТ
  22. 22. Так с чего же?
  23. 23. WIREFRAMES
  24. 24. THANX CAPTAIN
  25. 25. ЧТО НЕНАДО ДЕЛАТЬ
  26. 26. Пытаться выявлять и переиспользвать компоненты на ранних этапах проектирования
  27. 27. Отделение работает Пн-Сб 10:00-19:00 Вещи Тип посылки В дороге Статус Добавить название Копировать ссылку на страницу Документы для получения Додатково Вес посылки 25 кг Лучше время для получения 11:00-12:00 134 грн Общая стоимость ! Оплатить Харьков. Отделение №3242 улица Блюхера 16" Куда Киев. Отделение №242 улица Хрещатик 16" Откуда 25 октября 18:00 Когда отправлено Когда прибудет 25 квітня !
  28. 28. ! Відділення працює Пн-Сб 10:00-19:00 Прямує до одержувача Речі Тип відправлення Вага відправлення 25 кг Приблизна дата отримання 25 квітня Кращий час для отримання 11:00-12:00 134 грн Вартість Київ (Відділення №3) !Харків (Відділення №3) вул. Трудова, 1в. " Документи для отримання посилання Копіювати лінк Оплатить
  29. 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. 30. Формировать библиотеку из символов которые составили в скетче вайфреймов
  31. 31. 11:00-12:00 Кращий час для отримання Пн-Сб 10:00-19:00 Відділення працює 25 квітня Приблизна дата отримання Івано-Франківськ Куди вул. Івана Курбасовіча 123/321 (Відділення №2) Відділення Київ (Відділення №2) Звідки Документи для отримання посилання Копіювати лінк 145 грн Вартість Речі Тип 25 кг Вага Прямує до одержувача Сплатити онлайн
  32. 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. 33. Пытаться постоянно дубилровать комбинированые символы
  34. 34. 25 квітня Приблизна дата отримання 25 квітня Дата получения Пн-Сб 12:00-19:00 Отделение работает 25 квітня Приблизна дата отримання Документи для отримання посилання Копіювати лінк Ул. Супер меня. 232(Отделение 23) Отделеніе Киев. Отделение №23 Откуда Івано-франовск Куда 25 кг Вес Вещи Тип посылки 1400 грн Цена Сплатити онлайнПрямує до одержувача
  35. 35. 25 квітня Приблизна дата отримання 25 квітня Дата получения Пн-Сб 12:00-19:00 Отделение работает 25 квітня Приблизна дата отримання Документи для отримання посилання Копіювати лінк Ул. Супер меня. 232(Отделение 23) Отделеніе Киев. Отделение №23 Откуда Івано-франовск Куда 25 кг Вес Вещи Тип посылки 1400 грн Цена Сплатити онлайнПрямує до одержувача
  36. 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. 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. 38. Как же всетаки формировать библиотеку компонентов?
  39. 39. LESS IS BETTER Ditter Rams
  40. 40. Анализируете часто повторяющиеся элементы, и старайтесь переиспользовать их, и добавлять новый если визуально уже существующий смотрися хуже
  41. 41. Что по итогу?
  42. 42. Sketch library - Шрифты - Иконки - Цвета - Кнопки - Поля - ...
  43. 43. ICONS
  44. 44. TEXT
  45. 45. Категория/Подкатегория/(или _)Тип Text/14/Bold Ico/head_tracking Правила нейминга
  46. 46. COMBINE SYMBOLS
  47. 47. Библиотека не должна хранить в себе комбинированые символы по всем разделам ВАЖНО!
  48. 48. Tracking components Map components Например
  49. 49. COLORS
  50. 50. Хранить в библиотеке, и добавлять в документ color ВАЖНО!
  51. 51. Что еще стоит знать?
  52. 52. Модульность — 4px
  53. 53. В отступах возвращаемся к правилу Less is better
  54. 54. ВИДЕО 1
  55. 55. АДАПТИВЫ ! "
  56. 56. 2560 1920 1680 1440 1366 1024 768 600 375 320
  57. 57. НА БРЕЙКПОИНТАХ, НЕ ВСЕ ИДАЛЬНО ! ! !
  58. 58. РЕШЕНИЕ У ЭЛЕМЕНТОВ МОГУТ БЫТЬ СВОИ БРЕЙКПОИРНТЫ
  59. 59. ВИДЕО 2
  60. 60. ДОКУМЕНТАЦИЯ !
  61. 61. ГДЕ?
  62. 62. ГДЕ? GOOGLE DOCS
  63. 63. ГДЕ? GOOGLE DOCS
  64. 64. ГДЕ? GOOGLE DOCS DROPBOX PAPPER
  65. 65. ГДЕ? GOOGLE DOCS DROPBOX PAPPER
  66. 66. ГДЕ? GOOGLE DOCS DROPBOX PAPPER SKETCH PDF
  67. 67. ГДЕ? GOOGLE DOCS DROPBOX PAPPER SKETCH PDF
  68. 68. КАК? ОТДЕЛЬНЫЙ ДОК ПО ЭЛЕМЕНТАМ БИБЛИОТЕКИ ОТДЕЛЬНЫЙ ПО КАЖДОМУ РАЗДЕЛУ
  69. 69. ПО РАЗДЕЛАМ - Выписываете все компоненты и их состояния - Пишите на каких адаптивах как ведет себя - Показываете кликабельные элементы
  70. 70. Приховати деталі 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 — Состояния
  71. 71. Блок 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 сама карточка резинится по горизонтали
  72. 72. Приховати деталі Oчікує надходження від відправника 59 0003 1164 5811 Додати назву Обычное Блок 1 — Ховеры Приховати деталі Oчікує надходження від відправника 59 0003 1164 5811 Додати назву Ховер
  73. 73. СЛЕДИТЕ ЗА ОБНОВЛЕНИЯМИ FB: ALEKSEY STIQUES
  74. 74. СПАСИБО !!!

×