一网打尽！200+值得收藏的设计师资源站

众所周知，玩儿设计素材很重要。绝大多数的设计作品的背后都有着多种多样素材作为支撑，图片、字体、图标等素材是设计作品中直观可见的组成部分，与此同时，设计创意和设计灵感则以相对隐性的方式参与到设计中来，同样很重要。除此之外，小工具、插件的运用还可以加速设计，而设计之外的各种信息和知识也会让设计更富有生命力。素材，的确重要。

今天我们搜集的200+网站构成颇为复杂，但是分类比较清晰，除开一部分开袋即食的资源站之外，还有一部分网站也会给设计师许多启发。不要犹豫，请收下吧：）

本文头图为4dd（http://4dd.jp/）工作室首页图片

图片素材

免费资源

Unsplash — www.unsplash.com

Picjumbo — www.picjumbo.com

Gratisography — www.gratisography.com

Superfamous — www.superfamous.com

Little Visuals — www.littlevisuals.co

Split Shire — www.splitshire.com

Pixabay — www.pixabay.com

I’m Free — www.imcreator.com/free

New Old Stock — www.nos.twnsnd.co

Function Free Photos — http://wefunction.com/category/free-photos/

Paul Jarvis Free Photos — http://pjrvs.com/a/photos

Zoomy Images — http://zoomyimages.com/

同为干货，不容错过：《免费高清第二波！12个无版权限制的大图特供网站》

收费资源

Dollar Photo Club — http://www.dollarphotoclub.com

Compfight — www.compfight.com

Stocksy — www.stocksy.com

Placeit Product Shots — www.placeit.net

iStockphoto — http://istockphoto.com

offset — http://www.offset.com

Corbis — http://www.corbisimages.com

Facebox — http://facebox.io

排版设计

Okay Type — www.okaytype.com

Typekit — www.typekit.com

My Fonts — www.myfonts.com

Fonts — www.fonts.com

Font Squirrel — www.fontsquirrel.com

Da Font — www.dafont.com

Google Fonts — www.google.com/fonts

1001 Free Fonts — www.1001freefonts.com

Lost Type Co-op — www.losttype.com

Ico Moon — www.icomoon.io

Font-To-Width — http://font-to-width.com/

把握排版设计的原则：《打造顺畅阅读体验！版式设计有哪些原则和方法？》

视觉稿设计工具

InVision — www.invisionapp.com

Mockupr — www.mockupr.com

Flinto — www.flinto.com

Flinto Icon Strike! — www.flinto.com/strike

Webflow — www.webflow.com

Mockuuups — www.mockuuups.com

Red Pen — https://redpen.io

PSD Covers — http://www.psdcovers.com/

追求高大上的视觉设计是一种精神：《将高大上进行到底！40款WORDPRESS和JOOMLA模板》

线框图

Moqups — www.moqups.com

Wireframe.cc — ww.wireframe.cc

Mockflow — www.mockflow.com

Mockingbird — www.gomockingbird.com

Flair Builder — http://flairbuilder.co

Balsamiq — http://balsamiq.com/products/mockups/

Axure — http://www.axure.com/

Justinmind — http://www.justinmind.com/

UX Pin — http://uxpin.com

摸清差异：《涨姿势！聊聊线框图、原型和视觉稿的区别》

原型设计

InVision — http://www.invisionapp.com

Mixture — www.mixture.io

Flinto — www.flinto.com

Gridset — www.gridsetapp.com

Marvel — https://marvelapp.com

Webflow — https://webflow.com

Red Pen — https://redpen.io

Proto — http://proto.io

Iconii — http://iconii.com

Macaw — http://macaw.co/

Froont — http://froont.com

产品设计过程中是如何使用原型的：《脑洞大开！你应该知道的产品设计14招》

响应式设计

Responsive.is — http://responsive.is/typecast.com

Gridpak — www.gridpak.com

Responsive Nav — www.responsive-nav.com

Off Screen Navigation — http://tympanus.net/Development/MultiLevelPushMenu/

Responsive Web Design Test — www.designmodo.com/responsive-test/

Media Queries — www.mediaqueri.es

Foundation by Zurb — www.foundation.zurb.com

Jetstrap — www.jetstrap.com

Webflow — www.webflow.com

Gridset — www.gridsetapp.com

BrowserStack — www.browserstack.com

Sassaparilla — http://sass.fffunction.co

Sidebar Transitions — http://tympanus.net/Development/SidebarTransitions/

Dimensions (Chrome Extension) — https://chrome.google.com/webstore/detail/dimensions/hdmihohhdcbejdkidbfijmfehjbnmifk?hl=en

Responsive Grid System — http://responsive.gs/

Responsi — http://respon.si

不容错过的响应式设计：《干货！设计师必读的15个响应式网页设计教程》

色彩

0 to 255 — www.0to255.com

Colour Lovers — www.colourlovers.com

Brand Colors — www.brandcolors.net

