进阶篇29. 设计系统应用实例(1)—— 为什么需要设计系统

前面几节所讲述的技术实现都不难,就好像响应式设计最初的实现方法也仅仅只是浮动(float)、百分比单位和media query而已,但是,响应式的难点在于如何用新的技术去改善用户体验,以及如何调整传统的工作流程来更好的适应新的技术。所以Jen Simmons才会一脸鄙视而又无奈的对她的听众说:你们以为套一个Bootstrap然后把侧边栏移来移去就算是响应式设计么?

从组件化主题开发流程到原子设计理论再到设计系统这一系列的概念在整个中国都还属于新兴的东西———我指的并不是中国的Drupal圈,而是整个前端设计行业。它就好像2013年之前的响应式设计一样,虽然很好,但是没有几个人知道,知道的人也不见得都抱持着欢迎的态度,因为不是每个人每个团队都愿意跳出自己的舒适区———这一点后面的演讲嘉宾Peter也会提到。

因此,在我们学习这样的新概念时,除了要搞清楚它的技术实现和基本概念以外,更多的则应该去学习行业先锋们是如何调整他们的工作流程以适应新的技术、如何用新技术去处理细节问题并最终使他们的工作成果达到一个新的高度。如果没有人分享经验,这些内容的学习则远远会比学习基本概念和简单的技术实现要难。而一年两度的Drupalcon的举行就为我们提供了一个很好的机会。本书《听晴空讲Drupal8主题》在对结构和内容的把控上则一直紧跟每年的Drupalcon的内容。

第2.29-2.32节是对2018年在Nashvill举办的Drupalcon中关于在Drupal主题中实现设计系统的Session的翻译及要点分析,你可以在youtube上找到这个视频的原版,也可以在这里分小节观看。

本案例的甲方是美国纽约州最大的医院集团Northwell Health,乙方是Drupal圈子里鼎鼎大名的Phase2。Northwell Health拥有23家医院,550多个门诊部及66000多名员工, 包括15000多名护士和3900名医师,每年为超过200万人提供医疗健康服务。

以下将使用NW作为Northwell Health的简写,P2作为Phase2的简写,三名演讲者的名字分别是Joey,Karly,Peter。他们将在演讲中进行自我介绍。

Northwell的网站地址:https://www.northwell.edu/

Northwell的Design System:http://design.northwell.io/pattern-lab/public/patterns/06-styleguide-styleguide/06-styleguide-styleguide.html

Northwell的PatternLab:http://design.northwell.io/pattern-lab/public/?p=all

以下将使用NW作为Northwell Health的简写,P2作为Phase2的简写,三名演讲者的名字分别是Joey,Karly,Peter。他们将在演讲中进行自我介绍。

我对这个视频的翻译工作,是在我写完了前面所有内容之后才开始的。整个演讲中不可避免的提到了前面几节中讲到的很多东西,虽然有所重复,但是,大家正好可以看看其他人(特别是行业领头羊)的眼中设计系统、以及组件化开发流程是什么样子的。

design system in Drupal

design system in Drupal

Joey龮

龪龨Joey Gros龠龞P2龗龖龔龐龍龊龇龅龂龁P2龇齿齼齺齹齵齳龞齯龪齫齪齨龠齦齥齡齠…

I'm Joey gros , director of creative design at phase 2. phase 2 is a digital agency where we work or closely with our clients and we put experience at the forefront of what we do whether it's for the customer or the user or the patient.龷

鼡鼞龪鼝鼛鼘鼗鼕鼔鼐鼎鼌鼋鼉鼇鼆鼇P2鼌NW龞黼黸黷黵Pattern lab黰黬鼆黨黦龇黣黢黟黛龠黚黗龪齫龞黼黸黕黓黏黋黉Drupal8黄龇龁

so today we're super excited to walk through how phase 2 and northwell health built olivia style guide using pattern lab and how we ultimately integrated it with Drupal 8 platform.

鼌龪鼆黃龇黁麿麽麹NW龇 Karly Cunningham 鼌 Peter Sanzone龠麩鼔麦麤麣齫麟鼆黨麹龪齿齼龁

join today with Karly Cunningham and Peter sanzone from Nortwell龷and I'll let them introduce themselves .

