至欣數位
作品集 / 至欣數位 官網

至欣數位 官網

個人工作室官網(風格提案過程)

白話說明這個網站本身:從多個畫面風格方案挑選後,做成完整網站。

風格方案拼貼圖
風格提案過程拼貼

專案概要

個人工作室自己的官網。從需求出發,先提出多個風格方案,挑選後做成完整網站:作品集分組與篩選、系統地圖、響應式版面。開發過程與 AI 協作,由我提出需求、挑選方案並驗收。

我負責

  • 需求整理與風格決策
  • 畫面方案與前端實作
  • 部署與驗收

技術

AstroHTMLCSSJavaScriptSVG

功能清單

多輪風格提案工程文件感、編輯雜誌感、深色儀表感、清透雲感、石墨與琥珀、薄荷清新、蜜桃珊瑚、黑白萊姆,共經過數輪挑選後定案。
作品集分組與篩選依系統與整合、電商與訂購、官網與內容分段,篩選按鈕即時切換。
系統地圖內嵌 SVG,桌機橫向、手機直向。
響應式版面手機與桌機皆不橫向溢出。
信箱防爬蟲顯示信箱以防爬蟲方式顯示。
四葉草 Logo 與薄荷綠主題Logo 與配色沿用定案的薄荷綠風格。
靜態網站先上測試站驗收再上線。

風格提案流程

01需求討論02提出多個風格方案03挑選定案04套用到作品集與首頁05測試站驗收01需求討論02提出多個風格方案03挑選定案04套用到作品集與首頁05測試站驗收

示意畫面

風格方案截圖(作品集列表頁,客戶範例內容已用既有作品)

方案 a 工程文件感
方案 a 工程文件感
方案 b 編輯雜誌感
方案 b 編輯雜誌感
方案 c 深色儀表感
方案 c 深色儀表感
方案 d 清透雲感
方案 d 清透雲感
方案 e 石墨與琥珀
方案 e 石墨與琥珀
方案 f 薄荷清新(定案)
方案 f 薄荷清新(定案)
方案 g 蜜桃珊瑚
方案 g 蜜桃珊瑚
方案 h 黑白萊姆
方案 h 黑白萊姆

整合說明

測試站驗收先部署測試站,確認後才上線。
郵件信箱以防爬蟲方式顯示。

有想做的網站或系統?來聊聊吧!

單次專案或長期維護,都歡迎聊聊。

聯絡至欣數位

請留下聯絡方式,我將與您聯繫。