top of page

01

Pi new website

Pi 拍錢包
​官網改版設計

Desktop & Mobile

Front End & UIUX Design

Pi web design.png

專案情境

  • 官網資訊年久未修,與現行資訊大有逕庭

  • 行銷欲傳遞更「年輕、活潑」的品牌形象​​

需求訪談

  1. 網頁介面老舊,嚴重影響品牌觀感。

  2. 過去網頁歷經多次改版,響應上有跑版問題。

  3. 按鈕無設定外開、手機/電腦資訊不同等體驗不佳。

  4. 字級太小且圖文重疊,易讀性不高。

  5. 內容不符合業務邏輯,影響合作夥伴關係。

Wireframes&Mockups

與網站企劃人員一同討論網站框架內容,整體規劃上先溝通服務、再加強行銷內容。

UI 以品牌人物為主導,以塑造「年輕、新穎」的視覺,以簡約清爽的版面傳遞產品形象,

設計核心是使圖文分明並讓主視覺吸睛,並透過互動遊戲 highlight 產品訊息。

▼網站架構與視覺▼

UI作品集.png

前端切版

本次使用HTML及CSS進行切版及設置微動畫,並解決瀏覽器在各版面尺寸的相容性問題。

coding.png

 前後對比

舊版視覺層級不明、圖的份量感大於文字,優化後整體視覺更吸睛、資訊更明確;

Before

After

Pi官網UI_PC_主視覺CF.png
Pi官網UI_PC_資訊內容CF.png

Mobile舊版換行會溢出與文字低易讀性問題,在新版皆已重新設置個尺寸相容性(RWD)。

Before

After

Pi官網UI_Mobile_主視覺CF.png

Before

After

Pi官網UI_Mobile_資訊內容CF.png
官網UI-11.png

專案負責 | UIUX Design、Frontend Web

版權聲明:圖片僅供作品集示意,版權為 Pi 拍錢包所有,請勿擅自下載與截圖使用。

*若有任何疑問煩請聯絡處理*

©2023 by Konno Ayaka(Yi-Ting, Lin) 

bottom of page