网页设计自动化设计过程

IT资讯 2018-08-10 114 次浏览 0 条评论

我们研究了网页设计自动化的兴起,以及它如何帮助确保您的工作流程在扩展时顺利运行。

坑停工人修理像赛车一样的电脑鼠标
曾几何时,“自动化”这个词在专业网页设计师的脑海中构成了负面的内涵。它让你想到了程序化的网页设计工具,它们为那些负担不起专业设计师服务的人们制作了便宜但编码很糟糕的网站。或者也许你自己提供的那种基本服务会提供一个现金不足的客户端,使用预先构建的WordPress主题或Drupal模板。

主要插图:Marcus Faint
但一切都在改变。网页设计的自动化不仅对食物链低端的客户很重要。它也越来越与高端人士相关。这是因为在一个最大的公司越来越受设计驱动的世界 - 想想Airbnb,Uber或Deliveroo--现在全球消费者需要的数字服务现在远远超过了单个设计师或小团队制作个性化定制页面的能力。

随着客户需要更大,更复杂的解决方案,组件库和设计系统的普及程度不断提高,将自动化元素融入设计流程并帮助其扩展。

如果你是一家主要为小型企业工作的小型网上商店,这可能不会影响你......但是,由于无法知道客户,职业生涯或整个社会的下一步发展方向,这仍然是我们都需要了解的趋势。因此,我们正在研究自动化列车的发展方向,以及什么时候可能是跳板的好时机。

模式库

Web设计中最简单的自动化形式是模式库。它也称为组件库或模式语言,它本质上是组成网站的可重用UI元素的集合。这些可以包括例如表单输入,按钮,跨度,导航栏,图像滑块,相关链接和社交媒体功能。

Lonely Planet的模式库定义了广泛的UI组件

模式库定义了所有这些元素的外观,以及它们的工作方式以及它们的编码方式。一些值得研究的好例子包括MailChimp,Lonely Planet和A List Apart。

但仅仅因为模式库很时髦并不意味着你应该使用它们。 “我会说,如果你只有一个网站和一套组件,那么模式库就可能过度,”布莱顿基础设施咨询公司Clearleft的联合创始人兼首席执行官安迪·巴德说。 “如果你只有两三个设计师,他们会很好地相互交谈,你把所有文件保存在一个结构合理的Sketch或Photoshop文件中,真的你不需要一个。”

如果您只有一个网站和一组组件,则模式库可能过度

Andy Budd,Clearleft
伦敦数字咨询公司Red Badger的数字产品设计师Cellyn Tan对此表示赞同。 “我们在不同程度上使用模式库和设计系统,”她说。 “但是,我们在系统化和维护用户体验方面的进展实际上取决于项目的优先事项。在一个相对较小的产品团队中,维护一套设计原则,一致的排版层次结构和配色方案,只需要组织良好的文件和对话即可管理。“

对于位于伯恩茅斯的数字营销机构Fireworx的首席执行官丹尼尔史密斯来说,实现这种平衡是为了满足客户的需求和期望。 “对于我们工作的一些公司来说,他们的平台上的一切都是定制的,因此自动化并没有发挥重要作用;这是一个非常量身定制的解决方案,“他说。 “我一直认为你作为一个代理商拥有一套工具,我们最重要的是为客户提供最好的结果。”

来自Airbnb的React Sketch.app弥合了设计师和工程师之间的差距

但是,对于某些项目,创建模式库可以提供强大的好处。无需一遍又一遍地从头开始创建元素,意味着您的操作规模越大,您可以为用户提供的一致性越高,您的设计工作重复性就越低,效率也就越高 - 理论上至少 - 您的操作变得。

高级开发人员蒂姆·贾拉姆(Tim Jarram)表示,自从转向采用更加自动化的方式后,这肯定是数字代理商Masters Allen所发现的。 “我们现在在所有网站上保持熟悉的代码库,我们可以快速有效地工作,”他说。 “因此,我们发现我们能够更聪明地工作,为我们的客户提供更清晰,更有效的设计和构建流程。”设计系统

