The F2E 4th 活動網站 改版
Overview
圍繞著「鑽石原石」＆「舞台演出」兩大主軸，飽含故事性的 Landing page
「The F2E 4th 前端 & UI 修煉精神時光屋」為六角學院發起的活動。為期一個月左右、共含三道關卡，由設計師先製作設計稿、再交給工程師認領開發。
本專案呈現第一週的挑戰主題：Redesign The F2E 4th 活動網站
Period
Nov. 2022
Client
Personal Work
Service
概念發想 · 視覺設計 · 網頁設計 · 前台動態設定
Credit
Design / Molly Hung 文案提供 / 六角學院
設計理念
轉譯意象，撐開多層次的想像空間
序幕
貫穿全頁的鑽石原礦作為活動舞台閃亮亮的裝飾，既指參加者、也可投射至俯拾即是的設計稿與原始碼。首頁 Hero Banner 可使用滑鼠與物件發生互動視差，持續向下滾動、遮罩轉場則會在「彩色—黑白—彩色」之間切換。（參加The F2E，獲得解答後前景是多彩的😌？）
大命題 zoom out 退場，緊接著拋出三則更精準的小疑問：
羨慕別人的酷酷網頁動畫 —(對應)→ 垂涎的眼睛、緊盯眾多含有酷炫動畫的網站
滿足不了同事的許願 —(對應)→ 落下的許願流星上面嵌著無法顯示的符號"☒"（該更新了！）
動畫技能樹太雜無從下手 —(對應)→ 隨機擴散、枝節交錯的技能樹
第二幕
提出問題，接著來到提供解方（解釋活動內容）的區塊。
從「參加者可以盡情發揮的表演場域」這點展開思考，發覺設計師在舞台上的角色可類比作曲家，負責在既有系統的基礎上編排獨一無二的設計稿；格線系統也很像五線譜，看似是框架、一旦置入不同功能與樣式的元件(音符)，便會產生無限種性格與節奏大相徑庭的畫面。（另外，選擇將線譜纏繞在手上拉開，多少有些想帶出 Grid 好比翻花繩可自由自在變化的意味）
而有不同工程師，面對相同的前端畫面、就有幾種撰寫方式，彷彿演奏家們儘管面對同一部樂譜，也都有各自的詮釋；此處將「琴鍵」與「鍵盤」結合，彈奏一串音符就像敲打一串 Code。
接連三週而來的關卡，總有種節奏遊戲(Music Game)的影子在：玩家需憑藉敏捷的反應、在短時間內高度集中地不漏接節奏，追求漂亮的 Full Combo。
第三幕
通關後，則是獲得大量經驗值的升級時間，背景散佈了許多向上飄地、小小的 " Level UP " 字樣；此處把文案資訊偏多的時程切成數個小段、配合卡拉OK文字特效，讓使用者邊捲動頁面邊吸收。
幕與幕的轉場處理
為了貫徹「舞台」意象，在幕與幕之間加入幕簾掀起的動態，模擬表演幕昇及演出結束後、Staff謝幕。
（以下為手機版局部畫面）
（*以上動態使用動畫與 Prototype 模擬，非實際開發畫面。）
The F2E 4th 活動網站 改版
Overview
圍繞著「鑽石原石」＆「舞台演出」兩大主軸，飽含故事性的 Landing page
「The F2E 4th 前端 & UI 修煉精神時光屋」為六角學院發起的活動。為期一個月左右、共含三道關卡，由設計師先製作設計稿、再交給工程師認領開發。
本專案呈現第一週的挑戰主題：Redesign The F2E 4th 活動網站
Period
Nov. 2022
Client
Personal Work
Service
概念發想 · 視覺設計 · 網頁設計 · 前台動態設定
Credit
Design / Molly Hung 文案提供 / 六角學院
設計理念
轉譯意象，撐開多層次的想像空間
序幕
貫穿全頁的鑽石原礦作為活動舞台閃亮亮的裝飾，既指參加者、也可投射至俯拾即是的設計稿與原始碼。首頁 Hero Banner 可使用滑鼠與物件發生互動視差，持續向下滾動、遮罩轉場則會在「彩色—黑白—彩色」之間切換。（參加The F2E，獲得解答後前景是多彩的😌？）
大命題 zoom out 退場，緊接著拋出三則更精準的小疑問：
羨慕別人的酷酷網頁動畫 —(對應)→ 垂涎的眼睛、緊盯眾多含有酷炫動畫的網站
滿足不了同事的許願 —(對應)→ 落下的許願流星上面嵌著無法顯示的符號"☒"（該更新了！）
動畫技能樹太雜無從下手 —(對應)→ 隨機擴散、枝節交錯的技能樹
第二幕
提出問題，接著來到提供解方（解釋活動內容）的區塊。
從「參加者可以盡情發揮的表演場域」這點展開思考，發覺設計師在舞台上的角色可類比作曲家，負責在既有系統的基礎上編排獨一無二的設計稿；格線系統也很像五線譜，看似是框架、一旦置入不同功能與樣式的元件(音符)，便會產生無限種性格與節奏大相徑庭的畫面。（另外，選擇將線譜纏繞在手上拉開，多少有些想帶出 Grid 好比翻花繩可自由自在變化的意味）
而有不同工程師，面對相同的前端畫面、就有幾種撰寫方式，彷彿演奏家們儘管面對同一部樂譜，也都有各自的詮釋；此處將「琴鍵」與「鍵盤」結合，彈奏一串音符就像敲打一串 Code。
接連三週而來的關卡，總有種節奏遊戲(Music Game)的影子在：玩家需憑藉敏捷的反應、在短時間內高度集中地不漏接節奏，追求漂亮的 Full Combo。
第三幕
通關後，則是獲得大量經驗值的升級時間，背景散佈了許多向上飄地、小小的 " Level UP " 字樣；此處把文案資訊偏多的時程切成數個小段、配合卡拉OK文字特效，讓使用者邊捲動頁面邊吸收。
幕與幕的轉場處理
為了貫徹「舞台」意象，在幕與幕之間加入幕簾掀起的動態，模擬表演幕昇及演出結束後、Staff謝幕。
（以下為手機版局部畫面）
（*以上動態使用動畫與 Prototype 模擬，非實際開發畫面。）
The F2E 4th 活動網站 改版
Overview
圍繞著「鑽石原石」＆「舞台演出」兩大主軸，飽含故事性的 Landing page
「The F2E 4th 前端 & UI 修煉精神時光屋」為六角學院發起的活動。為期一個月左右、共含三道關卡，由設計師先製作設計稿、再交給工程師認領開發。
本專案呈現第一週的挑戰主題：Redesign The F2E 4th 活動網站
Period
Nov. 2022
Client
Personal Work
Service
概念發想 · 視覺設計 · 網頁設計 · 前台動態設定
Credit
Design / Molly Hung 文案提供 / 六角學院
設計理念
轉譯意象，撐開多層次的想像空間
序幕
貫穿全頁的鑽石原礦作為活動舞台閃亮亮的裝飾，既指參加者、也可投射至俯拾即是的設計稿與原始碼。首頁 Hero Banner 可使用滑鼠與物件發生互動視差，持續向下滾動、遮罩轉場則會在「彩色—黑白—彩色」之間切換。（參加The F2E，獲得解答後前景是多彩的😌？）
大命題 zoom out 退場，緊接著拋出三則更精準的小疑問：
羨慕別人的酷酷網頁動畫 —(對應)→ 垂涎的眼睛、緊盯眾多含有酷炫動畫的網站
滿足不了同事的許願 —(對應)→ 落下的許願流星上面嵌著無法顯示的符號"☒"（該更新了！）
動畫技能樹太雜無從下手 —(對應)→ 隨機擴散、枝節交錯的技能樹
第二幕
提出問題，接著來到提供解方（解釋活動內容）的區塊。
從「參加者可以盡情發揮的表演場域」這點展開思考，發覺設計師在舞台上的角色可類比作曲家，負責在既有系統的基礎上編排獨一無二的設計稿；格線系統也很像五線譜，看似是框架、一旦置入不同功能與樣式的元件(音符)，便會產生無限種性格與節奏大相徑庭的畫面。（另外，選擇將線譜纏繞在手上拉開，多少有些想帶出 Grid 好比翻花繩可自由自在變化的意味）
而有不同工程師，面對相同的前端畫面、就有幾種撰寫方式，彷彿演奏家們儘管面對同一部樂譜，也都有各自的詮釋；此處將「琴鍵」與「鍵盤」結合，彈奏一串音符就像敲打一串 Code。
接連三週而來的關卡，總有種節奏遊戲(Music Game)的影子在：玩家需憑藉敏捷的反應、在短時間內高度集中地不漏接節奏，追求漂亮的 Full Combo。
第三幕
通關後，則是獲得大量經驗值的升級時間，背景散佈了許多向上飄地、小小的 " Level UP " 字樣；此處把文案資訊偏多的時程切成數個小段、配合卡拉OK文字特效，讓使用者邊捲動頁面邊吸收。
幕與幕的轉場處理
為了貫徹「舞台」意象，在幕與幕之間加入幕簾掀起的動態，模擬表演幕昇及演出結束後、Staff謝幕。
（以下為手機版局部畫面）
（*以上動態使用動畫與 Prototype 模擬，非實際開發畫面。）
