設計/資訊視覺化/教學與資源

馬上應用

ICON

• 500多種扁平化陰影 ICON 自動產生器！圖示免費下載
• 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/
• 8bit https://make8bitart.com/  http://c64.superdefault.com/
• http://www.flaticon.com/
• Method Draw：線上icon客製化編輯 https://youtu.be/rL9dggIZ_wQ?list=PLdkvZCcLvKbYs5IFuPpMbGed4x31vhmAP

字體

• 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.plurk.com/m/p/m2xxq1
  • https://www.facebook.com/tikalyangfc/posts/1350010351712040

點線圖

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

圖表

• 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 - 專門貼資料視覺化 - 利用各種工具，包含繪圖軟體、線上網站、函式庫甚至手繪來把資料視覺化的案例
• 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

表單

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

顏色 / 配色方案

• HCL Editor - 用等距分佈選六種顏色 ( http://goo.gl/mmdmG6 )
• xScope - 原文寫可模擬色盲者的世界, 但其實是組功能極強大的套件組! (http://goo.gl/MHTikR )
• 但是，要怎麼透過色盲人士的眼睛，檢查自己製作的圖表呢？網路上有一款免費的小工具「Color Oracle」，能夠解決這個問題。進入以下網址（http://colororacle.org/）
• Kuler - Adobe 的色輪工具, 可選類比 / 三色 / 對比 / 補色等等, 十分方便!http://goo.gl/PiyQrn
• Beautiful Colors, Every Day. http://colorhunt.co/
• https://www.facebook.com/freegroup/posts/10153725709878966
• https://www.facebook.com/FastCoDesign/videos/1151457734926968/
• 日本傳統色 http://nipponcolors.com/#tonoko
• https://www.facebook.com/permalink.php?story_fbid=10209467706870452&id=1259134110
• https://coolors.co/
• https://www.facebook.com/infoofinfographic/posts/1224055434346666
• 漸層範例 https://webgradients.com/
• https://www.facebook.com/media/set/?set=a.869836763159572.1073741850.270450253098229&type=3

素材

• 手繪簡單元素，電腦提供可能相對應的素材，提供選用
  • https://www.autodraw.com/
• https://jiemr.com/oriental-decoration-book

地圖相關

• 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

格式轉換

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

擬定合約

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

支援多人協作的設計工具

• 子龍的晾衣架: 零時政府 ｜說到設計如何開源協作這件事，給想要跨進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

設計觀念探討

• 挑選顏色是個大議題, 這篇教你怎麼做: http://goo.gl/eYk7fq
• g0v tw hackath10n 中場短講 今天 聊外貌 台灣零時政府第拾次資料科學黑客松 by 子龍

*

• AI WEBSITES THAT DESIGN THEMSELVES - https://thegrid.io/#7
• 將作品進行網格分析 http://grids.qoopu.net/
• g0v design guide 零時政府的視覺設計原則：G0V UI
• https://www.facebook.com/initiumlab/posts/2141441886081889
• 曼菲斯風格設計案例 http://goo.gl/TfJ2hH
• 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
• 日本2017年1月DM分享
  • https://www.facebook.com/jack3020/media_set?set=a.10210192953292445.1073741830.1597726891&type=3
• https://www.behance.net/gallery/50411735/Baugasm-365-Posters
• Button
  • https://medium.com/ux-power-tools/a-better-way-to-make-buttons-in-sketch-6c23470f27c#.5dn805gtb

人因因素

• 字級大小原則討論 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平台』的建立，主要便是希望透過平台，讓視障視障者能夠閱讀重製轉化後的電子書，並且透過平台自動化管理，減少視障視障者在取得資訊所遇到的困難。

更多資源蒐集區

• Quora: What are the best resources for learning bleeding edge web UI and UX design 
• 日本中の「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/
• http://readingforms.com/
• https://medium.com/sketch-app-sources/preparing-and-exporting-svg-icons-in-sketch-1a3d65b239bb#.67jygymit
• 日本2017年1月DM分享
  • https://www.facebook.com/jack3020/media_set?set=a.10210192953292445.1073741830.1597726891&type=3
• Tachyons 不是 css framework ，不送任何的套裝行程，但它把所有會用的 css 組合全都用最精簡而且不互相衝突的方式包起來，所以寫網頁時，直接標 class 就好，不另外寫 css ，像是 div 長寬比要多少、 padding, border 要多少等等。有興趣的人可以看這兩份字典：
• http://tachyons.io/docs/table-of-styles/
• http://tachyons.io/docs/table-of-properties/
• 蒐集手繪地圖案例網站 http://datored.wixsite.com/map-home
• https://www.tien-chang.com/amazingslide-ch01-4/

設計社群共筆區

• https://uiuxlink.hackpad.com/

素材

• https://www.sitebuilderreport.com/stock-up