Adobe Kuler Color Wheel — https://kuler.adobe.com/create/color-wheel/

Color Scheme Designer — www.colorschemedesigner.com

Hex to RGB Converter — http://hex.colorrrs.com

Coleure — http://coleure.com/

Colllor — http://colllor.com/

Palette for Chrome — https://chrome.google.com/webstore/detail/palette-for-chrome/oolpphfmdmjbojolagcbgdemojhcnlod

玩转色彩，抓住眼球：《网页设计新趋势！教你轻松玩转设计中的纯色和渐变效果》

CSS

Animate.css — www.daneden.me/animate

CSS3 Animation Cheat Sheat — http://www.justinaguilar.com/animations/index.html

Can I Use? — www.caniuse.com

Animation Fill Code — www.animationfillcode.com

Pure — http://purecss.io/

The Magic of CSS — http://adamschwartz.co/magic-of-css/

使用CSS3制作自然流畅界面看这篇《这个比较高端了！CSS3动画帧数科学计算法》

HTML 5

HTML5 Please — www.html5please.com

Can I Use? — www.caniuse.com

从这里，读懂HTML 5: 《HTML5是如何成为网页设计的未来的》

JavaScript/jQuery

Unheap — http://www.unheap.com

Touchy Js — http://touchyjs.org/

FitText — http://fittextjs.com

Touche.js — http://benhowdle.im/touche/

Cortado.js — http://benhowdle.im/cortado/

FlickFeed — http://benhowdle.im/flickfeed/

Heisenburg.js — http://heisenbergjs.github.io/heisenberg/

Pickadate.js — http://amsul.ca/pickadate.js/

Lettering.js — http://letteringjs.com/

Freetile — http://yconst.com/web/freetile/

Backstretch — http://srobbin.com/jquery-plugins/backstretch/

Hook — http://usehook.com

Echo JS — http://www.echojs.com/

Up to date — http://uptodate.frontendrescue.org/

JS Fiddle — http://jsfiddle.net/

技术和思想一样重要：《优秀界面的终极形态：隐形的界面》

免费PS素材

PSDS.co — www.psds.co

Fribbble — www.fribbble.com

Premium Pixels — www.premiumpixels.com

Teehan+Lax iOS 7 Gui PSD (iPhone)— www.teehanlax.com/tools/iphone

Teehan+Lax iOS 7 Gui PSD (iPad) — www.teehanlax.com/tools/ipad/

iPhone Mockuuups — www.mockuuups.com

Freebiesbug — http://freebiesbug.com/

Marvel — https://marvelapp.com/resources/

Ui Space — http://uispace.net

DB Freebies — http://dbfreebies.co

365 PSD — http://365psd.com/

Pixel Buddha — http://pixelbuddha.net/

Pixels Daily — http://pixelsdaily.com/

拿好这些PSD！《八月设计资源来了！30个精致有范的UI KIT免费下载！》

图标设计

Other Icons — www.othericons.com

Batch — www.adamwhitcroft.com/batch/

Icon Sweets — www.iconsweets.com

Ico Moon — www.icomoon.io

Flat Icon — http://www.flaticon.com

The Noun Project — http://thenounproject.com

Perfect Icons — http://perfecticons.com/

Iconfinder — www.iconfinder.com

看偏教程调整一下：《PS教程！手把手教你打造复古的牛皮质感通讯簿图标》

压缩图片

Tiny Png — www.tinypng.com

JPEGmini — www.jpegmini.com

ImageOptim — www.imageoptim.com

好技巧，莫错过：《朽木可雕！10个技巧让你的坏图瞬间变高大上》

PS工具和插件

Mac Rabbit Slicy — www.macrabbit.com/slicy/

Renamy — www.renamy.com

Blendme.in — www.blendme.in

这里强烈推荐一款Grid外挂教程：《PS 参考线插件GuideGuide下载及使用说明》，谁用谁知道！

会计

Freeagent — www.freeagent.com

Freshbooks — www.freshbooks.com

Xero — http://www.xero.com/

Crunch — http://www.crunch.co.uk

Slimvoice — http://slimvoice.co/

Ballpark — http://www.getballpark.com

法律

Andrew Clarke’s Contract Killer — www.stuffandnonsense.co.uk/projects/contract-killer/

Proper App — www.properapp.com

iubenda — www.iubenda.com

Docracy — http://www.docracy.com/

灵感

Siteinspire — www.siteinspire.com

Land Book — www.land-book.com

Awwwards — www.awwwards.com

The Best Designs — www.thebestdesigns.com

Dribbble — www.dribbble.com

Behance — www.behance.com

Niice — http://niice.co

One Page Love — http://onepagelove.com/

从案例中收获灵感：《木有设计灵感怎么办？这9枚网站帮到你！》

托管

Propagated Yet? www.propagatedyet.com

Instant Domain Search — www.instantdomainsearch.com

Domainr — https://domai.nr/

工作平台

Crew — www.pickcrew.com

