Chu Resort 丘丘.森旅形象網站

Chu Resort
丘丘.森旅形象網站

CLIENT

CHU Resort

兆旭開發股份有限公司

SERVICE

Web UI

ROLE

UI / UX

Front End

MORE

Link ✹

丘丘‧森旅 CHU Resort 為 Home Hotel 團隊籌備全新旅宿品牌。丘丘‧森旅是座落在兩座大山之間的一片寧靜草原,代表著近山與敬山的精神,邀請人們以最自在的方式走進大自然,探索身心的平衡與永續,享受寧靜的空白時光,走進角落各處找尋驚喜事物,人與人之間自在相聚,關係自然流動。

Deerlight Design 的任務為評估專案的時程及適當的規劃,設計一式完整的形象網站,以舒適的網站瀏覽架構,有脈絡地傳達網站資訊,同時設計符合品牌氛圍的通透布局,以及合適的色彩配置,讓使用者沉浸於此。

Brand Image
形象影片

以形象影片帶出品牌氛圍

首頁區塊放置形象影片,於短暫的幾秒內傳遞品牌氛圍,在第一時間深植人心,此區塊下方設計小型循環動畫,吸引及引導使用者接續瀏覽網站。

Tour
引導用戶

全站導覽

進入網站後第二區塊為全站導覽,使用者可清楚理解網站包含的內容,並快速到達想閱讀的區塊或接續瀏覽。

Layout
版型設計

版型配置

依據傳遞資訊的不同,搭配適當的版型,以提升舒適的瀏覽體驗,網站整體的精緻度也相應提升。

Timeline
時間軸

活動時程

將各個活動以時間軸方式展示,增加使用者與網站之間的互動,同時能清晰查詢該時段的體驗活動。

Languages
多國語系

繁中、英文、日文

因應網站觸及全球,規劃具有繁體中文、英文及日文的多語系切換,讓不同語言的使用者,皆能清楚理解網站所傳遞的資訊。

More
更多細節

RWD 響應式設計

在設計時規劃彈性的畫面布局,並創造合適的層級區分,適當調整不同元素於畫面中的呈現,在不同的裝置上都能保有良好的體驗。

WordPress 建置

運用 WordPress 建置網站,製作具有彈性的管理後台網站,網站完成交接後,客戶可依據教學文件的指示,自行管理網站。

行動呼籲與暗示

適當置入對應的行動呼籲,提醒使用者可做相應的操作。

Share

Others Project

The Sunset Terminal 落日轉運站活動網站

The Sunset Terminal
落日轉運站活動網站

CLIENT

Surprise Lab.

驚喜製造股份有限公司

SERVICE

Web UI

ROLE

UI / UX

Motion Design

MORE

Link ✹

PARTNER

Tuesday Design / Front End

落日轉運站 The Sunset Terminal 為大型沉浸式體驗,由驚喜製造團隊推出的第八號計劃,以「旅途的終點」為獨特的世界觀,在此透過燈光、聲音、氛圍,沉浸於故事之中。落日轉運站將於人潮之中出現,接駁您前往終點。

Deerlight Design 的任務為評估專案的時程及適當的規劃,設計一式網站,讓網站可容納多項沉浸式體驗項目,並融入本次的世界觀於網站設計中,全站以彈性的設計與層級區分,提升閱讀體驗,使訊息集中於頁面的中心,在不同的裝置上都能保有良好的體驗。

Animation
動態特效

日落視差效果

瀏覽頁面時,透過頁面上下捲動,後方太陽進行位移,營造出日落的情境。

More
更多細節

RWD 響應式設計

在設計時規劃彈性的畫面布局,並創造合適的層級區分,適當調整不同元素於畫面中的呈現,在不同的裝置上都能保有良好的體驗。

問答頁面

考量問答內容較多,將問答頁面另行獨立,使用者可在此查詢活動的所有事項,讓此活動並非只是單純展示畫面,更增加資訊乘載,同時有效減少客服的工作量。

客製化預定及劃位頁面

因應活動網站風格,設計出對應的劃位頁面,並優化流程,提升使用體驗及增加效率。

Share

Others Project

Macaology 澳門學 16 號貼文視覺

Macaology
澳門學 16 號貼文視覺

CLIENT

Macaology

澳門學 16 號

SERVICE

Visual

ROLE

Art Design

Illustration

MORE

Link ✹

澳門學 16 號,澳門科普專頁,熱衷科普與公共寫作,希望透過文字參與和推動公民社會進步。由澳門學 16 號開創的在帝國邊陲講故事,為澳門首個知識付費計劃,希望說關乎這個時代的故事,它有自己的立場,但它的立場並非無根之木,而是基於學術研究與理論。

Deerlight Design 的任務為「澳門學 16 號」及「在帝國邊陲講故事」設計社群聯名貼文,並製作可沿用的版型,本次專案增加 Canva 平台交付,客戶可因應聯名品牌自行置換標誌及文案,提升設計的彈性。

Concept
概念

