2023

默聲創意

UIUX / Website / Front-end

網頁視覺 Elementor WordPress CSS

WEBSITE

INTRODUCTION

簡介

默聲創意是一間提供「客製化網頁設計 + 品牌行銷整合 + SEO 優化」服務的公司。客群涵蓋政府機關、國內外企業、大專院校、傳統產業與新創品牌。該公司希望其官網能夠清晰展現其專業服務項目、品牌識別度，以及與不同類型客戶合作過的豐富案例與評價。
目標是讓訪客一來到網站，就能感受到 “質感 / 專業 /可信任” 的形象，同時快速找到服務方案與報價入口，加強潛在客戶之間的轉換率。

INTRODUCTION

簡介

默聲創意（Morcept Design）是一間提供「客製化網頁設計 + 品牌行銷整合 + SEO 優化」服務的公司。客群涵蓋政府機關、國內外企業、大專院校、傳統產業與新創品牌。該公司希望其官網能夠清晰展現其專業服務項目、品牌識別度，以及與不同類型客戶合作過的豐富案例與評價。
目標是讓訪客一來到網站，就能感受到 “質感 / 專業 /可信任” 的形象，同時快速找到服務方案與報價入口，加強潛在客戶之間的轉換率。

ROLE FOR WORK

專案角色

  • 網頁視覺設計

    規劃網站整體視覺語言與色彩策略，強化品牌識別度與專業感。

  • UI/UX 規劃

    與企劃人員及行銷人員緊密協作，設計資訊架構、使用者導覽與互動流程，確保服務內容與案例呈現清晰易懂，同時兼顧品牌行銷目標。

  • WordPress 架設

    完成網站前端搭建與響應式排版，確保桌機與行動裝置的流暢體驗。

網頁視覺 Elementor CSS WordPress

Project Goals

網站設計目標

  • 建立 專業可信任的品牌形象
  • 清楚呈現服務項目與豐富案例
  • 提升潛在客戶的詢問與報價轉換率

主要使用者為對 網頁設計、品牌行銷或數位方案 有需求的企業或機構，網站也是 Morcept 向新客戶展示實績與專業能力的核心平台。

Visual Design

視覺風格

  • 品牌主色調

    以 亮橘色 為核心品牌色，搭配黑白灰基底，形成高對比、易識別的設計語言。橘色不只是點綴，更是品牌識別核心，傳達 活潑、年輕、創意 的品牌力，同時保有專業感。

  • 幾何圖形元素運用

    將圓形、斜切圖框應用於背景與元件中，增加畫面層次與品牌辨識度。

  • 文字編排層次感

    採用無襯線字體搭配不同字重區分標題與說明文字，整體排版簡潔，閱讀清晰。

  • 圖文整合設計

    各區塊圖文搭配比例恰當，並透過動態或遮色處理引導視線，展現網頁設計專業度。

Design highlights

設計重點

  • 品牌定位強化

    首頁標語與精選案例強化 Morcept 的專業與創意定位。

  • 服務項目與案例展示

    明確分類服務，並透過案例圖片與客戶 Logo 展示廣度與實績。

  • 使用者導向資訊架構

    從了解服務 → 看案例 → 取得報價，流程清晰，降低使用者尋找成本。

  • 信任感建立

    專業客戶回饋與案例豐富性增強信任，讓潛在客戶更容易轉換為詢問。

Web page display

成果展示

01 HOME PAGE / 首頁

01 HOME PAGE / 首頁

02 ABOUT / 關於與產品頁面

02 ABOUT / 關於與產品頁面

03 OTHER PAGES / 其他頁面

03 OTHER PAGES / 其他頁面

PURPOSE

UI/UX 優勢

使用者操作邏輯、資訊遞進自然，並透過視覺節奏、明確的互動設計與信任元素，大幅提升使用者的整體體驗與轉換意願

  • 資訊架構清晰

    主選單分類簡潔直觀，例如：「關於我們」、「作品案例」、「網站設計」、「聯絡我們」等，方便訪客快速定位所需資訊。

  • 視覺分段明確，閱讀節奏良好

    每個區塊以不同的背景顏色或圖形分隔（如白底、黑底、灰底、圓形點綴），讓畫面層次分明。
    重點文字與圖片適度留白，避免資訊壓力，使頁面流暢好讀。

  • 行動裝置相容設計

    機版頁面排版有經過調整，內容層層收合、圖片大小恰當，按鈕點擊距離適中。
    表單、聯絡方式在行動裝置操作上也不會有誤觸或版型錯位的情況。

  • Call to Action 設計得宜

    「了解服務」、「馬上聯絡」、「查看更多作品」等 CTA 位置明顯，風格統一（黑色文字框＋橘色 hover）。
    頁面中多處嵌入 CTA，避免讓用戶滑到底部才知道下一步，適合不同停留階段的用戶互動。

動態元素： 圖形點綴（如黃色圓點）具品牌識別效果。

品牌 logo 排列整齊、黑白化處理，整體看起來協調一致，不影響主視覺，透過hover效果互動。

側欄滑動錨點設計，快速導覽頁面內容

前往網站

© Ring Vision – Design by Ring