刚刚谈好了一个新的客户（yay！），你正在为他们建立一个网站，但是一旦你的框架完成后，你从哪里开始？
思考新鲜原创和前卫的设计可能是艰难的。创造一个全新的东西是一个非常大的挑战 – 特别是如果你没有正规系统的学习过设计。
使用主题模板可以帮助我们省掉很多力气，但是如果你是想把建站作为职业的话，模板不能制满足我们需求的，我们不可能到处找模板或者学习新的主题还帮别人建站，我们也需要二次创作，如果您从头开始构建，则需要使用一系列设计元素（包括布局，颜色，排版等），所有这些工作都需要与您的客户的品牌标识和沟通目标相一致，并需要创造性地翻译为他们确定的目标受众。
为了帮助这个过程，我从网上收集了我最喜欢和常用的设计资源集合。
颜色
为web构建选择一个强大好用的调色板是一种艺术。 无论你是想使用互补或对比的配色方案，或者玩弄中性/单色调色板，突出一种高亮色，请查看下面的资源以获得一些灵感。
可能最简单和最有趣的调色板生成器是Coolors（桌面免费，应用程序付费）。 只需按空格键，您就可以浏览多个调色板，然后通过一系列调整控件来细化颜色选择。 完成后，您可以导出自己的调色板（如果您正在创建客户端心情板，真的很漂亮），或将其保存到您的个人资料中以备将来使用。 酷派还允许您浏览一些已经创建的用户调色板，也有漂亮的附件，以与您的Adobe应用程序集成。
我用它做的最多的就是参考优秀的色彩搭配，调节出我最喜欢的颜色。
Material Palette允许您选择两种主要颜色，并为您自动生成一个非常广泛的调色板。 调色板可以调整以适应您的设计风格，并且具有非常漂亮的预览功能，如何使用您的网站中的颜色呢？一旦您对颜色选择感到满意，您就可以将调色板导出为一系列格式，包括css文件，单击即可复制颜色代码，您可以将其快速复制到样式表中。
当你对某两个颜色感兴趣时，可以使用这个工具，找到两个颜色之间非常好看的颜色
在网站设计中，配色是一个十分关键又十分头疼的问题，很多情况下，我们会参照目标网站或者著名网站的色彩风格来选择配色，Web Colour Data这款工具就是为此而生，它可以让你快速找出当前网页所用的颜色。
Colorhexa:颜色转换工具是一个免费的颜色工具，提供与任何颜色相关的信息，只需在搜索框输入任意颜色值，就能返回一个详细的描述，并会自动将其转换成对应的十六进制、二进制等。
Colorhexa的用法很简单只需在搜索框输入任意颜色值（查看完整列表），ColorHexa就能给你返回一个详细的描述，并会自动将其转换成对应的十六进制、二进制、RGB、CMYK、HSL、HSV、 CIE-Lab、Hunter-Lab、CIE-Luv、CIE-LCH、XYZ、xyY值。
ColorHexa也能自动生成与颜色对应的配色方案，比如互补/对比色（complementary）、分散的互补色（split complementary）、相似色（analogous）、三色（triadic）、四色（tetradic）、单色（monochromatic）等。这样你就能知道什么样的颜色才是最合适的选择。它也能将多种颜色混合，或在它们之间创建一个渐变。
只需要简单地搜索某种颜色，你就能得到一个百科全书式的反馈页面。从相近的颜色、配色方案，到自动生成的HTML元素和相关的阴影等都有显示。
非常强大的用于查看一系列互补的颜色并排在一起（所谓互补色是指在色环上相对的两个颜色，常见的有橙色对蓝色、黄色对紫色以及红色对绿色。无论在绘画还是摄影，只要在其中加入中互补色对比就会产生非常吸睛的画面效果。如果你是一个电影、美剧爱好者，也会发现其中大量运用了黄、蓝色调对比），平板UI颜色选择器显示一个选择鲜艳的颜色。 由于用户只能查看颜色，无法编辑自己定制的调色板。需要一点想象力。 有了这个Flat UI颜色选择器可能适合那些不想太多分心太多选项或小调整和自定义的人。 目前，Flat UI颜色选择器不提供简单的导出方式，因此需要记录颜色代码
使用的理由很简单，当然是找到合适的互补色了，例如CTA按钮和背景的颜色
字体
随着大量随时可用的字体可供选择，以数千种不同的组合（无衬线/无衬线，衬线/衬线，衬线/无衬线），选择一个网站的字体组真的是一门科学。 排版对网站的整体美感有如此强烈的影响，并且具有巨大的力量来表达品牌或企业的语调。 有了这个，看看下面的类型资源和工具。
网页设计中使用什么字体是比较麻烦的事情，特别是英文站点，每次更换字体然后刷新网页总是很麻烦的事情，所以如果能够在线实时通过几次点击就能更换网站的字体，并且立刻能看到效果是非常棒的一件事情，而TypeWonder就是这样的一个免费的 Web 应用，可以实时在线测试你网站在不同字体下的样子。
TypeWonder 使用非常简单，只需要输入你要测试网站的地址，然后选择你要测试的字体（目前仅支持 Google Fonts），然后测试站点就能展示出在新字体下的样子。
几个月前，Google发布了其Google字体目录的更新版本。 使用其全新的UI，选择和检查字体比以往任何时候都更容易，看到用户能够搜索大量的免费使用的字体，并通过无数的调整控件精选其选择。 检查单个字体将显示一系列详细信息，包括有关字体设计师或设计公司，可用字符和样式的信息，以及一个方便的交互式字体配对指南和将字体嵌入到您的样式表。
Typespiration提供了一些精美的设计与完美配对的字体，您可以浏览。 一个交叉资源，Typespiration还包括一个相关的调色板（用十六进制代码）为每个设计，这真的帮助你可视化你的设计和类型可能是什么样子。 Typespiration的一个伟大的功能是快速使用。 这不仅会拉出嵌入每个字体到您的网站的头部所需的确切代码，而且它还包括CSS，你可以简单地复制和粘贴到您的样式表。 这里，H1和p标签都将被定义 – 包括颜色 – 从get-go，以及您的或链接标签的正常和活动状态样式。
最令人难以置信的排版资源之一是Typecast。 通过Typecast，用户可以通过选择字体集合并对其进行测试来创建其设计的原型。 Typecast包括大量用于测试各种类型样式的选项，包括视觉和与HTML元素结合使用，包括大小，重量，装饰效果和颜色，仅举几例。 一旦完成，原型可以保存，共享，编译成样式指南（如果您向客户端呈现情绪板，那么很好），或者代码可以简单地复制到样式表中。 Typecast是免费的，但用户需要注册才能使用。
图标
图标已经成为一个非常受欢迎的视觉元素添加到Web构建。除了吸引观众的注意，图标是伟大的传达核心品牌概念在一个快速，有效和引人注目的方式。图标可以使用Adobe Illustrator等设计应用程序从头开始创建，但这真的很耗时。通过将相关代码嵌入到样式表中，将图标用作字体组是确保站点速度不受图像的数据库调用影响的一种很好的方法。在这方面，字形搜索在流行的图标数据库（包括Font Awesome，Octicons，Glyphicons，IcoMoon，Foundation，Ionicons和Material Icons）中整理成一个可搜索的库。对于那些想要更多的活力的矢量风格的图标，可以下载为.png，.svg和其他可行的格式，看看下面的资源。
Flat Icon提供了广泛的免费和高级图标集，可以在整个web构建中使用。 图标可以作为单独的元素或包中搜索，后者证明更有用于提供统一的外观和感觉。 根据许可协议，免费图标需要使用版权，而高级图标（通过每月订阅支付）不需要版权。
Noun Project由各种艺术家创建和提交的成千上万的图标。 通过不同设计风格的装载，用户可以将图标下载为.png或.svg格式。
阿里妈妈MUX倾力打造的矢量图标管理、交流平台。
设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。
图形资源
使用各种图形资源可以真正帮助创建一个具有真正独特的外观和感觉的网站，但是从头开始创建这些网站可能需要几个小时。 有许多网站提供各种格式的免费和高级（付费）图形资产，包括字体，图标，.psd文件，向量，背景，模拟，纹理，模式等更广泛的收藏。 如：
DBF (Dribble & Behance Freebies)
设计灵感
查看美丽设计的集合真的可以帮助获得创意，以下网站是设计师，开发人员和集体展示原型或完成的网络构建和/或其他平面设计项目的伟大空间。参考以下网站的灵感，并在适用情况下，考虑根据客户的业务或服务类别优化搜索，以找出常见的视觉传播趋势和模式。
在线课程教学视频
最后，如果你想学习一些新的技能，添加到你的网页设计和开发剧目，请查看以下网站的教程或课程。 一些网站提供广泛的课程，有些是专门在网络相关的指导。 有些课程是免费的，有些是付费的，有些是认证的。 如果您正在寻找一个课程，一定要研究所有可用的选项，以选择最适合您的需求的课程。
希望这篇文章能给你带来帮助，也欢迎大家有好的工具补充。