尽管术语“模式库”通常与术语“设计系统”和“风格指南”互换使用,但它们之间存在重要差异。简而言之,样式指南定义了用户界面的基础知识,例如颜色和排版;模式库是其组件的存储系统;设计系统解释了这两个部分如何连接和协同工作。

然而,关于设计系统必须包含或做什么,没有硬性规定。 “设计系统有点像品牌,”位于伦敦的实时技术专家Pusher的设计主管克雷格弗罗斯特解释道。

“一个品牌不仅仅是一个标志:它是一个更广泛,更软化的东西。我认为设计系统也是一个广泛而软弱的东西。无论您是设计一个软件,一个API,一个界面,一个内容还是其他什么,设计系统都可以让您弄清楚如何传达您的想法,然后以一种易于教授的方式巩固它们。其他。”

加工

但是,创建设计系统只是实现Web设计自动化的一步。接下来是找到一个工具来帮助您管理,策划和集中这些系统。许多团队都创建了自己的团队,但您可能只想使用现成的解决方案,例如Fractal。

这是Clearleft为自己的内部目的而创建的工具,它已经作为免费和开源下载提供给社区。它不仅使您能够为您的Web项目构建组件库,而且还使您能够创建集成文档,以及全功能的API,以帮助开发人员将这些库集成到他们的工具和生产版本中。

Clearleft的Fractal使您能够为Web项目构建组件库

“分形是组织中每个人都去的真理的核心来源;它就是你所有文件的所在,“Budd解释道。 “这就是你要说的地方,例如:'这是一个按钮的样子,这里有五个按钮样式,这里是每个按钮的代码。这些是我们的三种布局。'这就是中央存储空间。对于那些拥有设计系统的人来说,你需要这样的东西。“

您如何将设计系统集成到工作流程中取决于项目的规模和您正在使用的技术。但有一件事是肯定的:现在这个领域有很多创新,当然需要四处寻找最佳工具。

例如,关于Airbnb设计团队发布的React Sketch应用程序有很多嗡嗡声:一个开源库,使您能够编写呈现给Sketch文档的React组件。专为大规模工作的团队设计,您可以在此博客文章中了解有关该应用程序的更多信息。

基于浏览器的设计工具Figma现在提供了一个Read API,并且Write API正在发布之中 

即将推出

同时,Frost很兴奋基于浏览器的设计工具Figma开辟了一个Read API,其中包含一个Write API。 “你可以使用Read API构建一些很酷的东西,”他说。 “例如,如果你在Figma中有一组图标,你可以在那里编辑它们,构建它们,然后在GitHub中控制它们的版本。然而,我们真正兴奋的是,使用即将推出的Write API,反过来做事情。“

在构建过程中,事情很容易改变,并且不会回到设计工具......因此,我们很高兴看到我们的真相来源不是设计工具的前景

Pigher,Craig Frost
鉴于这将使设计师能够在开发过程中随着事物的发展更新他们的设计系统,Frost的热情很容易理解。 “根据我的经验,虽然设计工具对于探索松散的想法和到达你需要去的地方非常有用,但他们并不擅长保持这种地位,”他说。

“事情很容易变得过时,在构建过程中发生变化,并且不会循环回到设计工具。因此,随着时间的推移,不断增长的是不一致和沟通的崩溃:最终导致你回顾几年的所有事情,并想知道出了什么问题。

“出于这个原因,我们对让我们的真相来源不是设计工具的前景感到激动。要将后者用于最好的方法 - 作为投入创意的白板 - 但要保留那些关于该系统的可靠想法以及它在代码中所体现的所有内容,在我们可以进行版本控制的地方,看看并继续发展。“DesignOps

组件库,设计系统和旨在将其实现到您的工作流程中的工具都在帮助Web设计人员自动化他们的流程。但是当你达到全球巨头的规模时,你需要更多的东西。前进,DesignOps。

“在英国的最近两三年里,在美国的最后五六年里,很多设计团队已经从相对较小和资源不足变成了相当庞大,强大的单位,”Budd说。 “五六年前,当Jeff Veen和Doug Bowman成为谷歌的第一批设计师时,没有必要担心如何有效和优化绩效。但是跳到现在这样的公司有数百甚至数千名设计师。所以你需要考虑如何利用这些技能。“

