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

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

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

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

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

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

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

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

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

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

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