'

How UI Framework Improves the Design Process

Понравилась презентация – покажи это...





Слайд 0

HOW UI FRAMEWORK IMPROVES DESIGN PROCESS MARIAN MOTA


Слайд 1

MARIAN MOTA Designer at SoftServe behance.net/Marrimo ua.linkedin.com/in/marianmota slideshare.net/motamarian dribbble.com/marrimo twitter.com/marrimo ua.linkedin.com/in/marianmota


Слайд 2

STORY


Слайд 3

STORY DIFFERENT LOCATIONS Miscommunication, frustration, and blame between developers and designers


Слайд 4

STORY Button Button Button Button INCONSISTENT DESIGN


Слайд 5

STORY DEADLINE


Слайд 6

STORY BIG APPLICATION


Слайд 7

SOLUTION


Слайд 8

SOLUTION I AM UI FRAMEWORK


Слайд 9

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


Слайд 10

BENEFITS


Слайд 11

BENEFITS ALLOWS RE-USE OF ASSETS IN THE APPLICATION


Слайд 12

BENEFITS RAPID PROTOTYPING


Слайд 13

BENEFITS PATTERN LIBRARIES FOR EVERYONE Visual designer, interaction designer, Front-end dev, QA, Product owner, marketing, Tech support


Слайд 14

BENEFITS SUPPORTS THE GROWTH OF THE PRODUCT OVER TIME


Слайд 15

BENEFITS ALLOWS YOU TO MOVE AWAY FROM REPETITIVE SPECIFICATION DOCUMENTATION BY JUST REFERENCING YOUR PATTERNS


Слайд 16

BENEFITS NEW EMPLOYEE ORIENTATION


Слайд 17

BENEFITS CHEAPER DEVELOPMENT


Слайд 18

BENEFITS ALLOWS THE DESIGNERS AND DEVELOPERS TO STANDARDIZE A CONSISTENT SET OF ELEMENTS AND PATTERNS THROUGHOUT THE APPLICATION


Слайд 19

UI FRAMEWORK ≠ UI KIT


Слайд 20

UI KITS FROM DRIBBBLE


Слайд 21

UI FRAMEWORK ABOUT USERS, GOALS, TASKS, BRAND


Слайд 22

UI FRAMEWORK PATTERNS COMPONENTS FOUNDATION


Слайд 23

FOUNDATION Overview Grid Colors Typography Layout Animation Icons


Слайд 24

FOUNDATION - OVERVIEW


Слайд 25

FOUNDATION - COLORS


Слайд 26

FOUNDATION - GRID


Слайд 27

FOUNDATION - TYPOGRAPHY


Слайд 28

COMPONENTS 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


Слайд 29

COMPONENTS


Слайд 30

COMPONENTS


Слайд 31

COMPONENTS


Слайд 32

COMPONENTS


Слайд 33

PATTERNS Search Log in Comments Inline Validation Wizards / Stepped How to arrange your components on the screen Forms Keyboard Shortcuts Default Values & Autocomplete Why should this pattern be used? What problem does this pattern address? When should this pattern be used?


Слайд 34

PATTERNS


Слайд 35

PATTERNS


Слайд 36

PATTERNS


Слайд 37

UI FRAMEWORK + DESIGN PRINCIPLES GUIDELINES WRITING STYLE RESOURCES CODE SNIPPETS BRAND ASSETS


Слайд 38

MORE - DESIGN PRINCIPLES


Слайд 39

MORE - DESIGN PRINCIPLES


Слайд 40

MORE - DESIGN PRINCIPLES


Слайд 41

MORE - CODE SNIPPETS


Слайд 42

MORE - CODE SNIPPETS


Слайд 43

MORE - CODE SNIPPETS


Слайд 44

MORE - RESOURCES


Слайд 45

MORE - RESOURCES


Слайд 46

MORE - RESOURCES


Слайд 47

MORE - RESOURCES


Слайд 48

MORE - RESOURCES (


Слайд 49

MORE - WRITING STYLE


Слайд 50

MORE - WRITING STYLE


Слайд 51

MORE - WRITING STYLE


Слайд 52

MORE - GUIDELINES


Слайд 53

MORE - GUIDELINES


Слайд 54

MORE - BRAND


Слайд 55

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


Слайд 56

MORE - SEARCH


Слайд 57

MORE - RELATED


Слайд 58

MORE - WHATS NEW


Слайд 59

RESOURCES INSTRUMENTS BOOKS SITES


Слайд 60

RESOURCES - HTTP://STYLEGUIDES.IO


Слайд 61

RESOURCES - INSTRUMENTS


Слайд 62

RESOURCES - BOOKS Designing Web Interfaces: Principles and Patterns for Rich Interactions Bill Scott, Theresa Neil Modular Web Design: Creating Reusable Components for User Experience Design and Documentation Nathan Curtis Designing Social Interfaces: Principles, Patterns, and Practices for Improving the User Experience Designing Interfaces Atomic Design The critical components of web ui style guides Jenifer Tidwell Christian Crumlish, Erin Malone Brad Frost UX Pin


Слайд 63

HTTPS://GOO.GL/2X9TLU


Слайд 64

THAT’S ALL FOLKS


Слайд 65


×

HTML:





Ссылка: