WFU

2018年9月17日 星期一

2018 / 9 / 16(日)最佳網站設計大獎:林佳鈺職能治療師、溫惟昇醫師





在一天內,協助許多對網路不熟悉,甚至稍有恐懼的同學們,理解網路的運作方式之外,更能建立起自己的網站,是很有成就感的。

從每節課後的踴躍提問,休息時間包圍講師們討論,以及互動實作時間的大量協助,全體教學團隊都能感受到這梯次同學的旺盛求知慾。

以下,我們一樣先介紹「那些差點得獎的作品」,然後再分析這次得獎的林佳鈺職能治療師,與溫惟昇醫師的傑出作品,究竟哪裡值得學習!

上過課的同學,可以試著先看圖片,讓自己暫時成為老師,問自己「在這個畫面中,我會給他什麼回饋?」然後看看下方的解說,是否與你所想的一致。


那些差點得獎的作品





感謝同學的補充,原來這是 5 年前的作品,這也顯示,同學已經能感受到,還沒上課前,與上課後,在畫面排版美學的差異。上方截圖中,剛好有張圖片,但因為這張圖片是白底的,使得其與內文背景的界線不清楚,導致圖片與文字間的距離,沒辦法很精確的用空行數去估算。如果想解決這個問題,請避免使用純白底的圖片。另外,未來您所貼的文章,應該都會有我們範本所加上的超細灰邊,如本文所示。




同樣是 5 年前的作品,可能是這次上課前,荒廢已久的 Blogger 頁面。這頁有不少值得建議的細節,相信現在的同學已經能看得出來了。

標楷體。感覺老氣,在 LCD 螢幕時代,不管是手機、平板、筆電、桌機,都是 LCD 的現在,黑體才是最好的字體。

使用放大做強調,也有紅色做強調,但又有紅色放大與紅色不放大兩種。這導致畫面開始凌亂,到底是紅色重要還是放大重要呢?建議內文不需要特別做強化,試著改用「括號」,或者改變書寫習慣,把真正要強調的字,拿到最前面。

例如:Heman-Ackah (2005) 在研究中特別強調「頸椎和發生共鳴」有直接相關性。

又例如:「頸椎和發生共鳴」的直接相關性,是 Heman-Ackah 在 2005 年的研究中所特別強調的。

數位時代的排版,不建議繼續在開頭空兩格。開頭空兩格,是過去稿紙時代,為了節省紙張使用,段落與段落之間不做空行,所以必須使用空兩格,去標記一個段落的開始。但數位時代,空行不用錢,空行已經能夠隔開兩段時,空兩格就是多餘的設計。

根據人類閱讀網頁的眼球追蹤研究,熱區幾乎都在最左邊,空兩格會打亂閱讀的動線,甚至導致資訊傳遞效率降低。




當我們的介紹有分點的時候,全選並使用編輯模式上方功能列,右邊的「編號清單」功能,能讓編號清單有更好的縮排。就能避免如第四點,分成兩行時,第二行不會對齊文字開始處,而會對齊數字的問題。

另外,不是很建議使用粗體做強調,而且目前的強調稍微多了些。強調太多,就相當於沒強調,內文小字黑體的粗體設計,反而比沒粗體來得模糊。您可以參考我的部落格,或者課程部落格的文字編排,會發現其實我們內文幾乎都不做強調的,而是使用「子標題」,以及更簡潔的中文寫法,直接達到更高的傳達效果。




這位同學把表格轉成圖片,是正確的作法,在多屏幕時代,表格在不同寬度的閱讀下,很難持續保持理想排版,不如轉為圖片,固定呈現樣貌。可惜文字段落間,文字與圖片間的空行沒有抓好,有些地方太遠,有些地方太近,略微可惜,建議可以照上課所分享的空行規範,使之更為整齊。

接著來看看兩位得獎朋友的作品囉。


林佳鈺職能治療師





這是張很不錯的 banner,輕鬆的畫面,但有專業的頭銜,兼顧輕鬆與可信賴感。畫龍點睛之處,是作者手上拿的職能治療師牌子,這使得看來像是遠足,可能不夠專業的情境,變成將「職能治療」融入遊戲與快樂中的專業形象。

墊子上的彩虹圖案,也說明了自己的親切與包容,歡迎各式各樣的朋友。




佳鈺的特色是手繪,他使用掃描的方式,放進 PowerPoint 後加字。記得,不管自己有什麼長處,都要想辦法轉換成能呈現在網頁的模式,如果你畫畫很好看,掃描放上來,如果你寫字很好看,掃描放上來,甚至還可以用縮時攝影,記錄自己的畫畫過程,放上 YouTube 並嵌入網頁。這樣才能讓自己的個人品牌,更有 online presence!

建議不一定要用 PowerPoint 加字,因為目前用的明體並不適合,不管是跟畫中的文字,或跟網頁顯示的黑體,都很難融合。建議可以直接把所有想寫的字都用手寫就好。真要加字的話,竹風體呼應手繪,黑體配合網頁文字,都是更好的選擇!




佳鈺的排版很謹慎細膩,該幾行就幾行,並有紀律,非常好。段落每三行左右就換一段,也是網路時代最合適的閱讀節奏!

使用內建的項目編號,去排版三步驟,非常好。但裡頭的「括號」其實是可以去掉的。畢竟整句框起來,跟整句沒框,意義差不多。

佳鈺的部落格,視覺開朗,並整合自己手繪的強項,新學的排版與文字處理也成熟,是很棒的作品,恭喜佳鈺!


溫惟昇醫師





惟昇的部落格,banner 很不錯,雖然不是我個人偏好的風格,但他處理得很理想。

我個人還是比較偏好極簡的設計,直接用照片或作品一次決勝負,會盡量減少設計元素。但惟昇的 banner 設計元素置放得很活潑,例如灰色的層次,在名字處與邊框彼此呼應,藍色的層次,在領帶與左下角的設計彼此呼應。畫面很不錯。

頁籤多了些,建議可以刪去幾個,使重新回到一行,目前這樣變成兩行,視覺上可惜了點。




惟昇的文章編排很仔細,都照課程中的建議,該幾行就幾行。附圖設計用心,甚至還有 Facebook 搜尋框,超棒!




不只是一篇兩篇,惟昇在時間內處理了相當多的文章,排版也都重新順過,很厲害且用心。下方項目編號與前段離得稍微遠些,可刪掉一個或兩個空行。

從 banner 到文字,從配圖到文章數量,都非常理想,恭喜惟昇得獎!


最新活動