Dreamers
Dreamers
Dreamers
每個夢想都從一杯新鮮的咖啡開始。
每個夢想都從一杯新鮮的咖啡開始。
每個夢想都從一杯新鮮的咖啡開始。
關於專案
此個人專案的目標是為 Dreamers Coffee 品牌重新打造官方網站,以提供更好的導覽和品牌體驗。在這次網站重新設計中,我運用 Framer 製作了一個互動式的示範網站以更實際的展示解決方案。
關於專案
此個人專案的目標是為 Dreamers Coffee 品牌重新打造官方網站,以提供更好的導覽和品牌體驗。在這次網站重新設計中,我運用 Framer 製作了一個互動式的示範網站以更實際的展示解決方案。
關於專案
此個人專案的目標是為 Dreamers Coffee 品牌重新打造官方網站,以提供更好的導覽和品牌體驗。在這次網站重新設計中,我運用 Framer 製作了一個互動式的示範網站以更實際的展示解決方案。
時程
1 月 ~ 3 月, 2024
我的角色
UI 設計
Framer 建置
設計系統
時程
1 月 ~ 3 月, 2024
我的角色
UI 設計
Framer 建置
設計系統
時程
1 月 ~ 3 月, 2024
我的角色
UI 設計
Framer 建置
設計系統
( 簡介 )
目標
改善網站導覽體驗與資訊易讀性
使網站視覺與品牌價值感受一致
優化菜單瀏覽體驗
挑戰
產出能夠表達品牌價值的視覺
在優化網站瀏覽體驗的同時，考量到如何更好的展現品牌價值與特色。
用 Framer 建立網站與特效
這是我首次使用 Framer 建立網站，因此針對部分網站效果的操作上並不是很熟悉。
解決方案
將「視覺滾動」作為主要視覺效果
我在分析品牌網站、社群、Google 評論後，決定採用「視覺滾動」效果來營造一種身臨情境的分為，也能詮釋品牌的靜謐沈穩的品牌風格。
研究參考其他 Framer 作品與教學
在進修 Framer 學院的課程與參考其他設計師的作法後，我能成功地將想使用的特效應用在網站作品中。
( 簡介 )
目標
改善網站導覽體驗與資訊易讀性
使網站視覺與品牌價值感受一致
優化菜單瀏覽體驗
挑戰
產出能夠表達品牌價值的視覺
在優化網站瀏覽體驗的同時，考量到如何更好的展現品牌價值與特色。
用 Framer 建立網站與特效
這是我首次使用 Framer 建立網站，因此針對部分網站效果的操作上並不是很熟悉。
解決方案
將「視覺滾動」作為主要視覺效果
我在分析品牌網站、社群、Google 評論後，決定採用「視覺滾動」效果來營造一種身臨情境的分為，也能詮釋品牌的靜謐沈穩的品牌風格。
研究參考其他 Framer 作品與教學
在進修 Framer 學院的課程與參考其他設計師的作法後，我能成功地將想使用的特效應用在網站作品中。
( 簡介 )
目標
改善網站導覽體驗與資訊易讀性
使網站視覺與品牌價值感受一致
優化菜單瀏覽體驗
挑戰
產出能夠表達品牌價值的視覺
在優化網站瀏覽體驗的同時，考量到如何更好的展現品牌價值與特色。
用 Framer 建立網站與特效
這是我首次使用 Framer 建立網站，因此針對部分網站效果的操作上並不是很熟悉。
解決方案
將「視覺滾動」作為主要視覺效果
我在分析品牌網站、社群、Google 評論後，決定採用「視覺滾動」效果來營造一種身臨情境的分為，也能詮釋品牌的靜謐沈穩的品牌風格。
研究參考其他 Framer 作品與教學
在進修 Framer 學院的課程與參考其他設計師的作法後，我能成功地將想使用的特效應用在網站作品中。
品牌分析
品牌分析
品牌分析
品牌價值
品牌價值
品牌價值
鼓勵並支持每位 Dreamers 的顧客能堅持並持續努力朝夢想前進！
鼓勵並支持每位 Dreamers 的顧客能堅持並持續努力朝夢想前進！
鼓勵並支持每位 Dreamers 的顧客能堅持並持續努力朝夢想前進！
社群行銷策略
社群行銷策略
社群行銷策略
Dreamers 積極在官方 IG 和 FB 分享店內陳列、菜色、咖啡、分店等故事，打造溫馨舒適又充滿質感的氛圍感。
Dreamers 積極在官方 IG 和 FB 分享店內陳列、菜色、咖啡、分店等故事，打造溫馨舒適又充滿質感的氛圍感。
Dreamers 積極在官方 IG 和 FB 分享店內陳列、菜色、咖啡、分店等故事，打造溫馨舒適又充滿質感的氛圍感。
品牌特色
品牌特色
品牌特色
研發多元的健康菜色和飲品
將當地生活和文化融入店面設計
研發多元的健康菜色和飲品
將當地生活和文化融入店面設計
研發多元的健康菜色和飲品
將當地生活和文化融入店面設計
品牌氛圍
品牌氛圍
品牌氛圍
透過對品牌的分析，我篩選了一些能夠與官網設計做結合的關鍵字來體現品牌體驗。
透過對品牌的分析，我篩選了一些能夠與官網設計做結合的關鍵字來體現品牌體驗。
透過對品牌的分析，我篩選了一些能夠與官網設計做結合的關鍵字來體現品牌體驗。
#溫馨舒適
#溫馨舒適
#勇於追夢
#勇於追夢
#沉靜式
#沉靜式
#積極正向
#積極正向
#質感
#質感
設計系統
設計系統
設計系統
字體樣式
字體樣式
Work Sans
Work Sans
粗體、正常
顏色系統
顏色系統
主色
主色
#FFBA08
#FFBA08
輔色
輔色
#F2F2F2
#F2F2F2
中性色
中性色
#231816
#231816
字體樣式
Work Sans
粗體、正常
顏色系統
主色
#FFBA08
輔色
#F2F2F2
中性色
#231816
設計成果
設計成果
設計成果
手機
手機
手機
桌機
桌機
桌機
首頁改版
1
將店內風格融入網站設計中
網站設計靈感來自品牌門市室內裝潢，透過顏色與簡潔線條，營造出品牌獨有的舒適質感氛圍。並藉由展示店內實景與餐點等照片，呼應積極追夢的品牌理念。
2
創造品牌沈浸感
網站藉助視差滾動動畫，為使用者構築出富有張力的品牌故事體驗。設計也融入品牌理念的正能量文字設計元素，與品牌的社群行銷策略相互呼應，凸顯品牌正面積極的形象。
首頁改版
1
將店內風格融入網站設計中
網站設計靈感來自品牌門市室內裝潢，透過顏色與簡潔線條，營造出品牌獨有的舒適質感氛圍。並藉由展示店內實景與餐點等照片，呼應積極追夢的品牌理念。
2
創造品牌沈浸感
網站藉助視差滾動動畫，為使用者構築出富有張力的品牌故事體驗。設計也融入品牌理念的正能量文字設計元素，與品牌的社群行銷策略相互呼應，凸顯品牌正面積極的形象。
首頁改版
1
將店內風格融入網站設計中
網站設計靈感來自品牌門市室內裝潢，透過顏色與簡潔線條，營造出品牌獨有的舒適質感氛圍。並藉由展示店內實景與餐點等照片，呼應積極追夢的品牌理念。
2
創造品牌沈浸感
網站藉助視差滾動動畫，為使用者構築出富有張力的品牌故事體驗。設計也融入品牌理念的正能量文字設計元素，與品牌的社群行銷策略相互呼應，凸顯品牌正面積極的形象。
菜單體驗改版
1
建立具擴充性與高可用性的分店瀏覽架構。
依照地理位置，將品牌分店按北、中、南、東區域分類。此分類系統不僅讓使用者可依據所在區域快速查閱分店資訊，也為未來門市擴增預留靈活管理彈性。
2
優化菜單品項瀏覽體驗
版面採用模組化設計，提升頁面簡潔度與易讀性。各類別餐點則設有獨立茅點區塊,讓用戶快速瀏覽品項。我也運用標籤系統,突出各分店的獨家與熱門特色餐點，強化行銷推廣效果。
菜單體驗改版
1
建立具擴充性與高可用性的分店瀏覽架構。
依照地理位置，將品牌分店按北、中、南、東區域分類。此分類系統不僅讓使用者可依據所在區域快速查閱分店資訊，也為未來門市擴增預留靈活管理彈性。
2
優化菜單品項瀏覽體驗
版面採用模組化設計，提升頁面簡潔度與易讀性。各類別餐點則設有獨立茅點區塊,讓用戶快速瀏覽品項。我也運用標籤系統,突出各分店的獨家與熱門特色餐點，強化行銷推廣效果。
菜單體驗改版
1
建立具擴充性與高可用性的分店瀏覽架構。
依照地理位置，將品牌分店按北、中、南、東區域分類。此分類系統不僅讓使用者可依據所在區域快速查閱分店資訊，也為未來門市擴增預留靈活管理彈性。
2
優化菜單品項瀏覽體驗
版面採用模組化設計，提升頁面簡潔度與易讀性。各類別餐點則設有獨立茅點區塊,讓用戶快速瀏覽品項。我也運用標籤系統,突出各分店的獨家與熱門特色餐點，強化行銷推廣效果。
加盟專區頁
1
優化資訊呈現
將內容重整並分類與排版，盡量減少過多的滾動操作，並運用簡潔的視覺元素輔佐加盟流程說明，提升內容的理解效率。
加盟專區頁
1
優化資訊呈現
將內容重整並分類與排版，盡量減少過多的滾動操作，並運用簡潔的視覺元素輔佐加盟流程說明，提升內容的理解效率。
加盟專區頁
1
優化資訊呈現
將內容重整並分類與排版，盡量減少過多的滾動操作，並運用簡潔的視覺元素輔佐加盟流程說明，提升內容的理解效率。
聯絡我們頁
1
區分不同聯絡需求
將「人才招募」功能獨立成外部連結,直接導向品牌官方的104招募網站。而「客服」及「商業合作」等需求則透過聯絡表單進行收集,確保使用者能輕鬆找到合適的管道進行諮詢。
聯絡我們頁
1
區分不同聯絡需求
將「人才招募」功能獨立成外部連結,直接導向品牌官方的104招募網站。而「客服」及「商業合作」等需求則透過聯絡表單進行收集,確保使用者能輕鬆找到合適的管道進行諮詢。
聯絡我們頁
1
區分不同聯絡需求
將「人才招募」功能獨立成外部連結,直接導向品牌官方的104招募網站。而「客服」及「商業合作」等需求則透過聯絡表單進行收集,確保使用者能輕鬆找到合適的管道進行諮詢。
( OTHER PROJECTS )
( OTHER PROJECTS )
( OTHER PROJECTS )
( OTHER PROJECTS )
( OTHER PROJECTS )
( OTHER PROJECTS )
