網路時代之個人品牌工作坊 | 新思惟國際: 2025 / 9 / 20(六)最佳網站設計大獎:黃晉德醫師、沈冠霖醫師 WFU

2025年9月22日 星期一

2025 / 9 / 20(六)最佳網站設計大獎:黃晉德醫師、沈冠霖醫師





在這個全民上網的年代,能夠使用的媒體與工具越來越多,但是專業人士工作外的時間是有限的,如何在這最有限的時間內,去產出一些屬於自己的內容,並且發揮最高的長尾效益?

最核心的,就是一個自己的網站,用這個作為起點,去分享自己的觀念、自己的資訊以及其他人能夠取得你專業服務的方式,是很重要的。

根據十多年成功校友的經驗,所歸納打造的個人網站架構與經營模式,讓所有忙碌的專業人士,即使沒有強大的程式或數位工具能力,也能完成,並且在一個中午就能擁有自己的網站雛形以及核心技能,是我們課程的特色。

看到同學們一一把自己的網站架起來,我們也非常開心,以下就所看到的一些內容繼續給予回饋,讓同學們之後在經營時,多一點經驗跟方向。


那些老師還想給予回饋的細節





這張版面做得不錯,稍微可惜的是,中間的那條線似乎有帶陰影,而且那個陰影跟線的長度差異非常大。在設計上,我們一般並不建議在文字或者是線條旁加上陰影,主要原因是,陰影會讓畫面產生「模糊感」。




這張處理得不錯,但文字離邊緣太近,使得視覺上有些壓迫感,其實右邊的卡通圖也離右邊、上面跟下面的邊界都太近。可能的話,或許會考慮內收一些。




如果貼文之後發現文字跑到欄位外面,這表示同學在複製的時候,有同時複製到版面格式的代碼。這部分請參考手冊中的說明介紹,儘量以「純文字文件」的模式來複製貼上會比較好。Mac 作業系統也可以做得到,網路上有蠻多相關的資訊,總之不要包括樣式代碼,就能減少這些奇怪的問題。




同學所選的照片相當帥氣,不過稍微可惜的是,在視覺上會覺得跟讀者或者是患者有點距離。我們在選擇橫幅上的照片時,除了好看之外,還要稍微考慮到究竟我這樣的照片是給人家怎樣的視覺印象。另外,人物本身與機器的距離略遠,在視覺上的整合度也是稍微少了一些。

這些視覺呈現的解讀比較細節,但是就先藉由上課回饋的機會提供給同學們,日後再設計新版橫幅的時候可以列入考量。我們也會在週四錄影的回饋中,進一步舉一些優秀校友的例子,並做視覺上的說明給各位參考。




貼圖之後,忘了把他選成「顯示成原始大小」,所以圖片偏小。




這張相當不錯,想要提出來的有兩個細節,首先是中間那條線帶有陰影,其設計風格跟文字本身並不相同,我個人比較喜歡像文字這樣,沒有特別做邊框和陰影的設計。平面化,邊緣清楚,感覺非常現代專業。

其次,同學選擇照片之後貼到畫面上,但左邊補不滿,所以使用了近似的灰色,但你仔細看的話,還是可以看到邊界的那條直線。因為現在 AI 工具很多,可以考慮直接描述需求,請 AI 幫你把左邊的牆壁延伸兩倍以上。




這張照片跟背景的處理非常好。想要進一步建議的是文字,文字使用了輕微的陰影,所以看起來會有一點模糊不太清楚的感覺。這種感覺不管在手機或是電腦上看都會使讀者產生輕微的違和感,想去擦一下手機,或擔心自己的螢幕是不是顯示有問題。因為我們是專業工作者,所以這些字體的清晰度,也暗示了我們的專業程度,我們總希望在感官跟印象上,做到一致。




這張是個很好的示範,文字本身的清晰度是非常足夠的,而且因為背景是深色,所以這些白色文字在視覺上,會有很穩定跟清楚的效果,這也是我們希望給人家的專業印象,尤其是作為一個外科醫師。這張圖片稍微可惜的是文字下方的線條,左邊重疊到手這個重要的視覺主體,線條可以考慮稍微退縮回來一點。