DesignOps Summit向设计领导者展示了如何创建与变化保持同步的设计能力

这种想法围绕着一项名为DesignOps的新运动,由Chase的执行设计管理冠军Kristin Skinner和设计教练Dave Malouf提出。嗯,有点新的,就是这样。

“DesignOps是我们之前所谓的设计管理的演变,”位于伦敦和巴斯的数字产品和服务设计咨询公司Super User Studio的创始人Stu Collett说。 “简而言之,它是将优化或设计思维带入运营层面。它促进了组织内部的跨职能协作,并建立了一个效率和节奏的框架。“

那么,您可能会说,DesignOps就像是类固醇的设计系统。或正如Collett所说:“就像UX渗透到服务设计中一样,设计系统开始整体渗透到设计操作中。”

与UX渗透到服务设计中的方式相同,设计系统开始整体渗透到设计操作中

Stu Collett,超级用户工作室
当Budd达到一定规模时,这开始发生了。 “如果你是一个六人团队,你就不需要DesignOps,”他解释道。 “如果你是一个40人,50人或60人的团队,那可能就是DesignOps开始变得重要的时候。如果你有一个大约250的设计团队,如果你想在你的DesignOps团队中做六,八或十个人,做一堆不同的任务,我不会感到惊讶。“

在实践中,他发现当一个组织有很多初级和中级设计师并且他们都被工作所淹没时,DesignOps经常发挥作用。 “这就是我们在旧金山的一些科技公司所见到的,”他解释道。 “无论在美国发生的事情总是发生在英国三,四,五年后。因此,虽然DesignOps对我们来说仍然是新的英国人,但它很快就会进入我们的海岸。“

Collett表示,与您工作或咨询的公司相关的时间在很大程度上取决于他们的雄心壮志。 “这与大型企业最相关,但我们也与从一开始就专注于这种思维的初创公司合作,”他说。 “这通常是由于积极的增长计划和他们未来的相对不确定性。使用这种严格性可以减少创建怪物(从持续维护的角度来看),并使他们能够随着成长而保持响应和扩展。对于规模较小的团队来说,这通常不那么重要;您可以创建一个简单的设计存储库而不是过度使用它。但如果你的计划是在第三年成为一个200人的公司,这是非常重要的。“

通过建立DesignOps团队,Airbnb已经能够简化,正如Adrian Cleave解释的那样

 

那么DesignOps究竟是什么呢?首先,就像它的同名表兄DevOps一样,它有一个技术元素。 “这部分是为了找出将设计师的设计尽快送到用户手中所需的工具和技术,”Budd说。 “实现这一目标的一种方法是通过这些设计系统,模式语言和代码库 - 我认为这是人们最初注意到的东西,并且是fetishise。但这不是DesignOps的全部内容。“

他解释说,DesignOps与DevOps的不同之处在于,它还专注于培养设计团队所需的人类“软技能”。 “这是为了确保你在外部推广你的设计团队,以便人们知道你在做什么 - 所以有一些通信元素。还有一个人力资源元素,因为你必须确保你有一个非常好的招聘流程。许多设计领导者不得不非常快地雇用大量人员,因此让一名DesignOps人员与人力资源部门合作以确保招聘和入职都很顺利非常重要。“他补充说,DesignOps还关注内部流程。 “它问:你什么时候开会,你有什么样的会议?您如何构建您的组织,设计师在哪里适合?设计师是设计团队的一员还是产品团队的一员?谁照顾他们的成长?谁评判他们的能力?你如何决定何时给这个人加薪?您如何管理组织中的其他人,并确保在创建新产品创意时,有一个良好,强大的系统来管理新产品?这显然也涉及到产品管理。“

通过这种方式说明,DesignOps可能听起来像时间,精力和金钱的主要承诺,你可能会发现有点压倒性的。事实上,你不会错。 “许多大型组织都在努力建立有效的DesignOps,”Collett承认道。 “让不同的职能部门或团队分享新的工作方式,确立其对当时BAU任务的重要性,并以适合核心业务的方式融合,这很难。”

0

【飞龙网.COM】不一样的IT资讯网,艺术,设计,插画,资源技巧分享!

发表评论