Peter龮

麚龠鼋鼉麘龠龪龞Peter Sanzone龠龪龞NW龇麕麒龅龂龠龪龇麑麏麎麌Northwell.edu麈麄龠麃龞鼆黨鹿鹻Drupal龇鹹鹷鹴龪齫黁麎麌鹲麿NW鹰鹯鹮鹪龇鹧鹥麈鹡鹟龁

hi ,everyone, so yes I'm Peter sanzone. I'm the director of technology at northwell health my team oversees Nortwell龷dot e-d-u, the Drupal implementation there. and we're responsible for all the other public facing web properties that northwall does.

Karly龮

麚龠鼋鼉麘龠龪龨Karly Cunningham龠龪龞NW龇黵鹪鹘鹕鹓鹏龁

hi everyone I'm Karly Cunningham. I'm the manager to user experience also at northwell health.龷

design system in Drupal

鹍鹉麤鼋鼉鹅鹄鹀鸽鸼麿鼆黨鹿鹄鸻鸹龠龪麦鸵鼋鼉麟鼆黨鸱鸰龇齿齼龁

so to give everyone a quick idea about how the sessions going to go here's a quick overview.龷

鸫麦龠龪鸨鸤鼆鸤鹍鸡鸝鸛鼐鸝鸚鸗鸔鼌鸑鸐麽黰黬鼐黨黣黢黟黛龞鼆鸎鸊鸇龇鸆鸅龠黚黗龪齫龞黼黸齯鸁龪齫鷿鷽鷺鷹鷵鷳鷱鼐鷰鷭鷪龇龁齺鷧29鷤齠

first I'm gonna speak a little bit about why it was important for us to invest the time and energy into building a digital style guide and how we made the case for it to our senior leadership .

鷢鷠龠P2龇Joey鸨齿齼龪齫龞黼黸黰黬黃鼐黨龔龐鹹鹷龠黚黗鷟鷜鹉鷙鷘鷜鷖龁齺鷧30鷤齠

then joey from phase 2 is gonna talk a little bit about how we approached building a design system and what we accomplished .

鷏鷍龠Peter鸨鷊鷉鷈鷄麩龇鷀鶼齿齼鶸鶴鼔Drupal8鹹鹷黄鷄麩龪齫龇黣黢黟黛龁齺鷧31鷤齠

then Pete's gonna talk a little bit about the implementation aspects of actually implementing the digital style guide into Drupal 8.

鶯鷠龠龪齫鸨麟鼆黨鶬鶩龠鷢鷠鸵鼋鼉鼆黨鶧鶣鼌鶡鶝龇鶚鸨龁齺鷧32鷤齠

and lastly we'll highlight some results and learnings before opening up the floor to any questions and conversation.

design system in Drupal

麩鼔龠麦鹅Northwell heealth麟鼆黨齿齼龁NW龞鶙鶗鶕鶯鼋龇鶒鶏鸁鶎鷿鷽龠鶒鶏鶋鶈鶯鼋龇鶇鶄鶃鶈龁龪齫麿23鼉鶁鵿龠黚黗15000鵺鶁鵸鼌鵵鵴龁龪齫鵱鵰鶝鵯龪齫龇鶁鵸鵮鷿鵪鵨鵦鵥鵪鵨鵢鵡鵥鵝鵜鹲鷏鵙鵘鵗鵔鵯4300000鵺龁鵑龞龪齫鵎鵊鵇鵇龞鼆黨鵃鴿鵨鴻鵝鵘鵗龇鶚鴹鹴龪齫龇Feinstein鶁鴲鵿鼌Hofstra鼋鴲麿鶁鴲鴬鴪龇黋鷪龠鴦鴥鴢麽龇鶁鵝鴠鼉鹴龪齫鶃鶈龇龍龊鴟鴜鹉齪鸚鴘鴔鶄齫鵸黦龇鴓鴒鼌龗鴏龁

so a brief overview of northwell health with the largest healthcare provider and private employer in new york state. we have hospitals and nearly,000 physicians across our health system. we see abo patients annually every single year through doctors offices ,emergency rooms, many types of different kinds of treatment facilities. but were much more than just a large organization taking care of people when they're sick龠through our fine state in Feinstein Institute for medical research ,we're pioneering medical discoveries and leading on the front of medical research at the School of Medicine in partnership with Hofstra University. we're training the future generations of men professionals. and with our north wall ventures division, we're developing breakthroughs in and through innovation, which are changing people's lives .

