製作網站前，通常需要找尋相關設計靈感，有時候想破頭就是沒想法，素材對網頁內容來說很重要，好不容易找到了不錯的素材，大部分都是有著作權，不能直接使用，以下是我常逛或是設計師常用來找尋靈感及找素材的網站

如何找素材？

做網站需要使用素材及圖片，讓網站看起來更生動，吸引使用者的眼球
使用CC0可商用圖片、無版權圖片，就不用擔心會有版權問題了
但在下載使用前，還是要再確認一下使用規則，以免觸法唷～

CC0(Creative Commons Zero)授權是什麼？

可用於私人或商業性質，使用者可以自由地修改創作衍生作品的權利，不需要特別註明素材出處來源。下面會分享圖庫及素材的網址

圖庫

• Pixabay
  
• Unsplash
• Pexels
• foodiesfeed
• burst
• stockvault
• picjumbo

素材

• Freepik：有多種檔案Vectors、Photos、Icons、PSD格式可以下載，搜尋素材要使用英文關鍵字
  
• Freebiesbug
• UnDraw
• SUPERSCENE
• かわいいフリー素材集 いらすとや
• illustAC
• reshot
• cleanpng

ICON

• Flaticon
• iconstore

如何找尋靈感

設計參考

• Pinterest：找靈感網站，有網頁、平面設計等資源十分豐富
  
• Behance
• dribbble
• collectUI:有多種類型的UI設計可以參考，像是登入、表單、個人簡介等

網站參考

可以依照關鍵字、分類、顏色等搜尋需要的版型

• awwwards：網頁設計界的奧斯卡，是一家專業的網頁設計和優秀網頁設計競賽平台
• RWDJP：以日本網站為主，可看手機、平板、桌機三種尺寸
• io3000
• Straightline
• s5-style ：主要收錄日本網站為主
• Flatin Spire
• CSSDesignAwards
• csswinner
• Favourite Website Awards (FWA)
• one page love：一頁式網站

模板參考

• templatemonster
• nicepage
• bootstrapmade

哪裡有好用工具？

配色網站

• Color Hunt：可以透過搜尋欄搜尋合適的配色
  
• ColorSpace：設定一個主色，會有多種不同組合的配色參考
  
• Coolors ：按下鍵盤的空白鍵，會隨機提供五種顏色的配色，可以鎖定主要顏色，更換其他的顏色組合
  

漸層產生器

• Colorzilla Gradients：可以在這裡設置好漸層色，在複製CSS到你的CSS檔案就可以了，超方便
  

漸層配色參考

• CoolHue 2.0
• UI Gradients
• Fresh Background Gradients

製作Favicon icon

• Favicon & App Icon generator

三角形產生器

• 三角形生成器

Font Icon產生器

• IcoMoon：除了可以在自行挑選需要的icon圖示之外，還可以匯入自己製作的svg icon圖
• iconfont+：這個網站最大優點就是可以使用彩色的icon圖

假字產生器

• Lorem Ipsum
• 亂數產生器Chinese Lorem Ipsum

圖片產生器

• Placemat

線上生成動畫

• Animista：提供數十種特效像是淡入、淡出、旋轉、消失等，存CSS產生的動畫

看完這麼多厲害的網站及資源，趕快存到我的最愛裡，以後就不怕沒靈感了，以上是我常用的資源，如果你也有推薦的網站，也歡迎你告訴我唷~