設計大神整理的設計網站大全

4 人贊了文章

設計大神整理的設計網站大全，總會有你需要的~

1、素材網站

• Iconfinder - 850,000+ free and premium icons 非常棒的國外圖標網站，可以找圖標靈感，或者購買感覺不錯的圖標。
• Noun Project 也是非常棒的國外圖標網站，重點在於都是免費的扁平化圖標，可以下載svg進行再創造哦。
• Free vector icons 也是免費的矢量扁平化圖標網站，誰用誰知道。
• EpicPxls

  另外一個很棒的圖標免費素材網站，很多優秀圖標素材可以下載。

• Subtle Patterns 紋理素材網站，多用紋理素材，可以給你的設計加分哦!
• Psds, premium icons & free web design resources for designers a€」 latest freebies by PixelBuddha.
  裡面的素材都是可以免費下載的源文件，而且質量還不錯。
• https://iconstore.co 同樣非常棒的素材網站，而且大多數是免費的喲。
• Download Free Vectors, Photos, Icons, PSDs and more 免費素材網站，內容非常多。
• http://uifest.com/ 這裡的素材也非常棒，有收費有免費的。
• UI8 — The marketplace for design resources 很棒的國外素材網站，素材質量不錯，大多都收費，小部分免費的素材可以下載學習。
• Mockup Zone Mockup的素材網站，有收費也有免費的。
• Textures.com 紋理素材網站，很多材質的紋理都可以在這裡找到哦。
• Over 388,119 Free Photos and Textures 免費圖片素材庫，數量很多。
• Unsplash | High-Resolution Photos 很有個性的高質量免費圖片素材網站，個人非常喜歡，還有chrome插件安裝，可以有事沒事看看。
• Gratisography: Free high-resolution photos 免費圖片素材網站，還不錯。
• Life Of Pix - Free Stock Photos & Images
  不錯的免費圖片素材網站。
• Free Images - Pixabay 免費素材網站，數量比較多。
• Free stock photos ?· Pexels 同樣是免費的圖片素材網站，哈哈。
• WallpapersWide.com 高清壁紙素材網站，數量很多。
• Download Free Vector Art, Stock Graphics & Images
  老牌免費素材網站，數量也很多。
• Designstub | Download Bootstrap Templates & Themes

  針對Bootstrap框架的免費模版素材(靜態化HTML頁面，正在學習Bootstrap或者響應式設計的小夥伴可以參考)。

• http://www.baianat.com/resources/ 最近備受關注的國外設計團隊，有很多很棒的素材和創意，而且大多數免費分享了出來。
• http://facebook.design/index.html Facebook的設計博客，有很多高質量素材源文件下載，以及乾貨文章。
• The Premier Photography Community / 500px 很棒的圖片網站，不多說了。
• https://www.flickr.com/ 同樣也是高知名度圖片網站，不多說了。
• TETHR – The Most Beautiful iOS Design Kit Ever Made 非常棒的一套設計界面素材，免費下載源文件。
• Free to-do app UI kit for Photoshop and Sketch 同樣來自invision的設計界面素材，免費下載源文件，質量也很高。
• Sketch Repo - Free, high quality Sketch resources Sketch免費素材網站，素材質量不錯，可以參考學習。
• PSD Repo - Free quality PSDs available for download sketchrepo的同胞兄弟，同樣是免費高質量素材。
• adobe-fonts/source-han-sans 思源黑體官方下載地址。
• adobe-fonts/source-han-serif 思源宋體官方下載地址。
• 常見設計規範與 Sketch 源文件下載集合 - 知乎專欄

2、設計創意參考

• Dribbble - Show and tell for designers 追波，不多說。
• Behance
  不多說。
• DeviantArt - The largest online art gallery and community 也很有名，不多說了。
• https://www.pinterest.com/ 素材創意大集合，非常棒的網站，也很有名，不贅述了。
• Sign up | Tumblr 灰常有名了，有很多優秀的設計作品在上面。
• 站酷 (ZCOOL) 國內設計比較有名的網站，不多說。
• UI中國
  雖然註冊用戶量和知名度不如站酷，但是專攻UI領域，感覺還不錯。
• 花瓣網
  國內的pinterest，雖然是山寨的，但是因為速度快所以用起來還是不錯的。
• 繪圖吧

  設計素材分享平台，素材大集合，還不錯不多說。

• Website Templates themeforest
  知名度非常高的模版銷售網站，從上面可以看到很多目前國外流行的頁面風格、動效，創意也非常不錯。
• WordPress Themes Loved By Over 317k Customers elegantthemes
  國外很有名的wordpress模版設計團隊，創意十足，不過可惜的是最近不思進取，一直沒有太大創新，還在售賣一年多前就發布的模版，不過他們的blog可以看看，對wordpress開發有很大幫助。
• Home - YOOtheme
  也是非常棒的國外網站模版設計公司，包括wordpress和joomla!，設計簡潔有想法，還有他們推出的前端框架 UIkit(類似Bootstrap)，有興趣的朋友可以了解一下。
