用于设计网页项目的工具

我手头有一些出于兴趣正在进行的项目，主要都是关于网页应用的。有些只是概念阶段，有些已经存在但需要重新设计，才能达到专业水准。

所以我想分享一下我在开发过程中使用的一些工具，从页面布局设计到配色方案和图片选择。这样，当我开始编写代码时，设计和艺术方面的决策基本都已经确定了。

异想天开

• https://whimsical.com/

一款免费、直观的线框图绘制工具。

设计适用于移动设备或桌面设备的应用程序。创建一些网页线框图，将整个网站布局在一个巨大的页面上，并用箭头和线条连接各个部分。

添加样式的功能有限，但这没关系，因为这样可以把重点放在页面和页面组件的布局上，而不是颜色或字体上。

Wix

• https://wix.com

我之前用过 Wix 来制作网站设计原型，不过为了更好地控制网站，我最终还是会自己编写代码。

只需点击几下就能移动元素并添加图库，这真是太棒了。等准备好了，再自己编写代码。

Webflow

• https://webflow.com/
• 他们的博客上列出了2021 年 10 个最佳模板。

这是一个类似 Wix 的网页设计和托管工具，但它对样式控制更精细，例如可以为元素添加类。Wix 非常适合非开发人员，而 Webflow 则面向开发人员。

您还可以为您的网站添加内容管理系统层和电子商务功能。

我想用它来制作我的设计原型。

如果你想去除广告并使用自定义域名，则需要 Wix 和 Webflow 的高级版。

冷却器

• https://coolors.co/image-picker

我需要选择一套和谐的配色方案。

在 Coolors 上，我可以找到其他用户创建的调色板，或者自己创建一个。

可能还有很多类似的网站。

Unsplash

• https://unsplash.com

这是一个很棒的图库网站。您可以搜索高质量、高分辨率的图片。您可以从您的网站链接到他们CDN上的合适分辨率的图片，或者下载图片并添加到您的网站。

这些资源都是免费的。我们鼓励您注明作者，但这不是强制要求。

你会发现 dev.to 和其他博客的封面图片往往来自 Unsplash（其中一些笔记本电脑和屏幕上的代码图片被频繁使用，令人厌烦，但这就是生活）。

免费SVG

• https://freesvg.org/

它类似于 Unsplash，可以用来搜索 SVG 文件。SVG 可以任意缩放，而且文件通常很小，因此非常适合用于网站上的小图标或大型徽标。

图片均采用知识共享许可协议。

我用这个工具找到了一张龙的图片，并将其添加到我的一个项目中。

• https://github.com/MichaelCurrin/search-dragon

包起来

希望你学到了一些新工具，并从中获得灵感去设计一些东西。如果你知道其他类似的工具，也请告诉我。