Le Creuset
RWD改版設計
01
專案介紹
一直以來都很喜歡Le Creuset的產品，在品牌形象上也都有很好的呈現，但個人認為目前台灣官網的部分仍有改善的空間，因此選擇這個品牌來進行RWD改版設計
02
設計研究
此項專案著重於線上購物流程頁面的重新規劃，將網頁內容資訊、選單、按鈕等做統整，讓視覺動線流暢並能更容易抓住重點以方便購買
工作流程
將原本的線上購物流程做統整規劃，使分類層級更加明確，讓購買體驗可以更加流暢
03
UI Guide
色彩規劃
沿用原本品牌的亮橘色以及深灰色做搭配
主色調
#FA7000
#ffa140
輔色調
#363636
#EDEEF2
文字色
#363636
警示色
#E25454
字體樣式
元件
04
頁面設計
首頁
將原本分散的資訊重新整理歸納至上方選單內，並在首頁下方分為“推薦”及“最新資訊”兩部份，以凸顯觀看重點和流暢視覺動線
Before
After
線上商店
將左方層級繁雜的商品選單改置於頁面上方，並以文字搭配圖標的模式增加辨識和觸發明顯度，而選單細項則分開置於下方的類別選項內，根據不同的產品類別再進一步選擇想要的商品
另外Le Creuset獨特的彩色珐瑯技術除了為品牌亮點之外，同時也是消費者選購商品的考量因素之一，因此將商品的顏色預視新增至縮圖下方
Before
After
商品頁面
將商品資訊重新編排，讓在選購時能更清楚的了解商品規格及顏色數量等，並將下方產品特色介紹的部份劃分區塊，以流暢閱讀視覺動線。 另外加上互動的模式，透過點擊商品照片上的”＋“圖標來介紹產品的工藝特色，減少過多的文字敘述同時佔滿版面
Before
After
購物車
將購物結帳流程及狀態顯示於頁面上方，並重新規劃購買細項資訊和訂單摘要部分，以清楚瀏覽購買的商品與總額，減少下單錯誤發生
Before
After
登入頁面
重新編排“會員登入”及“建立帳戶”區域，避免版面資訊過於集中，平衡版面的資訊
Before
After
手機畫面