另外就是視覺的方向性問題。手的部分,開放區域朝右,呼應文字,沒有問題,但是人所站的方向,開放區域卻也是朝右,但因為圖片放在右邊,所以開放區域很快地就面臨橫幅的邊緣,這就是為什麼這個畫面的視覺引導會讓人稍微混淆的原因。這也是很進階的一些視覺細節,我們會在課後回饋的影片中,進一步使用實例講解的方式,讓大家更清楚這個概念。




圖片的選擇是相當不錯的,大量的病歷表示是耕耘很久的專業診所,稍微可惜的是,當初在拍攝的時候,人的中軸有點傾斜,可能是因為拍攝時姿勢是稍微有點往後靠。下一次再拍同樣的位置時,可以考慮站直站正,就更為完美了。




這張的設計也相當不錯,要進一步建議的是,在拍這張照片時,作者本人似乎比較嚴肅,如果能放鬆些,或許能增進親切感。但這也牽涉到每一個人對自我形象的期待,我們就做個建議,提供參考而已。畫面的中央也可以看到,圖片與灰色背景之間的邊界。最好的解法也是找 AI 工具,幫你把後面的牆壁補更寬一點。以現在來說的話,應該就是 Gemini 在這方面比較好取得且能幫上忙,但隨著時間推移,應該會有很多不同工具都能簡單做到。


最新活動



黃晉德醫師





黃晉德醫師的作品,在整體完成度上非常高。像這張在板面的構成、顏色的選擇就都相當不錯。進一步會建議可以考慮把文字帶有的陰影,還有線條的陰影,都去除。另外,左邊這張卡通人物圖,上半身畫得不錯,但右腳似乎多長出了一根拐杖。另外,左腳需要墊高,我不確定作者是不是有特殊想表達的意圖。AI 生圖就是這樣,如果要拿來用,一定是每個角落都要檢查過,是不是自己要的細節,以及是不是呈現了自己想要表達的概念。




同學除了把練習的三篇貼完之外,也使用自己的內容來貼文,非常積極,做得不錯。

這張我們想進一步建議的是,為什麼我們會建議大部分的圖片儘量使用固定的橫向比例版面,這是因為當你使用方形或者是長型圖片時,在手機上閱讀,會造成文章閱讀流的截斷。在桌面上閱讀的話,會顯得圖片過於巨大,使得圖片跟文字的比例有點跑掉。所以,還蠻建議可以盡量讓所貼上的圖片,擁有像我們課程所建議這樣橫向的比例。




在貼文部分,同學處理得很好。子標題跟內文,都很不錯。




小小的建議,在這邊自行貼影片的時候,同學在代碼的部分可能沒有改到,所以影片大小還沒有放到最適合的尺寸,再試試看,應該是可以搞定的。

有很好的橫幅風格,網站顏色的選擇也不錯,貼文貼了練習的三篇,也加上自己的內容,是很棒的起步,恭喜黃醫師。


沈冠霖醫師





沈冠霖醫師的作品,橫幅設計相當不錯,是直接拿我們的範本底圖去餵給 AI,然後加上自己的照片,請 AI 把裡面的人物換成他自己。這是非常聰明且快速的 AI 使用方法,因為這樣替換之後,連左邊文字的排版都能直接參考我們的去做。作為一個快速橫幅,是很好的起步。同樣要建議的,是中間那條線的陰影,建議可以把他拿掉,這樣就沒問題了。




同學除了標準練習的三篇之外,也貼了自己的文章,第 4 點開頭似乎多了一個小數點。文章本身使用的是所謂 BBS 換行法,這種換行方式在遇到各種長寬比不同的螢幕時,其顯示不會太理想,會蠻建議還是使用短段落處理,這樣讓部落格去自行處理換行,會比較適合所有的閱讀者。當然,這點也牽涉到個人喜好,我們就提供參考。




貼文練習做得很不錯。表示同學很能掌握如何去做出好看排版的細節!




這篇貼文練習也沒有問題。很高興同學能夠迅速地吸收並應用。

恭喜沈醫師!


最新活動