暮城博客推荐 精选Web模板,CSS框架,UI资源库,工具等设计师专用网址集合

暮城博客为设计师提供UI图形、文字工具、色彩搭配、图标资源、Favicons、图标字体、图库素材、视频素材、音乐和音效资源、矢量图和剪贴画、产品和图像模型、HTML和CSS模板、CSS框架、CSS动画等全方位设计师网站导航指引。不定期更新补充和修正。

UI图形

具有现代UI组件(例如PSD,Sketch,Figma等)的不同格式的网站和资源。它们非常适合于Web组件/ UI的想法

Website                            Description
UI Design Daily 各种类型的UI组件
100 Daily UI 免费的Figma产品,元素和屏幕库
Sketch App Sources 素描UI,线框,图标等
Humaaans 具有混合和匹配能力的人的精美插图
Paaatterns 免费收集所有矢量格式的精美图案
thepatternlibrary 免费的美丽背景图案
404 illustration 网站404错误的的素材插图
Drawkit.io 设计师和初创公司的插图
Undraw.co 您可以想象和创建的任何想法的开源插图
Manypixels.co 单色等距高质量插图
Open Peeps 手绘插图库
UI Space 数千个出色的UI赠品
Animations.co 漂亮,可自定义的动画GIF图标
Uplabs 高质量的设计资源(免费和高级)
InvisionApp 免费的高质量UI套件,图标包和模型库
Open Doodles 免费的粗略插图集
Avataaars Pablo Stanley的免费化身插图素描库
FreebieSketch 免费的Sketch设计,线框,插图等。
Blush 使用Figma插件免费定制插图
Hero Patterns 可重复的SVG背景图案的集合
IRA Design 蒂姆创作的开源渐变插图集。
Storytale.io 故事免费质量插图的子集
icons8.com/illustrations 免费矢量插图分类您的项目
Patternico 无缝图案制作器
Freellustrations 精美的登陆页面的免费背景图片
Pixeltrue Illustrations 免费动画插图
Abstract User Avatar API 通过用户名或电子邮件创建简单但灵活的用户头像的API
sketchvalley 下载免费的PNG,SVG或AI文件.

文字工具

提供免费字体以及字体在线设计的工具的网站

Website                            Description
Google Fonts 约1000种免费许可字体库的库
DaFont 可免费下载的字体档案
Use & Modify 个性化选择漂亮,经典,朋克,专业,残缺,怪异的字体
1001 Free Fonts 我认为这个名字说明了一切
Font Squirrel 松鼠字体搜寻互联网上的高质量,合法免费字体
Font Fabric 一家数字型铸造厂,为各种品牌制作零售字体和定制字体
Tiff 一种类型差异工具,可以直观地对比两种字体之间的差异
TypeKit Practice 了解印刷实践
Fontjoy 一键生成字体配对
Golden Ratio 黄金比例排版计算器
FontSpark 发现更好的字体
FontPair 帮助您将Google字体配对在一起
Font Space 以设计师为中心的免费字体网站,可快速自定义预览
Abstract Fonts 免费字体供个人和商业使用
Free Typography 高质量字体列表
Leon Sans 用代码制作的几何无衬线字体
Lexend 根据经验显示可变字体可显着提高阅读能力
Fonts for Apple Platforms 获取在应用程序中为Apple平台使用系统字体所需的详细信息,框架和工具
SFWin Windows 10和非Apple平台的San Francisco字体
Font Flipper 在自己的设计上预览800多种Google字体,而无需下载字体
Fonts Arena 免费精选字体
Befonts 免费提供高质量字体
Arabic fonts 免费的阿拉伯字体
FontDrop 查看字体文件内容的简便方法
Open Foundry 精选的开源字体免费平台
Glyphter 上传您自己的SVGS,并将其转换为字体文件。如果要加载较小的库,则很有用
Google Webfonts Helper 一种轻松自托管Google字体的方法
Rough Font Awesome 当RoughJS遇到Font Awesome时

色彩搭配

有助于选择颜色的网站和资源

Website                            Description
Colormind.io 调色板生成器
ColorCurves.app 使用曲线生成调色板的调色板生成器
Coolors 创建完美的调色板或从数千种美丽的配色方案中汲取灵感
HTML Color Codes 使用我们的颜色选择器,颜色图表和HTML颜色名称获取HTML颜色代码,十六进制颜色代码,RGB和HSL值
Colors & Fonts 精选的颜色,字体和资源库
Palette List 选择您喜欢的2种颜色,该工具会为您生成数千个调色板。
Google Material Color Tool 官方的Google Material Palette工具
Material Palette 免费选择材质设计的调色板,图标和颜色
ColorSpace 从一种颜色生成漂亮的调色板
FlatUIColors 各种样式的精美调色板
Adobe Color 创建调色板,从图像中提取渐变等
Colorsinspo 一站式资源,可找到有关颜色的所有信息
ColorsWall 一键存储您的调色板并生成调色板的地方
Happyhues Happy Hues是一个调色板灵感网站,它是Mackenzie Child如何在设计项目中使用颜色的真实示例
Adobe Trends 从Behance和Adobe Stock的创意社区发现不同行业的当前色彩趋势
Color Hunt 一个免费的开放式平台,可通过数千种精选的流行调色板来激发色彩灵感
Gradient Hunt 一个免费的开放式平台,可通过数千种趋势精选的渐变色来启发灵感
Web Gradients 一个免费的网站,可以找到良好的CSS渐变
ColorBox 一个免费的网站来制作色彩集
CSS gradient 一个免费的网站来制作客户渐变和一些渐变示例
gradienta 纯CSS和jpg渐变
UI Gradients UI渐变颜色生成器
Palette Generator 每按一下空格键即可生成新的调色板
Material Palettes 1000多种材料设计调色板
Grabient 渐变选择器
ShadeSwash 快速生成任何颜色的阴影
BrandColors 官方品牌颜色代码的最大集合
BRAND PALETTES 徽标颜色代码和调色板
Material Design Palette Generator 生成类似于Material Design的主题和调色板
Colorate 设计人员和开发人员的配色方案工具。这将帮助您汲取灵感,并为您的色彩工作提供资源。
0to255 一种颜色工具,可轻松使颜色变浅和变暗。它非常适合悬停状态,边界,渐变等。
Color Blender 显示两种颜色之间的中点颜色的工具
Gradient Buttons 准备使用复制/粘贴渐变按钮
Khroma Khroma使用AI来学习您喜欢的颜色,并创建无限的调色板供您发现,搜索和保存。
whocanuse 该工具可引起人们对色彩对比度如何影响视力障碍不同人群的关注和理解。
Colorable 配色对比测试仪
Color Hex Picker 用于获取十六进制代码以及颜色名称的工具。
Saruwakakun 带有预览功能的网站和应用程序设计的惊人配色方案
Paletton Paletton.com是一种设计器颜色工具,用于创建可以很好地协同工作的颜色组合。
Colorzilla 强大的在线photoshop-like CSS渐变编辑器
Image Color Picker 图像颜色选择器和调色板生成器
CombineCOLORS 混色工具
Color Lovers 它将显示在外部世界流行的配色方案
HTML CSS Color 免费的在线颜色(美国)或颜色(英国)工具:信息,渐变生成器,色轮等。
HEX Color Codes 它通过我们的颜色选择器,颜色图表和HTML颜色名称获取HTML颜色代码,十六进制颜色代码,RGB和HSL值。
CoolHue 2.0 一个免费工具,可以CSS和PNG格式显示不同的渐变示例