design system in Drupal

Joey鼌Peter鴉鷠鸨鴈鴅龪齫龞黼黸鼔PatternLab黄龗黰黣黢黟黛龇龠鴁龪鳿麦鸤鼆鳾鹍鸡鸝龗黰鼆黨黣黢黟黛鹅鹻龪齫麽齯龞鼝鼛鸊鸇龇龁

while Joe and Pete are going to talk a little bit about how we did some how we created our digital style guide in pattern lab, I'm first gonna speak a little bit about why it was important for northwell health to invest in creating design standards.龷

design system in Drupal

龪齫鼔2016鵰黕龪齫鳹麑龇鵺鳸鳵鳱鳭鳪鳦鶒鶏鹹鹷鴘鷜鹉Northwell鶒鶏龠鼐鶴鵺鳸鳢鳟鳞齳鳚鳘鳖鳓鹉龁鼐鹀鴘鵺鶋鳒鳐鸗鳏鳎鳌鷍黏黨鳹麑鹟鳋鹹鹷龇鴘鳈龠龪齫麿鹉鴏龇logo黚黗鼆黏鳅鳁鲽龇鲹鲷鲳鲲——麃齫鹘麩鹉龪齫鼐黨鹟鳋龇鸚鶴鲭龁鷊龪齫龇龔龐麑麏鷧鼆鹀鲫黉鼐鳅鴏龇鹟鳋龔龐鲳鲲黉鼔龪齫鹲麿龇麈麄鼌APP黄鷄麩鼐鳅鲳鲲龠鵎鸊鴏鳟鲨麣齫龇鸗鸔鲦麿3黨鲣龁龪齫龇鲡齵鲞鲛鼔鹻龠鴏龇鹟鳋龔龐鲳鲲龞鹍鲘鹰鲕鹘龔龐龇龠龔龐鷿鷽鵎鲒麿鲐鲍鹟鳋鼔鹧鹥麈鳟鲌鲋鶸鸝鲇鶋龠鳚鵊黵鶧鸡鸝鲃鹰龇黵鹪鹘鹕鱿鵗麈麄鱼鱸鶣鲭鹉龁

in 2016 we changed her name ,from a Long Island Jewish health system to northwell health,so it rolls off the tongue a little bit better. this transformation came with a new logo and a really vibrant color palette which represents our brand's diversity. all of this came to our design teams for the first time three months before we needed to go live representing our brand across numerous different digital platforms and thousands of web pages. the real trouble we found was that these guidelines we received from the agency were created for print materials and it didn't take into account user experience or usability in the digital space.龷

design system in Drupal

鹲黚龪齫鷊鼆鱶鱴齳鱱鱯龪齫鹰鱮龇龞鼆黨齪鱫鱧龇鶣鱣龁龪齫鱡鱟鼔鼐鸝鱜龇鸗鸔鱛黕鴏龇龔龐鲳鲲鲌黵黉鹲麿龇麈麄鼌鱗鹰鳟龠齳鼆鱕鸨鱒鱏鱋鱇龠鱃麩鱁黼龔龐鰾鰺鵊鼆鰹鵨麈麄鰸黵鲭鰷鰶鰳鶣鱣龁鰯鼆黨鰫鱣龞龠龪齫鳹麑龇鵢鵡麈麄龞鳵鵊鳐龇龔龐麑麏鰪鹘麎麌龇龠鴁鰩鼐鷘麑麏鴉鸔龞鹧鰥鰣黬龇龠鰟鰜鲒麿鸡鸝鶡鶝鼌鹥鹹龁鹲黚龠鵱鼆黨麑麏鼔鲇鶋鼌鷄麩鹟鳋龔龐鲳鲲龇鸗鰚鰖麿鷍鵊鳐鹻黓麣麑麏龇黣黢鼌鲳鰔龁鼐鼎龠鰒鱼黚鰐黉鼆鷘鱗鹰龠麣齫齳龞鳵鼐鷘鹧鰥鰣黬龇麑麏鰏鷪龇龠鵱黨麑麏鹅鹟鳋龇诠鰊鰖鵊鼆鶴——鼐黁鵇鵇鲦龞鷊鼆鼋鰆龇鱗鹰黄鰃鱃麽龇鰟黨鰂鰁鴁鰀龁

