---
title: Design Resources for Front End Developers
localeTitle: 前端开发人员的设计资源
---
您是自由职业前端Web开发人员还是您想成为一名？也许你已经去过编码训练营或从在线前端开发课程毕业。接下来发生什么？

你得到了第一个客户。它可能只是一个需要个人网站的朋友。没关系。你不希望它看起来像业余。你希望它看起来不错。你希望它看起来很专业。

这是事情......

好的设计可能意味着看起来“自制”的网站和看起来很专业的网站之间的区别。如果你想在自由网页开发中赚钱，你就不能制作那些没有展示出良好设计原则的网站。大多数人（即潜在客户）都知道好的设计是什么样的，即使他们不能告诉你它为什么是好的设计。因此，理解基本设计概念是值得的。事实上，我甚至可以说，如果你将成为一名自由职业前端开发人员，那将是绝对必要的。

那你会从哪里开始？你去哪里学习设计？幸运的是，您不需要花钱来学习设计的基础知识。有很多资源是100％免费的。这里有10个资源（大多数是免费的）可以帮助您成为更好的自由职业前端开发人员，因为它们将帮助您成为更好的设计师。玩的开心！

## 1\. [Hackdesign.org](https://hackdesign.org)

让我们从基础开始。如果您想要制作具有吸引力，专业外观的前端作品，您绝对需要学习设计的基础知识。让我再说一次。您需要学习设计的基础知识。是的，这很重要。相信我。它将帮助您从所有不学习它的自由职业前端开发人员中脱颖而出，这意味着您将获得更多工作。更多工作意味着更多钱。明白了吗？这一点很重要。

从头到尾完成Hackdesign的课程，让它们全部融入。如果你想要，你可以注册每周课程发送到你的电子邮件地址。但是，您不需要这样做。您只需点击“查看所有课程”即可开始学习。这是相当深入的。这不是你几个小时后要做的事情。在这个资源上花一些时间。

## 2\. [为黑客设计](http://designforhackers.com)

大卫·卡德维（David Kadavy）写这本书的原因在这句话中得到了很好的总结：

> “我们可以创建带有动画的传单，明信片和PowerPoint演示文稿。我们可以制作博客，海报，甚至是咖啡杯......但我们中很少有人具备设计知识。”

同样的事情是创建网站。仅仅因为你可以创建一个有效的网站并不意味着你可以创建一个美观，设计精良的网站。这并不意味着您可以创建一个看起来很专业的网站。我相信你知道我的意思。好的设计看起来很专业期。所以，请阅读本书。 Kadavy还在designforhackers.com设有一个网站，您可以在其中注册一个名为“Design Pitfalls”的电子邮件课程。

## 3\. [UX崩溃课程：31个基础知识](http://thehipperelement.com/post/75476711614/ux-crash-course-31-fundamentals)

记住，你是一名自由职业者，这意味着你戴着很多帽子。如果你想成为一个需求量很大的优秀自由职业者，只要知道如何编码就不会削减它。

Joel Marsh的这个“速成课程”非常适合学习用户体验的基础知识。他说：“以下列表并不是你在UX中可以学到的一切。这是一个快速概述，所以你可以尽快从零到英雄。”你在等什么？开始吧！

## 4\. [用户体验崩溃课程：用户心理学](http://thehipperelement.com/post/87574750438/ux-crash-course-user-psychology)

Joel Marsh非常棒的UX Crash Course的第二部分：31个基础。他总结了为什么这很重要：

> “......你越了解用户的感受，想法和行动，你就越好的设计师。”

你想成为一名优秀的开发人员和伟大的设计师，对吧？如果你不这样做，你就不会读到这么远。那么，如果你对你的用户一无所知，你将如何成为一个伟大的，甚至是一个好的设计师？你必须考虑那些用户。它们很重要，因为您正在构建人们将要使用的网站。善待他们。了解用户心理学。

## 5\. [材料调色板](https://www.materialpalette.com/)

单独有吸引力的调色板可以大大提高设计外观的专业性。所以，如果你已经完成了我上面提到的基本设计内容，但仍不确定如何应用色彩理论，请立即将此网站加入书签并开始使用它。只需点击两种颜色，就像魔术一样，会出现漂亮的全彩色调色板。其他调色板的好地方是[**flatuicolors**](http://www.flatuicolors.com)和[**coolors**](http://www.coolors.co) 。

## 6\. [Adode Photoshop的基础知识](https://helpx.adobe.com/photoshop/tutorials.html)

您将需要至少掌握Photoshop的基础知识，以便处理照片并创建支持Web的图形。在Adobe网站上浏览这些免费的Adobe Photoshop CC教程。他们做得很好，涵盖了基础知识，足以让你开始！

## 7\. [Adobe Illustrator的基础知识](https://helpx.adobe.com/illustrator/tutorials.html)

您可能会想，既然您不是图形艺术家，则无需知道如何使用Adobe Illustrator。错误！当然，也许你不会从头开始创作自己的艺术品。但是，如果你想使用别人的矢量艺术呢？假设您在iStock上找到了想要使用的漂亮矢量图像。但是，颜色错误或您想删除部分图像。没问题。了解Illustrator的基础知识，立即完成工作！

## 8\. [应用于Web的印刷样式元素](http://webtypography.net)

排版可能看起来有点无聊，但它很重要。即使您没有将此处提供的所有信息都提交给记忆，只要知道在完美的设计世界中这些重要内容将有助于提高您的意识。一次读一点。我喜欢这个网站，因为信息以简单易消化的花絮呈现。例如，查看这一分钟读取[**字母间距**](http://webtypography.net/2.1.7)

## 9\. [史蒂夫克鲁格_不要让我思考_](http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758)

您正在构建真正的人们将要使用的网站。您不希望您的网站使生活复杂化并使人们感到沮丧。您希望您的网站让他们的生活更轻松。好吧，你需要了解一些关于网络可用性的知识，这是关于网络可用性的经典书籍。 [**A List Apart**](http://alistapart.com/)杂志的创始人Jeffrey Zeldman说，“如果你设计，编写，编程，拥有或管理网站，你必须阅读这本书。”说得好。读这本书。

## 10\. [Tanner Christensen _的创意挑战_](http://www.amazon.com/Creativity-Challenge-Experiment-Innovate-Inspire/dp/1440588333)

最后，如果你是一个戴着各种帽子的自由网络开发人员，你将不得不保持你的创造力，并且这意味着要锻炼它。这本书包含150个有趣的挑战，旨在让您从框中思考并从不同的角度看待事物。这本书的介绍总结得很好：“每当你感到卡住或没有灵感时，只需转到随机页面并按照说明完成你在那里找到的创意挑战。”