how ui framework improves design process - 2015 (dribbble meetup)

65
HOW UI FRAMEWORK IMPROVES DESIGN PROCESS MARIAN MOTA

Upload: marian-mota

Post on 13-Apr-2017

11.028 views

Category:

Design


3 download

TRANSCRIPT

Page 1: How UI Framework improves design process - 2015  (Dribbble meetup)

HOW UI FRAMEWORK IMPROVES DESIGN PROCESS

MARIAN MOTA

Page 2: How UI Framework improves design process - 2015  (Dribbble meetup)

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

Page 3: How UI Framework improves design process - 2015  (Dribbble meetup)

STORY

Page 4: How UI Framework improves design process - 2015  (Dribbble meetup)

DIFFERENT LOCATIONS

Miscommunication, frustration, and blame between developers

and designers

STORY

Page 5: How UI Framework improves design process - 2015  (Dribbble meetup)

INCONSISTENT DESIGN

Button Button

Button Button

STORY

Page 6: How UI Framework improves design process - 2015  (Dribbble meetup)

DEADLINE

STORY

Page 7: How UI Framework improves design process - 2015  (Dribbble meetup)

BIG APPLICATION

STORY

Page 8: How UI Framework improves design process - 2015  (Dribbble meetup)

SOLUTION

Page 9: How UI Framework improves design process - 2015  (Dribbble meetup)

SOLUTION

I AM UI FRAMEWORK

Page 10: How UI Framework improves design process - 2015  (Dribbble meetup)

UI FRAMEWORK IS LIVING LIBRARY OF THE PATTERNS, VISUAL STANDARDS, AND INTERACTION BEHAVIORS

Page 11: How UI Framework improves design process - 2015  (Dribbble meetup)

BENEFITS

Page 12: How UI Framework improves design process - 2015  (Dribbble meetup)

ALLOWS RE-USE OF ASSETS IN THE APPLICATION

BENEFITS

Page 13: How UI Framework improves design process - 2015  (Dribbble meetup)

BENEFITS

RAPID PROTOTYPING

Page 14: How UI Framework improves design process - 2015  (Dribbble meetup)

Visual designer, interaction designer, Front-end dev, QA, Product owner, marketing, Tech support

BENEFITS

PATTERN LIBRARIES FOR EVERYONE

Page 15: How UI Framework improves design process - 2015  (Dribbble meetup)

BENEFITS

SUPPORTS THE GROWTH OF THE PRODUCT OVER TIME

Page 16: How UI Framework improves design process - 2015  (Dribbble meetup)

BENEFITS

ALLOWS YOU TO MOVE AWAY FROM REPETITIVE SPECIFICATION DOCUMENTATION BY JUST

REFERENCING YOUR PATTERNS

Page 17: How UI Framework improves design process - 2015  (Dribbble meetup)

BENEFITS

NEW EMPLOYEE ORIENTATION

Page 18: How UI Framework improves design process - 2015  (Dribbble meetup)

BENEFITS

CHEAPER DEVELOPMENT

Page 19: How UI Framework improves design process - 2015  (Dribbble meetup)

BENEFITS

ALLOWS THE DESIGNERS AND DEVELOPERS TO STANDARDIZE A

CONSISTENT SET OF ELEMENTS AND PATTERNS THROUGHOUT THE

APPLICATION

Page 20: How UI Framework improves design process - 2015  (Dribbble meetup)

UI FRAMEWORK ≠ UI KIT

Page 21: How UI Framework improves design process - 2015  (Dribbble meetup)

UI KITS FROM DRIBBBLE

Page 22: How UI Framework improves design process - 2015  (Dribbble meetup)

UI FRAMEWORK ABOUT

USERS, GOALS, TASKS, BRAND

Page 23: How UI Framework improves design process - 2015  (Dribbble meetup)

UI FRAMEWORK

PATTERNS

COMPONENTS

FOUNDATION

Page 24: How UI Framework improves design process - 2015  (Dribbble meetup)

Overview Grid Colors Typography Layout Animation Icons

FOUNDATION

Page 25: How UI Framework improves design process - 2015  (Dribbble meetup)

FOUNDATION - OVERVIEW

Page 27: How UI Framework improves design process - 2015  (Dribbble meetup)

FOUNDATION - GRID

Page 28: How UI Framework improves design process - 2015  (Dribbble meetup)

FOUNDATION - TYPOGRAPHY

Page 29: How UI Framework improves design process - 2015  (Dribbble meetup)

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

Page 34: How UI Framework improves design process - 2015  (Dribbble meetup)

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

Page 38: How UI Framework improves design process - 2015  (Dribbble meetup)

UI FRAMEWORK

+ DESIGN PRINCIPLES GUIDELINES WRITING STYLE RESOURCES CODE SNIPPETS BRAND ASSETS

Page 41: How UI Framework improves design process - 2015  (Dribbble meetup)

MORE - DESIGN PRINCIPLES

Page 48: How UI Framework improves design process - 2015  (Dribbble meetup)

MORE - RESOURCES

Page 52: How UI Framework improves design process - 2015  (Dribbble meetup)

MORE - WRITING STYLE

Page 54: How UI Framework improves design process - 2015  (Dribbble meetup)

MORE - GUIDELINES

Page 56: How UI Framework improves design process - 2015  (Dribbble meetup)

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

Page 57: How UI Framework improves design process - 2015  (Dribbble meetup)

MORE - SEARCH

Page 58: How UI Framework improves design process - 2015  (Dribbble meetup)

MORE - RELATED

Page 59: How UI Framework improves design process - 2015  (Dribbble meetup)

MORE - WHATS NEW

Page 60: How UI Framework improves design process - 2015  (Dribbble meetup)

RESOURCES

INSTRUMENTS BOOKS SITES

Page 61: How UI Framework improves design process - 2015  (Dribbble meetup)

RESOURCES - HTTP://STYLEGUIDES.IO

Page 62: How UI Framework improves design process - 2015  (Dribbble meetup)

RESOURCES - INSTRUMENTS

Page 63: How UI Framework improves design process - 2015  (Dribbble meetup)

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

Page 64: How UI Framework improves design process - 2015  (Dribbble meetup)

HTTPS://GOO.GL/2X9TLU

Page 65: How UI Framework improves design process - 2015  (Dribbble meetup)

THAT’S ALL FOLKS