兩款社群聯名貼文,皆考量品牌色系及調性,整體以黃色作為主色調,延續品牌色系。資訊區塊以白色作為背景襯托,讓文字清晰可見的同時,也降低客戶需自行為聯名標誌去背的工作。

以大面積的澳門特色街景作為背景,將資訊聚集於中央,保有閱讀的節奏感,運用顯眼的品牌色系強調行動呼籲的相關動作。

Macaology 16
概念

澳門學 16 號

運用資料夾作為視覺概念的核心,資料夾有蒐集、資料、統整之意象,呼應澳門學 16 號自身品牌的核心概念 ── 透過文字參與和推動公民社會進步;在這樣的理念背景下開展出不同的聯名活動。

Empire 16
概念

在帝國邊陲講故事

整體為輕鬆活潑,由講故事時翻閱書本為概念,以左、右頁面為單位放置不同品牌,整體是書本,也似於對話框框的意象,不單單只是聽,更有了對話的交流感,保有說及聽故事的想像空間。

書本下方指向行動呼籲,將視覺引導至不同平台管道。

Share

Others Project

Macaology Lecture 在帝國邊陲講故事講座

Macaology Lecture
在帝國邊陲講故事講座

CLIENT

Macaology

澳門學 16 號

SERVICE

Visual

ROLE

Art Design

Illustration

MORE

Link ✹

在帝國邊陲講故事,希望說關乎這個時代的故事,它有自己的立場,但它的立場並非無根之木,而是基於學術研究與理論。

Macaology 邀請大家來實驗,到底講者的知識分享能有實際回報後,演講內容是否會提高;聽眾為知識付費後,會不會更投入,帶回去的東西更多?我們都不要再 easy come easy go.

Deerlight Design 的任務為設計講座視覺,並製作可沿用的版型,本次專案增加 Canva 平台交付,客戶可因應講座主題自行置換文案,提升設計的彈性。

Concept
概念

講座視覺將應用於社群貼文,版面設計佈局均衡,整體以淺灰至黃色漸層為底,色彩調性延續品牌色系。

考量不同講座主題、講者名稱等多種文案長短,設計出通用且方便更換之版型。

Share

Others Project

Macaology 在帝國邊陲講故事

Macaology
在帝國邊陲講故事

CLIENT

Macaology

澳門學 16 號

SERVICE

Visual

ROLE

Art Design

Illustration

MORE

Link ✹

在帝國邊陲講故事,希望說關乎這個時代的故事,它有自己的立場,但它的立場並非無根之木,而是基於學術研究與理論。

Deerlight Design 的任務為設計封面主視覺,以及相關延伸物。

Concept
概念

封面設計以人物插圖作為輔助,帶有親和力的呈現。考量縮圖方形裁切時,依然能讓畫面保持完整度。

傳單設計以明亮的底色作為設計,使用對話框造型圍繞中央文字,並沿用插圖使視覺統一。

Share

Others Project

Rydeit 發財車產品後台

Rydeit
發財車產品後台

CLIENT

Progressing Today Co., Ltd.

微進科技股份有限公司

SERVICE

Web UI

ROLE

UI / UX

Motion Design

MORE

Link ✹

Rydeit 發財車為便捷的加密貨幣理財工具,以安全與簡易的策略,幫助用戶賺取區塊鏈上的利息。發財車意象,來自台灣小貨車的俗稱 ── 發財車:不用花大錢也能牽回家、開始為你生財。

Deerlight Design 的任務為設計一款具有良好體驗的產品後台介面,安排資訊的層級,讓使用者一目了然。

Dashboard
儀表板

優先呈現常見資訊

將使用者最常查看的資訊,進行統整及呈現設計,一進入首頁即可清楚瀏覽。在不同的資訊塊面附帶按鈕,使用者可直接點擊進入,減少繁複的路徑。

Clear
簡潔的資訊

將流程進行優化,並以階段分組,增加使用者的耐心,同時也預先讓使用者知道「接下來將進行什麼動作」。

More
更多細節

RWD 響應式設計

在設計時規劃彈性的畫面布局,並創造合適的層級區分,適當調整不同元素於畫面中的呈現,在不同的裝置上都能保有良好的體驗。

插圖設計

突破早期區塊鏈產業介面的冰冷生硬,轉以柔和人物的插圖設計,藉由人物插圖貼近用戶的心。

Share

Others Project

Rydeit 發財車形象官網

Rydeit
發財車形象官網

CLIENT

Progressing Today Co., Ltd.

微進科技股份有限公司

SERVICE

Web UI

ROLE

UI / UX

Motion Design

MORE

Link ✹

Rydeit 發財車為便捷的加密貨幣理財工具,以安全與簡易的策略,幫助用戶賺取區塊鏈上的利息。發財車意象,來自台灣小貨車的俗稱 ── 發財車:不用花大錢也能牽回家、開始為你生財。

Deerlight Design 的任務為評估專案的時程及適當的規劃,區分不同頁面之任務,以簡潔、俐落的介面設計搭配適當的插圖設計,傳遞產品精神。

Animation
動態特效

發財車行駛影片

首頁呈現相關數據時,背景為發財車行駛的動畫,隨著路途的顛簸而晃動前進。

