众所周知,玩儿设计素材很重要。绝大多数的设计作品的背后都有着多种多样素材作为支撑,图片、字体、图标等素材是设计作品中直观可见的组成部分,与此同时,设计创意和设计灵感则以相对隐性的方式参与到设计中来,同样很重要。除此之外,小工具、插件的运用还可以加速设计,而设计之外的各种信息和知识也会让设计更富有生命力。素材,的确重要。
今天我们搜集的200+网站构成颇为复杂,但是分类比较清晰,除开一部分开袋即食的资源站之外,还有一部分网站也会给设计师许多启发。不要犹豫,请收下吧~
图片素材
免费资源
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
在这里,遇到好资源!
实用的UI Kit素材:
《七月干货速递!一组配色超赞的UI KIT免费下载》六月干货大合集:
《对不起,我们来迟了!设计圈六月份干货合集!》无需多言,都是干货:
《月底福利!五月设计圈最新干货合集》