常用
設計素材
- UI干貨
- UI-Cloud 海量UI資源，可當素材庫或靈感庫使用
- flypixel 目前已有800多個優秀UI資源
- 365psd 每天一款高品質PSD素材
- Pixeden APP UI、網頁模板、紋理等
- 優秀設計資源 不定期分享免費高品質干貨
- freebiesgallery WEB, APP UI等PSD素材
- 365webresources 分享網頁和UI相關免費素材
- DBL 專門分享Dribbble和Behance的素材網站
- Graph Berry Mockup、icon、模板等素材分享
- Freebiesbug 綜合UI素材網站
- 網站模板
- Themeforest 質量極高的網頁模板分享平臺 也可以在這里找靈感
- 網站模板 不定期精選優秀PSD/HTML網站模板
- Templated 響應式模板分享站
- Freewebsitetemplates 免費網頁模板分享，有的質量不錯
- 網頁模板巨人 提供多行業企業網站、CMS、商城模板
- 圖標
- Easy icon 圖標搜索引擎(中英)
- Icon Finder 圖標搜索引擎(英)
- Logo EPS 可以免費下載矢量LOGO模板的網站
- Font Awesome 流行的網頁圖標字體 直接下載 | Cheatsheet
- The Nounproject 高度可識別性的符號、圖標
- iconmonstr 設計風格簡約的圖標素材
- 阿里圖標庫 阿里巴巴矢量圖標庫
- Icomoon 在線網頁字體圖標制作工具
- iconmelon 提供漂亮的SVG圖標
- iconShock 這里可以找到一些精致的擬物化圖標
- 矢量圖 / 筆刷 / 紋理
- Freepik 百萬級矢量素材庫
- Qbrushes 有PS筆刷以及紋理素材
- Subtle Patterns 平鋪背景分享，很漂亮
- CG textures CG類紋理素材
- High Resolution Textures 高分辨率紋理素材
- Fbrushes PS筆刷下載站
- Brusheezy PS筆刷、紋理背景
- psdbox PS教程及素材分享
- Texture King 紋理王，各種材質紋理素材分享
- Textures 推薦！含3D紋理, PNG紋理 Texture Lovers（備用）
- 字體下載
- A5字體下載 中文字體下載推薦網站
- dafont 大量免費英文字體下載站
- fontsquirrel 字體松鼠，可商用的免費字體
- 求字體 可通過圖片查找對應的字體，也提供字體下載
- Font Fabric 提供漂亮的免費字體下載
- Font CDN Google Web 字體CDN
- losttype 非常多漂亮的英文字體，帶banner展示
- fontex 免費可商業的字體下載站
- Abstract Fonts 較全的字體下載站
- 谷歌Web Font 做英文站，來這里找字體吧，直接用在web上
- 免費高清圖片
- Unsplash 高品質圖片素材，可免費用在任何地方
- Pexels 免費圖片分享
- Gratisography 免費高分辨率真圖片，可個人及商用
- DesignersPics 設計師圖片素材
- Foter 超過2億張免費圖片
- Girlydrop 免費女子寫真素材
- Twnsnd 免費懷舊、復古照片分享
- Pixabay 共有約 370000 張免費的照片、矢量文件和藝術插圖
- Pakutaso 來自日本的免費寫真素材站
- Little Visuals 免費圖片，可用于任何地方
靈感酷站
- WEB
- CSS Design Awards 歐美網頁設計欣賞
- Awwwards 歐美網頁設計欣賞
- 4db 日本網頁設計欣賞
- straightline 日本網頁設計欣賞
- krwz 韓國網頁設計欣賞
- ivdesign 韓國網頁設計欣賞
- 81-Web 日本網頁設計畫廊
- One page love 單頁網頁設計欣賞
- Mobile Patterns 移動網頁設計欣賞
- hoverstat Web 交互動畫欣賞
- 移動APP UI
- Dribbble 設計師必備靈感站
- Pttrns 收集移動APP界面設計作品
- UIparade UI零碎組件分享
- UIgarage 優秀UI碎片整理
- IOSicongallery 分享優秀IOS應用程序圖標的網站
- app-icons APP圖標集合
- Love UI 分享移動端APP設計作品
- Uplabs 分享Material和iOS風格的設計作品
- Inspired UI. 分享iPad、iPhone和Android UI設計作品
- Call to idea 細節分類各種UI設計元素的UI酷站
- 動效設計
- UI Movement 主要展示移動APP的動效界面，更新快
- Motions 有APP和其它好玩的GIF動畫作品
- Design Patterns 分類展示的動效元素，并且已實現代碼編寫
- Capptivate 展示的優秀的動效作品(更新有點慢)
- Little Big Details 分享APP界面、軟件界面、網頁\智能手表等界面
- UYI 收集一系列動效界面，方便你激發動效設計靈感
- UI Interactions 分享帶動效的UI設計作品，更新快
- SIX UX 分享6秒內的交互設計作品
- User Flow Patterns 可能需要“科學上網”才能正常訪問
- NavNav 收集優秀Web&APP菜單
靈感畫板
- 電商設計
- Banner Banner設計靈感
- 電商海報 電子商務海報設計
- 淘寶直通車 淘寶直通車廣告設計
- 化妝品首頁 詳情頁 | 海報 | 直通車
- 家具首頁 詳情頁 | 海報 | 直通車
- 母嬰首頁 詳情頁 | 海報 | 直通車
- 兒童服飾首頁 詳情頁 | 海報 | 直通車
- 女裝服飾首頁 詳情頁 | 海報 | 直通車
- 男裝服飾首頁 詳情頁 | 海報 | 直通車
- 女鞋首頁 詳情頁 | 海報 | 直通車
- 男鞋首頁 詳情頁 | 海報 | 直通車
- 女士箱包首頁 詳情頁 | 海報 | 直通車
- 家電數碼電器首頁 詳情頁 | 海報 | 直通車
- 珠寶飾品首頁 詳情頁 | 海報 | 直通車
- 餐飲美食首頁 詳情頁 | 海報 | 直通車
設計教程
配色
- 配色工具
- Color Scheme 在線配色中文版
- coolors APP 在線配色以及查看優秀的配色方案
- Color Hunter 上傳圖像獲取配色方案
- colourco.de 簡單易用的在線配色工具
- Colllor 輕松創建色調一致的配色板
- pltts.me 很多漂亮配色板的網站
- UIgradients 生成美麗的漸變顏色（推薦）
- Colorfavs 抓取圖像配色，帶收藏配色功能（推薦）
- colors.css 一個包含16種全新標準色CSS樣式表
- PALETTABLE 推薦！智能匹配的顏色贊哦！
-
Google
Material Desgin 系列 - Material風格配色 輕易搭配出Google Magerial Design的配色方案
- Material UI 把所有顏色匯聚在一個頁面上
- material mixer 快速 DIY 美觀的 Material design APP 界面配色
- MD Palette Generator 根據自定義顏色生成配色
- Random material 隨機搭配一套UI配色方案
- Material Colors 精選 500 和 A200 色板的顏色
- MD Colors 又一個簡單的可視化的Material Design工具
- tintui 只顯示 Material Design 中的 500 顏色
- MD Colors 2 將色板中的顏色連同他們的正式名稱可視化
- Colorion 分享 Material 設計配色，帶收藏夾功能
設計工具
- 輔助
- Assistor PS 功能強大的標注工具
- 在線JPG/PNG壓縮 Optimizilla在線圖像壓縮工具，可批量
- 黃金比計算工具 Golden Ratio，可以計算黃金比例的工具
- GuideGuide PS參考線快速繪制工具
- pixlr 在線Photoshop繪圖工具
- 創客貼 推薦！一個可以告別PS的免費平面設計工具
- 在線多邊形制作 在線low poly制作工具，簡單幾步即可創作一幅藝術作品
- stylestats 輸入網址獲得該網站配色
- Gridzzly 網點網格紙在線生成
- Mockplus 簡潔高效的原型設計工具軟件，關注設計，而非工具
- BG Patterns 在線制作平鋪背景工具
- mindmeister 在線思維導圖
- fontsquirrel 在線生成@fontface工具
- 有字庫 生成中文@fontface字體
- Vector magic 強大的位圖轉矢量圖工具
- Velositey 快速排版網頁布局的PS擴展
-
Fontello
在線生成Web font字體
- infogr 信息圖制作 在線制作漂亮的可視化信息圖工具
- 比例計算工具 16:9, 4:3, 21:9, 2:1 在線計算工具
- UI Faces 提供真實用戶頭像，社交UI/用戶列表設計必備
尺寸規范
Sketch
- Sketch官網 Sketch官方網站
- Sketch快捷鍵 Sketch快捷鍵速記表，含中英對照
- Sketch素材 Sketch素材下載站
- Sketchcasts Sketch視頻教程
- Sketch tips 分享 Sketch 的使用技巧 簡單易懂
- sketch資源集
- sketchhunt 分享Sketch資源
- Sketch News Sketch綜合信息網站，有教程、新聞、素材、插件等信息
- Sketch repo 分享Sketch 素材，資源質量較好
- Sketchtips Sketch技巧（更新有點慢）
- Sketch Rocks! Sketch插件、素材、教程、雜項...
- Sketch Packs 純Sketch插件
信息圖
前端開發
UED團隊
Designer Game 可提高你設計技能的游戲
- Pixact 測試你對像素寬度的識別能力
- Whatpx 寫出黑色矩形的寬度
- bezier 用貝塞爾曲線繪圖，提高鋼筆工具的運用
- RGBchallenge 測試你對RGB值的了解
- helvarialquiz 分辨Arial和Helvetica字體
- Color 匹配色輪的顏色
- Type 字體排版練習
- Shape 鋼筆工具使用練習
- Real or Photoshop 分辨圖像是真是假
- dedesigntheweb 通過原型圖來分辨是哪個網站
- colorrun 點擊亮度高的顏色
- The Color 看你有多色
- CSS Diner CSS午餐，簡單易懂的 CSS 選擇器在線學習游戲
- Flexbox Defense 邊玩塔防游戲邊學習 CSS Flexbox 屬性
培訓機構