how ui framework improves design process - 2015 (dribbble meetup)
Post on 13-Apr-2017
11.029 Views
Preview:
TRANSCRIPT
HOW UI FRAMEWORK IMPROVES DESIGN PROCESS
MARIAN MOTA
Designer at 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
STORY
DIFFERENT LOCATIONS
Miscommunication, frustration, and blame between developers
and designers
STORY
INCONSISTENT DESIGN
Button Button
Button Button
STORY
DEADLINE
STORY
BIG APPLICATION
STORY
SOLUTION
SOLUTION
I AM UI FRAMEWORK
UI FRAMEWORK IS LIVING LIBRARY OF THE PATTERNS, VISUAL STANDARDS, AND INTERACTION BEHAVIORS
BENEFITS
ALLOWS RE-USE OF ASSETS IN THE APPLICATION
BENEFITS
BENEFITS
RAPID PROTOTYPING
Visual designer, interaction designer, Front-end dev, QA, Product owner, marketing, Tech support
BENEFITS
PATTERN LIBRARIES FOR EVERYONE
BENEFITS
SUPPORTS THE GROWTH OF THE PRODUCT OVER TIME
BENEFITS
ALLOWS YOU TO MOVE AWAY FROM REPETITIVE SPECIFICATION DOCUMENTATION BY JUST
REFERENCING YOUR PATTERNS
BENEFITS
NEW EMPLOYEE ORIENTATION
BENEFITS
CHEAPER DEVELOPMENT
BENEFITS
ALLOWS THE DESIGNERS AND DEVELOPERS TO STANDARDIZE A
CONSISTENT SET OF ELEMENTS AND PATTERNS THROUGHOUT THE
APPLICATION
UI FRAMEWORK ≠ UI KIT
UI KITS FROM DRIBBBLE
UI FRAMEWORK ABOUT
USERS, GOALS, TASKS, BRAND
UI FRAMEWORK
PATTERNS
COMPONENTS
FOUNDATION
Overview Grid Colors Typography Layout Animation Icons
FOUNDATION
FOUNDATION - OVERVIEW
FOUNDATION - TYPOGRAPHY
Avatars Badges Buttons Forms Labels Lozenges Messages Modal dialog Navigation Progress indicators Tables Tabs
COMPONENTS
Hero Banner Preloader Page Title Pagination Picture Price Label Slider Social Buttons Tiles Tooltips Tags Unsocial Buttons
PATTERNS
How to arrange your components on the screen
What problem does this pattern address?
When should this pattern be used?
Why should this pattern be used?
Search Log in Comments Inline Validation Wizards / Stepped
Forms Keyboard Shortcuts Default Values & Autocomplete
UI FRAMEWORK
+ DESIGN PRINCIPLES GUIDELINES WRITING STYLE RESOURCES CODE SNIPPETS BRAND ASSETS
MORE - WRITING STYLE
MORE - GUIDELINES
FEW MORE THINGS
1.Add the option to link related patterns
2.If you have more than 20 patterns, make sure they are searchable.
3.Add the ability to show dates of recent updates, recent changes, or archived patterns that have been replaced with new ones.
4.Style the UI toolkit the same way that you would style the real application
MORE - RELATED
MORE - WHATS NEW
RESOURCES
INSTRUMENTS BOOKS SITES
RESOURCES - INSTRUMENTS
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
RESOURCES - BOOKS
Atomic Design Brad Frost
The critical components of web ui style guides UX Pin
THAT’S ALL FOLKS
top related