图标资源

图标资源,包括png,svg等

Website                            Description
UXWing 优化,免费的商业图标
Shapedfonts Iconclub 8000+免费图标
Feather Icons 美丽,可自定义的开源图标
Tabler Icons 470+个高度可定制的开源SVG图标
Simple Icons 1307个流行品牌的免费SVG图标
Instant Logo Search 数千种免费品牌徽标(SVG-PNG)
Linear Icons 1000+超清晰矢量图标
Icons8 免费图标,照片,载体和工具
Flat Icon 最大的免费图标PNG,SVG,EPS,PSD和BASE 64格式数据库
The Noun Project 由全球社区创建的超过200万种精选图标
Iconscout 在一个地方免费下载图标插图股票照片
Nucleo App Nucleo是一个包含27500个图标的漂亮库,并且是一个功能强大的应用程序,用于收集,自定义和导出所有图标。(免费和付费)
Icon-icons.com 免费图标PNG,ICO,ICNS和矢量文件SVG
Bootstrap Icons 为Bootstrap构建的免费图标,但它们可在任何项目中使用
Remix Icon 简直令人愉快的图标系统
Iconmonstr 发现313个合集中的4496+个免费图标
Vivid.js 准备使用免费和开源SVG图标包JavaScript库。
Iconfinder SVG,PNG,CSH和AI格式的免费和付费矢量图标
Lordicon 50个免费的动画互动图标
UseAnimations SVG和Json格式的免费动画图标(用于抽奖)
css.gg SVG Sprite,样式化组件,NPM和API中提供了700多个开源CSS,SVG和Figma UI图标
SVGPorn 1000多个高质量SVG徽标
Payment System Logos png和svg中可用的支付系统徽标
Browser Logos 高分辨率Web浏览器徽标
IconBros 7843+个免费图标组合在182个收藏夹中
LogoHub 免费生成和下载PNG和SVG格式的徽标
Material Design Icons 图标集合,使设计者和开发人员可以将目标瞄准各种平台,以任何项目所需的格式,颜色和大小下载图标。
Heroicons 来自Tailwind CSS创建者的免费,开源图标。
Zondicons 一组免费的高级SVG图标,供您在数字产品上使用。
Endless Icons 一个提供大量免费图标的网站。图标被标记并且也压缩到工具包中。
Icomoon 浏览5500+个免费图标。添加您想要轻松浏览和搜索其图标的任何集合。
Eva Icons Eva Icons包含超过480个精心制作的精美开源图标,用于常见操作和项目。
Cryptoicons 一组430个加密货币和法定货币图标。完全免费。
Ikonate 完全可定制和访问的矢量图标
appicon 快速为您的IOS,macOS和Android项目生成大小不同的应用程序图标
LineIcons 适用于设计人员和开发人员的2000多种Essential Line图标
Evericons Evericons是由Aleksey Popov设计的460多个免费图标的大包装。
SVG Repo 下载免费的SVG载体用于商业用途。
Convertio 在线免费将PNG文件转换为SVG。(它提供的服务之一。)
CSS ICON 用纯CSS代码制作的图标集,无依赖项,“抓紧走”图标
Unified icons 数千个图标,一个统一的框架。一个图书馆,超过40,000个矢量图标。

Favicons

网站图标资源

Website                            Description
Favicon.io 从文本,图像或表情符号生成图标。以.ico和.png格式下载
Favicomatic 生成所有大小和格式的图标,以及支持所有可能的浏览器或设备所需的HTML代码
Favicon Generator 为您的网站生成Favicon ico文件
RealFaviconGenerator 生成所有平台(Windows,iOS,Android)的图标
FontIcon 从Font Awesome图标生成图标和图像

图标字体

图标字体的资源

