[資源] 設計 / 素材 / 資訊視覺化 / 教學與資源

馬上應用

ICON

• 500多種扁平化陰影 ICON 自動產生器！圖示免費下載
• https://www.facebook.com/freegroup/posts/10155784489733966
• AutoDraw https://www.autodraw.com/
• Google Material Icons https://material.io/icons/
• http://nathanfriend.io/inspirograph/ - 輔助你畫出齒輪軌跡圖
• Hipster Logo Generator - http://buzzorange.com/vidaorange/2015/02/25/hipster-logo-generator-customizable-designs/
• http://blog.infographics.tw/2015/05/build-gif-loader-with-loading-io/
• https://thenounproject.com/
• http://danklammer.com/articles/svg-stroke-ftw/
• https://icons8.com/
• https://dpx.com.ng/
• http://www.flaticon.com/
• http://flat-icon-design.com/
• Method Draw：線上icon客製化編輯 
  • https://youtu.be/rL9dggIZ_wQ?list=PLdkvZCcLvKbYs5IFuPpMbGed4x31vhmAP
• ICON 圖標設計指南，圖示繪製必須注意的小細
  • https://jiemr.com/icon-icon-design-guide
• 架構圖 icon
  • 50 個的免費版 https://www.behance.net/gallery/65549095/50-Free-simple-line-icons
  • https://www.facebook.com/100000850044611/posts/4502318373139786/

Loading Icon

• Kirby Wu> 為了方便大家在專案中加入社群識別，之前做過 g0v 的 loading icon，現在我把他重新建到獨立的頁面，在這裡除了下圖看到的布丁效果外, 還有 40 種不同的動畫類型可以選，需要的朋友可以自己調來玩囉~ 
  • 文字來源：https://www.facebook.com/groups/g0v.general/permalink/1392846010791801/
  • 網址：https://loading.io/animation/icon/31659

Emoji

• Emoji 合成
  • https://tikolu.net/emojimix

LOGO

• https://www.facebook.com/playpc/posts/10155475969407108
• https://www.facebook.com/134569067024347/posts/487830755031508/

字體

• CNS11643中文標準交換碼全字庫(簡稱全字庫)，內含明體、正宋體及正楷體3種字型，
  • 授權：行政院國發會-政府資料開放授權條款-第1版，需要時可以直接轉 CC BY-4.0 來使用這些素材
  • https://www.facebook.com/photo.php?fbid=10209651209996624&set=a.1421355993490.50608.1820401805&type=3&theater
• https://fonts.google.com/
• https://www.fontfont.com
• 日星鑄字行 http://typography.ascdc.sinica.edu.tw/%E5%AD%97/
• https://www.facebook.com/字型下載區-1442837152678167
• http://www.skyfont.com/
• https://www.facebook.com/dspim/posts/1850677385194059
• https://www.facebook.com/lovefonts/posts/1495452330534286

標籤雲產生器

• Wordsift https://wordsift.org/

網格紙產生器

• http://gridzzly.com/

筆刷

• 台灣食物 
  • https://www.plurk.com/m/p/m2xxq1
  • https://www.facebook.com/tikalyangfc/posts/1350010351712040

點線圖

• 點線圖 dotsDraw 混合式的製作方式，網址: http://vea.tw/works/dotsDraw/

8bit 

• https://make8bitart.com/  
• http://c64.superdefault.com/

GIF

• https://giphy.com/categories

圖表

• http://www.charted.co/ - 丟個CSV 就可以自動畫圖
• RAW Graphs. The missing link between spreadsheets and data visualization.
  • http://app.rawgraphs.io/
  • http://raw.densitydesign.org
• https://www.facebook.com/data.visualize - 專門貼資料視覺化 - 利用各種工具，包含繪圖軟體、線上網站、函式庫甚至手繪來把資料視覺化的案例
• ChartBlocks 免費的線上製作統計圖表服務
  • http://www.playpcesor.com/2015/02/chartblocks.html
