My Personal Site
我的個人網站
#個人網站
#網頁設計
#客製化設計
作品介紹
這是一個專為自己打造的個人網站，結合作品集與形象展示的功能。
主要用於呈現作品成果、介紹自己，還能提供一個連絡管道與作品集中地。
設計上首頁與內頁分別採用兩種不同風格，一方面想測試不同的排版方式在實際網頁上的應用，另一方面也作為工具使用上的成果，不過在配色和版面邏輯上，還是保持一致，讓網站不會過於凌亂。
首頁使用了拼貼式設計，在響應式調整與互動上具有相當的挑戰性，也比較吃素材本身的質感與適配度，但能換來更具創新與吸睛的視覺效果。
內頁則走常見的流式排版，不依賴素材，專注於運用Elementor原生的功能，結合自訂CSS與客製化排版，並結合一些Javascripts互動，讓頁面在簡潔中多出一些層次感。
設計與顏色
網站通用主色
- 整體上主顏色淡藍色，搭配中性色(黑、灰、白)。
- 頁面背景以黑底為主，配合區塊設計呈現色塊強調。
- 文字使用白、灰，在黑色背景上提供更舒適的閱讀性。
故事頁面
- 本頁面以奶油黃為主色，營造溫暖、親切的氛圍。
- 輔色則選用更柔和的淺黃作為陰影與擴散光，柔化介面的邊緣。
作品頁面
- 本頁面以午夜藍為主色，營造沉穩、思考的氛圍。
- 象徵每個作品之間的創新，同時兼具了邏輯的設計理念。
委託頁面
- 本頁面以墨綠為主色，營造穩健、成長與合作的氛圍。
- 輔色以亮綠色做選配，用以更高效清晰地呈現重點，象徵著豐碩的成果。
聯絡頁面
- 本頁面以神秘紫為主色，營造靈感、深層連結的氛圍。
- 輔色同樣採用更柔和的紫色，柔化一部份嚴肅感，創造出一個充滿靜謐、帶有可能性的空間。
本網站以高度個人化的敘事風格為核心，透過獨特的敘事性色彩語言、策略性的排版佈局和互動性功能，打造一場沉浸式的探索體驗。
在色彩的選用上，採用每個頁面承載著專屬的色彩故事，引導訪客體驗不同色調間的情緒氛圍，也因此讓色彩成為無形的內容引導者。
排版方面與結構方面，考量了全幅和半幅設計的佈局優勢。
最終採用近全幅設計，兼顧視覺衝擊力與內容可讀性。
內頁介面設計的部分，卡片主體以陰影與擴散光為主要表現手法，融合頁面背景選用黑底，讓內容與設計上更能發揮出其專業和舒適的特點，並輔以功能性裝飾，提升整體的互動性與視覺感。
此外，另設一個「設計幕後故事」，分享過程中的思考決策與轉折。
設計幕後故事
耗時與風格取捨
從開始在Figma做設計，到實際架站的過程大概持續了兩個月的時間開發，原本一開始是採用首頁那種以素材為主的設計，但實際製作後發現不管是在響應式或是排版上都需要花大量的心力和時間維護，所以首頁與內頁的風格分開，更像是一種嘗試?
排版佈局的選擇
從開始在Figma做設計，到實際架站的過程大概持續了兩個月的時間開發，原本一開始是採用首頁那種以素材為主的設計，但實際製作後發現不管是在響應式或是排版上都需要花大量的心力和時間維護，所以首頁與內頁的風格分開，更像是一種嘗試?
亮點功能展示
大多數頁面會依據裝置自動調整版面(也就是RWD響應式設計)，確保PC、平板和手機都有良好的體驗。
功能方面，內建能夠串接Email的表單功能，搭配可持續新增與維護的作品集頁面，讓訪客能輕鬆找到你，也讓後續的新增與維護更省心。
網站互動性上，使用了少見的滑動式設計，搭配Sticky及內容替換，在瀏覽過程中創造沉浸感與動態視覺上的趣味。
首頁的作品區支援動態式的作品切換方式，兼顧了視覺特色和操作感，打造獨特的瀏覽體驗。
