Upcoming SlideShare
-
Full NameComment goes here.Delete Reply Block
-
katekoxxHey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxxReply -
Rachelle Jumarang , Sales and Marketing Executive at Mindspirit Design Works LLC at Mind Spirit Designs LLCNice one!Reply
-
Kostiantyn Hladkov , Senior Experience Designer at SoftServe at SoftServeAwesome!Reply
How UI Framework improves design process - 2015 (Dribbble meetup)
- 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 - COLORS
- FOUNDATION - GRID
- 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
- COMPONENTS
- COMPONENTS
- COMPONENTS
- COMPONENTS
- 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
- PATTERNS
- PATTERNS
- PATTERNS
- UI FRAMEWORK + DESIGN PRINCIPLES GUIDELINES WRITING STYLE RESOURCES CODE SNIPPETS BRAND ASSETS
- MORE - DESIGN PRINCIPLES
- MORE - DESIGN PRINCIPLES
- MORE - DESIGN PRINCIPLES
- MORE - CODE SNIPPETS
- MORE - CODE SNIPPETS
- MORE - CODE SNIPPETS
- MORE - RESOURCES
- MORE - RESOURCES
- MORE - RESOURCES
- MORE - RESOURCES
- MORE - RESOURCES (
- MORE - WRITING STYLE
- MORE - WRITING STYLE
- MORE - WRITING STYLE
- MORE - GUIDELINES
- MORE - GUIDELINES
- MORE - BRAND
- 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 - SEARCH
- MORE - RELATED
- MORE - WHATS NEW
- RESOURCES INSTRUMENTS BOOKS SITES
- RESOURCES - HTTP://STYLEGUIDES.IO
- 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
- HTTPS://GOO.GL/2X9TLU
- THAT’S ALL FOLKS