• http://echarts.baidu.com/doc/example.html
• http://infogr.am - 很傻瓜又很炫的圖表產生器, 支援互動式操作
• http://www.datajournalismtw.com/#!about1/c1pkh
• https://www.facebook.com/shenhornyen/videos/10203789256250225/
• https://opensource.com/life/15/6/eight-open-source-data-visualization-tools?sc_cid=7016000000127ECAAY
• 關係圖 GXV Guan Xi Visualized
• 說明類資源
  • http://dataviz.tools/
  • 蒐集更多網站資源
    • https://buzzorange.com/techorange/2014/06/10/30-simple-tools-for-data-visualization/
  • https://www.ft.com/content/304419ec-63a3-11e6-8310-ecf0bddad227
  • http://blog.infographics.tw/2016/08/tips-on-basic-charts/
  • http://www.datavizcatalogue.com/index.html
  • https://www.facebook.com/data.visualize/photos/a.137798399723944.1073741827.137698833067234/635054893331623/?type=3&theater
• 圖片對照工具
  • https://www.playpcesor.com/2018/11/juxtaposejs.html

表單

• Google 表單：不再只有醜醜範本！如何幫 Google 表單美化背景外觀？
• Typeform：https://www.typeform.com/

顏色 / 配色方案

配色工具與案例，Todos：應該要加上評語、說明該網站工具的特色

• HCL Editor 用等距分佈選六種顏色 
  • http://goo.gl/mmdmG6
• Kuler - Adobe 色輪工具可選類比 / 三色 / 對比 / 補色 
  • http://goo.gl/PiyQrn
• 配色工具網站 
  • http://colorsupplyyy.com/app/
• HTML Color Codes 線上選色器 
  • https://www.facebook.com/freegroup/posts/10155943748708966
• https://color.hailpixel.com/
• https://colourco.de/
• https://flatuicolors.com/
• https://www.colorhexa.com/
• http://materialuicolors.co/
• Palettable
• Coolors 
  • https://www.facebook.com/freegroup/posts/10153725709878966
• 將一張圖片拆分出用色 
  • http://www.colr.org/
• https://coolors.co/9f7e69-d2bba0-f2efc7-f7ffe0-ffeee2
• http://leohung.github.io/taiwancolors/
• Pantone’s Addictive New App 
  • https://www.facebook.com/FastCoDesign/videos/1151457734926968/
• Beautiful Colors, Every Day. 
  • http://colorhunt.co/
• LOLCOLORS, Curated color palette inspiration. 
  • https://www.webdesignrankings.com/resources/lolcolors/
• 配色案例 
  • https://www.facebook.com/media/set/?set=a.869836763159572.1073741850.270450253098229&type=3
• Awwwards 收集網頁設計案例，可觀察其配色 
  • https://www.awwwards.com/websites/nominees/

漸層

• 漸層 https://webgradients.com/
• 漸層 https://uigradients.com/#Instagram
• 漸層 https://lstore.graphics/meshgradients/

傳統色

• 日本傳統色 http://nipponcolors.com/#tonoko
• 中國傳統色 http://zhongguose.com/

色覺模擬

• xScope 模擬色盲者的世界 http://goo.gl/MHTikR
• Color Oracle 透過色盲人士的眼睛，檢查自己製作的圖表 http://colororacle.org/
• Chromatic Vision Simulator 色覺模擬器 app http://a-chien.blogspot.tw/2016/03/ipad.html
• 從紅綠燈談色盲者的視界 https://www.facebook.com/permalink.php?story_fbid=10209467706870452&id=1259134110
• 黑白上色，可以將黑白照片彩色化APP
  • https://photomyne.com/blog/photomyne-app-update-dec-2018

插圖 / 素材

• 123
  • https://free.com.tw/blush-design/
• 123
  • https://undraw.co/illustrations
• 日本常用插圖系列
  • https://www.irasutoya.com/
• 手繪簡單元素，電腦提供可能相對應的素材，提供選用
  • https://www.autodraw.com/
• 老台灣的素材
  • http://catalog.digitalarchives.tw/
• 鳥類插畫圖鑑素材
  • https://jiemr.com/bird-illustrator-ebook
• 中國東方紋樣集錦電子書，素材下載
  • https://jiemr.com/oriental-decoration-book
• 日本ダ鳥獣戯画
  • http://www.chojugiga.com/
• 綜合網站
  • https://www.vecteezy.com/
  • https://www.sitebuilderreport.com/stock-up

去背

• Clipping Magic
  • https://free.com.tw/clipping-magic/
• Background Burner
  • https://free.com.tw/background-burner/
• 「Malabi」是一款免費線上去背工具
  • https://free.com.tw/malabi/
