Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

UI kit. Конструктор для больших проектов

2.781 Aufrufe

Veröffentlicht am

Презентация для форума Prosmotr. 26 сентбря 2015

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

UI kit. Конструктор для больших проектов

  1. 1. UI kit 1 Конструктор для больших проектов
  2. 2. Проектируем 
 и разрабатываем сервисы 2
  3. 3. 3
  4. 4. 4
  5. 5. 5
  6. 6. • Студенты • Кураторы • Преподаватели • Контент-менеджеры • Администраторы 6 Английский онлайн
 для компаний
  7. 7. ~400экранов в прототипе 7
  8. 8. — Дизайнер Nooooo! 8
  9. 9. 9
  10. 10. 10
  11. 11. Styleguide не тащит 11
  12. 12. UI kit 12
  13. 13. Styleguide 13 Статичный UI kit
  14. 14. Styleguide 14 Библиотека
  15. 15. Guidelines Принципы стилизации, создания компонентов, построения страниц. Правила работы сетки и лэйаута, типографики, анимации. 15
  16. 16. 16
  17. 17. 17
  18. 18. Процесс 18
  19. 19. При обычном каскадном процессе работать не будет. 
 Нужна синхронизация. 19
  20. 20. UX IA Проектирование Дизайн- UI kit Сложные макеты Верстка UI компоненты UX, IA → Проектирование → Визуальная концепция → Все макеты → Styleguid 20 → → → Было Стало и визуальная концепции
  21. 21. Было • Перерисовка — время • Слабое погружение в проект • Ошибки, плохой порядок • Дизайн как картина 21 Стало • Синхронизация UX, дизайнера, разработчика • Компонентный подход
  22. 22. Этапы создания 22
  23. 23. Структура и семантика Долой бардак • Именование по БЭМ • Сначала структура, потом реализация • Рабочая среда: 
 Табличка + репозиторий / SourceJS / Для простых проектов Frontify 23
  24. 24. 24
  25. 25. Валидация 25
  26. 26. Общие принципы 
 и элементы 26
  27. 27. 27
  28. 28. 28
  29. 29. 29
  30. 30. Если сразу использовать готовые шаблоны и библиотеки, вы не разберетесь в предмете 31
  31. 31. Дизайнер — это инженер. Инженер смотрит на вещи 
 как ребенок — Как это работает? 32
  32. 32. 33
  33. 33. 34
  34. 34. 35
  35. 35. 36
  36. 36. Стандартные компоненты 37
  37. 37. 38
  38. 38. 40
  39. 39. 41
  40. 40. Нестандартные компоненты 42
  41. 41. Навигация (сценарные и ролевые различия) Специфичные для проекта виджеты • магазин: мини-корзина или слайдер фильтра стоимости, • портал: виджет рекомендованных статей, • сервис заказа услуг: календарь с выбором даты и времени… 43
  42. 42. 44
  43. 43. 45
  44. 44. 46
  45. 45. 47
  46. 46. 48 Работает
  47. 47. 49
  48. 48. 50
  49. 49. 51
  50. 50. Гайдлайн. Здравый смысл Внедрение (Колосков, Ветров пишут) Переиспользование — быстрый старт 52
  51. 51. Зачем мне это всё? 53
  52. 52. Ты или используешь технологии в работе или конкурируешь с ними • Дизайн-шаблоны (Baikal UI kit) • Платформы (Squarespace, Киоск) • Дизайн-фреймворки (Bootstrap, Bem-components, UIkit, Pure и т.д.) • Дизайнеры-разработчики 54
  53. 53. Польза 55
  54. 54. Дизайнеру • Унификация и проработка — качество продукта • Меньше мелких задач и рутины • Больше времени на серьезные задачи (концепцию и UX) • Интеграция в смежные области — знания и опыт 56 →
  55. 55. Разработчику • Компонентный подход (работа с независимыми блоками) → унификация, структурность, переиспользование → качество продукта • Общая рабочая среда с дизайнером → экономия времени • Это интересно + останется время на фишки 57
  56. 56. Проекту • Сроки • Поддержка без дизайнера • Масштабирование • Меньше косяков, багов 58
  57. 57. Спасибо! Добавляйте в друзья, скину презу fb.com/by.talk 59

×