SquareSpace 受限的設計:速度、速度、速度

近日透過朋友委託,我收到一件交換計畫架站的委託。委託人沒有對於功能性或美感有太複雜的要求,但他唯一的條件就是:速度,他需要網站「就是現在 (right now!)」。

日前另一位朋友的網站曾因為未繳月費而被SquareSpace停權,並且在停權三個月後遺失所有網頁設計檔案的經驗,我原本對於SquareSapce的經營模式有些微詞,但是這位新朋友已經買了域名、付清了一整年的費用,不願臨陣轉換平台。我在盡了我警告的義務之後,就著手進行協助。

由於他已經備妥所有的文件,甚至已經初步於SqaureSpace中設定,也對預期使用的圖像有明確的想法,我們前後僅花費一週時間(共計約15個小時)便完成了這個網站。雖然這個網站內容僅簡簡單單6頁,功能性與設計上有些許受限,並不如我精熟的Elementor好用,但是我不得不說,平均每頁2.5小時完工,比最近剛完成的單位網站平均一頁需要4.8小時完工來講,快了將近一倍。

簡單說來,如果你要一個快、好看、不複雜的網站,而且願意每年付7,300 (245美金)訂閱其服務,也許SquareSpace會是一個不錯的網頁平台選擇。(但是我還是要說,如果你有多一點時間研究,Wordpress+Elementor在版面細節的掌控度上還是略勝一籌啦)

如果你有相關網頁設計的經驗或平台使用心得,歡迎留言與我分享喔!

掌握「內容、結構、風格」打造不敗的網站

近期的單位網站在奮戰1,260個小時之後,甫於週一傍晚上線,回顧這半年與同事及實習生的努力結晶,週四執行長於董事會上發表,獲得董事的一致好評,在欣喜之餘,我反思要如何將這半年的心得分享給也在非營利組織這條路上的朋友?

我想借用好萊塢編劇教父羅伯特麥基(Robert McKee)在「故事的解剖」中指出好劇本的三大支柱:「內容、結構、風格」,來應用在網頁設計或其他數位媒體產出。

首先是內容,單位在過去8年來從純粹的獎學金監管和教育交流諮詢單位,慢慢累積了學人、學友交流經驗,打造了足夠的內容,不論是文字、相片、影像內容,更重要的是,在執行初期就針對各組同仁進行需求訪談(Site Audit),找到大家對舊網站的痛點進行內容面的調整與改善。

其次是結構,單位網站原本的結構已經相當完整,但是由於過去8年來的成長,舊結構已不敷新的組織規模,因此必須打掉重練。先後嘗試多種工具協助將結構更明確的溝通與傳達,使用了Trello, Diagrams.net, GoogleDocs等工具。

最後是風格,在研究參考了眾多的世界一流非營利組織網站,如Bill & Melinda Gates Foundation (比爾與美琳達·蓋茲基金會)Open Society Foundations(開放社會基金會)The Rockefeller Foundation (洛克菲勒基金會)等十數個基金會網站及全球平行單位及類似性質單位,如CIEE.org(國際教育交流協會)的網站後,找出當前非營利網站的必要元素。再整合單位性質與長官對於專業感與年輕化的兩個期待進行設計。並利用開源的WordPress.org平台及Elementor Pro等架站工具把各種概念與需求付諸實現。

這個版本的網站有部分功能(如會員、資料庫等)在這次更新當中尚未納入,但我相信這次的改版,讓單位的「數位形象(Digital Presence)」在全球155個平行單位裡面,沒有第一也應該已經可以排入前三名了。借此機會,我想再次感謝前、後任單位主管的信任、同事的支持和歷屆實習生(尤其是這一屆的三位小天使)的鼎力相助才能夠打造出這個傲人的成果。

最後我要感謝我的父母、我的家人和大學時期的網頁設計啟蒙學長 Morn,沒有他,就沒有今天的網站(是得金像獎嗎?)

如果您也有單位網站的建置或相關數位計畫的經驗歡迎您留言與我分享喔!

網站風格:化繁為簡,防無聊

單位網站在規劃初期有預想了幾個風格/感受(TONE/FEELING),包括:「高聲望的(prestige)、人文關懷的(humane)、投身奉獻的(devoted)、作為後盾的(supportive)、懷抱希望的(hopeful)、正向鼓勵的(encouraging)、清新的(fresh)」,新任單位主管除了同意這些風格外,也要求加上兩點:「專業的(professional)」和「年輕的化的(youth-oriented)」。