• 全自動圖片線上去背 https://www.remove.bg
• 去背工具
  • https://express.adobe.com/zh-Hant-TW/tools/remove-background/

自動化繪圖輔助

• Nvidia 正式發布 AI 輔助麻瓜畫圖工具 GauGAN
  • http://nvidia-research-mingyuliu.com/gaugan

地圖相關

• 在「MapChart」這個線上工具中，我們可以從一張空白的世界地圖，或是空白的亞洲、歐洲等不同地區的地圖上，開始繪製自己需要的「解說」。無論你想要解說的是某個年代的世界局勢，還是標註某些共通的文化，這個線上工具都可以幫助你快速完成需要的圖檔。只需要3個步驟：
  • https://mapchart.net/
  • 在需要解說的地方，填上不同色塊。
  • 定義每個顏色的說明。
  • 預覽並下載地圖圖檔。
• pixelmap
  • http://pixelmap.amcharts.com/
  • http://artofslide.blogspot.tw/2017/04/pixel-map-generator.html?utm_source=%E7%B0%A1%E5%A0%B1%E8%97%9D%E8%A1%93%E7%83%98%E7%84%99%E5%9D%8A
• Mapfessional

包裝刀模

• 免費包裝刀模下載，紙袋、紙盒印刷用刀模圖下載，可轉 AI 向量格式 
  • https://jiemr.com/packaging-die
• 免費印刷刀模下載，合計50幾款紙袋與包裝盒刀模 
  • https://jiemr.com/packaging-daomo-2

free CAD files

• https://grabcad.com/library

格式轉換

• ai2html turns your Illustrator files into HTML. http://ai2html.org/

擬定合約

• The Freelance Contract
  • https://www.and.co/the-freelance-contract

Forensically is a set of free tools for digital image forensics. It includes clone detection, error level analysis, meta data extraction and more

• https://29a.ch/photo-forensics/

支援多人協作的設計工具

• 子龍的晾衣架: 零時政府 ｜說到設計如何開源協作這件事，給想要跨進g0v的設計師，一份關於設計開源協作的討論心得

網路協作工具

• https://www.canva.com/about
• https://webflow.com/
• http://froont.com/
• https://www.figma.com/
• http://workflowy.com/
• http://zbryikt.github.io/bezier-edit/
• https://www.facebook.com/data.visualize/posts/574521169384996  

3D 與 GIS 協作工具

• Crowd Planning System Prototype

其他

• 各種協作方案蒐集
• https://vectr.com/
  • 能否協作？

設計觀念探討

待整理

• g0v tw hackath10n 中場短講 今天 聊外貌 台灣零時政府第拾次資料科學黑客松 by 子龍
  • https://youtu.be/DcZvOcci3Lg
• 將作品進行網格分析 http://grids.qoopu.net/
• g0v design guide 零時政府的視覺設計原則：G0V UI
• UBER 更新視覺識別設計規範
  • https://www.facebook.com/initiumlab/posts/2141441886081889
• 資訊圖像化概念與應用 
  • https://youtu.be/2qBwM5uI3QA
• 從使用者到APP頁面設計準則
  • https://medium.com/as-a-product-designer/%E5%BE%9E%E4%BD%BF%E7%94%A8%E8%80%85%E5%88%B0app%E9%A0%81%E9%9D%A2%E8%A8%AD%E8%A8%88%E6%BA%96%E5%89%87-9d3437090a46
• 挑選顏色是個大議題, 這篇教你怎麼做: http://goo.gl/eYk7fq
• Best Practices in Data Visualizations
  • https://www.microstrategy.com/Strategy/media/downloads/training-events/microstrategy-world/2014-barcelona/MSTRWorldEU2014_T1_S3_Best_Practices_in_Data_Visualizations.pdf?ext=.pdf
• Can’t Unsee 是一個讓你比較一些網頁元素設計細節的小遊戲
  • https://cantunsee.space/
• Button
  • https://medium.com/ux-power-tools/a-better-way-to-make-buttons-in-sketch-6c23470f27c#.5dn805gtb
  • 
    
• 談簡報色彩
  • https://www.tien-chang.com/amazingslide-ch01-4/
• 蒐集手繪地圖案例網站 
  • http://datored.wixsite.com/map-home
• 實體場域
  • Reading Forms is a blog-shaped depository of hyperlinks and images of graphic design exhibitions, and of other situations that are visually, thematically or conceptually related. It tries to examine modes and forms of presentation, observation, curation and interaction in the recontextualized display of graphic design. http://readingforms.com/
