printinst

首頁視覺 × 品牌印象鋪陳

團隊設計以大型畫面搭配清爽的排版，讓使用者打開網頁就能感受「印研所」的專業氛圍與品牌形象。使用者不需點進專案內容，即可在首屏建立對品牌定位與服務特色的印象。加入視覺動態，如滾動觸發透明度變化、入場動畫與滑動效果，讓網頁更具互動感。GSAP 用於小動畫整合，提升使用者流覽時的沉浸度。

‍

網站架構 × 功能分區

與印研所討論後，網站被分為「作品集、關於我們、服務項目、聯絡方式、其他支援頁面」等五大區塊。架構邏輯清晰，支援訪客快速找到所需資訊，也利於未來新增頁面或擴展內容。

‍

色彩設計

本案使用代表印刷領域的字型與元素進行 Logo 設計，搭配富質感的色彩系統，建立識別度與專業感。色彩選擇兼具視覺吸引與閱讀舒適，適應不同裝置呈現。

‍

設計系統 × 元件規範

使用 Figma 與 Illustrator 製作一系列 UI 元件（如按鈕、圖示、版位等），並以 Web 開發相容設計方式（搭配 HTML/CSS/JS 和 GSAP 動畫），建立清晰且容易維護的設計系統。

‍

動態樣式 × Webflow／GSAP 動畫

使用 Webflow 進行前端實作，並結合原生 Html/CSS/JS 配合 GSAP 加強互動效果，網站在桌機、平板與手機上皆有一致且穩定的瀏覽體驗。