常用的前端设计工具分享
网页背景图、配色搭配、颜色选取都涵盖，因为自己的设计风格（太不谦虚了）比较素，所以使用的不多。 国内常用这个网站的是catfun.me，背景图选择都是这个网站的资源。
一个取色的网站，我给的这个分页叫“和色大辞典”，有很多不错的颜色。还提供颜色按使用量排行等功能。
一个查看色彩的网站，输入一个颜色的代码（支持类型很多），可以查看颜色的补色，类似颜色，分色，从浅到深渐变等等。做渐变效果等很有用。
设计一件令人头疼的实情就是找背景。这个网站提供了各式各样的背景图片，你还可以按分类查看。妈妈再也不担心我的背景图找不到啦！！
需要图标时，不妨来这里查查关键字。最近上线了收费图标功能，你可以直接向设计师购买图标的使用权。
寻找灵感之地，平时逛逛可以提高品位~
设计工具
图标素材/Web字体
http://www.galuca.com/ Galuca Project
http://www.handdrawnicons.com/ Hand Drawn Icons
http://icondrawer.com/ Icon Drawer - Free & Stock Icons for Mac OS X software, web design
http://appicontemplate.com/ App Icon Template
http://www.logostage.com/ Logo Stage - logo gallery for logo lovers
http://icomoon.io/ ❍ IcoMoon
http://gesturecons.com/ Gesturecons - Icons For Multi-Touch Interfaces
http://weloveicons.com/ We Love Icons: Mac, Windows and Linux PNG icons of the finest quality!
http://fontello.com/ Fontello - icon fonts generator
https://typekit.com/ Typekit
http://livicons.com/# LivIcons - Exclusive Truly Animated Icon Pack!
http://fortawesome.github.io/Font-Awesome/design.html Font Awesome Copy & Paste
http://cssfontstack.com/ CSS Font Stack :: A complete collection of web safe CSS font stacks :: Web Fonts
http://www.hdlogo.com/ 高清标志网 HDLOGO | 矢量标志下载 Vector Logo Download Free (AI, EPS, CDR)
http://theymakeicons.com/page/1 They Make Icons - Download Free Mac and Windows PNG, ICNS, ICO icons
http://icons8.com/ Free download of 1200+ icons in Windows 8 and iOS 7 style — Icons8
http://beta.weloveiconfonts.com/ We Love Icon Fonts
http://useiconic.com/ Iconic: Advanced icons for the modern web
http://www.tendollarfonts.com/ Ten Dollar Fonts - Home
http://jamiewilson.io/norwester/ Norwester - A Font by Jamie Wilson
http://ionicons.com/ Ionicons: The premium icon font for Ionic Framework
http://zenoes.com/archives/free-chinese-fonts.html 开源或免费中文字体
http://www.iconfont.cn/ Iconfont-阿里巴巴矢量图标库
http://ikons.piotrkwiatkowski.co.uk/ IKONS - 264 free vector icons from Piotr Kwiatkowski
原型设计工具
http://dapp.kerofrog.com.au/ Dapp - Design and make your own iPhone apps with generated code and mockups
http://uxpin.com/ UXPin: UX Design & Wireframing Tools As Beautiful As Your Work
https://moqups.com/ Quick Introduction to Moqups - Moqups
http://bootswatch.com/ Bootswatch: Free themes for Twitter Bootstrap
https://jetstrap.com/ Jetstrap - The Bootstrap Interface Builder
http://www.thinkintags.com/ Thinkintags
http://www.divshot.com/ Divshot: Interface Builder for Web Apps
http://www.boottheme.com/ BootTheme : Web Designer and Theme Generator for Twitter Bootstrap
http://bootswatchr.com/ BootSwatchr.com
https://www.fluidui.com/ Fluid UI - Mobile Prototypes for iOS, Android and Windows Apps
https://www.easel.io/ Easel - Web design in your browser
http://playground.webflow.com/ Webflow CSS Playground
https://01.org/rib/online/ Rapid Interface Builder
http://wireframe.cc/ wireframe.cc - minimal wireframing tool - for free
http://www.solidifyapp.com/ Solidify | Quick way to build prototypes for user testing
http://bootsnipp.com/ Gallery of free HTML snippets for Twitter Bootstrap. | Bootsnipp.com
https://projects.invisionapp.com/d/main#/dashboard Dashboard - InVision
http://www.fluidui.com/ Fluid UI - Mobile Prototypes for iOS, Android and Windows Apps
http://giveabrief.com/ Briefs
http://prototypr.com/ Prototypr - The best iOS apps prototyping tool
http://popapp.in/ POP - Prototyping on Paper | iPhone App Prototyping Made Easy
https://www.flinto.com/ Flinto – iPhone and iPad Prototyping
http://blakeperdue.com/ios7-wireframe-kit/ iOS 7 Wireframe Kit by @bperdue
http://adamwhitcroft.com/wirekit/ WireKit • An iPhone App Wireframing Kit
http://sneakpeekit.com/ Sketch sheets for Web Designers | Sneakpeekit
字体
http://cufon.shoqolate.com/generate/ cufón - fonts for the people
http://font.knowsky.com/ 字体下载大宝库_中文字体、英文字体下载、广告字体、设计英文字体、下载字体_Font.knowsky.com
http://www.fontsner.com/ Fontsner.com :: free fonts, best and cool fonts
http://www.ztxz.cn/ 字体下载网
http://cn.ffonts.net/ 免费字体下载
http://www.fontsquirrel.com/ Handpicked free fonts for graphic designers with commercial-use licenses. | Font Squirrel
http://www.urbanfonts.com/ Free Fonts, Cool Fonts - UrbanFonts.com
http://www.qiuziti.com/ 字体_字体下载_ps字体下载_书法字体-求字体网中文英文日文字体书法字体下载
http://1001freefonts.com/ 1001 Free Fonts - Download Free Fonts for Windows and Macintosh
http://www.dafont.com/ dafont.com
http://www.xiaa.net/ 字体管家3.1永久免费 - 字体下载安装很轻松 , 一键备份恢复你的字体 - 装机必备字体软件
http://www.homefont.cn/ 字体下载-字体下载之家-字体之家
http://www.whatfontis.com/ What Font is
http://zh.fonts2u.com/index.html Fonts2u.com
http://www.fontsquirrel.com/tools/webfont-generator Create Your Own @font-face Kits | Font Squirrel
图片
http://spritepad.wearekiss.com/# SpritePad - Create and edit css sprites
http://www.mypsd.com.cn/ 蚂蚁图库-千万级图片素材共享平台-图片素材共享和设计素材交流中心
http://www.seeklogo.com/ seeklogo.com - Logo Vector Download Free (Brand Logos) (AI, EPS, CDR, PDF, GIF, SVG)
http://logo-vector-free.blogspot.jp/ Free Logo Vector
http://downloads.dvq.co.nz/ Downloads by DVQ - Free for Personal & Commercial Use
http://www.deviantart.com/ deviantART: where ART meets application!
http://www.gettyimages.cn/ Getty Images 图片库 | 全球最大的商业图片网站,提供海量创意图片,影视素材及音乐素材
http://www.morguefile.com/ Morguefile.com free stock photos
http://www.freeimages.co.uk/ Free Images - Free Stock Photos
http://www.shutterstock.com/ 图片库，免版税图片和矢量图 - Shutterstock
http://www.istartedsomething.com/bingimages/ Bing Image Archive
http://www.turbophoto.com/Free-Stock-Images/ FREE STOCK IMAGES
http://sudasuta.com/665.html 25个优秀的免费商业图片网站_苏打苏塔设计量贩铺 | 苏打苏塔设计量贩铺
http://www.istockphoto.com/ iStock Photo: Royalty Free Stock Photography, Vector Art Images, Music & Video Stock Footage | iStock
http://www.adigitaldreamer.com/gallery/index.php Home - Free Royalty Free Stock Photography
http://compfight.com/ Compfight / A Flickr Search Tool
http://www.freephotosbank.com/ Free Photos - Free Stock Images
http://fpoimg.com/ FPOImg.com - Home
http://placekitten.com/ {placekitten}
http://placehold.it/ Placehold.it - Quick and simple image placeholders
http://www.getty.edu/about/index.html About the Getty
模板参考
http://www.freecsstemplates.org/ Free CSS Templates - Download free CSS templates
http://www.openwebdesign.org/ Open Web Design - Download Free Web Design Templates
http://www.opendesigns.org/ Free Web Templates, Resources & Tools | Open Designs
http://ui-patterns.com/ UI-Patterns.com
http://www.siteinspire.com/ All Websites — siteInspire
http://www.iconfans.com/ ICONFANS|图标粉丝网|专业图标界面设计论坛,软件界面设计,图标制作下载,人机交互设计
https://mockupstogo.mybalsamiq.com/projects Mockups To Go - All Projects | myBalsamiq
http://fltdsgn.com/ Flat UI Design | A showcase of flat UI design
http://www.fontwalk.de/ Fontwalk
http://incorporated.sendtoinc.com/ Jekyll Incorporated - Modern Blog for Companies
优质线上素材
http://www.pixeden.com/ Premium & Free Design and Web Resources | Pixeden
http://subtlepatterns.com/ Subtle Patterns | Free textures for your next web project
http://freethroww.com/ freethroww
http://webmaster-deals.com/ Webmaster-Deals | Great deals for Webmasters
http://www.graphicsfuel.com/ GraphicsFuel.com | GraphicsFuel – Download Free Photoshop (PSD) files – Useful Design Resources!
http://www.andexdesign.com/ Andex Design
http://crazypixels.net/category/freebies/ Freebies | Crazy Pixels
http://medialoot.com/ Premium Graphic Design Resources | MediaLoot
http://monkee-boy.com/blog/category/freebie-fridays/ Monkee-Boy Blog | Freebie Fridays
http://submit.shutterstock.com/ Shutterstock - Make money with your photos!
http://graphicriver.net/ Design Templates, Photoshop Brushes, and Stock Vectors | GraphicRiver
http://apppsd.com/ APPPSD 最新UI设计PSD下载
http://www.smashingmagazine.com/tag/freebies/ Tag "Freebies" on Smashing Magazine
http://dmonzon.com/ dmonzon.com
http://pixelsdaily.com/ PixelsDaily | Free PSDs & Resources for Designers
http://www.pixelqraft.com/ Pixelqraft - Free PSD's & Resources for Web Designers by Maki Myers
http://www.psdgraphics.com/ Photoshop backgrounds, textures and icons | PSDGraphics
https://creativemarket.com/ Handcrafted Fonts, Graphics, Themes and More ~ Creative Market
http://subtlepatterns.com/thumbnail-view/ Subtle Patterns | Free textures for your next web project
http://www.teehanlax.com/tools/ Teehan+Lax - Defining Experience
http://www.zcool.com.cn/ 站酷（ZCOOL） - 设计师互动平台 - 交流设计.分享快乐
http://www.premiumpixels.com/ Free PSDs & Resources for Web Designers by Orman Clark
http://designmodo.com/the-bricks-addons/ The Bricks
http://www.flashmint.com/ Flash Website Templates - FlashMint
http://outlawdesignblog.com/ Outlaw Design Blog
http://www.brusheezy.com/ Free Photoshop Brushes at Brusheezy!
http://www.inkydeals.com/ InkyDeals - Daily design deals and design bundles for creatives
http://www.codebasehero.com/ Codebase Hero
http://www.pxm-tuts.com/ Pixelmator Tutorials | PXM-Tuts
http://www.duidea.com/ 独创意设计-包装设计欣赏|标志设计欣赏|创意设计|photoshop教程|画册设计欣赏
http://unsplash.com/ Unsplash
http://www.behance.net/ Online Portfolios on Behance
http://open.commonly.cc/ The Open Bundle
http://ghostlypixels.com/index.php Premium PSD Themes - All PSDs - GhostlyPixels.com
http://www.designyourway.net/drb/ Design Resource Box
http://www.awwwards.com/ Awwwards - Website Awards - Best Web Design Trends
http://sketchmine.co/ SketchMine
http://sketchtips.tumblr.com/ sketchtips.tumblr.com
http://www.sketchappsources.com/ Sketch App Sources - Free graphical resources - Sketch Freebie - Free Sketch Files for Sketch software
https://www.freevectormaps.com/ Free Vector Maps | Royalty-Free Vector Maps
http://kindzadza.net/ KinDzaDza
http://tileabl.es/ Tileables — Never Ending Patterns
http://graphicburger.com/ GraphicBurger
http://www.improvepresentation.com/ High Quality Presentation Templates For Powerpoint And Keynote
http://www.stockeon.com/
Royalty Free Stock Footage, Video Clips, Apple Motion Templates,
Adobe After Effects Templates, 3D, Music and SFX - Stockeon.com
http://picsays.com/ 图说 | 专注信息图表达
http://njimedia.com/ios-7-ui-stencil-for-omnigraffle/ iOS 7 UI Stencil for Omnigraffle — NJI MEDIA
http://www.noisli.com/ Noisli - background noise and color generator for working and relaxing
http://designerboard.co/#popular Designerboard - Behance, Dribbble & DesignerNews, all in one
http://www.designcuts.com/ Design Cuts - Discounted Design Bundles for Creative Professionals
http://www.behance.net/gallery/Basiliq-Freehand-UI-Kit/10482323 Basiliq - Freehand UI Kit on Behance
http://www.awwwards.com/30-free-ui-kits.html 30 Free UI Kits
http://responsivewebinc.com/premium/ Index of /premium
http://www.cssauthor.com/free-mockup-templates-psd-designs/ 500+ Free Mockup Templates PSD Designs » Css Author
http://nav80.com/ Nav80设计师网址导航
设计博客
http://cssauthor.com/ CSS Author is a Design and Development related blog -
http://blog.spoongraphics.co.uk/ Blog.SpoonGraphics
PSDs
http://freepsdfiles.net/ Free PSD Files, Templates, Graphics, Fyers , Business cards | Free PSD Files
http://lea.verou.me/css3patterns/ CSS3 Patterns Gallery
插件/软件/服务
http://guideguide.me/ GuideGuide
http://bjango.com/articles/actions/ iOS Photoshop Actions & Workflows
http://imageoptim.com/ ImageOptim — make websites and apps load faster (Mac app)
http://www.pngexpress.com/ PNG EXPRESS | Automated Design Delivery for Photoshop
http://www.cutandslice.me/ Cut&Slice me - Photoshop plugin to export your assets - cut and slice me
http://css3ps.com/ Photoshop 2 CSS3
http://css3generator.com/ CSS3 Generator
http://compass-style.org/ Compass Home | Compass Documentation
http://html.adobe.com/ Adobe & HTML
http://theolabrothers.com/sip/ Sip App
http://cssrefresh.frebsite.nl/ CSSrefresh - automatically refresh CSS files
http://uifaces.com/ User Inter Faces
http://drawscri.pt/ Drawscript - convert Illustrator shapes into code
http://www.deviceshot.com/index.jsp Device Shot
http://www.cssmatic.com/ The most complete CSS tools for web designers | CSSmatic
http://yslow.org/ YSlow - Official Open Source Project Website
http://www.tagxedo.com/ Tagxedo - Word Cloud with Styles
http://worditout.com/ WordItOut - Generate word clouds (and make custom gifts)
http://www.imagechef.com/ic/word_mosaic/ ImageChef - Word Mosaic
http://timc.idv.tw/wordcloud/zh/# HTML5 文字雲：文章詞彙分析機
https://www.graffletopia.com/ Awesome OmniGraffle stencils | Graffletopia
http://www.noisetexturegenerator.com/ Noise Texture Generator v2.1
http://www.eigenlogik.com/spectrum/ Spectrum — App for designing color schemes
http://www.antetype.com/ ANTETYPE: The new prototyping and design application for user interface designers - by ERGOSIGN
http://codemirror.net/ CodeMirror
http://docs.emmet.io/ Emmet Documentation
https://github.com/sergeche/codemirror-movie sergeche/codemirror-movie · GitHub
http://maker.github.io/ratchet/ Ratchet
https://www.flinto.com/strike Flinto – Icon Strike!
https://css.markupwand.com/ css:markupwand | Convert Photoshop to CSS3
http://proto.io/freebies/onoff/ On/Off Flipswitch HTML5/CSS3 Generator - Proto.io
http://screensiz.es/ Screensiz.es
http://www.colorzilla.com/gradient-editor/ Ultimate CSS Gradient Generator - ColorZilla.com
http://maps.stamen.com/#toner/12/37.7706/-122.3782 maps.stamen.com
https://www.mapbox.com/# MapBox | Fast and beautiful maps
https://addy.co/ Addy - Location, simplified
http://tridiv.com/ Tridiv | CSS 3D Editor
http://psdfonts.com/ .psd fonts
http://www.webink.com/webfontplugin Photoshop Fonts - Web Font Plug-in for Photoshop
UI库/框架
http://docs.kissyui.com/ KISSY - Keep It Simple & Stupid, Short & Sweet, Slim & Sexy...
http://portnine.com/bootstrap-themes Bootstrap Themes
http://cssdeck.com/ HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck
http://ui.operamasks.org/website/homepage.html operamasks-ui首页
http://lessframework.com/ Less Framework 4
http://dhtmlx.com/ JavaScript UI Library, Ajax Components & HTML5 Framework - DHTMLX
http://groundwork.sidereel.com/?url=home Groundwork CSS ♥ A Responsive HTML5, CSS & Javascript Framework
http://usablica.github.io/front-end-frameworks/compare.html?v=2.0 CSS Front-end Frameworks with comparison - By usabli.ca
http://www.bootcss.com/ Bootstrap中文网
http://fontcustom.com/ Font Custom
http://foundation.zurb.com/ Foundation: The Most Advanced Responsive Front-end Framework from ZURB
http://www.kendoui.com/ Kendo UI - jQuery HTML5 framework for desktop, mobile app development, HTML5 data visualization
https://developer.atlassian.com/design/ Atlassian Design Guidelines
https://docs.atlassian.com/aui/latest/ AUI - Flat Pack
https://www.blossom.io/bee Bee - A Collection of lightweight Dart Web UI Components by @bee_dart
https://www.foundationmade.com/ FoundationMade - Premium Zurb Foundation Themes
http://www.99lime.com/ HTML KickStart - Ultra–Lean HTML Building Blocks for Rapid Website Production - KickStart your Website Production
http://www.polymer-project.org/ Welcome - Polymer
http://purecss.io/ Pure
http://typeplate.com/ Typeplate » A typographic starter kit encouraging great type on the Web
http://roots.cx/axis/ roots | where it all begins
http://aozora.github.io/bootplus/index.html Bootplus
http://alloyui.com/ AlloyUI
http://icalialabs.github.io/furatto/index.html Furatto
http://h5bp.github.io/Effeckt.css/dist/ Effeckt.css
http://www.bootstraptor.com/ Twitter Bootstrap templates free and premium Bootstrap starter KIT BOOTSTRAPTOR // beta - Page 1 of 2
http://www.uibox.in/ UIBox - Curated HTML, CSS, JS UI Component Library
http://www.modulz.co/ Modulz · Ready-made, customizable, HTML landing page sections.
http://pikock.github.io/bootstrap-magic/index.html Bootstrap Magic : Generate your own bootstrap theme quickly and easily
http://getuikit.com/ UIkit
http://semantic-ui.com/ Getting Started | Semantic UI
http://startbootstrap.com/ Start Bootstrap - Free HTML Templates for Bootstrap 3
http://fis.baidu.com/ F.I.S - 前端集成解决方案
http://daneden.me/animate/ Animate.css - a bunch of plug-and-play CSS animations
http://www.malot.fr/bootstrap-datetimepicker/index.php DateTime Picker · Bootstrap
http://jasny.github.io/bootstrap/ Bootstrap
http://www.html5admin.com/ HTML5 ADMIN | HTML5 Admin Template using Bootstrap 3
http://zurb.com/ink/ Ink: A Responsive Email Framework from ZURB
http://angular-ui.github.io/ AngularUI for AngularJS
http://typo.sofish.de/ TYPO.CSS - 中文网页重设与排版
http://ionicframework.com/ Ionic: The Most Advanced HTML5 Mobile App Framework
视频制作
http://www.aemoban.com/ AE模板-免费AE模板资源分享站！
http://www.webplatform.org/ Your Web, documented · WebPlatform.org
配色
http://pltts.me/ PLTTS - Find your colour palette
http://www.colorhexa.com/ Color Hex - ColorHexa.com
http://www.colourlovers.com/ Color Trends + Palettes :: COLOURlovers
http://color.hailpixel.com/ color.hailpixel.com · Swatch you doing?
http://webcolourdata.com/ Colours
http://flatuicolors.com/ Flat UI Colors
http://www.lavishbootstrap.com/ [GFW]Lavish - Generate your own Bootstrap color scheme
http://rriepe.github.io/1pxdeep/ 1pxdeep | A Bootstrap theme exuding color and embracing flat
http://colourco.de/ Colourco.de - find your colour scheme
http://colrd.com/palette/ Discover Palettes — Art & Design Inspiration at ColRD.com
http://sidebar.io/ Sidebar: The 5 best design links, every day
https://html2slim.herokuapp.com/ HTML2slim
http://upgrade-bootstrap.bootply.com/# Bootstrap 3 Upgrade Service. Convert Bootstrap 2.x to 3.
https://layervault.com/~ All Projects - LayerVault
http://adamwhitcroft.com/ Home | Adam Whitcroft
http://dangrover.github.io/phonefinger/ PhoneFinger
http://www.pentotype.com/ wireframes for great apps | pentotype
http://www.createcss3.com/ Create CSS3 - Easy CSS3 Generator
http://madeforios7.tumblr.com/ Made for iOS 7
http://snapsvg.io/ Snap.svg - Home
http://adrien-heury.net/designers-checklists/index.html Designers checklist advices — Project by Adrien Heury
http://www.cnblogs.com/lhb25/p/awesome-css-libraries-boilerplates-and-frameworks.html 优秀工具推荐：超实用的 CSS 库，样板和框架 - 梦想天空（山边小溪） - 博客园
http://thomasjbradley.ca/ Thomas J Bradley · Open Web Professor, Developer & Writer—Ottawa, Canada
http://lab.rayps.com/lsg/ Long Shadow Generator
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/ Absolute Horizontal And Vertical Centering In CSS | Smashing Coding
http://html5ify.com/fks/ FKS Documentation
http://copypastecharacter.com/ ✿ Our favorite set — CopyPasteCharacter.com
课程学习
https://tutsplus.com/ Tuts+ Premium | The best way to learn creative and technical skills.
http://www.upgradingtorails4.com/ Upgrading to Rails 4
http://motioncasts.tv/ motioncasts.tv - Quality RubyMotion screencasts and tutorials.
设计教程
http://spyrestudios.com/30-excellent-logo-design-tutorials-and-walkthroughs/ 30 Excellent Logo Design Tutorials And Walkthroughs | SpyreStudios
http://startupsthisishowdesignworks.com/ Startups, This Is How Design Works – by Wells Riley
http://photoshopetiquette.com/ Photoshop Etiquette
http://www.pentagram.com/what-type-are-you/ Pentagram - What type are you?
http://browserdiet.com/zh/ How to lose weight (in the browser)
http://www.uisdc.com/diy-5-tools-for-creating-killer-infographics 5个免费创建信息图的杀手级工具
http://learn.shayhowe.com/advanced-html-css/ An Advanced Guide to HTML & CSS
http://sachagreif.com/ebook/ Step by Step UI Design eBook
http://nathanbarry.com/app-design-handbook/ The App Design Handbook | Nathan Barry
http://dribbbleboard.com/#popular Dribbbleboard - a more convenient way of browsing at Dribbble
http://designingfortheweb.co.uk/book/ Designing for the Web – Contents
http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077 Google Visual Assets Guidelines - Part 1 on Behance
http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-2/9084309 Google Visual Assets Guidelines - Part 2 on Behance
http://cdn.sixrevisions.com/demos/0345-new_html5_form_input_types/new-html5-form-input-types.html New HTML5 Form Input Types
http://uptodate.frontendrescue.org/ How to keep up to date on Front-End Technologies - The Recipe
http://www.awwwards.com/how-to-create-effective-icons.html How To Create Effective Icons