要如何呈現「年輕」、「專業」這兩種感覺呢?在看了眾多的網站(還有網頁設計趨勢分析文章)之後,歸納出:「大照片」、「一頁式」、「圖像(icon)與動態文字」、「利用行動呼籲(CALL TO ACTION, CTA)圖文間歇」、「多樣化版型」、「多螢瀏覽(響應式Responsive Web Design, RWD)」、「即時更新」、「社群互動」等幾個元素,簡單一點講,就是要「化繁為簡,防無聊」。

但是一個60多年的組織,承載了6,000多人的經歷,要如何簡單卻不單調呢?

大照片
很幸運組織近年有很積極地外聘或內延攝影,或專業、或半專業的方式紀錄組織的點滴。而近年的年度報告中也開始大量使用圖像,每年度都有精選的照片庫可以直接挑選對應網站內容的圖像。找不著合適的照片時,再搭配圖庫,例如:Unsplash.comPixabay.comFreepik.com,完成第一步。

一頁式
接著就是網站內容的邏輯,雖然大部分是從舊網站移植,但是如何整合成一頁式,讓使用者瀏覽時容易聚焦於當下,多次調整導覽視窗讓選單更貼近使用者需求。

圖像(icon)與動態文字
原因大概顯而易見,就是持續抓住讀者的注意力,但是也要用的剛剛好,避免造成閱讀困擾。

利用行動呼籲(CALL TO ACTION, CTA)圖文間歇
利用全寬的圖像與文字,把純文字的段落打斷,讓視覺有所喘息,可以轉換心境,繼續看下去。

多樣化版型
不同內容或性質的區塊,要維持一定的設計風格(字體大小、顏色)但要有多樣化的版型,例如團隊頁面、核心服務、報告媒體、下載等等都需要有不同的規劃才能防無聊。

多螢瀏覽(響應式Responsive Web Design, RWD)
這是最花時間的一部分,但是也是最重要的一部分。要讓你的網頁不論在電腦、平板或各種各樣的手機直著看或橫著都能看得清楚明白,真的不是一件非常容易的事!原本260頁的網站,瞬間變成1,040頁的網站。需要有強大的意志力與耐力才能完成這項任務。

即時更新
這一直是組織內一個大痛點,隨著組織成長,許多頁面的更新和新訊發佈需要更即時。如何規劃出一個清楚易懂的流程,讓同仁能夠迅速上手,也是這次專案的一個重要的里程碑。

社群互動
社群媒體,一個讓人又愛又恨的工具,可以讓天涯變咫尺,但是也可以讓你具生產力的時間從8小時變2小時。但是為了達到「年輕化」的訴求,還是裝了吧!

這些是我對於「專業、年輕」的詮釋,但是對一個已經有兩個小孩的爸來講,專業還好,但是年輕已經離我有點遠了,還好這次專案中一起合作的三位小天使,分別來自政大、台師大和北藝大,用年輕的眼睛認真地把關。謝謝你們!

如果你也有關於網站設計風格規劃的經驗或問題,歡迎留言與我討論喔!

到底有多少人看我的網站/粉絲頁?

這個問題不像請SIRI告訴你火箭隊跟小牛隊的比數那般容易,但只要使用適當工具,還是可以窺其堂奧。

基本上測量可以分為三種:

  1. 內建監測:大多網站、社群頁面都有流量監測工具,例如:臉書(Insights)、YouTube(Analytics)。它們的操作相對而言是最直觀的,我覺得最基本的分析可以用以月為單位,測量貼文(post)與觸及率(Reach)之間的關係。進一步可以每季找出該季表現最佳之5篇文章,分析其原因。
  2. Google Analytics:Google所開發的分析工具,可分析並視覺化流量與統計數字。
  3. Alex:被亞馬遜收購的一個網路流量監測公司,可以比較你的網站與你的對手網站的關係。就好像一面魔鏡,可以看看世界上流量最高的google.com和你的網站的距離。

各種流量數字可供網站效能提升或行銷內容參考,但不是唯一準則。你的網站和內容可能像幽谷蘭花般的美麗,但鮮少人知曉。但這不會減損你持續耕耘的努力和綻放的姿態。

如果你有網頁流量分析的心法也歡迎和我分享!