Website                            Description
Font Awesome 网络上最受欢迎的图标集和工具包
Line Awesome 换用现代线条图标替代Font Awesome
Material Icons 材料设计图标库
IonIcons Ionic团队精心制作的开源图标
Zurb Foundation Icons 可自定义的基金会图标
Fontisto Icons Fontisto图标字体和CSS工具包·616+免费图标
Boxicons Boxicons免费收集精心制作的开源图标
Icofont 2100多个免费图标,为您的创意设计增光添彩
Material Palette 自由选择用于材料设计的调色板,图标和颜色
Material Design Iconic Font 材料设计图标字体
Vscode Codicons Visual Studio Code中的图标字体
Devicon Devicon是代表编程语言,设计和开发工具的一组图标
PaymentFont 光滑的网络字体,适用于支付运营商和支付方式。具有116个图标
Weather Icons 天气图标是唯一带有222个天气主题图标的图标字体
Stroke 7 202个受iOS 7启发的细线图标
Jam Icons 890多种手工制作的图标,使您的Web应用程序超赞
Fontastic.me 在几秒钟内创建自定义图标字体。超过9,000个图标可供选择或上传自定义svg
Fontello 200多个Web图标,您可以在其中自定义图标的名称或代码。
Linea Linea:具有750多个免费图标
Unicons 一组1100+个免费线条样式的图标,可作为Web字体,SVG图标以及JS框架(如React,Vue和React Native)的组件使用。
Mobirise Icons 一个免费的开放源代码集,包含150个优雅的,像素完美的线性图标,可以用作Web图标字体和SVG图标。

图库素材

为您的网站和应用提供各种免费库存图片的网站

Website                            Description
Pexels 由创作者分享的免费图片库
Unsplash 互联网上免费可用图像的来源
Pixabay 超过170万种高质量的图片和视频
Magdeleine 每天分享新的高分辨率照片
Picspree 版税免费图片,库存照片,插图和向量
Burst 免费图片库
Gratisography 免费收集免费的高分辨率图片
Life of Pix 免费高分辨率摄影
Stock Snap 每周添加数百张高质量照片
Morguefile 超过350,000张免费商业照片供商业使用
Kaboom Pics 库存摄影和调色板。适合商品图片
New Old Stock 库存老式照片
Pic Jumbo 收集了各种类型的照片
Public Domain Pictures 所有类型的公共领域图像
Find A Photo 搜索多个库存图片网站
Stockvault 分类的库存照片
Placeholder Web的免费图像占位符服务。您可以指定图像尺寸和格式
Realistic Shots 免费高分辨率图片
Negative Space 高分辨率免费图片素材
SkitterPhoto 免费高分辨率摄影
PicoGraphy 绚丽,高分辨率,免费照片
Wunder Stock 惊人的惊人免费照片
PxHere 免费图片&免费照片
Piqsels 免版税库存照片
FoodiesFeed 食物照片素材网站
Nappy 一个提供黑白照片的高分辨率照片的网站。
Generated Photos 独特的AI生成模型照片
Reshot 独特的免费照片。精心挑选的非笨拙图像。
Free Images 查找和下载免费的图片-免费供个人和商业使用
Lorem Picsum 易于使用的API,可获取精美的占位符图像。可以指定大小和其他参数。
scienceimage 专门研究科学和自然图像的图像库
Integration & Application Network Image Library 免费图片可为科学家,资源经理,政府机构,社区团体和制图专业人士提供增强科学交流的资源。
Saxifraga 免费自然图片

视频素材

为您的网站和应用提供各种免费视频素材的网站集合

Website                            Description
Pexels 社区捐赠的最大的免费视频库
Pixabay 大型社区免费捐赠的视频库,类似于Pexels
Coverr.co 美丽的免费股票录像
Videezy 免费高清影片素材和4K视频
Mix Kit 库存视频剪辑和音乐
Life Of Vids 免费视频剪辑和循环
Videvo 免费和付费股票视频
Loopvidz 免费使用通过VIMAGE App创建的电影

音乐和音效资源

提供免费的背景音乐和/或声音效果的网站

Website                            Description
Free Stock Music YouTube视频,播客等的免版税视频音乐
Bensound 免费下载免版税音乐并在您的项目中使用它
Mixkit 为您的项目提供免费音乐
Freesound 免费的音乐和声音
Free Music Archive 面向音乐家和声音爱好者的创意通用许可声音的协作数据库
Musopen 在线免费版权古典音乐库
Unminus 为您的项目免费提供优质音乐 🎁免版税。已清除YouTube。

矢量图和剪贴画

免费矢量,剪贴画,插图,图案等

Website                            Description
Vecteezy 查找并下载免费矢量艺术
Freepik 免费矢量图,库存照片,PSD和图标
Free Vectors 共享免费矢量图形的矢量爱好者社区
PNGTree png,背景,模板,文字效果
Vector4Free 免费矢量图形
Retro Vectors 复古矢量和图形
Freeble 向量,图案,模型等
Lukaszadam 免费矢量atrworks
Illlustrations 美丽的100插图-PNG,SVG
Clipart 从免费收藏中为您的项目选择出色的剪贴画,png,着色页,图纸等!
Growwwkit illustrations 一组8张简单的黑白时尚插图
World Vector Logo 下载您喜欢的品牌的矢量标志
trianglify.io 生成低多边形背景,纹理和矢量
blob 生成Web和Flutter应用程序的Blob形状
HiClipart 设计师共享和下载透明背景PNG剪贴画的社区
Stories by Freepik 项目的免费和可自定义插图的集合
Black Illustrations 黑人的美丽插图(免费和高级)
Delesign 大量免费插图和更多内容
Custom Shape Dividers 免费工具,使设计人员和开发人员更容易导出漂亮的SVG形状分隔器
Servier Medical Art 3000张免费医学图像,以说明您的出版物和Powerpoint演示文稿
Clker 免费剪贴画,您可以将其用于任何喜欢的事情

产品和图像模型

创建设备和其他产品的模型