More
更多細節

RWD 響應式設計

在設計時規劃彈性的畫面布局,並創造合適的層級區分,適當調整不同元素於畫面中的呈現,在不同的裝置上都能保有良好的體驗。

插圖設計

突破早期區塊鏈產業介面的冰冷生硬,轉以柔和人物的插圖設計,藉由人物插圖貼近用戶的心。

Share

Others Project

Rydeit 發財車品牌識別

Rydeit
發財車品牌識別

CLIENT

Progressing Today Co., Ltd.

微進科技股份有限公司

SERVICE

Brand

ROLE

Director

Visual Design

MORE

已停止營運

Rydeit 發財車為便捷的加密貨幣理財工具,以安全與簡易的策略,幫助用戶賺取區塊鏈上的利息。發財車意象,來自台灣小貨車的俗稱 ── 發財車:不用花大錢也能牽回家、開始為你生財。

Deerlight Design 的任務為進行一系列縝密的品牌識別規劃及設計執行,設計完整的品牌識別。

Concept
設計概念

將英文字母R及i互相結合,標誌整體瘦長,上半部表現圓潤,下半部則表現理性,以呈現中性的感受。左上方的小點象徵經典、指引,為標誌畫龍點睛,並向右下方呼應,看似遙遠卻觸手可及。

標準字為字首大寫,傾斜筆劃順應相同角度,筆畫構成俐落且動感
整體視覺重心偏下,收斂小寫Y下方筆劃,更顯輕巧。

Specification
規格化

標準字設計為瘦長的結構,標誌與每一個標準字之間皆有特定距離的比例配置,使整體視覺重心統一,具有視覺平衡的作用。

調整端點的間距,使標誌於不同尺寸瀏覽時能保持通透的留白。標誌以等粗線條構成不封閉的圖形,所有線條端點皆為相同圓角。所有線段之傾斜角度一致。

Guideline
品牌規範手冊

將品牌識別製成手冊,遵循規範手冊訂定之組合應用,以建立「Rydeit 發財車」品牌識別的整體形象。

於手冊中詳盡說明不同元素之間的應用及規範,清楚呈現標誌及標準字之詳細規格,制定標準字體選用、色彩應用、使用示範及各式應用、設計與製作等項目。

Share

Others Project

We are Dediprogers! 岱鐠企業招募影片

We are Dediprogers!
岱鐠企業招募影片

CLIENT

DediProg Technology Co., Ltd.

岱鐠科技股份有限公司

SERVICE

Product Intro.

ROLE

Motion

Art Design

MORE

Link ✹

岱鐠企業堅持以創新的產品、穩定的品質及扎實的管理來贏得客戶的信任,主要業務為生產與研發電子工程所需設備、輔助工具及工業精密儀器。

Deerlight Design 的任務為設計及製作企業招募影片,延續企業識別風格,帶入企業文化介紹及特色,以科技感的美術設定,使整體達到簡潔與統一的設計,加深品牌印象。

Concept
概念

藉由影片帶出產品服務、企業規模、企業文化,呈現企業優勢及特色。

Share

Others Project

WHEE! 下來玩!活動網站

WHEE!
下來玩!活動網站

CLIENT

Surprise Lab.

驚喜製造股份有限公司

SERVICE

Web UI

ROLE

UI / UX

Motion Design

MORE

Link ✹

PARTNER

Tuesday Design / Front End

WHEE! 下來玩!為一間新型態餐酒吧,結合迷你高爾夫、酒吧、餐飲等複合式娛樂空間 ── WHEE! 透過迷你高爾夫、隱藏在空間中的有趣事物,讓在繁忙都市生中的我們,體驗放鬆晚耍的不同可能。

Deerlight Design 的任務為評估專案規模,設計通用的版面,以適應不同情形而更改的文案內容。全站以彈性的設計與層級區分,使訊息集中於頁面的中心,在不同的裝置上都能保有良好的體驗。

Animation
動態特效

揮桿和歡呼的跳動氣氛

網站的入口使用識別結合插圖,當滑鼠於識別上,出現微微跳動的動態效果,營造出「揮桿」、「歡呼」、「開心」等愉悅氣氛。

Colorful
繽紛色彩

活潑色調區分內容

場域特點以活潑色調呈現,購票、問答等資訊頁面以清楚易讀的體驗設計。整體以中性色調襯托繽紛的視覺色彩,呈現出內容層級。

More
更多細節

行動版優先

以行動裝置(Mobile First)體驗優先,不論乘載資訊多寡,皆能保有良好的閱讀體驗。桌面版選單為側邊固定形式,可讓使用者清晰到達對應的頁面。

行動呼籲

不同裝置呈現皆設計出對應的行動呼籲按鈕,使用者不論使用何種裝置,均可見行動呼籲按鈕。

問答頁面

使用者可在此查詢所有問答及注意事項,透過分類可讓問答更加容易找尋,同時有效減少客服的工作量。

客製化劃位頁面

因應活動網站風格,設計對應的劃位頁面,並優化流程,提升使用體驗及增加效率。

Share

Others Project