不论是作为一名设计师还是建站的开发师，都应该庆幸互联网上有如此多的设计师乐意分享他们所设计和创作的素材模板和工具包，及一些优秀的设计教程。
为了帮助你和你的下一个网站项目能够快速实现，我们收集了41个优秀的网站UI套件和模板素材以及网站资源，希望能给正在设计网站的小伙伴们带来灵感。
1. Web Gradients - Ultimate Collection of Gradients
WebGradients是一个由180个背景渐变色组成的，主要使用PSD / Sketch / PNG和CSS3格式制作，简单易用。WebGradients已被下载了20,000次。
2. Mi Food - Sketch Template
Mi Food是一款免费的多用途Sketch应用程序模板，用于展示食品，营养，餐馆和酒店网站。 Free Sketch Template中包含7个画板。 该画板完全可编辑，分层，精心组织。
3. Web Gradients Logotype (Freebie)
WebGradients是一个渐变色资源集合网站，受到全球70万人的喜爱。主要使用Sketch，PSD和CSS3文件为你的Web和图形设计创建出色的背景图。
4. Diversity Avatars
在一个日益相互联系的世界中，画像应该准确地代表不同的受众和角色。 多样化头像描绘了来自各行各业，性别，种族，民族和宗教的人。 每个头像都是由创作者Scott Lewis精心手工制作的。
特点：
320个单独的SVG文件
4个Sketch主文件
4 Adobe Illustrator主文件
IconJar档案
4种尺寸的PNG（64,128,256和512 px）
1000个定制头像
适用于自定义头像
5. Free UI Kit | Landing
这个UI套件有许多的手工组件来帮助你提高网页设计速度。80个以上的网页布局，界面美观且简洁，并有高级元素的集合和不同的图标设置。
6. Boomerang Free Bootstrap Web UI Kit
Boomerang是一个高品质的UI工具包，建立在Bootstrap 4 Framework之上，添加了多个功能和控件，扩展了调色板和漂亮的排版。
7. Bootstrap Design System - Sketch Freebie
由Thorgate团队分享的第一个完全可扩展的Bootstrap 4设计系统，免费提供。所有设计系统元素都根据适当的Bootstrap元素进行设计和命名，你可以自由地使用它来做任何你想要的项目，分享和改编它。
8. Material Design Bootstrap 4 UI Kit for Figma
Material Kit Figma是一款Bootstrap 4 UI套件，采用全新设计，灵感源自Google的Material Design。该套件包含三个预先构建的页面，可帮助你更快地开始使用。 你可以改变文字和图像，每个Bootstrap元素都经过了重新设计，将你的项目提升到一个新的水平。
9. Error Illustrations - Empty States Vol 02
这款工具包是由Sketch 和Photoshop创建的，使用这款工具包会让你的应用程序以及网页交互看起来更有趣。所有的插图都是100%可自定义的，并且是矢量形状创建的，你可以随便改变颜色和大小。
特点：
共32个屏幕 - 21个移动屏幕和11个网站屏幕
非常详细的插图
100％矢量 - 高分辨率
使用免费字体
100％可编辑
适用于Sketch和Photoshop CS6 +
10. Web UI Framework Sketch Resource
这个 web UI套件是由Toptal团队创建的，想要了解更多关于此套件的创作信息，可以查阅他们的博客
11. Annuacion Free web ui kit
这个UI套件包含了一个landing page，Q/A表格以及联系界面。
12. Mint - Free Sketch Web UI Kit
这个UI套件无论是商用还是个人项目使用都非常的方便。
13. Web UI kit - 20 Hero Headers
Erfusion - 采用现代UI涉及，鲜艳的色彩和独特的布局。 它由20个独特的Hero header组成，可用于你的下一个landing page设计。
所有组件都是完全可编辑的，基于矢量和像素。 它们具有组织良好的层，正确命名和分组。 它也是为新手设计师或开发人员而设计的。 所以每个人都可以更轻松地使用它。
Tips: 购买模板前，请检查所有图像。
特点：
20个PSD文件
完全矢量
智能对象
免费设备（例如iPhone，笔记本电脑，浏览器，iWatch）
完美像素设计
分层PSD
鲜艳的色彩
可变字体
14. Web Freight UI kit
Freight UI工具包是一个具有复杂感的现代界面。 适合你的业务，博客，应用或品牌。
套件中包含组织良好的Sketch和Photoshop文档，包括符号，文本样式和命名图层，以及20多种优雅的UI卡设计。
特点：
优雅的设计
精美排版
均匀的配色方案
巧妙选择的图像
响应式网格系统
8px基线网格
多样化的生活方式，文化或旅游博客风格
易于更新
开源字体和图像
免费更新
15. Footsteps Free Travel UI Kit
这个UI套件是专为旅游网站设计的，基于bootstrap 网格多样化和可编辑的组件层可以帮组你快速创建网站代码。
特点：
组织良好的层
CCO图片
Google字体
网页所需的元素
16. Nakropol - Free UI Kit (Web / Mobile)
Nakropol是个免费的UI工具包，用于创建web和手机项目。
特点：
2个PSD文件
完全可编辑文件
自定义大小
17. Universal Web UI Kit + Free Version
这是一个包含523个通用的，个性化且简约的UI 组件包。
特点：
完全可自定义
100%矢量图
组织良好的层
所有的文件都包含两种颜色和字体（Graphik和Roboto Slab&Lato）
18. Biggest FREE UI Kit
特点：
免费的Google字体
矢量图形
易于使用
完美像素
完美的层组织
清晰的文件结构
颜色鲜艳且流行
19. MI Travel Web Template Sketch Resource
MI Travel是一个Sketch博客模板，可帮助你为旅游网站或创意博客构建一个简洁的网站风格。 该设计包括6个画板， 所有画板都是完全可编辑，分层和精心组织的。
20. Color Style Guide Template Sketch Resource
使用此颜色样式指南可大大节省你设计时间。 此模板是Sketch文件格式的。你可以随意下载和自定义自己的项目！
21. Power Web UI Kit
Power 是非常具有现代感的Web UI工具包。 它可以用于各种类型的网站，如商业网站，原型，应用网站等。
特点：
包括PSD，XD和JPEG文件
组织良好的层
可编辑的文字，图像和颜色
免费字体
免费图标
完美像素
免费更新
帮助文档
22. Gorko - Creative UI Kits Sketch Template
特点：
70多个元素模块UI工具包
Sketch文件组织良好，并相应命名，因此非常容易定制和更新。
所有设计都使用Shape Object
免费的Google Web字体
简洁，独特，现代风格
超清晰和干净的布局
完美像素
23. Capeto Web UI Kit
特点：
160多种高品质UI组件
1k + UI元素
基于矢量
命名清晰和组织良好的图层
100% Google字体
24. Web - masters corporated site Free PSD template UI KIT
25. FREE UI kit for web page - learning project
26. Free web UI kit for Photoshop
27. Free The infinite Web UI Kit
28. Bootstrap Web UI Kit — Landing page [FREE PSD]
29. Consulex Free UI Kit & Web Theme
30. UI Kit Form 1.0
31. [PSD&Sketch] Free UI Kit by Perfect Shapes Project
32. Web Calendar UI Sketch Resource
33. Responsive Company Website Sketch Resource
34. 20 Features / IconBox Design Web-UI Kit
35. Multipurpose Web UI Kit
更多web UI kit资源下载：
38.PSDDD.co
39.UI8.net
40.Dribbble
41.Behance
相关阅读：
2019年设计师必看，UI加载动画完全解读
网友评论