Website                            Description
Smart Mockups 创建惊人的产品模型(免费和高级)
Shot Snap 为您的应用程序或网站设计创建漂亮的设备模型图像
Screely 立即将您的屏幕截图变成模型
Screenshot.rocks 在几秒钟内创建漂亮的浏览器和移动模型
Screen Peak 从URL创建模型
Mockup World 在线提供免费的真实照片级样机的最大来源
Collab Shot 实时屏幕抓图和图像共享
Facebook Devices 流行设备的图像和草图文件
Threed.io 直接在浏览器中生成3D模型。
Mockuphone 适用于所有设备的100%免费样机,包括IOS,Android,Windows Phone,笔记本电脑和台式机以及电视
Device Shots 免费创建用于社交媒体的高分辨率设备模型

HTML和CSS模板

提供各种类型的免费精美网站模板和主题的网站

Website                            Description
HTML5Up 非常现代,独特的自适应HTML5 / CSS3主题
Templatemo 最小,简历,画廊主题等
Templated.co 大量的简约HTML5 / CSS3主题
FreeHTML5 免费和高级HTML5和Bootstrap主题
StyleShout 精心制作的免费网站模板
Start Bootstrap Bootstrap入门主题
Zerotheme HTML5,Bootstrap,Prestashop模板
HTML5xCSS3 不同类别的精美模板的集合
Colorlib 您可以想到的几乎任何类别的主题
Free CSS 大量免费模板
Hubspot 模板,信息图表,横幅等
Mobirise 漂亮的HTML5 / CSS3模板
Bootswatch Bootstrap的免费主题
Onepagelove 一页网站,模板和资源
Themes For App 免费的Bootstrap主题和登录页面
BootstrapTaste 高级和免费Bootstrap模板
BootstrapMade 使用Bootstrap的优雅,干净,漂亮的免费模板。
W3Layouts W3Layouts:2020年免费提供3784个网站模板
Tooplate Tooplate:适合所有人的免费HTML模板!
Cruip 完全编码的HTML模板可帮助您轻松构建启动目标页面而没有麻烦。
Shade 免费获取高转换着陆页!
UIdeck 免费的着陆页模板和引导主题
Splawr 免费的网络模板可以启动您的想法!

CSS框架

CSS / UI框架可帮助构建美观的网站和应用程序

Website                            Description
Tailwind CSS 低级,以效用为先的框架
Bootstrap 流行的UI框架,其中包含使用CSS和JS的大量组件
Materialize 基于Material Design的现代响应式前端框架
Material Design Lite 基于Material Design的轻框架。没有JS依赖
Bulma 没有JS的现代CSS框架
Skeleton 基本UI元素的极轻框架
Semantic UI 通过为UI创建共享词汇来赋予设计师和开发人员权力
Fomantic UI Semantic-UI的社区分支
Foundation 带有清晰标记的移动优先框架
Pure CSS 一组小的响应式CSS模块
UIKit 轻巧的模块化前端框架
Susy 轻巧的Sass网格布局引擎
Milligram.io 极简CSS框架
Vanilla Framework 用Sass编写的简单,可扩展的CSS框架
Spectre CSS 轻巧的现代CSS框架
Picnic CSS 轻巧美观的图书馆
Wing 专为极简主义者设计的漂亮CSS框架
Chota 微型(〜3kb)CSS框架
Blueprint CSS 一个轻量级的布局库,用于构建可在任何地方使用的出色的响应式移动优先UI
W3.CSS 现代CSS框架,默认情况下支持桌面,平板电脑和移动设计。设计为独立于jQuery或任何其他JavaScript库
98.css 一种用于构建旧UI的忠实娱乐的设计系统
NES CSS NES样式的CSS框架
Shoelace.css 轻巧,具有前瞻性的CSS库,使用未来的CSS语法构建
MVP.css HTML元素的简约样式表。没有类名,没有框架,只有语义HTML就可以了
Blaze.css 开源模块化CSS工具包为快速构建网站提供了良好的结构
Turret CSS Turret CSS是用于开发响应式网站的样式框架。
Cutestrap 强大,独立的CSS框架。
Shorthand Shorthand是一个免费的开源CSS框架,可让您无需编写任何CSS即可进行独特而现代的设计
XP.css XP.css是98.css的扩展。一个CSS库,用于构建看起来像旧UI的界面。
Framework7 Framework7-是一个免费的开源框架,用于开发具有本机外观的移动,桌面或Web应用程序。
Hint.css 一个纯CSS工具提示库,适合您可爱的网站。
imagehover.io 纯CSS图像悬停效果库
mini.css 最小的,与风格无关的响应式CSS框架
Tachyons 使用尽可能少的CSS创建快速加载,高度可读和100%响应的界面。
Material Bootstrap 带引导的材料设计
Ivory 现代CSS框架,可更快,更轻松地开发强大的Web界面
Halfmoon UI 快速响应的轻量级框架,旨在快速构建漂亮的仪表板和产品页面。
Metro 4 使用Metro 4.令人印象深刻的基于html,css和javascript的组件库,快速有效地创建您的网站。

CSS动画

CSS动画为网站和应用程序构建出色的动画

Website                            Description
Animate.css 随便添加CSS动画
Bounce.js Bounce.js是一个工具和JS库,可让您创建漂亮的CSS3驱动的动画
Anime.js Anime.js(/ˈæn.ə.meɪ/)是一个轻量级的JavaScript动画库,具有简单但功能强大的API。它与CSS属性,SVG,DOM属性和JavaScript对象一起使用
Magic Animations Animations一直是最令人印象深刻的动画库之一
Zdog 适用于画布和SVG的圆形,扁平,设计友好的伪3D引擎
CSShake CSShake准确地传达了包装盒上所说的内容–一个CSS库,专门用于在网页中摇动元素
Hover.css Hover.css是一个CSS动画库,旨在与您网站中的按钮和其他UI元素一起使用
AniJS AniJS是一个动画库,可让您以简单的“类似于句子”的结构向元素添加动画
Animista CSS动画点播
Tachyons-animate Tachyons本身是一个原子CSS库,具有大量实用程序类,可通过在需要的类中添加类来本质上设计任何东西
Sequence.js Sequence.js是一个JavaScript库,它提供了一个响应式CSS框架,用于创建独特的滑块,演示文稿,横幅和其他基于步骤的应用程序
Infinite 这些动画,例如旋转和脉冲,是专门为永久运行和重复而设计的
OBNOXIOUS.CSS 内心坚强与内心虚弱的动画
MOTION UI 一个Sass库,用于创建灵活的CSS过渡和动画
Keyframes.app 用于生成自定义CSS关键帧动画的图形用户界面
thoughtbot

