從內容到視覺:重新定義照護品牌的官網形象
從0到1的設計,規劃照護官網內容。
團隊組成
UI/UX 設計X1、PM X1、前端工程師X1
專案時間
1.5 個月
專案背景
公司專長除了承接政府交通接駁平台設計外,另有長照居服人員,此專案為希望將兩項專業服務重新用一個形象網站來呈現。
我的角色
負責規劃網站內容和實際執行視覺風格。
前往實際官網
許願
簡單介紹公司的服務
有可以前往交通服務平台、以及照護官網的按鈕
照護服務之後會再建置一個以人為主的服務網站,目前這個網站是一個形象頁能夠倒去其他地方的首頁
看起來要專業、有親和力、讓人充滿希望的網站
客戶的大致想法如下圖
架構規劃
我將網站規劃如下圖,主要的交通服務和照護服務放在關於我們下方的區塊,並設置明顯的 CTA 按鈕在服務內容區塊。
實際介面呈現
LOGO 區
用in care 、i care帶出關鍵核心「您的健康,我們在乎」
整體色系已有活力的淡綠色呈現健康的概念
運用動畫和有溫度的手些文字編排呈現照護有溫度的一面
About 區
不規則的畫面裁切banner
手動調整輪播畫面切換不同主視覺
藉由圖文編排讓整體看起來是有溫度的
體驗服務 CTA
運用滑鼠移入反黑的效果呈現出這區塊為整個首頁的重點區
將主要的交通服務以及照護服務放在此區塊
服務內容
上下錯開的排列方式讓畫面看起來有層次
運用滑鼠移入效果配合照片轉會色彩及大小讓互動更顯而易見
最新消息
乾淨的綠色系讓資訊簡潔明瞭
一樣有滑鼠移入的小小互動效果
使用者回饋
一進來的LOGO動畫滿吸睛的~不知道能不能在滑走以後再滑回來的時候可以繼續再跑一次!
排版和配色都很清爽,讓人看了很舒服。
界面整潔,資訊分類明確,連長輩都可以容易上手。
點到某個主題會反黑是一個很不錯的設計,可以讓視力不佳的長輩清楚知道游標到哪裡了!
結論
覺得可以再優化的地方:
服務內容的部分點到會變色的地方,從彩色變成灰階好像比較不討喜,有點像像人生彩色變黑白,更優化的話可以改為放大圖片即可不要變色。
這個專案,時間短促緊湊,但為了讓每一個設計決策都能夠提升網站的體驗,我在開始畫設計稿前先進行內容規劃,確保符合使用需求,提升了整體的設計效率。