2018年3月推出10款精美的新网页设计工具

Prettier

如果你对现在跟上新网络技术所需的学习量感到不知所措,那么好消息是有很多人在构建令人惊叹的工具来帮助你。这个月是我们最好的网页设计工具综述我们看看建设和维护的资源渐进式Web应用程序,静态网站,设计系统等。

01. 布局土地

Layout Land

来自Jen Simmons的顶级布局学费

Mozilla设计师和开发者倡导者Jen Simmons通过这个精彩的YouTube频道向您介绍了您可以通过网络布局进行的非常智能和有趣的事情。这些教程将为您在设计中使用Flexbox,Grid,CSS Shapes和Clip Path提供坚实的基础,为您提供有用的示例布局。

您将了解核心概念,例如何时使用Grid以及何时选择Flexbox,如何使Internet Explorer工作,以及如何编写不太可能在将来绊倒您的弹性CSS。想要体验什么,请查看西蒙斯的文章6网页布局神话被破坏了

02. BasicScroll

basicScroll

使用CSS变量根据滚动位置触发动画

CSS中缺少变量长期以来一直是开发人员的挫败感,但他们终于来了,你可以用它们来让你的生活更轻松,做一些很酷的事情! BasicScroll是一个聪明的工具,它利用CSS变量让你根据滚动位置触发动画。

除了CSS Custom Properties之外,basicScroll还需要RequestAnimationFrame工作,但除此之外,它是独立于框架的,并且具有简单的JavaScript API。您可以使用CSS完成所有动画,但如果您想要更多控制,则可以使用JavaScript。它适用于台式机和移动设备,并承诺“疯狂”的性能。

03. X射线

Xray

Atom代码编辑器的新变化

Atom粉丝可能希望密切关注这个项目,这是一个实验文本编辑器,基于Atom自推出以来所学到的知识。从本质上讲,它是一种在没有破坏Atom稳定性的情况下尝试一些激进想法的方法。该项目的目标是开发一个快速的代码编辑器,使用户可以轻松地协同编码,并通过强大的API将自己的功能添加到程序中。 Web兼容性也是一个优先事项,因此在Xray中进行编辑会感觉类似于在GitHub中进行编辑。

04. Compositor实验室

Lab

使用Compositor Lab构建和维护设计系统

既然许多组织正在使用设计系统作为一种连贯地开发产品的手段,那么有必要出现帮助您在此框架内工作的工具。 Compositor Lab就是这样一个工具:它用于构建和维护设计系统。

实验室使您无需编写代码即可创建生产就绪的React组件,加快工作流程,并使设计人员和开发人员之间更容易切换工作。您可以以各种格式导出作品,只需单击一下即可发布样式指南。

05. PWABuilder

PWABuilder

构建渐进式Web应用程序可能看起来令人生畏,但此工具使其变得简单

渐进式网络应用程序是网络对本机移动应用程序的回答 - 它们试图复制本机应用程序的体验,但是在网络上。这意味着它们离线优先,可靠,快速且易于用作本机应用程序。如果您想使用现有站点中的数据制作Progressive Web App,那么您很幸运:PWABuilder使这个过程变得更加容易。

输入URL,它将帮助您生成清单,构建服务工作者并发布完成的应用程序。如果您对Progressive Web Apps了解不多,本文是一个很好的入门书。

06. 漂亮

Prettier

使用Prettier轻松获取代码

保持整洁可能会让你感到额外负担,但是你未来的自我会感谢你编写格式良好的代码,这些代码更易于导航和维护 - 你的同事也是如此! Prettier是一个固定的代码格式化程序,它与许多编辑器集成,包括Atom和Sublime Text以及许多语言。

使用工具的优势在于它是自动化的,因此它对您来说更容易,并且它以标准化的方式完成,因此对于如何格式化事物的讨论空间较小。只需点击保存即可格式化您的代码。

07. 谷歌速度指数计算器

Speed index calculator

您的网站与竞争对手相比如何?

我们都知道移动网站速度较慢意味着转化次数较少,但此计算器可帮助您为其添加数字。输入您的网址,速度记分卡计算出您的网站与竞争对手的性能比较,然后收入影响计算器会告诉您慢速网站花费多少钱。

当您推动优先考虑网站的性能时,这些数字可能有助于减轻您的论点。此页面还提供了一些很好的指导,说明您有哪些选项可以加快速度。

08. 盖茨比

Gatsby

使用Gatsby构建易于部署的快速站点

Gatsby是React的静态站点生成器,可帮助您使用现代Web技术构建快速,安全的站点。静态文件的部署要简单得多,因此扩展站点要容易得多 - 而且速度也快得多。借助一个出色的插件生态系统,您可以使用GraphQL从CMS,API,数据库等中提取数据,从而将数据导入您的站点非常简单。 Gatsby网站是Progressive Web Apps,这意味着只加载关键数据,以便您的网站尽快在用户面前。

09. CSS Gradient

CSS Gradient

用CSS构建渐变的绝佳界面

为什么不必使用代码来构建CSS渐变?重新发明轮子是没有意义的;您也可以使用像这样的基于Web的工具来完成工作。 CSS Gradient是一个简单的应用程序,它提供了一个很好的界面来创建CSS渐变 - 从五种渐变样式中选择一种,并调整滑块直到你得到你需要的。代码显示在下方,准备好您复制并粘贴到您的网站。

10. 溢出

Overflow

通过用户流程有效地分享您的设计愿景

溢出是由Proto.io背后的人创建的,因为他们想要帮助设计批评过程。他们发现,提出设计作品的常用方法遗漏了一个重要因素;设计的故事和设计师做出的决定背后的理由。

他们发现,答案是用户流程:流程图显示用户如何在界面中导航。但到目前为止,还没有专门为创建用户流程而设计的工具,因此很难将它们整合到工作流程中。溢出旨在满足这种需求。它看起来令人兴奋,您现在可以注册早期访问。这篇博文更详细地解释用户流如何帮助您。

阅读更多:

话题



翻译字数超限