so we knew we had a problem, while we were able to accomplish the unimaginable applying these guidelines across multiple sites and thousands of web pages in such a short time frame,what we ended up worth were inconsistent design patterns and major usability concerns. another big challenge we had is that many of our web sites are managed by separate design teams ,that have very little, if any connection at all, to one another. so each team interpreted the brand's guidelines differently in their digital application.here you can see a few of the numerous different northwell web sites, each with their own take on applying the brand.龷

2017鵰鱶鯼龇鸗鰚龠龪齫龇鴏鹟鳋黁齪鵰鯹龠龪齫鱱鱯龪齫鲌鲋鴘鳈鼐鵡鯶鯳龇鯱鹰龁鵑龞龠鯭鹰鱮鰯鼆黨鶣鱣龠鯫齳龞龪齫鸇黼黸齯鸁龪齫龇鷺鷹鷵鷳鷱龪齫龇鳿鯨龠黼黸麤麣齫鹏鯥鴏龇鹟鳋鹲鹰鱮龇鶣鱣龠黚黗鼐鷘鶣鱣黕鼔麽鵰鵊鱼鯡鯞龇鯛鯘龪齫龇鹟鳋鼔鹧鹥麈鳟龇鯖鳱龁

at the beginning of 2017 with our brand still being very young, we knew we needed to make a change, but how are we going to make the case to senior leadership that these issues were serious that they needed to be fixed and that they would inevitably hinder our digital growth in the years to come.龷

design system in Drupal

鹻龞龪齫鱶鱴黰黬鼆黨鲃鹰齺鯓鯏齠鯎鯌龁黼鷖鰒黚鯋麟鵯麈麄龇鱛鯇鯃鯂鱿鵗麈麄龇鸊鴏龔龐龠鰒鱼鼕鸨鹅麈麄龇鱛鯇鯎鯌鮿鮼鮻鮸龁鱛鯇鯎鯌鱼黚黕麈麄黄龇鵢鵡鱛鯇鮵鵃鵡鮲鮯鷜鼆黨鯎鯌鮯鮭龁鴁鲃鹰鯎鯌鳏鼌麃鮲鮪龠鵑龞鵊龞鱛鯇龇鯎鯌龠鴁龞黕鮩鷜麈麄鱗鹰龇鹲麿鯓鯏鮯鷜鼆黨鯎鯌龁

we started out by doing a building an interface inventory. and if you've ever been involved in a content migration of a website before, if you've ever been about the website redesign before, you're probably familiar with a Content inventory. content inventories take stock of all of a website's content and an interface inventory is very similar to that, only instead of sifting through categories content, you're taking stock and categorizing the individual bits and pieces that make up your website.龷

鼐鼎鰒鱼黚鰐黉鼆鷘鵊鳐龇鰂鰁龠黓黄麿鮵鮧鳏麿鮥鷏龁龪齫鮡鼐鷘鮠鮝鮛鳹黉鼆黃龠齳鮘鷜鹉鲃鹰鯎鯌龁鷄鮖鳟龪齫黁麿齪鸚黨鱗鹰黵麽鮓鮑麈麄鳟龇鵢鵡鮵鮧鼌鮥鷏龠鴁鼐鼎鵇鵇龞黓黄龇鼆黨鱗鹰鴁鰀龁鰒鱼黚鰐黉龠鼐鷘鰂鰁黄鮐鵊黉鼆黨鮌鰔龁黼鷖鰒鳿鴲鮈黼黸鳞龗黰鼆黨鲃鹰齺鯓鯏齠鯎鯌龠鰒鱼黚鮇鮃Brad Frost齺鳏齳龞鯋鹰鰟鷤齿齼鵯龇魾鰁龔龐鹏魽龇鶧鱃鵗齠龁