Juiiicy — www.juiiicy.com

Dribbble Jobs — www.dribbble.com/jobs

Authentic Jobs — www.authenticjobs.com

Workfu — www.workfu.com

Onsite — www.onsite.io

地图

Mapbox — www.mapbox.com

Leaflet — www.leafletjs.com

Google Map Builder — http://googlemapbuilder.mynameisdonald.com/

Snazzy maps — http://www.snazzymaps.com

在线学习平台

Treehouse — www.teamtreehouse.com

Steer — www.steer.me

Lynda — www.lynda.com

Codeacademy —www.codecademy.com

Code School — www.codeschool.com

Udacity — www.udacity.com

Code.org — http://code.org/

WebPlatform — http://www.webplatform.org/

在线学习有路子：《自给自足！学习网页设计必知的20个教学资源站》

播客

The Freelance Web — www.thefreelanceweb.com

Unfinished Business — www.unfinished.bz

Happy Monday — www.happymondaypodcast.com

Boagworld — www.boagworld.com/show/

Shop Talk Show — www.shoptalkshow.com

The Back to Front Show — www.backtofrontshow.com

The Big Web Show — www.zeldman.com/category/the-big-web-show/

Upfront Podcast — www.upfrontpodcast.com

The Industry — www.theindustry.cc/category/podcast/

Iterate — http://www.imore.com/iterate

设计社区

Designer News — https://news.layervault.com/

Designers Talk — http://www.designerstalk.com/forums/

Quora — https://www.quora.com/

Stack Exchange — http://stackexchange.com/sites

Reddit /Design — http://www.reddit.com/r/Design/

Reddit /Web Design — http://www.reddit.com/r/web_design

泡在社区学手艺：《知己知彼百战不殆！程序员常去的14个顶级开发社区》

写作平台

Medium — www.medium.com

Svbtle — https://svbtle.com/

Ghost — https://ghost.org/

WordPress — www.wordpress.com / www.wordpress.org

Squarespace — http://squarespace.com

Roon — https://roon.io/

演讲

Speaking.io — www.speaking.io

Mark Boulton’s Tips — www.markboulton.co.uk/journal/speakingtips

On Speaking by Brad Frost — www.bradfrostweb.com/blog/post/on-speaking/

Public speaking for the (formerly) terrified by Rachel Andrew — www.rachelandrew.co.uk/archives/2012/05/02/public-speaking-for-the-formerly-terrified/

10 Kick ass presentation techniques (Treehouse) — http://blog.teamtreehouse.com/10-kick-ass-presentation-techniques

Suggestions for Speakers by Frank Chimero — http://frankchimero.com/blog/suggestions-for-speakers/

The best advice on public speaking by Ladies in Tech — http://ladiesintech.com/the-best-advice-on-public-speaking/

You’re paying to speak by Remy Sharp — http://remysharp.com/2014/03/07/youre-paying-to-speak/

支付

Stripe — www.stripe.com

GoCardless — www.gocardless.com

Plasso — https://plasso.co

便捷工具

Copy Paste Character — www.copypastecharacter.com

JustDelete.me — www.justdelete.me

What’s my UDID? — www.whatsmyudid.com

Shapecatcher — www.shapecatcher.com

UI Names — http://uinames.com/

UI Faces — http://uifaces.com/

UI Blurbs — http://uiblurbs.com

Density Converter — http://density.brdrck.me

LayerVault — https://layervault.com

Nice Entity — http://nice-entity.com

PlaceIMG — http://placeimg.com/

lorempixel — http://lorempixel.com/

Facebox — http://facebox.io

图书

Grid Systems in Graphic Design — http://amzn.to/1aNQC8B

HTML & CSS: Design and Build Web Sites — http://amzn.to/1biuvJi

How to be a Graphic Designer, Without Losing Your Soul — http://amzn.to/1eooTjo

The Shape of Design — http://www.buyolympia.com/q/Item=frank-chimero-the-shape-of-design

A Practical Guide to Designing for the Web — http://www.fivesimplesteps.com/products/a-practical-guide-to-designing-for-the-web

Hardboiled Web Design — https://shop.smashingmagazine.com/hardboiled-web-design.html

Designing for the web (Free) — http://designingfortheweb.co.uk/

Smashing Book #4 — https://shop.smashingmagazine.com/smashing-book-4-new-perspectives-on-web-design.html

The Geometry of Type — http://amzn.to/1ekRiSV

Insites: The Book — http://viewportindustries.com/insites-the-book

Don’t Make Me Think — http://amzn.to/1ekRul6

Above the Fold — http://amzn.to/1cLAIdv

Design is a Job — www.abookapart.com/products/design-is-a-job

Thinking with Type, Second Revised and Expanded Edition: A Critical Guide for Designers, Writers, Editors, and Students — http://amzn.to/1ixVKOc

The Visual Display of Quantitative Information — http://amzn.to/1n8vezb

在这里，遇到好资源！