• Reeoo - web design inspiration and website gallery 很棒的網頁設計參考網站，可以按照顏色篩選，更新勤快，創意十足。
• Awwwards - Website Awards 非常有名的網頁設計創意參考網站。
• http://www.materialup.com/ Material Design相關設計作品的參考網站。
• 100 Days UI - FREEMIUM RESOURCES 一個Dribbble牛人的每日一設作品，有源文件下載和HTML代碼實現哦!絕壁學習極品。
• Sebastien Gabriel 谷歌設計大神個人網站，他的文章《How I joined
  Google》曾膾炙人口，其他設計類的文章也很有參考價值。
• Dejan Markovic 國外一個設計師的個人網站，內容涵蓋自己的作品從產品分析到最後設計成型的過程解析，很有參考價值。
• e-Books

  UXPIN推出的免費設計e-Books，可以看看。

• image triangulation experiment 快速將圖片處理成low poly效果的工具網站。
• Coolors
  快速取色，並且能夠自動生成色彩層級的工具。
• https://webgradients.com/ 輕量的漸變配色網站，配色很有逼格。
• Color Tool - Material Design Material Design官方的配色工具，可以通過取色快速查看界面整體效果。

3、前端/動效/用戶體驗

• Codrops | Useful resources and inspiration for creative minds
  由於鄙人是從前端開發轉的UI設計，所以一直對前端各種效果都情有獨鍾，其中Codrops就是我幾年以來基本上隔三差五就會去逛的網站，創意十足，動效酷炫，每周集錦很有意思，強烈推薦，關鍵在於所有動效都是可以免費下載使用的!
• http://codyhouse.co/

  也是非常棒的一個前端動效網站，Codrops經常會收錄它的一些好作品。

• Tutorialzine 同樣有很多好玩的前端效果和知識，但是更新並不勤快，可以偶爾看看。
• Trending CSS repositories on GitHub today · GitHub
  github就不用多說了吧?我會經常到trending里篩選CSS/HTML/Javascript的語言分類來看看是否有最新的好玩的前端作品，這裡應該算是全球開源代碼最領先的地方了。
• GoodUI
  通俗易懂的UI設計準則，很有意思。
• Medium
  裡面有很多很棒的設計類文章，值得參考。
• CodePen
  很棒的前端網站，可以直接預覽前端效果和使用代碼。
• Font Awesome, the iconic font and CSS toolkit
  最早的開源免費字體圖標庫，以前用Bootstrap+FontAwesome基本上就能搭建一個像模像樣的網站，圖標種類繁多，使用方便。
• Wappalyzer 可以查看當前網頁的前端技術使用情況，非常方便。

不管有多好的設計素材網站，最重要的還是自己多看、多思考、多練習，這樣才能不斷進步，與君共勉。

4、工具類

• https://tinypng.com/
  在線壓縮PNG/JPG圖片網站，能夠大幅度減小圖片尤其是PNG圖片的size，方便好用。
• Icon Font & SVG Icon Sets a IcoMoon
  字體圖標管理/生成網站，功能強大，國內的iconfont應該是參考它做的。
• Iconfont-阿里巴巴矢量圖標庫
  icomoon雖然很棒，但是國內訪問速度還是成問題，所以現在還是比較常用iconfont，也挺好用的。
• GuideGuide Photoshop必裝的參考線插件神器，誰用誰知道。
• RightFont - The future of font manager software for Mac OS X
  非常棒的字體管理軟體，能夠快速載入字體，並且快速在設計稿中引入矢量圖標，個人感覺比在設計稿中使用iconfont方便。
• Sketch - Professional Digital Design for Mac
  Sketch，Mac下的UI設計神器，製作UI界面快速簡單，而且正版也不貴，缺點是沒有Windows版本。
• https://github.com/utom/sketch-measure Sketch
  measure，Sketch中必裝的插件，能夠導出設計稿的HTML文件供前端實時查看，免去了切圖的煩惱，還能切換設備解析度，非常方便。
• https://www.flinto.com/
  輕量級的交互軟體，能夠與Sketch一起使用，簡單方便。
• Principle - Animated Design 功能強大的交互設計軟體，用它能夠做出很不錯的app動效。
• Framer - Design tool for creating interactive designs, interfaces and animations
  能夠直接用代碼做交互/動效，個人感覺很不錯，廣受國外一線設計師的好評。
• Craft by InVision LABS Invision團隊推出的PS/Sketch插件，能夠快速添加圖片/文字等功能。
• https://g2.alipay.com/
  G2-螞蟻金服團隊的圖表組件工具，設計圖表的時候可以參考。
• GitBook
  使用Markdown編寫文檔，採用Git管理方式，非常方便高效。
• Device metrics - Material Design 谷歌設計團隊推出的設備相關參數參考頁面，很完整。
• ECharts
  百度團隊的純 Javascript
  圖表庫，算是比較成熟的解決方案。

推薦閱讀：