• Expertise in UX design, design for the IoT, data-informed design, and more；Enhance your design skills with these free ebooks from experts in UX, Data, IoT, and more.
  • http://www.oreilly.com/design/free/?cmp=tw-design-free-lp-dsca17_free_report_ac
• visualizing rights 資料視覺化的人權倡議應用
  • https://medium.twngo.xyz/visualizing-rights-dcb65233fe6b
• 加點製造是屬於產品開發的專業知識平台 你可以在這裡討論設計與製造技術，也可以發現優秀的生產廠商！
  • https://addmaker.tw/landing

風格

• 曼菲斯風格設計案例 
  • http://goo.gl/TfJ2hH
• 日本2017年1月DM分享
  • https://www.facebook.com/jack3020/media_set?set=a.10210192953292445.1073741830.1597726891&type=3
• Baugasm - 365 Posters
  • https://www.behance.net/gallery/50411735/Baugasm-365-Posters
• Paul Cox 與麒麟淡麗的合作
  • https://www.facebook.com/designsurfing/posts/1138746169559285
  • https://green-name.kirin.jp/
• 同形異構的運用
  • https://goo.gl/iMbqP5

人因因素

• 字級大小原則討論 https://www.facebook.com/tamago.gogogo/posts/10210435887038098
• 「Design for Accessibility Cheatsheet」，從包含弱視、失讀、失聰等六個面向 https://www.facebook.com/data.visualize/posts/549909348512845:0
• Microsoft Inclusive Design http://mp.weixin.qq.com/s/ihsk7luLK595Khj-hcDVFw
• https://www.microsoft.com/en-us/design/inclusive
• xScope - 原文寫可模擬色盲者的世界, 但其實是組功能極強大的套件組! (http://goo.gl/MHTikR )
• 但是，要怎麼透過色盲人士的眼睛，檢查自己製作的圖表呢？網路上有一款免費的小工具「Color Oracle」，能夠解決這個問題。進入以下網址（http://colororacle.org/）
• 易讀服務 Easy Read Service
  • http://www.sunable.net/node/31168
  • http://www.changepeople.org/
  • https://www.facebook.com/sunboytw/posts/10208167522296209
  • https://www.facebook.com/groups/sunable/permalink/1334561573275993/
• 關於雲端千眼
  • http://www.edocumentservice.org/
  • 莎士比亞有句名言：「生活里沒有書籍，就好像大地沒有陽光；智慧里沒有書籍，就好像鳥兒沒有翅膀。」而『edocumentservice平台』的建立，主要便是希望透過平台，讓視障視障者能夠閱讀重製轉化後的電子書，並且透過平台自動化管理，減少視障視障者在取得資訊所遇到的困難。
• Tools for educators. Compliance for organizations. Headaches for no one. End-to-end document accessibility for Google is here.
  • https://www.grackledocs.com/

更多資源蒐集區

• Quora: What are the best resources for learning bleeding edge web UI and UX design 
• https://vide.tw/7815
• 日本中の「UI/UX」の参考になるスライド資料を気合いで全部集めました！（たぶん）http://boxil.jp/magazine/uiux/
• http://buzzorange.com/techorange/2015/05/28/design/
• http://resources.ogdesign.tw/
• https://www.facebook.com/data.visualize/posts/551794734990973
• https://www.facebook.com/imDataMan/posts/1812037675741857
• https://www.ordnancesurvey.co.uk/blog/2015/01/cartographic-design-principles-summary/#more-18093
• http://freedesignresources.net/
• https://medium.com/sketch-app-sources/preparing-and-exporting-svg-icons-in-sketch-1a3d65b239bb#.67jygymit
• Tachyons 不是 css framework ，不送任何的套裝行程，但它把所有會用的 css 組合全都用最精簡而且不互相衝突的方式包起來，所以寫網頁時，直接標 class 就好，不另外寫 css ，像是 div 長寬比要多少、 padding, border 要多少等等。有興趣的人可以看這兩份字典：
  • http://tachyons.io/docs/table-of-styles/
  • http://tachyons.io/docs/table-of-properties/
• AI WEBSITES THAT DESIGN THEMSELVES - https://thegrid.io/#7

設計社群共筆區

• https://uiuxlink.hackpad.com/