Javascript动画库

javascript动画库可为网站和应用程序构建出色的动画

Website                            Description
Greensock 一个JavaScript库,用于构建可在所有主流浏览器中使用的高性能动画
Velocity.js Velocity是一种轻量级的动画引擎,具有与jQuery的$ .animate()相同的API。
lax.js 简单轻巧的香草javascript插件,可在您滚动时创建流畅且精美的动画!
Rellax.js 黄油状光滑,超轻量,香草javascript视差库
three.js 具有默认WebGL渲染器的易于使用的轻量级3D库。
wow.js 滚动时显示动画。
chocolat.js 免费的灯箱插件。
Animate On Scroll 在滚动库上设置动画以在滚动时显示动画。
Tilt.js 一个微小的requestAnimationFrame为jQuery提供了60 + fps的轻量级视差悬停倾斜效果。
Roughnotation Rough Notation 是一个小的JavaScript库,用于在网页上创建和设置注释动画
tsParticles 用于创建粒子的轻量级库,废弃和过时的particles.js的改进版本
Particles.js 用于创建粒子的轻量级JavaScript库
mo.js 网络运动图形工具带
Lightbox2 一个小的JS库,用于在当前页面顶部覆盖图像。
Slick 充分响应的轮播
barba.js 在您的网站页面之间创建流畅流畅的过渡。

UI组件和套件

不是完全“框架”,而是用于使用组件或UI套件创建用户界面的工具

Website                            Description
TagFold 有用的Bootstrap 4,HTML5,CSS3代码片段,用于构建Web布局
UILang 针对Web设计人员的一种最小的,以ui为重点的编程语言
Medialoot CSS Components 日历,价格网格和其他UI组件
Froala Design Blocks 超过170个响应式设计模块可随时在您的Web或移动应用程序中使用
Mui Treasury 一个开源项目,提供基于Material-UI的即用型组件的集合。
Material Design For Bootstrap 用于使用Bootstrap进行建筑材料设计的开源工具包
Photonkit Electron的桌面UI库
Flat UI 最少的免费用户界面套件
Shards 一个基于Bootstrap的免费的现代Web用户界面工具包
Creative Tim 所有类型的UI库和工具包,包括React等JS框架
Brumm Shadow Maker 制作CSS阴影的在线工具
AdminLTE 最佳开源管理仪表板和控制面板主题
SpinKit 简单的CSS微调器
Epic Spinners 具有Vue.js集成的CSS Spinners集合。
Loading.io 在线服务提供商,用于创建简单的动画,微调器,进度栏等
Moving Letters 带有JavaScript和anime.js的动画文本
CSS Layout 纯CSS中流行的Web布局和模式的集合
CSS Grid Generator 一个开源项目,允许用户基于CSS Grid快速创建动态布局。
Codyhouse 使用CodyHouse的前端框架和可访问的HTML,CSS,JavaScript组件库来启动您的Web项目
Tailwind Starter Kit Tailwind Starter Kit是TailwindCSS,免费和开源的漂亮扩展
Tailwindtoolbox 开源入门模板和组件,插件目录以及有用的工具/实用程序来启动您的Tailwind CSS项目。
tailwindcomponents 使用TailwindCSS的免费社区组件存储库
sweetalert SweetAlert使弹出消息变得简单而漂亮。
sweetalert2 一个漂亮,响应迅速,可自定义,可访问的javascript弹出框替代品
tailblocks 开源的即用型Tailwind CSS组件。
Soft Components 一组基于神经变形设计的与框架无关的Web组件。
Fast 可以与现代Web框架(如React,Vue和Angular)一起使用的接口系统。
LottieFiles

UI组件库

React JavaScript框架的UI和组件库

Website                            Description
Material UI 基于Material Design,对组件进行响应,以更快,更轻松地进行Web开发
Chakra UI 快速构建可访问的React应用和网站。
React Bootstrap 为React重新构建了Bootstrap。在您的JavaScript中包含Bootstrap组件
ui-playbook 有记录的UI组件集合
ReactStrap React的另一个Bootstrap UI库
React Admin 用于构建管理应用程序的前端框架。开箱即用地支持API
BlueprintJS 用于Web的基于React的UI工具包
React Semantic UI 基于语义UI框架的UI组件
Shards React React UI套件包含具有数十个自定义组件的现代设计系统
React Virtualized 为数据设置的用户界面。包括表格,列表,排序等。
React Toolbox 用于React的Material Design UI库
Elastic UI 分发UI React组件和静态资产以用于构建Web布局
React Desktop React中的桌面样式组件。包括基于MacOS和Windows的组件
Theme UI 根据基于约束的设计原则构建一致的主题化React应用
Onsen React 通过React和Onsen UI分发用于混合移动应用程序的组件
Evergreen React设计系统
Rebass 反应使用样式化系统构建的原始UI组件
Grommet 移动优先UI组件库
Rimble React设计套件,库和指南
Landing Page Template 用于响应的开源目标网页模板
Elemental UI 用于React.js网站和应用程序的UI工具包
Ant Design 开源设计React ui库。
Bumbag Bumbag是一个友好的React UI套件,适用于MVP或大规模应用。
PRIMEREACT 与设计无关,灵活且可访问的React UI组件的最终集合
Primer Components Primer组件是实现GitHub的Primer设计系统的React组件
Orbit 为旅行项目设计系统和React UI组件。
Base Web Base Web提供了一系列强大的组件
Backpack UI 背包是我们用来构建前端应用程序的Lonely Planet工具集。
Reaviz 基于D3的React数据可视化库
React Suite 一套React组件,明智的UI设计和友好的开发经验。
React Spring 基于Spring物理学的动画库,用于React应用程序。
Recharts 基于React组件的可组合图表库。
Vercel UI 现代简约的React UI库
Framer Motion 一个React库,用于为生产就绪的动画提供动力。
React Spectrum Spectrum的React实现,Adobe的设计系统。
React tsParticles 轻巧的React组件,用于创建粒子
particles-bg React粒子动画背景组件

