精選 · 開放 · 免費
Robin Noguier
以大膽字體與動態影像佈局，精緻呈現創意專案的作品集。
portfoliowebgl
01
設計氣質 DNA
作品集展示設計師案例研究創意
精選的創意作品展廊
02
色彩
#FFFFFFInk
#3D6681BG
#D5DEDDMuted
rgba(255, 255, 255, 0.2)Line
精緻的啞光藍色系營造沉穩背景，襯托高對比白色文字與鮮明攝影內容。
03
字型
didone-serif · geometric-sans
- display
135px · 400 - body
16px · 400 - label
14px · 700
導覽與操作標籤使用大寫字母並加寬字距 · 高對比展示用襯線體搭配簡潔幾何無襯線體 · 內文字體保持輕盈，在深色背景上清晰易讀
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
以 4px 為基準單位，建立垂直與水平韻律，內容周圍留有充裕的內距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
圖片元素採用細緻的白色邊框
0 4px 24px rgba(0, 0, 0, 0.15)
06
版面
1440container
12columns
24pxgutter
768 / 1024breakpoints
不對稱分割佈局，一側配置大字體，另一側呈現動態影像；行動版轉為垂直堆疊佈局。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
平滑的滾動視差轉場效果 · 互動元素細膩的 hover 轉場
游標細微變化，互動元素可能產生透明度變動 · 直接導覽至案例研究詳情
08
組件
- button 大寫文字按鈕，水平內距寬裕，搭配指向右側的箭頭圖示
- card 動態圖片卡片，略帶旋轉角度並帶有白色邊框
- hero 以大膽的字體排印作為開場，搭配動態旋轉的圖片
09
文案語氣與禁用清單
- 語氣 自信、極簡、專業
- 標題風格 優雅的大尺寸襯線體排印，強調視覺衝擊力
- 按鈕文案 清晰、大寫、導向行動
- 不要在主要容器上使用圓角——截圖顯示為方形圖片框
- 不要使用含有多個間距的複雜網格——截圖顯示為簡潔靈活的佈局
- 不要使用鮮豔的高飽和強調色——截圖以白色與啞光藍為主
- 不要在導覽中使用小寫字母——截圖顯示「ABOUT」為大寫
- 不要在每個元素上使用厚重的陰影——截圖顯示為極簡柔和陰影
- 不要使用活潑的圓體無襯線字——截圖採用結構化幾何無襯線體
- 避免: 雜亂的佈局
- 避免: 過度複雜的配色方案
- 避免: 大段密集文字
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是為設計師打造的精緻作品集網站，以沉穩的啞光藍背景與大膽的高對比白色字體為特色。專案標題採用大型 Didone 襯線體，內文與導覽則使用簡潔的幾何無襯線體。佈局為不對稱設計，透過動態微旋轉的圖片卡片創造深度與流動感。導覽精簡且為大寫字母，字距寬裕。重要設計原則包括：保持簡潔無雜亂的美學、運用大尺度字體創造衝擊力、確保圖片成為視覺焦點而不依賴厚重陰影或邊框。避免使用鮮豔強調色、主要元素圓角，或複雜網格系統。
en · zh-CN · zh-TW · ja · ko