免费资源
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 — Free Photos
Paul Jarvis Free Photos — Free High-Resolution Photos / Paul Jarvis
Zoomy Images — Zoomy Images
同为干货,不容错过:《免费高清第二波!12个无版权限制的大图特供网站》
收费资源
Dollar Photo Club — Dollar Photo Club
Compfight — www.compfight.com
Stocksy — www.stocksy.com
Placeit Product Shots — www.placeit.net
iStockphoto — http://istockphoto.com
offset — Premium Stock Photos + Illustrations
Corbis — 图库图片,免版税图片,插画
Facebox — Facebox: Stock Avatars for User Interface and Presentations
排版设计
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 — Font-To-Width
把握排版设计的原则:《打造顺畅阅读体验!版式设计有哪些原则和方法?》
视觉稿设计工具
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 — Red Pen
PSD Covers — Premium & Free Photoshop Cover Actions, product mockups
追求高大上的视觉设计是一种精神:《将高大上进行到底!40款WORDPRESS和JOOMLA模板》
线框图
Moqups — www.moqups.com
http://Wireframe.cc — ww.wireframe.cc
Mockflow — www.mockflow.com
Mockingbird — www.gomockingbird.com
Flair Builder — FlairBuilder
Balsamiq — Balsamiq Mockups
Axure — Interactive Wireframe Software & Mockup Tool
Justinmind — Justinmind: Interactive wireframes for web and mobile
UX Pin — UXPin: UX Design & Wireframing Tools As Beautiful As Your Work
摸清差异:《涨姿势!聊聊线框图、原型和视觉稿的区别》
原型设计
InVision — Free Web & Mobile (iOS, Android) Prototyping and UI Mockup Tool
Mixture — www.mixture.io
Flinto — www.flinto.com
Gridset — www.gridsetapp.com
Marvel — https://marvelapp.com
Webflow — Webflow – Top Responsive Website Builder
Red Pen — Red Pen
Proto — Proto.io – Silly-fast mobile prototyping
Iconii — http://iconii.com
Macaw — Macaw: The Code-Savvy Web Design Tool
Froont — FROONT – Responsive Web Design Tool
产品设计过程中是如何使用原型的:《脑洞大开!你应该知道的产品设计14招》
响应式设计
Responsive.is — Responsive.is
Gridpak — www.gridpak.com
Responsive Nav — www.responsive-nav.com
Off Screen Navigation — Multi-Level Push Menu
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 — Sassaparilla: Fiennes Edition
Sidebar Transitions — Sidebar Transitions
Dimensions (Chrome Extension) — https://chrome.google.com/webstore/detail/dimensions/hdmihohhdcbejdkidbfijmfehjbnmifk?hl=en
Responsive Grid System — Responsive Grid System
Responsi — Responsi
不容错过的响应式设计:《干货!设计师必读的15个响应式网页设计教程》
色彩
0 to 255 — www.0to255.com
Colour Lovers — www.colourlovers.com
Brand Colors — www.brandcolors.net
Adobe Kuler Color Wheel — Adobe Color CC
Color Scheme Designer — www.colorschemedesigner.com
Hex to RGB Converter — HEX to RGB Converter
Coleure — Coleure
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 — Pure
The Magic of CSS — Magic of CSS
使用CSS3制作自然流畅界面看这篇《这个比较高端了!CSS3动画帧数科学计算法》
HTML 5
HTML5 Please — www.html5please.com
Can I Use? — www.caniuse.com
从这里,读懂HTML 5: 《HTML5是如何成为网页设计的未来的》
JavaScript/jQuery
Unheap — Unheap – A tidy repository of jQuery plugins
Touchy Js — Hot Studio : Touchy
FitText — FitText – A plugin for inflating web type
Touche.js — Touche.js – seamless touch event mapping for your click events
Cortado.js — http://benhowdle.im/cortado/
FlickFeed — Flickfeed.js
Heisenburg.js — Heisenberg.js
Pickadate.js — pickadate.js
Lettering.js — Lettering.js
Freetile — Yannis Chatzikonstantinou / Freetile.js
Backstretch — Backstretch: a simple jQuery plugin that allows you to add a dynamically-resized background image to any page
Hook — http://usehook.com
Echo JS — Echo JS – JavaScript News
Up to date — How to keep up to date on Front-End Technologies
JS Fiddle — Create a new fiddle
技术和思想一样重要:《优秀界面的终极形态:隐形的界面》
免费PS素材
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 — Latest free PSDs & other resources for designers
Marvel — Free Design Resources
Ui Space — UI Space
DB Freebies — DB Freebies Design Resources from Behance and Dribbble
365 PSD — 365psd | Download a free PSD every day.
Pixel Buddha — PixelBuddha: free and premium resources for designers and developers.
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 — Free vector icons
The Noun Project — NounProject
Perfect Icons — Perfect Icons
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
http://Blendme.in — www.blendme.in
这里强烈推荐一款Grid外挂教程:《PS 参考线插件GuideGuide下载及使用说明》,谁用谁知道!