台灣視多障協會形象網站

首頁

»

台灣視多障協會形象網站

UX/UI/Visual Design

台灣視多障協會形象網站連結

motion_photos_on 專案概述

專案背景

台灣視多障協會為非營利組織,致力於解決視多障安置困境,目前尚在初期營運階段,需要官網來建立捐款人對於協會的信任度,希望透過設計傳達協會主旨及相關活動,並導引捐款

問題陳述

協會營運初期,由於許多捐款人表示,會藉由官網查看協會相關訊息,來判斷協會是否真實存在及確實幫助捐款對象,但協會目前只有FB粉專對外接觸,因此需要官網建立協會可信度,同時藉由不同渠道,擴大影響力。

設計目標

滿足業主基本需求,網站須能展示相關文章及活動影片,並外連導引到捐款頁,同時透過流程及介面設計導引捐款人閱讀文章及進行捐款

專案限制

因應業主需求,需快速完成開發,但由於只有一人負責設計及工程,為加快開發速度,採用Wordpress進行開發,由於後端部分尚不熟悉,因此先以完成業主基本功能要求為主,無法達成太過於複雜的功能,未來若有相關需求,後續再進行開發。

專案角色

本次專案中擔任UI設計師及前端切版工程師角色。

從頁面邏輯到上線主機皆一人完成,流程設計及視覺設計透過Figma完成,前端切版則採用Bootstrap框架進行開發,並透過php客製化wordpress子主題,最後,利用Google Cloud Platform作為主機,實際上線

motion_photos_on 設計提案

Experience Keywords

Moodboard

Visual Style

Color Scheme

motion_photos_on 設計執行

Sitemap

由於開發時間較短,故選擇一般部落格的架構進行開發,配合業主需求,紅色標註為須切版頁面

Color Scheme

業主選擇「溫潤淡雅」風格,以簡單乾淨為原則,選用明度較低的色彩,較適合非營利組織默默行善的作風,並使用圓點、曲線等作為設計,傳達協會包容視多障的宗旨,整體色系傳達溫暖堅定的感受。

Fonts

非營利組織資源較少,也沒有額外資金可以添購商業字體,故選擇Google的免費中文字型思源黑體,易於電腦、智慧型手機上閱讀
為配合Bootstrap套件開發,字級大小上,故先決定好各種標題、段落文字大小,方便開發

Icon

Wireframe

Mockup-首頁

  1. 用一句話清楚說明協會宗旨及目標
  2. 向使用者解釋協會的服務對象,並用CTA引導觀看生命故事
  3. 向使用者說明遭遇的困境,同樣使用CTA導引到部落格
  4. 說明協會為了解決問題,曾做過那些活動幫助視多障孩子
  5. 對使用者進行呼籲,邀請使用者一同來幫助視多障

Mockup-認識協會

  1. 說明協會創立故事,並使用過去的報導影片說明心路歷程,同時導引到Youtube
  2. 介紹協會未來發展方向,使用Motion Graphics影片進行說明
  3. 介紹目前協會成員,讓使用者對於協會建立公信度

Mockup-協會服務

  1. 利用圓點等設計,承襲首頁設計風格,傳達網站設計風格的一致性
  2. 使用情境圖及Icon讓使用者對於分類更加清楚,輔以文字說明
  3. 導引到部落格文章頁

Mockup-部落格

  1. 風格延續首頁設計,只有在卡片設計上略作更動,希望能讓使用者察覺不同設計,而意識到處於不同頁面
  2. 卡片式設計排版相同,方便前端進行模組化開發

Mockup-分類頁

  1. 與文章頁面的設計相符,顯示分類頁與文章之間的關係
  2. 設置近期文章及分類,讓讀者進入分類頁時,也可以找到最新的文章及其他感興趣的分類

Mockup-文章頁

  1. 利用圖形,清楚標明文章所在範圍
  2. 設置近期文章,讓最新的文章顯現,吸引讀者點擊
  3. 增設不同的CTA,即使使用者不一定願意捐款,也可以透過不需要花錢的方式支持協會(fb追蹤、Youtube訂閱)
  4. 透過文章推薦機制,導引讀者前往閱讀更多的部落格文章

motion_photos_on 上線網站

設計切版

利用Wordpress, 使用php自行開發子主題,前端部分利用CSS+Boostrap框架達成,盡可能地還原設計稿

錯誤狀態

  • 錯誤畫面利用AE動畫,減少使用者面臨錯誤狀態的煩躁感
  • 使用lottie.js技術,將AE動畫嵌入至網頁

網站連結