邮箱订阅

订阅即可免费获取优质的设计资讯!

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

Mockplus是什么?

更快更简单的原型设计工具,微软、联合国国贸中心、华为、百度、东软、育碧、中石油、Oracle、西门子、IBM都在用,你呢?

开始使用

2019,都在用 iDoc了!

更高效的协作设计工具,产品团队必备。智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。

免费使用

【友情推荐】人人秀,H5活动制作工具,3分钟完成制作。

了解更多

赶紧收藏!41个Web UI工具包资源免费及付费下载

Summer 2019-06-03 13:45:56 阅读:11250

不论是作为一名设计师还是建站的开发师,都应该庆幸互联网上有如此多的设计师乐意分享他们所设计和创作的素材模板和工具包,及一些优秀的设计教程。


为了帮助你和你的下一个网站项目能够快速实现,我们收集了41个优秀的网站UI套件和模板素材以及网站资源,希望能给正在设计网站的小伙伴们带来灵感。


1. Web Gradients - Ultimate Collection of Gradients


网页渐变色UI工具包

WebGradients是一个由180个背景渐变色组成的,主要使用PSD / Sketch / PNG和CSS3格式制作,简单易用。WebGradients已被下载了20,000次。


免费下载


2. Mi Food - Sketch Template

Mi Food - Sketch Template


Mi Food是一款免费的多用途Sketch应用程序模板,用于展示食品,营养,餐馆和酒店网站。 Free Sketch Template中包含7个画板。 该画板完全可编辑,分层,精心组织。


免费下载


更多sketch资源下载


3. Web Gradients Logotype (Freebie)


Web Gradients Logotype

WebGradients是一个渐变色资源集合网站,受到全球70万人的喜爱。主要使用Sketch,PSD和CSS3文件为你的Web和图形设计创建出色的背景图。


免费下载


4. Diversity Avatars


Diversity Avatars

在一个日益相互联系的世界中,画像应该准确地代表不同的受众和角色。 多样化头像描绘了来自各行各业,性别,种族,民族和宗教的人。 每个头像都是由创作者Scott Lewis精心手工制作的。


特点:

  • 320个单独的SVG文件
  • 4个Sketch主文件
  • 4 Adobe Illustrator主文件
  • IconJar档案
  • 4种尺寸的PNG(64,128,256和512 px)
  • 1000个定制头像
  • 适用于自定义头像


价格:$19


5. Free UI Kit | Landing


 Free UI Kit | Landing

这个UI套件有许多的手工组件来帮助你提高网页设计速度。80个以上的网页布局,界面美观且简洁,并有高级元素的集合和不同的图标设置。


免费下载


6. Boomerang Free Bootstrap Web UI Kit


Boomerang Free Bootstrap Web UI Kit

Boomerang是一个高品质的UI工具包,建立在Bootstrap 4 Framework之上,添加了多个功能和控件,扩展了调色板和漂亮的排版。


免费下载


更多bootstrap网站模板下载


7. Bootstrap Design System - Sketch Freebie


 Bootstrap Design System - Sketch Freebie

由Thorgate团队分享的第一个完全可扩展的Bootstrap 4设计系统,免费提供。所有设计系统元素都根据适当的Bootstrap元素进行设计和命名,你可以自由地使用它来做任何你想要的项目,分享和改编它。


免费下载


8. Material Design Bootstrap 4 UI Kit for Figma


Material Design Bootstrap 4 UI Kit for Figma

Material Kit Figma是一款Bootstrap 4 UI套件,采用全新设计,灵感源自Google的Material Design。该套件包含三个预先构建的页面,可帮助你更快地开始使用。 你可以改变文字和图像,每个Bootstrap元素都经过了重新设计,将你的项目提升到一个新的水平。


免费下载


更多material design资源下载


9. Error Illustrations - Empty States Vol 02


Error Illustrations - Empty States Vol 02

这款工具包是由Sketch 和Photoshop创建的,使用这款工具包会让你的应用程序以及网页交互看起来更有趣。所有的插图都是100%可自定义的,并且是矢量形状创建的,你可以随便改变颜色和大小。


特点:

  • 共32个屏幕 - 21个移动屏幕和11个网站屏幕
  • 非常详细的插图
  • 100%矢量 - 高分辨率
  • 使用免费字体
  • 100%可编辑
  • 适用于Sketch和Photoshop CS6 +


价格:$30


10. Web UI Framework Sketch Resource


Web UI Framework Sketch Resource

这个 web UI套件是由Toptal团队创建的,想要了解更多关于此套件的创作信息,可以查阅他们的博客


免费下载


11. Annuacion Free web ui kit


Annuacion Free web ui kit

这个UI套件包含了一个landing page,Q/A表格以及联系界面。


免费下载


12. Mint - Free Sketch Web UI Kit


Mint - Free Sketch Web UI Kit

这个UI套件无论是商用还是个人项目使用都非常的方便。


免费下载


13. Web UI kit - 20 Hero Headers


Web UI kit - 20 Hero Headers

Erfusion - 采用现代UI涉及,鲜艳的色彩和独特的布局。 它由20个独特的Hero header组成,可用于你的下一个landing page设计。


所有组件都是完全可编辑的,基于矢量和像素。 它们具有组织良好的层,正确命名和分组。 它也是为新手设计师或开发人员而设计的。 所以每个人都可以更轻松地使用它。


Tips: 购买模板前,请检查所有图像。


