建立網站相當費時，尤其是幫社福機構項目興建網頁，背後工序講也講不清。

偏偏我覺得，越模糊不清的事，就越應講得到位。

今天就讓我們詳細分享，我們如何與香港基督教女青年會合作，為營運長達十年的天拉吧-天水圍故事館（天拉吧）項目設立首個項目網頁，幫忙籌備項目的未來策劃。

香港基督教女青年會——天拉吧

「天拉吧-天水圍故事館」 (Tin Library) 為香港基督教女青年會天水圍綜合社會服務處轄下單位，於2014年年初成立。

「拉吧」取自時下青少年對圖書館（其英文翻譯Library）俗稱，希望藉社區藝術「凝聚街坊參與，重構天水圍生活故事」。

在2022年至2024年，我們與天拉吧合作了各種社交媒體宣傳、網站設計、線下展覽設計等。

Facebook: https://www.facebook.com/tinlibrary/

Instagram: https://www.instagram.com/tin_library/

Website: https://tinlibrary.ywca.org.hk/

我們的問題

為什麼NGO製作網站更有難度？

興建網站的技術難度高，單憑一個社福機構的團隊往往無從入手。我們亦有曾經撰文分析此現象。

天拉吧項目亦是一樣。

人手不足，成員缺乏coding能力與網站營運經驗，卻又有無數內容要處理，尤其過去十年以舉辦社區藝術活動為主，每次都有大量多媒體內容產出，更添設計壓力。

大部分NGO機構都會選擇與網頁設計公司合作，但一般設計團隊未必具備社福機構合作經驗，只具備商業項目的經驗。

相較以盈利為主的網站，NGO網站的需求往往比較模糊，甚至令部分NGO團隊不掌握網站對項目的功能。

事實上，網站對NGO機構而言，實用程度與長遠優勢遠大於社交媒體。

由於NGO項目經常有多於一個「主要目標」，因此社福機構經常無法清楚解釋需求，只能片面地說要具備哪些功能，其他設計就唯有交由設計公司負責。

最終，若設計成果不如人意，社福機構往往無能力自行修正，只能由得網站繼續營運，浪費團隊時間與項目預算。

我們曾經看過不少社福機構的網站項目，當中有些半途而廢，不少功能無法啟用；

有些網站內容無法吸引讀者注意，皆因全部都是艱深難明的terms，並不是容易理解的用詞遣字；

上年年中，我們甚至見到有個網站主動封鎖Google，令所有內容都無法上架到搜尋引擎，NGO從不知情，卻在出事後才來問我們：如何才能達到proposal講好的流量？

不少機構找我們來幫手的原因，都是網站五勞七傷之際，亦是KPI即將到期之時。

花費心機卻不見成效，來到項目後期才著手改善，

坦白講，有些很「嚴重」的個案，我們也愛莫能助。

第一步

為NGO重新規劃網站內容

天拉吧經營十年，活動內容眾多，項目元素豐富，卻能維持主要目標：藉社區藝術「凝聚街坊參與，重構天水圍生活故事」。

我們按此原則，梳理網站內容，重新編纂網站所需。

一般而言，為NGO或商業品牌建立網站的第一步，在於掌握客戶需求，梳理現有內容，

如何選擇網站內容呢？我們有五大原則：

手機優先、易讀、易理解、輕量、合乎機構營運方向。

當中，手機優先是當代設計最大前提，務必要以「手機瀏覽時亦能清楚閱覽網站內容」為最大前提。

如果NGO機構營運已久，每年都會產出大量內容，我們就會協助整理與判斷，哪些內容需要優先上線，哪些內容可按部就班更新，甚至部分內容可適時放棄。

我們最常從其他機構聽到的一句話，往往是「你可以從舊網頁照抄圖片和文字到新網頁」或「你可以從Facebook和Instagram上照抄」，

誠然，這些都是NGO機構的創意內容，但為什麼「照抄」無法達到網頁成效？

原因在於 社交媒體與網站的定位 不一樣，用家期望得到的結果亦不一樣。

我們曾經撰文講解兩者定位差異，亦在針對NGO的社交媒體課程中詳細分析差異與策略。

兩者實質分別之大，足以令「照抄」變為浪費時間的行為。

又大膽一句：假如舊網頁的內容行得通，又何必再設計新網頁？

第二步

如何快速有效地整理網頁內容？

在設計天拉吧網站時，我們先從項目之前曾使用的新聞稿 Press Release 著手，擷取天拉吧對外的官方用詞遣字，編纂網站基本資訊。

之後，我們再從過去的重點藝術項目與活動著手，通過會議與討論，與天拉吧團隊確定內容的優次順序，逐步整理上線，以「邊寫邊改」作為設計策略。

我們必須承認：許多香港設計團隊不會採用「邊寫邊改」的做法——先行說明，以免壞了「行規」。

專業而言，整理與編輯內容的工作完成後，才到網站設計。兩部分應當是前後順序。

大量內容梳理後，經網站設計團隊與NGO機構共同編輯。

達到共識，成功定稿後，設計團隊才會前進到網站設計步驟。

