BACK TO WORKS
Personal ProjectBrand Identity

個人品牌 Logo 設計

2026

為 2026 個人作品集網站所做的品牌識別設計。標誌取自中文名字「莫」的英文發音 mo,以一道跳躍的曲線呈現「跳出框架」的意象;並從 Logo 一路往下定義品牌主色、中英文字體,以及網站上真的會用到的按鈕與圖示。

角色
Brand Designer / UI Designer
工作內容
Logo 設計、品牌色與字體定義、Design Guideline
深色場景中一台筆電開著個人網站首頁,畫面中央疊著白色的 mo. 標誌

Overview

這是為了自己的個人作品集網站所做的品牌識別設計。從標誌出發,一路往下定義到網站上真的會用到的元件,讓整個站有同一套視覺依據。內容包含:

  • Logo 標誌設計與構成
  • 品牌主色 Blue #1E60F1
  • 中英文字體:Noto Sans TC / Outfit
  • Design Guideline:色彩比例、按鈕狀態、24 × 24 圖示組

Logo Design Concept

設計靈感:取自個人中文名字「莫」,英文發音為 mo

當初在設計 LOGO 的時候,希望 LOGO 第一眼可以讓人有鮮明、記憶點的深刻印象。

這次以自己的「個人網站品牌」作為設計發想的起跑點,希望把「個人特質」、「設計思維」、「品牌標準字 mo.」融入到 LOGO 呈現。

因此,以秉持著「不斷創新、跳出框架」的理念,作為個人品牌的記憶點。

mo. 標誌:深灰色的 m 與 o,右側有一道藍色跳躍曲線與一顆藍色圓點
標誌的組成:m + o + 藍色跳躍曲線 + 藍色圓點,曲線下方註明「以跳躍曲線呈現『跳出框架』的意象」
標誌的組成
標誌在淺色底與深色底上的兩個版本,疊著虛線的構成基準線與正圓輔助線
淺色底 / 深色底兩個版本,以及標誌的構成基準線

Brand Color

選用藍色 Blue 是因為希望個人作品集網站,可以給人「專業、科技、富有活力」的感覺。

品牌主色色票:藍色圓形,右側標示 Blue、#1E60F1、R:30 G:96 B:241
左側是 mo. 標誌,右側手機顯示個人網站首頁,主色藍用在標題與按鈕上
標誌與品牌色實際用在網站上的樣子

Typography

中文字體樣本:Noto Sans TC

這次以自己的個人作品集網站出發做設計發想,除了嘗試以品牌 Logo 的角度去執行,也是把個人對於「設計」的期望、想法融入到 Logo 呈現。

英文字體樣本:Outfit

This design was inspired by my personal portfolio website. In addition to trying to execute it from the perspective of a brand logo, it also incorporates my personal expectations and ideas about "design" into the logo presentation.

Design Guideline

依 60 / 30 / 10 的比例分配灰階、品牌色與強調色,並定義按鈕的五種狀態與 24 × 24 的圖示組,讓網站各處的元件有同一套依據。

色彩比例示意卡:白底占 60%、品牌藍占 30%、綠色的強調色占 10%
色彩比例 60 / 30 / 10(比例僅供參考)
按鈕規格表:Outline、Outline-color、Primary 三種樣式,各有 Default、Hover、Pressed、Focused、Disabled 五種狀態
Button / 三種樣式 × 五種狀態
24 × 24 的圖示組:箭頭、信封、社群平台、裝置與各種功能圖示共兩排
Icon / 24 × 24
筆電與手機並排顯示個人網站首頁,右上角是 mo. 標誌與 Designed by Morris

Thank you for your scrolling

Keep innovating, and always think outside the box.

NEXT PROJECT

Wave Cycle App 水養力