marian mota - Як ui framework покращує процес проектування
TRANSCRIPT
ЯК UI FRAMEWORKПОКРАЩУЄ ПРОЦЕСПРОЕКТУВАННЯ
MARIAN MOTA
Дизайнер в SoftServe
MARIAN MOTA
ua.linkedin.com/in/marianmota
dribbble.com/marrimo
slideshare.net/motamarian
behance.net/Marrimo
twitter.com/marrimo
ua.linkedin.com/in/marianmota
СЮЖЕТ
ПО РІЗНІ БЕРЕГИ
Тотальні непорозуміння м іж розробниками і
дизайнерами
СЮЖЕТ
НЕПОСЛІДОВНИЙДИЗАЙН
Button Button
Button Button
СЮЖЕТ
ДЕДЛАЙН
СЮЖЕТ
BIG APPLICATION
STORY
ВИРІШЕННЯ
ВИРІШЕННЯ
Я UI FRAMEWORK
UI FRAMEWORK ЖИВА БІБЛІОТЕКА ПАТТЕРНІВ,ВІЗУАЛЬНИХ СТАНДАРТІВ,ТА ІНТЕРАКТИВНИХ ЗВ’ЯЗКІВ
ПЕРЕВАГИ
ДОЗВОЛЯЄВИКОРИСТОВУВАТИ
БАГАТО РАЗІВ ASSETS В ДОДАТКУ
ПЕРЕВАГИ
ПЕРЕВАГИ
ШВИДКЕПРОТОТИПУВАННЯ
Віз уальний диз айнер, Інтерак тив ний диз айнер,Front - end роз робник , QA, Влас ник продук ту ,
Марк етинг , Тех н іч на п ідтримк а
ПЕРЕВАГИ
БІБЛ ІОТЕК И ПАТЕРНІВ Д Л Я ВСІХ
ПЕРЕВАГИ
П ІДТРИМУЄ ЗРОСТАННЯПРОДУКТУ ПРОТЯГОМ
ТРИВАЛОГО ЧАСУ
ПЕРЕВАГИ
ЗВІЛЬНЯЄ ВАС ВІД РУТИННОГО ДОКУМЕНТУВАННЯ. ВАМ НЕОБХІДНО ВСЬОГО ЛИШ
НАДАТИ РЕФЕРЕНСИ ВАШИХ ПАТЕРНІВ
ПЕРЕВАГИ
ОРІЄНТАЦІЯ НА НОВОГО СПІВРОБІТНИКА
ПЕРЕВАГИ
ДЕШЕВША РОЗРОБКА
ПЕРЕВАГИ
ДОЗВОЛЯЄ ДИЗАЙНЕРАМ ТА РОЗРОБНИКАМ СТАНДАРТИЗУВАТИ
ЕЛЕМЕНТИ ТА ПАТЕРНИ ПО ВСЬОМУ ДОДАТКУ
UI FRAMEWORK ≠ UI KIT
UI KITS FROM DRIBBBLE
ПРО UI FRAMEWORK
КОРИСТУВАЧІ, ЦІЛІ, ЗАВДАННЯ, БРЕНД
UI FRAMEWORK
ПАТЕРНИ
КОМПОНЕНТИ
ОСНОВА
Огляд
Сітка
Кольори
Шрифти
Layout
Анімація
Іконки
ОСНОВА
ОСНОВА - ОГЛЯД
ОСНОВА - ШРИФТИ
Avatars Badges Buttons Forms Labels Lozenges Messages Modal dialog Navigation Progress indicators Tables Tabs
КОМПОНЕНТИ
Hero Banner Preloader Page Title Pagination Picture Price Label Slider Social Buttons Tiles Tooltips Tags Unsocial Buttons
ПАТЕРНИ
Як розмістити вашікомпоненти на екрані
Яку проблему вирішує цей патерн?
Коли цей патерн буде використано?
Чому цей патерн необхідно використовувати?
Пошук
Log in
Коментарі
Внутрішні підказки
валідації / Покрокові
формиКлавіатурні скорочення
Стандартні значення &
Автозаповнення
UI FRAMEWORK
+ ДИЗАЙН ПРИНЦИПИГАЙДЛАЙНИТИПОГРАФІКАРЕСУРСИ ФРАГМЕНТИ КОДУBRAND ASSETS
БІЛЬШЕ - ТИПОГРАФІКА
БІЛЬШЕ - ГАЙДЛАЙНИ
ЩЕ КІЛЬКА РЕЧЕЙ
1.Додайте опцію поєднання споріднений патернів
2.Якщо у вас більше 20 патернів, впевніться що їх можливо знайти через пошук.
3.Додайте можливість показувати дату останніх оновлень, останніх змін, чи архівних патернів які було замінено новими.
4.Стилізуйте UI toolkit таким же чином, як ви стилізуватимете реальний додаток
БІЛЬШЕ - ПО ТЕМІ
БІЛЬШЕ - ЩО НОВОГО
РЕСУРСИ
ІНСТРУМЕНТИКНИГИ ВЕБСАЙТИ
РЕСУРСИ - ІНСТРУМЕНТИ
Modular Web Design: Creating Reusable Components for User Experience Design and Documentation Nathan Curtis
Designing Interfaces Jenifer Tidwell
Designing Web Interfaces: Principles and Patterns for Rich Interactions Bill Scott, Theresa Neil
Designing Social Interfaces: Principles, Patterns, and Practices for Improving the User Experience Christian Crumlish, Erin Malone
РЕСУРСИ - КНИГИ
Atomic Design Brad Frost
The critical components of web ui style guides UX Pin
ОТ І КАЗОЧЦІ КІНЕЦЬ