特点:

  • 20个PSD文件
  • 完全矢量
  • 智能对象
  • 免费设备(例如iPhone,笔记本电脑,浏览器,iWatch)
  • 完美像素设计
  • 分层PSD
  • 鲜艳的色彩
  • 可变字体


价格:$9


14. Web Freight UI kit


 Web Freight UI kit

Freight UI工具包是一个具有复杂感的现代界面。 适合你的业务,博客,应用或品牌。


套件中包含组织良好的Sketch和Photoshop文档,包括符号,文本样式和命名图层,以及20多种优雅的UI卡设计。


特点:

  • 优雅的设计
  • 精美排版
  • 均匀的配色方案
  • 巧妙选择的图像
  • 响应式网格系统
  • 8px基线网格
  • 多样化的生活方式,文化或旅游博客风格
  • 易于更新
  • 开源字体和图像
  • 免费更新


价格: $19


15. Footsteps Free Travel UI Kit

Footsteps Free Travel UI Kit

这个UI套件是专为旅游网站设计的,基于bootstrap 网格多样化和可编辑的组件层可以帮组你快速创建网站代码。


特点:

  • 组织良好的层
  • CCO图片
  • Google字体
  • 网页所需的元素


免费下载


16. Nakropol - Free UI Kit (Web / Mobile)


Nakropol - Free UI Kit (Web / Mobile)

Nakropol是个免费的UI工具包,用于创建web和手机项目。


特点:

  • 2个PSD文件
  • 完全可编辑文件
  • 自定义大小


免费下载


17. Universal Web UI Kit + Free Version


Universal Web UI Kit + Free Version

这是一个包含523个通用的,个性化且简约的UI 组件包。


特点:

  • 完全可自定义
  • 100%矢量图
  • 组织良好的层
  • 所有的文件都包含两种颜色和字体(Graphik和Roboto Slab&Lato)


免费下载demo


18. Biggest FREE UI Kit


Biggest FREE UI Kit

特点:

  • 免费的Google字体
  • 矢量图形
  • 易于使用
  • 完美像素
  • 完美的层组织
  • 清晰的文件结构
  • 颜色鲜艳且流行


免费下载


19. MI Travel Web Template Sketch Resource


MI Travel Web Template Sketch Resource

MI Travel是一个Sketch博客模板,可帮助你为旅游网站或创意博客构建一个简洁的网站风格。 该设计包括6个画板, 所有画板都是完全可编辑,分层和精心组织的。


免费下载


20. Color Style Guide Template Sketch Resource


 Color Style Guide Template Sketch Resource

使用此颜色样式指南可大大节省你设计时间。 此模板是Sketch文件格式的。你可以随意下载和自定义自己的项目!


免费下载


21. Power Web UI Kit


Power Web UI Kit

Power 是非常具有现代感的Web UI工具包。 它可以用于各种类型的网站,如商业网站,原型,应用网站等。


特点:

  • 包括PSD,XD和JPEG文件
  • 组织良好的层
  • 可编辑的文字,图像和颜色
  • 免费字体
  • 免费图标
  • 完美像素
  • 免费更新
  • 帮助文档


免费下载


22. Gorko - Creative UI Kits Sketch Template


Gorko - Creative UI Kits Sketch Template


特点:

  • 70多个元素模块UI工具包
  • Sketch文件组织良好,并相应命名,因此非常容易定制和更新。
  • 所有设计都使用Shape Object
  • 免费的Google Web字体
  • 简洁,独特,现代风格
  • 超清晰和干净的布局
  • 完美像素


免费下载


23. Capeto Web UI Kit


Capeto Web UI Kit

特点:

  • 160多种高品质UI组件
  • 1k + UI元素
  • 基于矢量
  • 命名清晰和组织良好的图层
  • 100% Google字体


免费下载


24. Web - masters corporated site Free PSD template UI KIT


Web - masters corporated site Free PSD template UI KIT

免费下载


25. FREE UI kit for web page - learning project


FREE UI kit for web page - learning project


免费下载


26. Free web UI kit for Photoshop


Free web UI kit for Photoshop


免费下载


27. Free The infinite Web UI Kit


Free The infinite Web UI Kit


免费下载


28. Bootstrap Web UI Kit — Landing page [FREE PSD]


Bootstrap Web UI Kit — Landing page

免费下载


29. Consulex Free UI Kit & Web Theme


Consulex Free UI Kit & Web Theme

免费下载


30. UI Kit Form 1.0


UI Kit Form 1.0

免费下载


31. [PSD&Sketch] Free UI Kit by Perfect Shapes Project


Free UI Kit by Perfect Shapes Project

免费下载


32. Web Calendar UI Sketch Resource


Web Calendar UI Sketch Resource

免费下载


33. Responsive Company Website Sketch Resource


Responsive Company Website Sketch Resource

免费下载


34. 20 Features / IconBox Design Web-UI Kit


20 Features / IconBox Design Web-UI Kit


免费下载


35. Multipurpose Web UI Kit


Multipurpose Web UI Kit

免费下载


更多web UI kit资源下载:


36. Sketchappsources


37. Elements.envato


38. PSDDD.co


39. UI8.net


40. Dribbble


41. Behance

原型工具难上手、速度慢?试试Mockplus!

_____

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

免费下载
logo

咨询客服

帮助群:629143492 加入QQ群

服务邮箱:service@jongde.com

咨询客服

在线客服

置顶