只學設計的人不懂的設計

除了由美感來決定元素外
現代的設計師似乎還多了其他元素要考慮




當所有設計師都在討論Google商標如何更改設計
改了字體改了襯線外
似乎還有個重大的改動沒有被注意到
或者甚至說他們根本不在意

:檔案大小

舉例2015年Google推出的新Logo
整個Logo幾乎可以單純由幾何圖形構成
# 10個圓形, 5個矩形, 額外7個錨點組成的形狀

：檔案大小305 byte 大約0.3Kb

  
這代表著我們可以用簡單的SVG來描述整個Google的Logo
#可縮放向量圖形（英語：Scalable Vector Graphics，SVG）是一種基於可延伸標記式語言（XML）

簡單來說就是我們可以用"文字"來描述一張圖案,

並非傳統方式, 經由記錄Pixel構成圖片

反觀舊版的Logo總共有100個錨點

：檔案大小14000 byte 大約14Kb

雖然14Kb的檔案容量在現代人來看根本不值得一提

但是Google這樣規模的公司一天會被存取上千億次甚至上兆次來看

光是一個小Logo的變動

就足以省下相當驚人的資料傳輸用電

設計師Ilya-Yakubovich的文章中也提供了一個簡單範例
#這裡我稍微修改了一下namespace讓他可以在各個環境中正常執行

1. <svg xmlns="http://www.w3.org/2000/svg" width="600" height="250"> <g stroke-width="16" fill="none"> <path d="M173 102a51 51 0 1 1-13-30m20 37h-53" stroke="#4a87ee"/> <circle cx="227" cy="128" r="32" stroke="#d83038"/> <circle cx="313" cy="128" r="32" stroke="#f4c022"/> <path d="M401 160a31 31 0 1 1 0-61m-4 0a24 29 0 1 1 0 61m26-67v79m-1-12a20 20 0 1 1-52 17" stroke="#4a87ee"/> <path stroke="#4ab95a" d="M449 51v115"/> <path d="M529 118a30 30 0 1 0-2 24m5-32l-62 28" stroke="#d83038"/> </g> </svg>

產生如圖

除了檔案大小差距之外
SVG只需要讀取這些字元就能產生出一個完整的商標
原來的點陣圖卻需要讀取完每一個像素後才能輸出

所以說

：現代的頂尖設計師不只讓世界更美

 他們還考慮到許多我們看不到的小細節呢



補充說
我認為這裡延伸出幾個議題

1. 除了傳統的繪圖還有沒有更有效率的方法 e.g. 寫XML畫圖
2. 各類設計、圖像都需要網路傳播,除了讓圖更美之外能多考慮到效能問題嗎?
3. 如果圖形都能用簡單的矩形構成, AI可以輕易做到繪圖, 那AI是否能取代設計師呢？

Reference:
How could Google's new logo be only 305 bytes, while its old logo is 14,000 bytes?