here you can see a couple of the different examples for buttons and links, that we could work collecting. there was a multiple pages of different buttons and links. this is only one shot of each of them,so you could see. that it was up there was no real pattern and you can google Brad Frost if you want to learn more about how to do an interface inventory .龷

design system in Drupal

魺龪齫魹鷜鹉龪齫龇鲃鹰齺鯓鯏齠鯎鯌鴉鷠龠龪齫鴜黉龇龞鼆黨鵔鵯80鱗龇鯎鯌龠鼐黓黄魸魷鹉鵢鵡鵊鳐龇鯓鯏龁麣齫鴉鸔鹲鮭麩鱃麽龇龔龐鰾鰺龇鵊鼆鰹鲭齳魴鴁鰸魲鹉龁鼐鼎龞鼐黨魰魬黄龇鳚鸚龇鼆鷘鰂鰁龁

so what we bound up with after completing that was a document that had more than 80 pages highlighting all of the different types of elements and components and along with their stark inconsistencies. here's a few more examples from our interface inventory.

design system in Drupal

魨鷢黕龪齫龇麈麄鲃鹰魦鸽鷜魣鸎鵎鹅魣鸎魠鶋鸽鮲龞鼆鸎鼝鼛魜鼇龇鷭鷪龠鵑龞鼐黨鷭鷪龇鷜鷖魛鹅龪齫鳾鼆魙龇鷭鷪魖鸽麿魔龁鲃鹰齺鯓鯏齠鯎鯌龇鮘鷜鹍龪齫鴉鷠龗黰鼆黨黋鹏龇NW龔龐鹹鹷魐鳾鹉鹿魍龁龪齫鳿鸇龗黰龇龞鼆黨鹹鹷龇魋黋魾鰁龔龐鹏魽龇鳵黣黢黟黛魊鳒龇龔龐龠鲃鹰鯎鯌魉魆魅龪齫黕麈麄魦鯥鹍魾鰁魄魂龇魀鬾龠鵎鰩鸵鹉龪齫鼆黨黋鹏龇鷭鷪黃鬽龁

while deconstructing and catalyzed cataloging our websites parts was certainly a tedious process, the results were extremely beneficial. the interface inventory laid the groundwork for building a sound design system for northwell. we knew that we wanted to create a systematic atomic style guide driven design and the interface inventory helped us deconstruct pages down to their atomic levels, so that we had a starting point.龷

黼鷖鰒鼌龪齫鼆鶴龠鬹鸇齯鸁鰒龇鯌鬶龗黰鼆黨龔龐鹹鹷鹅鹻鼐黨鯌鬶龞鬴鬰鸊鸇龇龠鯫鸝鰒龇鷧鼆魙齳鲌鲋龞麟麘鰒龇鲃鹰齺鯓鯏齠鯎鯌龁鹅鹻鮲鮪NW鼐鶴龇鼋鬮龇鮩鬫鱿鵗鯌鬶麽齯龠黕鲃鹰齺鯓鯏齠鯎鯌龇鰏鷪鷪鹍鷭鷪龇鷧鼆魙鬧黓鸊鸇——鼋鬮鮩鬫龇鱛龍鬦鬦鰖龞鳵齪鸚鵊鳐龇麑麏鴹鷜龇龠鵱鼆黨麑麏鰖鸨鼌麘鰟黨鷧鬢鲳鸁鶎鬡黋鷪龁龪齫黕鼐黨鲃鹰鯎鯌鮓鮑鸵龪齫龇鷺鷹鷵龠麤麣齫鰐黉鹟鳋齵鹰鱮鷍鼆鹹鮯鶣鱣龁

if you need to convince your organization that establishing a cohesive design system is essential, like we did, an interface inventory is your first step . this is especially true for really large organizations, like northwell health, that consists of many teams who work with multiple third-party agencies. this was one of the biggest ways we got the buy-in, that we needed from senior leadership, that we had them would get the way we had. the the buy-in from senior leadership and showed that we had a problem.龷

