2023

集美生技

UIUX / Website / Front-end

網頁視覺 Elementor WordPress CSS

WEBSITE

INTRODUCTION

簡介

集美生技 (GMAXBIOTECH) 是一家專注於天然植物精油、有機認證與公平交易的企業。

專案目標包含讓訪客一進網頁就能感受到「自然・純粹・可靠」的品牌形象，同時清晰展現產品線、有機認證／合作農場／季報／新聞等內容。
網站成功塑造純淨自然與可信賴的品牌印象，訪客能快速了解產品來源與品質認證

INTRODUCTION

簡介

本案例分析天然精油產業品牌網站，風格定位於「自然、純淨、高端」。首頁以世界植物產地高畫質輪播圖搭配品牌口號，強化天然印象；卡片式的 Farm、News、GM 季報內容呈現，具雜誌排版質感，提升閱讀興趣。

Visual Design

視覺風格

  • 自然原色＋大圖展示

    網站以淺米色、橄欖綠等自然色系為主，搭配高解析度植物產地與精油瓶圖像，營造天然、有機、純淨的品牌印象。

  • 排版風格彷如雜誌

    首頁分區清晰：從「探索產地」的全寬輪播圖，到「Farm」「News」「GM季報」等卡片區塊，帶有內容型網站（magazine-like）的編排節奏。

  • 簡約 Logo + SCSS button

    Logo 和按鈕風格乾淨，少即是多，符合高端精油品牌形象。

Project Goals

設計重點

  • 品牌故事與溯源強調

    首頁banner與圖片帶出「Since2013」、「植物節奏」、「合作農場遍及全球」等話語＋地理圖片，強化來源與自然的信任感。

  • 資訊分類清楚／導覽友善

    功能區分包含：關於GM、有機認證、公平交易、合作農場、所有產品、GM季報、聯絡我們。選單條理分明。

  • 內容與視覺兼備

    圖片品質高，選用自然風景與植物來源地照片，多使用大圖橫幅與滑動圖片展示原產地風貌。

  • 信任與權威感

    過有機認證、公平交易、百年工藝等標題與內容區塊，讓使用者感受到品牌對品質與道德標準的堅持。

  • 動態與互動性

    滑動瀏覽原產地圖片、新聞／季報分類、點擊查看更多等交互方式，讓使用者參與感與探索感提升。

Web page display

成果展示

SOLUTIONS

UI/UX 優勢

  • 橫幅圖輪播（Carousel）

    首屏自動播放世界不同產地的高質感圖像，搭配標語「我們尊重植物節奏」，迅速傳達品牌核心。

  • 卡片式資訊呈現

    Farm、News、季報區塊皆以卡片配圖方式顯示，配合「Read More」或類似連結，提升瀏覽流暢度。

  • 摺頁 + 固定導覽

    導覽列固定且摺頁簡潔，讓使用者在任一位置都能快速跳轉。

SOLUTIONS

會員登入系統

官網採用「登入後開放內容」的會員制度，訪客需註冊並登入帳號後，才能查看產品詳細資訊及下載相關資料，這類設計常見於 B2B 或專業原料網站，具有資訊控管與客戶篩選的策略目的。

  • 功能說明

    會員限定內容：登入後才能瀏覽詳細產品資料頁、成分說明與下載技術文件，有效保護商業機密與建立品牌專業形象。
    註冊流程簡潔：通常僅需基本資訊（Email、密碼、姓名），降低用戶註冊門檻。
    檔案下載功能：下載欄位清楚分類，利於經銷商或潛在客戶快速取得資料。

  • UX 優勢

    資訊保護機制明確：有效區分一般訪客與專業客群，強化品牌定位。
    引導註冊合理：在使用者欲查閱產品時才顯示註冊提示，有效提升轉換率。
    內容結構清晰：產品資料與檔案集中於登入後頁面，操作流程簡便無冗贅。

前往網站

© Ring Vision – Design by Ring