何庭安 Ting-An Ho

台灣的平面設計師何庭安（Ting-An Ho）的作品集網站，英文。頁首是一行白底的小字：左邊粗體的「TINGANHO.INFO」，接著「PROJECTS、INFO、CONTACT」，右邊 Behance、Instagram 兩個小圖示和「SEARCH PROJECT BY CATEGORY」，全部大寫、字距拉開。下面一句介紹「Ting-An Ho (何庭安), graphic designer based in Taiwan specializing in Branding, Art Direction & Digital Experience.」，然後就是作品。

整頁就是一面作品牆：三欄、一樣大小的直式卡片（8px 圓角），一直往下排。卡片的底是作品本身：黑底白字的字體設計和標誌、淺灰底的海報和展覽照片、偶爾一張橘色；每張卡片都量到一個白色粗體的作品名稱，但畫面上沒有顯示，應該是滑鼠移上去才出現。最下面是三欄的小字頁尾（info、contact、follow）和右邊的「privacy」。

整體是極簡的作品集：介面幾乎只有白底和黑色小字，所有的顏色和形狀都交給作品；字是 Monument Grotesk。

• Canvas（#FFFFFF）：白底。

• Text（#000000BF）、Heading（#000000CC）、Text strong（#000000D9）：介面的字都是半透明的黑（75%～85%），不用純黑；只有「CATEGORY」是純黑粗體。

• Surface（#F0F0F0）：淺灰底的作品卡片（從截圖取的色）。

• Tint（#00000026）：量到的 15% 的黑，出現次數很少。

• 作品自己帶出黑、白、灰、橘、藍、桃紅這些顏色，介面不另外加。

全站用 Monument Grotesk（Pangram Pangram 的可變字型，Google Fonts 沒有）。

• 開頭的介紹兩行、黑字（量測沒有抓到字級，從截圖看約 18px）。

• 作品名稱 18px／700，白色，疊在作品上。

• 導覽 15.5px／400、字距 2.5px、大寫；網站名和「CATEGORY」是 700。

• 頁尾 16.8px、行高 32px，半透明黑。

• 內容左右各留約 40px，三欄、欄距約 10px 的作品牆，卡片 433×541（約 4:5），一樣大小、整齊排列。

• 頁首一行固定在最上面，白底。

• 沒有段落、沒有標題，介紹之後就是作品。

• 頁尾三欄小字，上面一條細線。

Responsive

• 375px 寬時，頁首剩「TINGANHO.INFO」和選單；介紹文字變大、分成好幾行；作品改成一欄。

沒有陰影，作品卡片平貼在白底上。

• 作品卡片是 8px 的小圓角。

• 其他都是直角，沒有按鈕的框。

• 作品卡片：8px 圓角、433×541，裡面是作品的圖片；作品名稱是白色 18px／700（平常看不到，應該是滑鼠移上去才出現）。

• CATEGORY 按鈕：白底、黑色 15.5px／700 大寫、字距 2.5px，左右 8px，點開用分類篩選作品。

• 導覽連結：80% 的黑、15.5px 大寫、字距 2.5px，沒有底色和底線。

• 頁尾連結：75% 的黑、16.8px，「privacy」下面一條細線。

• 要讓作品當主角：介面只用白底和半透明的黑色小字。

• 作品卡片要一樣大小、整齊排成三欄，用小圓角。

• 導覽用很小的大寫字，字距拉開。

• 不要加標題、色塊、按鈕和陰影搶作品的目光。

• 字只用一套無襯線字。