每个开发者都该收藏的设计资源

很多项目没有设计师。这不是界面看起来像事故的理由。

这些工具覆盖了最容易做错的那几个决定:颜色、对比度、间距、图片和字号阶梯。

颜色

Realtime Colors

把配色放在真实版式里试,而不是看五个说明不了什么的色块。

realtimecolors.com

颜色

Coolors

快速生成并锁定配色,然后导出成 CSS 变量。

coolors.co

无障碍

WebAIM Contrast Checker

在这花两分钟,就能避开任何审查都通不过的灰底灰字。

webaim.org/resources/contrastchecker

排版

Type Scale

生成一套一致的标题阶梯,让你的字号不再随手乱定。

typescale.com

插画

unDraw

免费插画,下载前就能改成你的品牌色。

undraw.co

图片

Squoosh

在浏览器里压缩图片,接受损失之前先看清画质变化。

squoosh.app

背景

Haikei

几次点击就能生成 SVG 色块、波浪和渐变,用在首屏区域。

haikei.app

设计工具

Figma

就算你从不在里面画图,也需要它来打开真正的设计师发来的文件。

figma.com

只用两个的话,选对比度检查器和字号阶梯:它们解决的是用户真正会察觉的问题。

不只是挑工具,而是要把东西做出来?

Web 应用、API、基础设施与界面。常驻巴塞罗那的自由开发者,服务全球客户。

联系我


评论

Leave a Reply

Your email address will not be published. Required fields are marked *