加入小排老师深海圈学习已经三个月了。回想当初，我还只是个光有设计经验，没有代码能力的小白，如今不仅能独立做出像样的网站，更有幸在最近的深海圈黑客松中带领团队斩获一等奖！

这一切，离不开我们团队的三位小伙伴，以及支持我们、为我们投票、给予我们帮助的每一位朋友。在此，深深鞠躬感谢！🙇

这就是我们的获奖网站：https://www.rendaily.com/

赛后，很多朋友反馈说：“网站的整体设计感很强。” 这恰恰是我想和大家分享的核心——设计感并非玄学，而是有章可循的。

作为一名设计师，我将从色彩、字体、动画这三个关键维度，拆解打造一个“设计感”网站的实用思路，并完整展示我们是如何从0到1落地的。

你将收获什么？ 学会如何快速挑选 配色，让网站氛围更统一 掌握 字体选择技巧，营造网站的气质和品牌感 了解 动画组件库，让页面更生动有趣 通过黑客松获奖案例，学会 拼装落地页的实战方法 收藏一批 高质量设计资源网站，随时获取灵感 让我们开始吧～

1.色彩选择

为什么你的设计怎么看怎么奇怪？颜色没选对，一切白搭。

怎么在一点都不懂色彩的情况下，选出不错的配色？

第一步：确定主题色

不需要五花八门，先确定一个主色，然后再围绕它搭配辅助色。

第二步：用工具帮忙

不会配色？没关系，直接用配色网站一键解决。接下来我给大家分享一些好用的配色工具。

配色网站

对小白来说最快上手的就是配色网站了，已经帮你配好色卡，直接一键复制给AI就能用。分享一些我觉得比较有趣好用的配色网站，给大家做参考。

Khroma

亮点： AI学习你的色彩偏好。先选择50个你喜欢的颜色，它会利用小神经网络生成适合你的个性化配色。无需登录，设计感满满！使用Khroma也会让你自己对自己的色彩偏好产生了解，之后在定主题色的时候减少犹豫，产生配色肌肉记忆。

网址：https://www.khroma.co/

Coolors

亮点：按空格键快速生成色板，支持图片取色、对比度检测、实时预览，功能全面，适合快速落地。

它同时支持保存、分享与多种导出，并提供 iOS/Android App 及 Figma/Adobe 插件，适合设计与前端在同一平台协作选色。

网址：https://coolors.co/

Web Gradients

为了更好的阅读体验，来飞书看吧：

https://bcnsa8u7xqtm.feishu.cn/wiki/KKnqwGJFKiAULAkk1aPcH9EentE