Vue用户界面

Vue JavaScript框架的UI和组件库

Website                            Description
Vuetify 材料设计组件框架
Bootstrap Vue 在Vue中使用Bootstrap组件
Buefy 基于Bulma的轻量级UI组件
Semantic UI Vue 语义UI Vue是语义UI的Vue集成
Quasar 高性能材料设计组件套件,带有用于SPA,SSR,PWA,移动(科尔多瓦和电容器),台式机(电子)和浏览器扩展的构建器
Element Vue的桌面UI库
Fish UI Web的Vue UI工具包
Keen UI 带有简单API的VueUI库,灵感来自Google的Material Design
Onsen Vue 通过Vue和Onsen UI分发用于混合移动应用程序的组件
Vuejsexamples 大量有用的vuejs UI组件集合
Inkline Inkline是Vue.js的现代UI / UX框架,旨在创建完美的响应式Web应用程序
Vuesax 独特且可重复使用的UI组件
Antdv 基于Ant Design的Vue UI库
Shards Vue 高质量和免费的Vue UI套件,具有现代设计系统和数十个自定义组件
Prime Vue 功能强大但易于使用的多功能Vue UI组件库,可帮助您构建出色的用户界面。
Chakra UI Vue Chakra UI是一个简单的模块化且可访问的组件库,它为您提供了构建块以快速构建Vue应用程序。
View UI 数十种有用而精美的Vue组件,为拥有各种技能的人们量身定制,并提供大量文档。
Particles.vue 用于创建粒子的轻量级Vue组件

Angular UI

Angular JavaScript框架的UI和组件库

Website                            Description
Material Angular 基于Material Design的Angular UI库
NG Bootstrap 基于Bootstrap框架的Angular UI库
PrimeNG 强大的Angular UI组件库
Onsen Angular Angular和Onsen UI的混合移动和PWA UI库
NG Lightning Lightning设计系统的本机Angular组件和指令
NG Semantic 基于语义UI的Angular UI库
Nebular 可自定义的UI套件,针对Angular的身份验证和安全性
Alyle UI Angular的最小组件集
NGX Bootstrap 另一个基于Bootstrap框架的Angular UI库
NG Zorro 基于Ant Design的Angular UI库
Pagination for datatables npm分页库
Multi select dropdown 用于表单中的多选dropdowm
NG Particles 用于创建粒子的轻型Angular组件

Svelte UI

Svelte Javascript编译器的UI和组件库

Website                            Description
Svelte Material UI 基于Material Design的Svelte UI库
SvelteStrap 基于Bootstrap框架的Svelte UI库
Svelte Flat UI 基于平面设计的Svelte UI库
Svelte Particles 轻巧的Svelte组件,用于创建粒子

系统设计和样式指南

系统设计,样式指南,工具包,文档。其中一些是针对顶级公司/网站的设计指南

Website                            Description
Material Design Google的材料设计
Ant Design 企业级产品设计系统s
Apple Design Resources 使用Apple设计和UI的指南和模板
Primer 使用GitHub的设计系统进行设计,构建和创建
Alta UI Oracle的设计系统和工具包
Pulse 设计系统,指南和React组件库
Bolt 强大的Twig和Web组件驱动的UI组件
Clarity Design System UX准则,HTML / CSS框架和Angular组件
AtlasKit Atlassian的官方UI库,根据Atlassian设计指南构建
Audi Design Resources 奥迪UI设计系统和工具包
Carbon Design Systems Carbon是IBM针对产品和体验的开源设计系统
Yelp Style Guide Yelp样式指南,组件和工具包
Comet 可视语言,组件和设计资产的可扩展设计系统
ETrade Design System 将金融与简单易用融为一体的指南和工具包
Fundamental Library 开源和社区驱动的项目,以实现一致的用户界面
Infor Design 为Infor产品创造有意义的体验的准则和资源
Lexicon 制作精美UI的体验语言
Mailchimp UI/UX Mailchimp的样式指南和组件
Marvel Style Guide 设计原则和组件集
Microsoft Fluent UI Microsoft的UX框架集合
Pluralsight Design System 包含用于Pluralsight设计的组件的设计指南
Polaris 为Shopify的所有商家创造出色体验的设计系统
Mozilla Protocol 协议是Mozilla和Firefox网站的设计系统
SendGrid Style Guide UI库,用于在SendGrid上开发一致的UI / UX
VTEX Styleguide VTEX中与产品设计相关的可重用模式,组件和资产
Rizzo 带有UI组件,JS组件,小部件等的样式指南
Atomize UI框架,可帮助开发人员与设计人员协作并轻松构建一致的用户界面
StyleGuides.io 500多个样式指南的目录
Done Design System 开源设计系统,指南和组件
Skoda Brand System 开发Skoda品牌应用程序的设计指南
Spectrum Adobe的设计系统提供了组件和工具,以帮助产品团队更有效地工作,并使Adobe的应用程序更具凝聚力。
Asphalt Gojek的设计语言系统。准则和组件的集合,可创建出色的用户体验。
Laws of UX 设计人员在构建用户界面时必须考虑的关键原则的集合。