鲃鹰鯎鯌麿魅鹻鬞鷱龔龐龇鼆鰹鲭鵨鱼黚鹯麑麏鮓鮑黼黸齥鹏鮲鮪龇鵑龞鼔鬜鷤鳟鬙鬗麿鹲鵊鳐龇鵢鵡鲃鹰鯓鯏鵨鬕鬒鱃龔龐黄龇鬐鬎鵎鰩鬌鬈鹅鹻黵鹪鹘鹕龇鼆鰹鲭龇鬹鬇龁 the interface inventory promotes consistency, displaying a variety of similar but still different treatments next to each other, expose redundancy and underscored the need to create a consistent cohesive experience.龷

design system in Drupal

鷢鷠龪齫鹅鸚黨NW龇麈麄魠鶋鹉鰸黵鲭鬅龐龠鬅龐龇鬄鬂龞髾鵢髻·髶髵髱鶧鱃龇 10髰黵鹪鲃鹰鰸黵鲭鹓鹕髭魉 龁鼐鶴麟黷鴜龪齫鱼黚鱇鬈龪齫鼔UI鲃鹰鳟髫黉龇鶣鱣龠鵎鰩黵鼆鵡麘鹏鯥龇鲳鰔黕鼐鷘鶣鱣髧麩鸵鹲麿鰥鬰龇鶄髤龠鮿黼龪齫龇髡鮠鵨龂鹏鵗鵨黵鹪鰳鰳龠麤麣齫鱱鱯鼐鷘鶣鱣龞鬹鸇鴜黉鯥髞龇龁鼐鶴麟黁黷鴜龪齫鼕髚黕鼐鷘鶣鱣鸽鮲鷜髖鳟鬹鸇鯥髞龇鶣鱣鵨鵯鼆體鰁鬹鸇鯥髞龇鶣鱣黚黗鬹鸇鹓鵯鳱鸗鸔髒鼕鯥髞龇鶣鱣鹴鵎鰩鼐黓黄麿髐鵊鸚70%龇鶣鱣龞鱼黚鶝鵯龔龐鹹鹷麽鯥髞龇龁

we then performed usability audit across multiple northwell websites using the ten usability heuristics for user interface design. this helped us quantify and show our stakeholders in a meaningful way the UI issues that needed to be addressed in the design standards project. we were able to categorize them into near term, mid term and long term with about 70% of all of the issues being something that the design standards initiative would be able to address.龷

design system in Drupal

龪齫黁鹅龪齫龇鹲麿麈麄魠鶋鹉鱼鱸鶣鲭齺魜髋髇鲭齠髃髂龁鷪鹍鶒鶏骾鶒鷺骻龇鷺鷹鵗龠龪齫鱡鱟骾骸龪齫龇麈麄鹅鹲麿龇鶄鰖鱼黚魜髋髇鱸鶣龠鼐魸骶鯫鷘骵髋鶄鵴——鼐鼆鬽鹅鹻龪齫麽齯鵎鵊鵇鵇鲦龞骳鹍鯨骰龇鸇鬇龠黁骳鹍龪齫鹄骬鼔鱯骩鳟龇骦鬇龁骳齦龠麈麄龇魜髋髇鲭鹅鹻龪齫麽齯龞鼝鼛鸊鸇龇龁鶝鵯鼐黨髃髂龠龪齫骣麩鹉麈麄鼔骢鷘鸅骟鳾鵎鵊龞魜髋髇龇龠鼐黨鸅骟鳏鬹鸇鴜黉鴘鴔龁

we also performed an accessibility audit across all of our websites.as a leader in the health care space, we have a mandate not only illegally but morally to have a fully accessible website for visitors with disabilities, and that's not something we take lightly. so we identified numerous ways in which our site was not fully accessible and that was not okay.

design system in Drupal

麩鼔龠鲃鹰鯎鯌鵨鰸黵鲭鬅龐鼌魜髋髇鲭髃髂鰖麟麘鹉龠龪齫骝鹻齯鸁鹉鷺鷹鵎鲫黉鹉龪齫鬹鸇龇骚骘龠龪齫黕黵鼐骔骚骘黰黬鼆黨龔龐鬄鬂龁鹻龞龪齫鼌P2黋鷪麽黰黬鼐黨龔龐鹹鹷龠龗黰骐黦龇魜鱸鶣髋髇龇鮩鸎龠鵎鮘鷜鼆黨黦龇黣黢黟黛龁

