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

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

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

K.Y.C. Caster 惠誌企業形象官網

K.Y.C. Caster
惠誌企業形象官網

CLIENT

K.Y.C. Caster & Co ., Ltd.

惠誌企業股份有限公司

SERVICE

Web UI

ROLE

UI / UX

Front End

MORE

Link ✹

惠誌企業股份有限公司(K.Y.C. Caster & Co., Ltd.)專門設計及製造高品質腳輪及其零件,種類遍及大型醫療儀器用的雙輪、工業機械及傢俱用腳輪。

Deerlight Design 的任務為運用 Squarespace 服務建置具有語系切換的形象網站。

Carousel
形象輪播

將企業精神製成形象圖片,於網站首頁輪播,在第一眼即置入企業形象。提供形象圖片版型,供客戶可自行更換內容。

More
更多細節

RWD 響應式設計

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

Squarespace 建置

運用 Squarespace 建置網站,適合預算有限的情形下製作具管理後台的網站,網站完成交接後,客戶可依據教學文件的指示,自行管理網站。

雙語系

因應企業觸及全球,規劃具有英文及繁體中文的雙語系內容,讓不同語言的使用者,皆能清楚理解企業所傳遞的資訊。

Share

Others Project

Home Hotel 逸寬文旅官網重構

Home Hotel
逸寬文旅官網重構

CLIENT

Home Hotel

逸寬股份有限公司

SERVICE

Web UI

ROLE

UI / UX

Front End

MORE

Link ✹

PARTNER

Whien Liou / Full Stack

HOME HOTEL 以臺灣製造與臺灣設計為品牌精神的設計旅館,讓飯店化為舞臺,將臺灣品牌的一份用心與堅持,介紹給每一位來訪的旅客。

Deerlight Design 的任務為運用 WordPress 服務重構原官網程式架構,提升瀏覽速度的效能,加入新的需求、功能,並完善頁面中的內容。

More
更多細節

RWD 響應式設計

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

WordPress 建置

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

多語系切換

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

Share

Others Project

Watch Out! It’s a trap! 日常陷阱題活動網站

Watch Out!
It’s a trap!
日常陷阱題活動網站

CLIENT

Fourdesire

四合願股份有限公司

SERVICE

Web UI

ROLE

UI / UX

Motion Design

PARTNER

Tuesday Design / Front End

Fourdesire 推出年度運勢測驗「日常陷阱題」,邀請使用者預測 2020 代表字,運用引發網友共鳴的網路熱詞,揪出隱藏壞習慣,藉此推廣相關 APP 產品以及宣傳與 Hahow 好學校共同推出「年末告解俱樂部」企劃。

Deerlight Design 的任務為規劃合適的網站版面,讓客戶套用對應的測驗內容,引導使用者完成與分享測驗。

Mobile First
行動體驗優先

以手機裝置體驗(Mobile First)為優先,區分活動主視覺、測驗區塊以及應用程式下載;並設定多語系切換,供使用者自行選擇。

測驗以漫畫形式呈現,讓角色引導使用者進入測驗情境。整體規劃考量測驗內容呈現與切換頁模式、活動形象以及效能配置,從中取得良好的平衡。

Share

Others Project

Club Tomorrow 明日俱樂部活動網站

Club Tomorrow
明日俱樂部活動網站

CLIENT

Surprise Lab.

驚喜製造股份有限公司

SERVICE

Web UI

ROLE

UI / UX

Motion Design

MORE

Link ✹

PARTNER

Tuesday Design / Front End

Yiche Feng / Illustrations

明日俱樂部 Club Tomorrow 為驚喜製造團隊推出的第五項沉浸式體驗作品,參與者將經歷一場結合表演、派對、音樂、酒飲、小點的大型體驗,在狂歡之中,迎來由所有人一同導向的結局。

Deerlight Design 的任務為評估專案的時程及適當的規劃,區分不同頁面之任務,引入項目的故事並融入於網站設計中,透過互動呈現隱藏訊息,讓使用者留下深刻印象及啟發。

Animation
動態特效

隱藏訊息

在介紹區塊中,透過滑鼠懸停互動,釋出隱藏訊息。當使用者閱讀表象訊息時,以第一個角度理解體驗,當隱藏訊息顯現時,似乎暗藏著玄機,讓使用者一層層地深入了解。

Full Page
全頁式導覽效果

瀏覽頁面時,一次僅可閱讀一頁區塊,當區塊滑動時,背景的霓虹插圖也隨之改變,搭配隱藏訊息,呈現強烈對比。

右側增加站內錨點,使用者在瀏覽網站時可明確知道目前位置,不備全頁導覽限制位置。

More
更多細節

RWD 響應式設計

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

特殊互動頁面

因應行銷活動,設計單頁互動頁面,使用者可輸入對應的隱藏訊息,聆聽音檔,增加體驗厚度,讓體驗不僅限場地,散場之後仍可延續熱度。

問答頁面

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

客製化預定及劃位頁面

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

Share

Others Project

#NOAPOLOGY 放視大賞心理測驗網站

#NOAPOLOGY
放視大賞心理測驗網站

CLIENT

Whitelight Motion

白輻設影像有限公司

SERVICE

Web UI

ROLE

UI / UX

Motion Design

PARTNER

Tuesday Design / Front End

GETWILD2019 ✕ 放視大賞 —— 對世界與想像力的追求,每個時代都有一群人像瘋子一樣做著當下無法理解的事,而這群人正是讓想像力無限放大的力量。藉由心理測驗網站讓使用者找出自己的創意人格,與社群分享互動,並產生連結,達到活動宣傳的效益。

Deerlight Design 的任務為設計心理測驗網站,將客戶提供的想法,轉換為可行的方案。

Animation
動態特效

以字段輪播呈現三種「放肆」精神:Ideation 想法決定的瞬間、Inspiration 啟發鼓舞的影響、Imagination 想像創作的力量,象徵不同的人格特質。

Psychological Test
心理測驗

透過 9 道題目的心理測驗,探索自身的人格類型,並邀請三位與會的設計師對號入座,就自己的人格設定,接力共同完成視覺創作。

Interactive
進行互動

使用者完成測驗之後,將計算測驗分析,給予對應的描述,接著使用者於選項中,選擇符合自己的特質,製成專屬個人的測驗結果。

More
更多細節

RWD 響應式設計

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

Share

Others Project