吳博貴醫師官方網站的網站視覺與插畫由手心設計負責。網站內容涵蓋骨腫瘤介紹與手術治療,手心為此繪製吳醫師本人、治療過程、諮詢狀況、流程圖與各症狀專屬的插畫角色,配色採用吳醫師 CIS 的色彩計畫,讓病友與家屬瀏覽時能少一些緊張。
吳博貴醫師網站的插畫為什麼要兼顧成熟與溫暖?§
有別於以往故事繪本的風格,此次網站插畫設計希望在畫風上更凸顯成熟感的同時,卻不失溫暖、溫馨的視覺感受。
Different from the style of the previous picture books, the illustration design of this website, we enhance the mature feeling in the style of painting, at the same time, it does not lose the warm visual experience.

插畫中除了吳醫師本人外,也繪製了治療過程、諮詢狀況、流程圖,特別的是更為了各種症狀設計專屬的插畫角色,希望病友及家屬們在瀏覽網站的過程中能因此舒緩心中的緊張焦慮。
In addition to Dr. Wu himself, we also drew the treatment process, consultation status, and flowchart. In particular, we designed exclusive illustration characters for various symptoms. We hope through the illustration patients and their families can relieve the tension when browsing the website.
而在不同大分類的主題也運用LOGO來延伸設計輔助圖型,整體網站及插畫配色上採用CIS設定之色彩計畫,營造穩重、安心的網頁風格。
In the themes of different major categories, LOGO is also used to extend the design auxiliary graphics. The website and illustration color use the color scheme by CIS to create a stable and secure web page style.
網站插畫經過哪些提案步驟?§
網站的風格、Banner 與插畫是一步步發展出來的:2018 年 10 月 11 日的風格與人物草圖提案提出以照片為主軸的「影像風格」與以插畫、大面積色塊為主的「插畫風格」兩種網站風格,並畫出吳醫師說明、重點強調、深思熟慮、拿板子註解、認同肯定五種動作的鉛筆草圖;11 月 8 日的 Banner 提案為首頁、醫師介紹、疾病分類、疾病詳細介紹、我們的故事 5 類頁面規劃 Banner 輔助圖型與配色,並分網頁與手機兩種尺寸;12 月 19 日的 Q 版醫師角色設計提案以上色精稿呈現五種動作,其中一款是穿綠色手術服的手術說明;2019 年 5 月 27 日的「網站插畫風格提案」再比較「簡約清爽」「手繪筆觸」「可愛溫馨」三種插畫風格。2019 年 11 月 22 日與 12 月 12 日另有以醫院、網站諮詢、各種骨腫瘤與手術等命名的插畫分圖,2020 年 1 月 21 日也有一份網站插畫提案。
和完稿對照,網站上的醫師人像、手術場景、家人與症狀角色都帶有色鉛筆般的手繪筆觸。
吳博貴醫師網站的插畫角色與配色,各自是為了什麼?§
吳博貴醫師網站的主要設計,各自對應設計時寫明的一個目的:
- 各種症狀的專屬插畫角色與治療過程、流程圖,目的是希望病友及家屬瀏覽網站時能舒緩心中的緊張焦慮。
- LOGO 延伸的輔助圖型與 CIS 色彩計畫,目的是營造穩重、安心的網頁風格。
- Q版醫師角色以五種動作搭配不同場景,提案寫明目的是作為說明註解或單元開頭圖像。
- 網站插畫的畫風設定,目的是希望凸顯成熟感,又不失溫暖、溫馨的視覺感受。
哪些醫師或專業人士的網站適合參考?§
如果您的專業網站有以下情況,吳博貴醫師這個案例的做法可以參考:
- 如果您的讀者容易緊張,可以參考為症狀設計插畫角色的做法。
- 如果您未決定網站風格,可以參考影像風格與插畫風格的比較。
可以參考的順序是:先比較網站風格,再訂色彩與 Banner,最後畫醫師角色與內頁插畫。
如果您也在規劃專業人士的網站,可參考手心的網站設計。

吳博貴醫師個人網站 Doctor PQ. Wu Official Website
https://pqwu.com.tw/
-
結案時間 Case Closed-2020.02
設計師 Designer-潘東 PAN,DONG
設計總監 Executive Design Director-徐志揚 HSU,CHIH-YANG