so now armed with those three things, the interface inventory, the usability and accessibility audits. that effort led us to get the investment we needed to create the design standards initiative. this is where we partnered with phase 2, to standardize our design system, create flexible accessible components and implement a living style guide.龷

麿齪鸚验鲌鬡鹍龪齫鸁鶎龠龪齫鼔鵢黨鵊鳐龇鷺骻鰖麿龔龐鶈鶎龠鴁鰩鼐鷘鶈鶎鴉鸔鰖鲒麿鸡鸝鹥鹹——鼐黷鴜龗黰鼆黨龔龐鹹鹷鹅鹻鼆黨骋龪齫鼐鸝鼋龇鮩鬫麽齯龞鼝鼛鸊鸇龇龠骳鹍麃鱼黚魆魅龪齫龇鹲麿麑麏鰖黷黵鳐鶴龇龔龐鰾鰺龁龪齫鱛龍龇龔龐麑麏鼝鼛龇骉龠龪齫龇鬡鶈鬹鬇鳏鳌鷍鵱黨鷰骅龇鵊鳐鴁鵊骃鳈鬈龠龪齫鱡鱟鼕髚鳚鸱鳚麿驿龇鷪龔龐龠鴁麿鹉鼆鰆鱼黚鸊驻黷黵龇龔龐鮩鸎黷鴜龪齫鼕髚鷟黉鼐黨骅鬄龠鼐鶴鼆麽龠鰒齳鵊鬹鸇鼔鵱鹀麿鴏龇龔龐驺鶎龇鸗鰚鰖鳞鸊鴏龗驹鼆黨驸鰁龠黉鶯鷠龠鰒鸨骣麩鰒驶鷤驵鹉鸗鸔鯭鷤驵鹉驳驱龁鳐鶴龇鱯鹏鳏鱼黚鲌黵鼔鱶骣驭马龁魺鳚骉龇鮩鸎鰀鹓驩鼔鹉龠鰒鸇麟龇鵇鵇鲦龞鸛鼆鷘鸐驧鮡麣齫黵鵊鳐龇鲳鰔驦驥黃麽龁鼐鷘骉龇鮩鸎鼔黰黬鴉驡齳驞鸽鲐鲍鹉鰸黵鲭鼌鱼鱸鶣鲭龠龪齫黷黵麃齫麽黰黬黃鼆鳅鶝黵鹻鵱黨麑麏龇驛鳐鰾鰺——鼐黷鴜龪齫鱼黚鮡鸑鸐鳹黄鼔鴘鴔麩麿鮩鸎鳟龠鴁鵊龞鵱魺麿鴏龔龐驺鶎龇鸗鰚鰖鳞龗黰鼆黨鴏龇鮠鮝龁鼐鶴鼆黨鱼鸊黵龇鮩鸎驚龇驩鼔龠黷鴜龪齫鴜黚驗驕鮿龪齫鼋齪鸚龇驑鵜麑麏龠鴁鼐鷘鶄鰖鵊龞龔龐驎龠麤麣齫鴲鸨黼黸黷黵鮩鸎鳞鹍麣齫龇鹮鹪龠鳏齳龞龪齫龇鶁鵸齫龠驦鱃鼆黨鱗鹰龁麩鼔龠Joey鸨鷏鷍鴈鴅龪齫龞鶸鶴黰龔鼐黨龔龐鹹鹷龇龁

it was important for an organization of our size, who works with multiple vendors and has multiple different areas of design that are not connected, to have a design system that's documented for reference, so we're all speaking the same language. our internal design team is very very small and our business needs are constantly changing per project, so we needed a way to be able to design more quickly and efficiently and by having a shelf of reusable components we were able to do that. you don't need to reinvent the wheel every single time, there's a new design asked and in you don't have to do that, in the end you're gonna save time and money and the same applies to development when the smaller parts have already been built. there's left less effort to assemble them in just a different way. by establishing a common language built upon usability and accessibility best practices, we can now focus on improving what exists instead of having to create something new every single time there's a design asked. and having a library of reusable components has allowed us to train our larger marketing team, who are not designers, how to assemble pages, for their clients, which are doctors at our hospitals.now I'm gonna pass it up to Joey, he's gonna talk a little bit about how we actually built the design system.

本书共76小节:

评论 (写第一个评论)