然而，由於網站風格未定，我們不想浪費天拉吧團隊的心力，亦不期望我們的寫手要不斷重複改錯，因此「以時間換時間」成為策略。

每整理好一頁網頁內容，我們就會同步上載到協作平台，讓天拉吧團隊快速檢視。

我們使用Notion作雲端協作。

Notion除了容許文件共同編輯外，亦容許上載多種文件，亦有無限雲端空間。

不過NGO要注意，有關私隱的文件不應上傳。

剛開始時，雙方溝通確實需要更長時間，尤其對風格、用詞、機構要求等層面的共識未達成，就更需溝通時間。

但「邊寫邊改」的好處在於，不論設計團隊或是天拉吧團隊，都只需要剛起步的磨合期，設計工作越到後期，成果品質就受控制。

第三步

為何要為NGO網頁加上小元素？

設計小元素很重要。

許多NGO網站平鋪直敘得可怕，就如同將Proposal照搬便完事。

試想像，一個急於獲得社福機構支援的市民，在難明又冷漠的網站中穿梭，會對社福機構產生怎樣的壞印象？

天拉吧的核心目標是讓天水圍社區更熟絡，更具參與感，又怎能冷漠相待？

因此，在讀者進入天拉吧網站後，第一眼會見到一張圖。

驟眼看，讀者會從設計中掌握天拉吧活動與風格，知道機構是服務天水圍青少年，建立第一印象。

親切、友好、直觀。

但印象以外，這張圖其實有實際功能，它叫 Preloader。

一般網站首頁體積較大，承載許多文字與多媒體檔案，因此在載入時往往有機會出現「甩圖」或框架崩潰。

尤其在手機使用流動數據瀏覽時，情況就更為惡劣。

手機用戶數量高達六成，但NGO普遍漠視手機用戶需求。

在慢速網絡緩慢載入網頁的過程中，讀者就要被迫承受錯亂的內容，觀感非常差。

Preloader 是網頁載入時，第一個被載入的元素。當載入Preloader後，我們利用程序碼，讓圖片停留顯示數秒後，才fade out消失，就如同一塊短暫的遮羞布。

短短數秒間，大部分網頁上半部分內容都已載入，因此當讀者開始閱讀時，就能完整看到網頁內容，保持良好觀感，建立最佳印象。

除了Preloader之外，我們亦通過天拉吧過去活動的相片，以及手寫風格的設計，大幅提升網頁的親近程度。

NGO網站並不是承載計劃書的平台，而是讓你的服務對象感受到距離、溫度與故事的場景。

假如我們無法通過科技與網站設計來帶出社福機構的資訊與情感價值，網站的意義蕩然無存。

第四步

完成網頁後，該如何做好網頁營運？

完成網頁設計後，天拉吧網站就來到「上架」時刻。

一般NGO網站不同社交媒體，如非特別設計，基本上不存在「社群」概念，而是強調「被搜尋性」。

因此，我們在Google Search Console與Bing Webmaster為天拉吧網站上線，讓網站可在Google、Bing及Yahoo上被搜尋到。

按我們實際數據，瀏覽香港NGO網頁的流量平均達90%皆從Google而來，但不代表Bing與Yahoo的一小步不需要被重視。

雖然我們將此步驟講得輕描淡寫，若未有做好搜尋引擎設定，卻是對網站而言致命傷害。

如同我們早前所言，有些NGO網站在設計期間，錯誤地主動封鎖Google，導致網站完全搜尋不到。

假如你在Google Analytic或其他工具上，發現網站完全沒有流量，就應該找專家查看情況。

後續工作

提升天拉吧網站的SEO表現

搜尋不到的網頁，做得再精緻也是枉然。

營銷不一定與錢掛鉤，就算是社福機構項目，亦能夠利用營銷策略來服務市民。

天拉吧網站設計完成後，有效輔助天拉吧同期舉辦的藝術成果展，以線上輔助線下的模式改善讀者體驗。

在展覽結束後，網站亦會按部就班更新過去項目細節，並改善SEO表現，擴大天拉吧在天水圍社區的能見度，持續提升項目效率。

許多NGO網站困於人手不足、資源無以為繼、能力不足的境況，無法持續利用網站吸引服務對象注意。

對我們而言，若要解決以上問題，可以有許多方法，其中SEO策略便是相對「一勞永逸」的中長線改善方法。

我們亦有針對NGO網站適用的SEO策略作介紹，當中有不少實際NGO網站例子，讓零經驗的社福機構員工亦能快速上手。

結論

不要從成效想像過程，試著從服務對象角度出發

建立網站相當費時，尤其是幫社福機構項目興建網頁，但希望你在看到此部分後，至少對建立一個NGO網頁有初步認識。

關於NGO網頁設計，我們有許多分享與經驗，但萬變不離其宗：不要想像成效，而要想像使用者體驗。

任何一個社福機構項目都有其主旨及服務對象，而網站就是承載項目故事的好地方。

通過NGO網站，市民得以足不出戶了解NGO機構，甚至在有需要時，親自到機構尋求協助。

反之，假如市民透過NGO網頁無法得到所需資訊，反而建立錯誤印象，就莫談花時間到中心見前線社工了。