這是手心為高雄市政府青年局設計的官方網站，範圍從網站企劃、架構規劃、草圖、UI 系統、插畫、版面視覺到程式建構。網站要服務在地、返鄉與外地青年，手心以青年局 LOGO 的配色延伸出鵝黃、深藍與桃紅的色彩計畫，搭配兼具銳角與圓角的插畫，並把補助申請等流程整理成圖像，讓政府資訊更好讀。
本網站為高雄市政府新成立的一級機關─高雄市政府青年局的形象先鋒，希望能夠使網站成為兼備活力與專業高度的青年資源與政府平台。
Hand-Heart designs this website for the latest organizations, Youth bureau of Kaohsiung Government. It is hoped that the website can become a dynamic and professional youth resource government platform through design.
本案在實際執行上以不到一個月的時間走過網站企劃 > 架構規劃 > 草圖發想 > UI系統設計 > 插畫設計 > 版面視覺設計 > 程式建構等階段，手心同仁不眠不休地趕工只為提供青年更友善良好的平台，相信透過設計能讓政府官網也可以有不一樣的形象與呈現方式。
Hand-Heart designed web plan, infrastructure, visual, UI system, illustration, vision, program in one month. Hand-Heart stay up late or all night endlessly just to provide a more friendly platform for young people. We believe that through this design, the official website of the government can have a different image.
在鎖定青年族群的設定下一方面選用風格清新的照片，一方面輔以與青年局形象定位相符的插圖進行版面設計。在插畫的視覺語彙上同時採用了銳角和圓角兩種元素，希望能以含蓄的方式囊括年輕人的鋒芒與溫婉圓潤等兩種特質；色彩則配合青年局的標準色在主色色相不變的原則下，搭配選用了鵝黃和深藍，並以少量的桃紅進行點綴，達到畫龍點睛之效。
We target the young people, choose fresh style photos and related illustration to design this layout. We use both rounded angles and sharp angles in this illustration to present two characteristics of young people’s gentle and positive. The color matches the standard color of the Youth Bureau, unchanged main color hue, choose canary and cobalt blue pairs up a little pink to put the finishing touches on it.
透過資訊圖像化的設計，將複雜的流程能以更為簡潔有效率的方式閱讀，一方軟化生硬的政府資訊，另一方面也增加畫面的層次與閱讀舒適性，同時讓單純的文字也增添了品牌識別的層次，加深民眾及使用者對於青年局充滿活力與年輕氣息的深刻印象。
Through the graphic design of information, the complicated process can be read in a more concise and efficient way. On the one hand, it softens the rigid government information, on the other hand, it also increases the gradation of the picture and the reading comfort. At the same time, the simple text also adds the gradation of brand recognition. It can deepen the people and users’ impression of the youth bureau that full of vitality and youth.
高雄市政府青年局網站 Youth bureau of Kaohsiung Government Website：https://youth.kcg.gov.tw/
青年局的網站，要先解決什麼問題？§
在 2019 年 10 月的初稿提案中，手心先為網站做分析與設定。目標族群是青年，包括在地與返鄉畢業生、返鄉就業青年、創業族群，以及從其他縣市來到高雄的青年。這群使用者每天接收的訊息量大、生活壓力大，也重視自己的需求、比較沒有耐性，因此網站的溝通調性定為「年輕、活力、專業、感動、直覺」，並避開宣導式、教條式、過度複雜或輕挑的語氣。
網站的目標有三個：以青年為主角，提供便利的必要資源；成為青年與市府之間的溝通媒介；也成為青年行銷自己的平台。
網站架構怎麼讓青年找到需要的資源？§
手心把網站整理成「關於青年局」「好青年推播」「青年補給站」「申請進度查詢」「我要發問」等單元。青年補給站再依需求分成找資金、找空間、找課程、找活動：補助頁的申請流程以流程圖呈現，申請資格與要點用文字說明，表單採收合設計；找空間以地圖標出各基地位置，並分成政府共創基地、學校育成單位與民間孵化器三區。首頁下方的各科室資訊也可以收起、展開，避免一次出現太多資訊。
「好青年推播」在兩版初稿之間調整了分類方式：第一版依身分整理，例如申請貸款通過者、競賽得名團隊、國際交流得獎者；第二版改依產業分成智慧生活、數位內容、生技醫療、文化創意、餐飲食品等九大類，頁面以滾動視差呈現青年的照片與故事。
首頁視覺怎麼呈現「理想中的自己」？§
首頁 Banner 的設定情境是「理想中的自己」：以鮮豔的黃色色塊做出想像框，框住青年的人像，周圍再配上與就業、創業相關的圖像元素，搭配標語「青年築夢，創造高雄。」提案中也為綜合規劃科、創業輔導科與資源整合科各準備了一張 Banner。色彩計畫以黃、淺藍與深藍為主色，再用桃紅、淺粉與亮藍作為對比的輔色，讓官網看起來年輕、活潑。
初稿之後還有補助申請懶人包與 Q&A 流程圖（2019 年 11–12 月），以及以「無障礙顏色」命名的首頁與內頁調整檔（2020 年 1 月）。
青年局網站的收合、流程圖與配色，各自是為了什麼？§
青年局網站的主要安排，可以對照初稿提案寫明的使用者特性與目的來看：
- 初稿提案寫明使用者每天接收的訊息量大、缺乏耐性，並把宣導式、教條式列為溝通上的避免項目。
- 首頁下方的各科室資訊設計成可收起、展開，用意是減少資訊過多的狀況。
- 補助頁以流程圖呈現申請流程，資格與要點以文字呈現。下載申請文件則直接跳到附件，用意是供使用者快速下載。
- 色彩計畫從青年局 LOGO 配色延伸，搭配對比色作為輔色，用意是讓網站較年輕、活潑。
- 2020 年 1 月的無障礙配色調整與焦點顏色說明，讓使用者用鍵盤操作時，看得出目前停在哪個連結或按鈕。青年局網站取得了無障礙標章。
哪些機關或學校適合參考青年局網站的做法？§
如果您是機關或學校的網站承辦，網站有以下情況，青年局這個案例的做法可以參考：
- 如果您的網站服務不同身分的民眾，可以參考先列出各種使用者、再定溝通調性的做法。
- 如果您的網站要說明補助申請流程，可以參考以流程圖呈現流程、以文字說明資格與要點的做法。
- 如果您的網站要通過無障礙檢測，可以參考在設計階段整理焦點顏色設定說明的做法。
可以參考的順序是：先定使用者與語氣，再整理架構，最後進入視覺與無障礙配色。
如果您也在規劃機關或品牌的官方網站，可以參考手心的品牌網站設計說明。
設計師 Designer－潘東 PAN,DONG、盧臆雯 LU,YI-WEN、江珮瑜 JIANG,PEI-YU
專案企劃 Project Planning－蘇連捷 SU,LIEN-CHIEH
設計總監 Executive Design Director－徐志揚 HSU,CHIH-YANG