在线设计工具

各种各样的在线设计工具,从照片编辑器到线框图等等

Website                            Description
Figma 在线图形设计工具(免费和付费选项)
Vectr 免费矢量图形软件
Taler 数以百计的可自定义模板可在几分钟内创建社交媒体横幅设计
Canva 创造精美的设计(免费和付费)
Get Waves 免费的SVG波形发生器,可制作用于网页设计的独特SVG波形
Clippy 简单的CSS剪切路径制作工具
Fancy Border Radius 在CSS中指定边界半径的八个值(border-radius generator)
Wireframe.cc 线框图工具(免费和付费)
Fotor 照片编辑和设计制作人
Pixlr 在线照片编辑器
Animoto Video Maker 在线制作视频
RemoveBG 删除图像背景
Photo Creator 创建自己的照片,而不是搜索库存
Visme 创建演示文稿,信息图表等
Infogram 创建信息报
ChartGo 在线创建图表
Cartoon Photo 将照片变成卡通
Logo Maker 创建自定义徽标
Whimsical 线框,图表等(4个免费)
Whiteboard 在线绘图工具
Octopus 站点地图构建器
CTA Button Maker 创建号召性用语按钮
Blobmaker Blobmaker是一种免费的生成设计工具,可帮助您快速创建随机,独特和有机外观的SVG形状
Personas 现代的嬉戏头像生成器
SoftUI Soft UI(同态)CSS生成器
Photopea 在线Photoshop编辑器
Excalidraw 虚拟白板,用于素描手绘图
Diagrams 图表软件和流程图制作器
MapInSeconds 使用地图可视化数据的简单方法
Grid Malven 创建CSS网格时要参考的CSS网格备忘单
Flex Malven 使用Flexbox时要参考的Flexbox网格备忘单
Smart Upscaler 以2-4倍的分辨率升级图像
GetAvataaars Fang-Pen Lin使用Pablo Stanley素描库制作的有趣且色彩丰富的免费化身网站生成器工具
Big Heads Robert Broersma的Big Heads轻松为您的项目生成化身。
Webflow 打破代码障碍,更快地建立更好的商业网站。没有编码。
Trace 立即从照片中删除背景
Neumorphism.io 生成Soft-UI CSS阴影代码
DB Designer 免费在线设计数据库
Ui Bakery 直观地创建功能完善的Web应用程序
Faux 将真实代码转换为伪代码
Rive 实时交互式设计工具,使您可以设计,制作动画并将其立即集成到任何平台中。
Unscreen 免费自动删除视频背景100%
Kodeshot 将您的源代码转换为文章,推文,消息,帖子的漂亮图片…
Wix 创建一个您引以为傲的网站
GTmetrix 网站速度和性能优化
Framer 是团队的原型制作工具
Draw.io 免费的在线图编辑器工具
UXWing SVG Editor 在线创建和编辑SVG
CSS Arrow 为自定义框创建和导出CSS代码,该框具有从侧面伸出的箭头。非常适合工具提示,弹出按钮等。

设计软件

UI,照片,3D建模等免费软件。Photoshop等付费软件的替代产品

Website                            Description
Gimp 与Photoshop类似的免费和开源图像编辑器
Gravit Designer 免费的全功能矢量图形设计应用程序,可在所有平台上使用
Blender 开源,免费动画,3D建模等
Raw Therapee 跨平台原始图像处理程序
Be Funky 在线设计程序
Krita 专为数字艺术家设计的素描和绘画程序
Pencil Project GUI原型制作软件
Inkscape 强大的免费设计工具
Adobe XD Adobe提供的免费设计工具
Shapes.so 可以在您的项目中用作代码的图标
Lunacy Windows版素描
InVision Studio InVision提供的免费屏幕设计工具
Darktable 免费和开源摄影工作流程应用程序和原始开发人员
Inpixio photo Editor 免费照片编辑器:仅适用于Windows
Colorpicker 开源色彩软件:轻松检索,操作和存储您的色彩!

设计灵感

这是一些获得设计和UI灵感的网站

Website                            Description
Behance 由不同创作者推荐的设计项目
Dribbble 由不同创作者推荐的设计项目
Httpster 展示来自世界各地的人们制作的网站
Microcopy Inspirations 精选的UX写作示例,微观示例和文案写作示例
Inspofinds 设计师和设计界的最新设计工作
Design Notes 产品设计师的免费在线资源库
Land Book 显示大量网站以帮助寻找灵感
Frontend Mentor 使用HTML,CSS和Javascript进行现实世界的UI挑战
Awwwards 在用户界面中对世界上最好的网站进行评级和收集的网站
Codrops 一个收集最佳UI思想和模式并为其提供教程的网站
SaaS Landing Page 发现顶级SaaS公司创建的最佳登录页面示例
Pages.xyz 策划和发现设计最好的网页
UI Movement UI Movement是一个设计爱好者社区,他们分享和讨论最有趣和独特的UI设计
lapa ninja 最佳目标网页灵感
Freefrontend 从CSS HTML和JavaScript免费的前端设计。最新工作部分设计
Webframe 发现美丽的webapp设计并从中得到启发
Collect UI 从每日ui档案库及其他收集的每日灵感。手工挑选,每天更新。
Graphic Burger 一个提供免费和痛苦图标,模型,UI工具包,文本效果和背景的网站。该网站的资源是免费和付费资源的组合。图标混合使用PNG,SVG,EPS和Sketch格式。一些资源令人困惑,因为免费内容中间有赞助商的内容。
Really Good Emails 一个向用户提供从客户服务到市场营销的大量公司电子邮件的站点。
Free Design Resource 一个提供字体,模型,模板图形和ui套件的站点。
Site Inspire siteInspire是最好的Web和交互式设计的展示。
Web Design Inspiration 一个网站设计灵感的网站,每天更新。
NavNav 响应式导航示例
Calltoidea 灵感的不同Web组件的集合。
MediaQueri.es 使用媒体查询和响应式网页设计的励志网站集合
Mulzli Search 搜索引擎以获取设计灵感
DeviantArt 获得3.7亿件艺术品以寻求灵感。
Design your way 收集不同的Web和移动设计

