張 君山
作品輯
Chang, Chung Shan Portfolio 2015-2019
Resume
張 君山 Chang, Chung Shan
Education 資策會 Web / App 前端工程師養成班
Institute for Information Industry, III, Touyan, Taiwan 國立臺灣藝術大學 美術學系 暨 圖文傳播學系
B.F.A., The Department of Fine Arts and The Department of Graphic Communication Arts (GCA), National Taiwan University of Arts, New Taipei City, Taiwan
Experience 財團法人華書慈善基金會 美術編輯 再生網域股份有限公司 攝影部 Chang,Chung Shan Portfolio
Hwa Shu Charity Foundation, Taipei, Taiwan
Regeneration Domain Ltd. , Taipei, Taiwan
mountain0126@gmail.com cargocollective.com/changchungshan 0925259047
Ability 前端技能 : 前端切版、RWD網站規劃、網頁動畫與 互動特效、非同步資料處理。 HTML5
CSS3
JavaScript TweenMax
後端技能 : 資料庫管理。 PHP
MySQL
設計技能 : UI介面設計、Wireframe規劃、
mockup、平面視覺設計，桌機、行動網頁與行動裝 Xd
PhotoShop
InDesign
Illustrator
Awards 資策會 Web / App 前端工程師養成班 個人作品展 最佳視覺設計 第一名
置介面規劃與設計。
Web Design
http://140.115.236.71/demo-personal/CD106/ web/I1800195/index.html
Chang,Chung Shan Portfolio
百樂之音 joy radio 流行音樂廣播電台 使用技術 : HTML 、 HTML5 、 CSS3 、 JavaScript 、 jQuery 、 RWD響應式網站規劃 、PhotoShop 、Illustrator 獲獎紀錄 : 資策會 前端工程師養成班 個人作品展 / 最佳視覺設計 第一名
網站功能架構圖 Functional Map
架站目的 Purpose
百樂之音廣播電台 Joy Radio，頻率為 100 千赫 (AM100、FM100)。係為民營之 大眾傳播媒體事業，服務社會、寓教於樂之宗旨，積極服務全台灣民眾。節目規 劃以流行音樂、藝術、服務、娛樂等類型均備，屬娛樂性節目之電台。 廣播事業為大眾傳播重要之一環，除一貫設台宗旨精益求精、實事求是外，亦盡 力朝以下方向努力：❶掌握社會脈動與時俱進，永續經營。❷充實軟體硬體設施， 賡續廣播事業之進步。
目標族群 Target
聽眾是廣播之基石。本電台服務對象為全年齡層，教育程度國、高中最多，大專、 研究所次之，職業別則是學生、上班族居多。
Web Design
首頁 index
顯示網站目前播送的節 目，可點擊切換節目。
定時輪播四段節目介 紹，也 可 拖 拉 查 看 其 他 介紹。
可點擊專輯試聽最新發 行的音樂。
Web Design
百樂盒子 music 百樂盒子(音樂排行與最新發行) :
點選分類可置換最新發行的專輯內容，最新發行區域採瀑布式排版，專輯亦可點擊試聽。 第一屏最上方為廣告幻燈片，定時輪播。
Chang,Chung Shan Portfolio
新歌風雲榜(音樂排行) :
點選分類可置換排行榜的專輯與內容，專輯可點選試聽。
Web Design
音樂情報 music news 音樂情報(樂評、專訪等) :
點選分類按鈕可依文章分類顯示內容，採單欄式排版。點擊文章圖片或標題，則可進入閱讀詳細文章。
Chang,Chung Shan Portfolio
Web Design
關於百樂 introduction 關於百樂(公司簡介、節目介紹) : 採用Flex技巧排版。
節目介紹部分，點選頻道及時段，可顯示相對應的節目及主持人。
Chang,Chung Shan Portfolio
Web Design
RWD 響應式網站規劃
為因應各行動載具與筆電的特殊規格，透過CSS3的媒體查詢規劃出更具彈性且順應瀏覽 器在不同載具下，也能達到一致的使用體驗。
1 3 5 2 4 ←首頁 :
1.首頁主視覺。點擊「開始體驗」可滑進下一屏。 2.節目介紹。點選FM100或AM100可切換節目介紹， 並以slick.js插件呈現幻燈片的樣式。
3.最新專輯。直接點選專輯可播放試聽，再點擊一次 專輯則可暫停播放。
4.點擊畫面中的專輯可抽換圖片。
5.Icon以SVG製作，輔以jQuery及CSS呈現過場動 畫。
→導覽列 :
為提供更易讀的使用體驗，行動裝置版的導覽列隱 藏了主選單，主選單透過點擊「漢堡」來顯示，讓因載 具寬度而被壓縮的空間釋放出來。
最新專輯 :
直接點選專輯可播放試聽，再點擊一次專輯則可暫 停播放。
歌曲排行榜 :
點選分類可置換排行榜的專輯與內容，專輯可點選 試聽。
→文章與專訪頁面
商品頁面:
以jQuery及CSS呈現過 場動畫。
點選商品進入詳細資 訊頁面，點選商品小圖 示，上方大圖也會隨之 切換。
按下愛心可將商品加入 收藏。
節目介紹頁面:
以jQuery及CSS呈現過場動畫。
點選商品進入詳細資訊頁面，點選商品小圖示，上方 大圖也會隨之切換，
商標設計 Logo Design
以百樂之「樂」字為設計主軸，將筆劃變形為音波傳遞的意象以及播放器之按鈕，渾
圓的線條變化則意在減少壓迫感，顏色之選擇考量到去政治色彩以及色盲辨色問 題，所以採用淡粉橘色。
字體應用 Application Font
百樂之音廣播 思源黑體
百樂之音廣播 百樂之音廣播 百樂之音廣播
48px fw500 首頁分類大標
36px fw300 主頁大標
27px fw300 文章大標 行高1.5
16px fw200 內文 行高1.5
色彩計畫 color plan
標準色
輔助色
輔助色
R239 G85 B94 M70 Y55
R239 G155 B135 C50 M40
R51 G51 B52 C80 M75 Y70
K45
Web Design
百樂之音網站行銷企劃 活動海報 / 平面設計 JOY RADIO Advertising poster / Graphic design
Web Design
http://140.115.236.71/demo-projects/CD106/ CD106G4/home.php
Chang,Chung Shan Portfolio
湯先生 Mr.Spring 客製化溫泉 使用技術 : 前端 / HTML、HTML5 、CSS3、JavaScript 、jQuery 、RWD響應式 網站規劃、Ajax 、json、TweenMax 、Bootstrap 後端 / PHP 、MySQL、ERmodel 資料庫設計、系統分析
網站功能架構圖 Functional Map
Chang,Chung Shan Portfolio
架站目的 Purpose
現代人由於生活及工作繁忙勞碌，長期處於疲憊且無法放鬆的狀態，身心靈疲 憊，而我們針對顧客需求推薦適合的湯頭藥材，也可讓顧客自己選擇藥材製作專 屬湯頭，洗去一身的煩惱與疲勞。 藉由活潑且生動的設計風格，搭配多樣的互動效果，吸引更多的用戶透過本站進 行線上預約，並藉由用戶討論經營口碑、推廣藥材入浴的新形態泡湯理念，拉攏 更廣大的潛在客戶。
目標族群 Persona
家務繁忙，想暫時放下手邊工作，與家人一同放鬆的家庭主婦；長時間處於緊繃 狀態，或長期加班、熬夜，想適度調劑身心靈的廣大勞工，以及一般喜愛泡湯， 想嘗試特殊藥浴的消費者。
首頁第一屏 :
點選花圈可顯示對應的主打溫泉。切換花圈的同時，溫泉的療效介紹、插圖與湯水的顏 色也會隨之變幻。
優惠券遊戲 :
登入後即可玩遊戲。控制鍵盤左右鍵以操縱猴子去接掉下來的藥
材，時間倒數結束或因接到炸彈而終止後，便會得到與遊戲積分相 應的優惠券折扣，並同時寫入後端資料庫。
使用技術 : JavaScript、Ajax、json、PHP、MySQL
首頁 index
首頁第二屏 - 湯先生抓藥(諮詢問答) :
共六題選擇題，每個選項會對應到不同療效數據的藥材，而根據最後的分數，推薦出最適合答題者的配方組 合，並可直接前往客製溫泉。
使用技術 : JavaScript、Ajax、json、PHP、MySQL
Web Design
首頁第四屏 - 尋找湯先生(Google地圖與分店簡介) : 串接Google地圖API，顯示各分店地理位置，並使用 SVG遮罩裝飾，右邊的雲朵則是以幻燈片顯示各分 店的店內裝潢、地址、電話。
首頁 index 首頁第三屏 - 熱門湯牌 :
出現在首頁的文章與湯牌是依據最多按讚數與回覆
數，將存在資料庫的用戶發文與湯牌資訊呈現在頁 面上。
使用技術 : JavaScript、Ajax、json、PHP、MySQL
客服機器人 :
共六題選擇題，每個選項會對應到不同療效數據的藥材，而根據最後的分數，推薦出最適合答題者的配方組 合，並可直接前往客製溫泉。
使用技術 : JavaScript、Ajax、json、PHP、MySQL
Web Design
登入與註冊 :
進入會員專區、製作專屬湯牌、訂房、遊戲頁面索取優惠券、發文及蒐藏湯牌等活動，皆須先「登入」或「註冊 會員」後才可進行。
使用技術 : JavaScript、Ajax、json、PHP、MySQL
Chang,Chung Shan Portfolio
↑會員登入的表單畫面。
→尚未加入會員的使用者，則可透過 註冊表單申請成為會員。
客製頁
客製化藥浴 :
使用者可依自己喜好，以及首頁諮詢問答的推薦，或「特定時段」 ，來選擇至多四種的藥
浴配方組合；若對藥材功效不清楚，則可點選左側的「藥材小百科」 ，查看解說與圖示。藥 材共分三種屬性，而每種屬性的藥效也有強弱(等級)之分，每點選不同的藥材，畫面中 的水位及顏色隨即產生相對應的變化。
療效雷達圖 :
根據所選藥材的療效數據，會反映在雷達圖的變化之上，同時，下方的 金額也會隨之加總。
製作我的湯牌 :
完成藥材的選擇後，按下完成，便會跳出燈箱，可為自己的藥材配方命名，並製作圖騰，最後完成專屬的藥材 湯牌(此步驟必須先完成登入方可進行)。
預約訂房 選擇湯牌與時間 :
使用者須先登入，再選擇欲使用之湯牌，選擇 完湯牌方可在月曆選擇欲泡湯之日期。若湯
牌之中包含「時段限定」屬性的藥材，月曆上 方則會出現提示，所有選項都已完成才能進 入下一步。
已過去的日期及客滿的日期則無法被點選， 呈灰色狀態。
選擇分店與時段 :
使用者可自由選擇不同分店及時段進行消費。 倘若上一步所選的湯牌當中有包含「時段限
定」屬性的藥材，則時段的選項會被限制只能 選指定的時段。選項都被選擇後，即可進行下 一步。
房型示意圖 :
以插畫呈現三間分店及各時段的差異，點選各
分店及各時段的按鈕，會以動畫(旋轉)產生相 對應的插畫。
確認訂房資料與折價券 :
訂房資訊會從資料庫撈取會員資料放進表格中，以及前面步驟選擇後的總價格及分店 資訊，消費者可選擇是否使用優惠券，最後按下完成進行付款。
討論專區 一般訪客可在此瀏覽其他消費者的心得或者依據自己喜歡的藥材進行文章的篩選。
一般訪客可對文章按讚(點擊愛心)，若需要回覆或發文則必須先登入或註冊會員。討論專區第一屏的排行乃 是根據最多按讚數與回覆討論。
會員專區
欲進入會員專區頁面必須先登入或註冊會員，成功登入後，會員可自由編輯其個 人照片、個人資料、查看預約紀錄、查看自己製作的湯牌、查看收藏過的湯牌，以及 個人發表的文章管理。
優惠券 :
登入後，並於首頁進入遊戲頁面，完成遊戲任務時，所得到的積分便會對應到資料庫的優惠券等級欄位，並
將此等級與折扣欄位寫進會員優惠券表格中，如此一來，當會員進入會員專區，便可查看過去領取到的優惠 券，並可於預約訂房時使用之。
Web Design
RWD 響應式網站規劃
為因應各行動載具與筆電的特殊規格，透過CSS3的媒體查詢規劃出更具彈性且順應瀏覽器在不同載具下， 也能達到一致的使用體驗。而在此規劃過程中，最困難的地方莫過於取在不影響結構與功能的狀態下，調整 欄位與版面順序，以及解決絕對定位導致位移的問題。
Web Design
Chang,Chung Shan Portfolio
Graphic Design
Graphic Design
Chang,Chung Shan Portfolio
App Design
Chang,Chung Shan Portfolio
Be with You
直播交友App
Be with You 手機應用程式 設計原型 Be with You App Prototype Design
Graphic Design
明華園玄字劇團 《刺桐花之戰》 2018公演海報 / 台北城市舞台 Ming Hwa Yuan Taiwanese Opera Company / 2018 The War of Erythrina flower, Heroine: Jin Niang / Poster
明華園玄字團《刺桐花之戰》 歷史小說《刺桐花之戰》 ，係由東吳大學林建隆教授
此次設計案與藝質展演行銷整合公司合作。以刺桐
運動中西拉雅族頭目金娘的故事。在林教授的筆下，
帶有戰火意象的火花煙硝融入，文字輔以兵器的金
耗時六年於2013年出版，內容講述1786年台灣反清
金娘成為了林爽文抗清事件中，率領族人力戰滿州 統治者的女英雄。
《刺桐花之戰》在2013年出版的同年即獲臺北市立 大學校長戴遐齡推薦入選國家圖書館百大好書，並 於2014年獲巫永福文學獎、2015年由屏東縣政府文
化處製作成歌仔戲，由屏東縣明華園玄字戲劇團演 出，並於2018年再次搬上大舞台公演。
花為視覺的基底，以其多層次的紅色為主色調，並將 屬質感與色澤，試圖襯托出戰火斑斕下的台灣歷史 與文化主體性。
明華園玄字劇團 《刺桐花之戰》 節目手冊 Guide book design / Ming Hwa Yuan Taiwanese Opera Company / 2018 The War of Erythrina flower, Heroine: Jin Niang 明華園玄字劇團 《刺桐花之戰》 燈箱廣告 / 台北城市舞台 Visual wall / Ming Hwa Yuan Taiwanese Opera Company / 2018 The War of Erythrina flower, Heroine: Jin Niang
Graphic Design
The Drifting Frequency 十九世紀初電報問世，在往後的年歲裡，信紙與墨水溶化消
解為符號密碼，一點一劃一停頓。藉由反覆的創作行為，作品 遂成一台電報收發器，連結了外在世界與內在心靈。創作者
將一條條細長的頻率發射空中，望著它消散於一片訊號海， 祝福它被觀眾打撈、被照料、被回應。
同時我們也持續攔截漂流中的頻率，分析、重現，長短波長、 高低振幅，正確的甚或錯誤的，一切訊息都終將被解碼；何時 收，何時放，伴隨著經驗積累，期許能夠透過作品將訊號傳遞 的更遠更深，直至宇宙盡頭。但亦有時，信心遭受屏蔽，過多 的慾望形成雜訊干擾叫人專注不得，於是一錯再錯，遍尋不 著對的頻道，而頻率早已漂離了正軌，難以再度相遇。
而此時最急切需要的，莫過於一個合宜的姿勢，以便消除你 那喪失重力所帶來的不安定感；舒服自在地漂浮，而那兒正
是你的頻道──最後試著相信，所有的訊號都將得到歸屬。 如此一來，它們終究會回到你的身邊。
Chang,Chung Shan Portfolio
頻率漂移 展覽海報 Exhibition poster / 59.4×84.1 cm / Printing on paper
Graphic Design
The Drifting Frequency
主題字體係由思源中黑體變化而來，拆解、調整並簡化部份筆畫及部首，使主題字樣 看來更趨近於符號，將發射信號在空中沈浮飄盪的抽象概念，具體表達出來。
Chang,Chung Shan Portfolio
字體應用
application font
華康儷宋體
主題字思源中黑體
頻率漂移
中山創意基地 台北市民生東路一段二一號
Constantia
The Drifting Frequency ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789
0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789
0123456789
色彩計畫 color plan
特色銀
標準色
輔助色
Pantone877C
R239 G85 B151 M82 Y5
R113 G79 B160 C66 M81
Graphic Design
頻率漂移 展覽主視覺牆/中山創意基地 Exhibition visual wall / URS21 Chung Shan Creative Hub
Graphic Design
頻率漂移 邀請卡 Invitation of The Drifting Frequency / 11×11 cm / Printing on paper
b 邀請卡背面 Back of the invitation a 邀請卡正面 Front of the invitation
c 展覽貼紙 Stickers
Graphic Design
Logotype 再也不能這樣下去 / 洗澔楊 + 謝宗翰 + 黃旭誠 三人創作聯展 展覽字體設計 Can't Go on Like This : Group art exhibition / Type design / 2016
天南廣播公司黃金週率999千赫 TianNan Broadcasting Corporation AM999
天南廣播公司 / 識別設計 TianNan Broadcasting Corporation AM999 / VI design / 2015
The Drifting Frequency
pluto is not a planet anymore
Graphic Design
冥王星已經不是行星 / 字體設計 Pluto is not a planet anymore / type design / 2015 頻率漂移 / 字體設計 The Drifting Frequency / type design / 2014
poetic . wrtie
詩性˙書寫 / 字體設計 Poetic write / type design / 2016
Fine Arts
The Water of Life Digital painting / 21 × 26 cm / 2016 - 2017
Illustration 在進入大學以前，我一直認為所謂「素描」就是單純的以單色
所構成的靜物畫面，但事實上，素描的概念是相當複雜而模糊
的。美術系的素描課裡，教授完全顛覆了我對素描下的定義， 隨心所欲地畫，不要拘泥什麼技法，不要被結構框架，更不要
設限素描的媒材與大小，並規定交上一百張教授所謂的「素 描」給他檢討，當我們聽到了這樣的要求感到不可置信也覺得 壓力很大，然而在這樣大量的創作與探索之下，終將會產生一
件作品，而在這件作品產生之前的大量練習(或說草稿)甚至是 想法，就是「素描」 。
而素描的媒材並不受任何規範，可以是傳統繪畫、塗鴉、雕塑， 也可以是錄像、攝影，也就是說，素描可以是任何形式的表現， 直到完整的作品產生之前。這些習作不乏生活靈感之擷取、人 體速寫、未完成的草圖。
Chang,Chung Shan Portfolio
75
The bible series Acrylic on paper / 52.1 × 37.5 cm / 2013
Fine Arts
Chang,Chung Shan Portfolio
The Water of Life Digital painting / 21 Ă— 26 cm / 2016 - 2017
Fine Arts
The Doll House Digital painting / 21 Ă— 26 cm / 2018
Fine Arts
The Doll House Digital painting / 21 Ă— 26 cm / 2017- 2018
The Doll House Digital painting / 21 Ă— 26 cm / 2018
Fine Arts
The Doll House Digital painting / 21 Ă— 26 cm / 2017- 2018
The Doll House Digital painting / 21 Ă— 26 cm / 2018
Fine Arts 84
The Doll House Digital painting / 21 Ă— 26 cm / 2017- 2018
Installation
Chang,Chung Shan Portfolio
The Doll House Digital painting / 21 Ă— 26 cm / 2018
Chang, Chung Shan Portfolio 2015 - 2019 Thank you for reading, this is an art and design work collection created by Chung Shan Chang, only for personal use, if you want more details, please contact with the following information.
mountain0126@gmail.com 0925259047