影像压缩

允许您压缩大图像的网站,以便节省更多空间

Website                            Description
TinyPNG 智能PNG和JPEG压缩
Optimizilla 在线JPEG和PNG优化器/压缩器,具有设置和存档下载
Compressor.io JPEG,PNG,GIF,SVG压缩
Squoosh.app 来自谷歌浏览器实验室的图像压缩
BulkResizePhotos 批量图像大小调整,压缩和转换,可在浏览器中执行所有任务(可离线运行)
iLoveIMG 最快的免费网络应用程序,可轻松修改图像
SvgOMG 在线SVG优化程序,具有很多设置,并且可以直接在其中剪切和粘贴svg代码。
CompressJPEG 压缩大小甚至超过5MB的JPEG图像
CompressNow JPEG,GIF,PNG压缩
Promo Image Resizer 免费图像和照片缩放器
Image Optimizer 带有质量选项的免费Image Optimizer
SVGminify 该工具删除了多余的信息,从而减小了SVG文件的大小
JPEG Optimizer 免费的在线工具,用于调整和压缩数字照片和图像的大小以在网络上显示
Resizing.app 在线调整图像大小
EZGif GIF动画制作器和图像编辑器,包括图像优化并支持WebP转换
OnlinePngtools 调整png大小而不会丢失透明背景。

Chrome扩展程序

适用于设计人员和网络开发人员的有用的Chrome扩展程序。

Website                            Description
WhatFont 在网页上识别字体的最简单方法。
WhatRuns 发现什么经营网站。框架,分析工具,Wordpress插件,字体-命名。
Web Developer 发现什么经营网站。框架,分析工具,Wordpress插件,字体-命名。
Awesome Screenshot & Screen Recorder 全页屏幕捕获和屏幕录像机-2合1。立即共享截屏视频
JSONView 验证和查看JSON文档。
JSON Lite 浏览器扩展程序,用于查看JSON文件。
Window Resizer 调整浏览器窗口的大小以模拟各种屏幕分辨率。
Responsive Viewer 响应式设计测试仪一次显示多个屏幕
BrowserStack 在任何台式机或移动浏览器上即时测试您的网页。
VisBug 使用JavaScript构建的开源Web设计调试工具
Keyframes 浏览器内CSS动画创建者。
Kontrast – WCAG Contrast Checker 在浏览器中实时快速检查和调整对比度,以满足WCAG 2.1要求
PerfectPixel 在已开发的HTML顶部添加半透明的图像叠加层,以轻松地在它们之间执行像素完美比较,这对于复制UI设计很有用。
Pesticide 将Pesticide CSS插入当前页面,概述每个HTML元素以更好地查看页面上的位置,这有助于构建布局。
Site Palette 设计人员和前端开发人员获取任何网站颜色的必备工具。
Mobile/Responsive Web Design Tester 测试可检测特定用户代理的自适应网页设计或移动页面。同时测试多个设备!
ColorZilla

其它工具

未分类的东西

Website                            Description
everysize.kibalabs.com 检查您的真棒响应式网页在各种尺寸下的外观是否都很好
Devhints.io 这是Internet上的少量备忘单集合
The Web Toolbox 适用于Web开发人员,程序员和设计人员的便捷,免费使用的工具集合。
WebDevTrick 一个著名的博客,其中包含许多惊人的HTML,CSS,JQuery设计。
css-tricks 免费的CSS技巧和针对初学者和高级用户的一些独特创意
Material Design Resizer 交互式查看器,可帮助设计人员在台式机,移动设备和平板电脑上测试材料设计断点
Nodesign.dev 面向几乎没有艺术才能的开发人员的工具集合
A11ygator 一个根据WCAG规则扫描网站的网络工具
Commitizen 命令行工具,用于根据标准格式化提交消息
CleanCss 代码编排,压缩程序,文件转换器的工具
Tiny helpers 面向Web开发人员的免费的单用途在线工具集合
CSS Ribbon Generator 该生成器将帮助创建纯CSS角功能区。
Can I Use 检查前端技术的跨浏览器兼容性。
kangax-js-compat-table 检查跨不同编译器,服务器/运行时和平台(桌面和移动)的JavaScript版本(ES5,ES6,ES2016 +等)的兼容性。
mydevice.io 最常用的设备分辨率,包括手机和平板电脑
Codepen 构建,测试和发现前端代码。
Responsively 设计人员和前端开发人员可以轻松在所有平台上进行设计和调试的工具
html2pdf.js 使用纯JS的客户端HTML到PDF呈现。
CSS Reference 所有CSS属性和定义的详细收集
Critical Path CSS Generator 为您的网页生成关键的CSS
SVG Gobbler 浏览器扩展程序,用于在网页上查找SVG并下载,复制到剪贴板或导出为PNG。
shortcode.dev 适用于HTML,CSS,JavaScript,Node,Artisan,Blade等的有用代码片段和代码示例的集合。
PlayCode Javascript游乐场。
All The Tags 所有HTML标记均已简要说明。
Vue Telemetry 揭示为任何网站提供支持的Vue插件和技术堆栈,或探索包含5500多个网站的数据库。
Grid.js Grid.js是一个使用TypeScript编写的免费开放源代码HTML表格插件。它适用于大多数JavaScript框架,包括React,Angular,Vue和VanillaJs。
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