︿
勇於挑戰
這是我最喜歡的一句話。人生面臨許多挑戰，勇敢接受它，才能追尋自己的價值所在！這裡收錄著我的精選專案作品，藉此可以看見我曾經留下的痕跡：Ｄ
請選擇作品分類
視覺設計
-
官網版型設計
-
活動頁設計與開發
-
活動頁設計與開發
-
活動頁設計與開發
-
活動頁設計與開發
-
活動頁設計與開發
-
活動頁設計與開發
-
EDM設計
-
活動頁設計與開發
-
活動頁設計與開發
-
遊戲角色設計
-
海報設計
-
EDM設計
-
雜誌專刊設計
-
LOGO設計
網頁前端開發
單頁式產品網頁
華碩ROG GX501
華碩ROG G703
華碩ROG GM501
華碩ROG GL12
華碩Zenfone Max Plus M1
華碩StudioBook W500
華碩ZenBook UX331
華碩ZenBook UX580
華碩ZenBook Flip UX562
華碩ZenBook UX581
華碩Zenbook Edition 30th
網頁視覺化特效
Air Thermal 風流特效
Bezier路徑座標產生器
iphoneX 網站特效仿製
CSS Sprite 連續動畫
SVG指紋辨識特效
SVG文字筆畫特效
SVG polygan組合特效
Canvas Diffuse光影特效
Canvas Fragment特效
SVG Morphy變形特效
大型網站開發
Cancell抗癌好夥伴
癌友新生命協會網站
捷元B2B購物網站
捷元B2C購物網站
捷元員購網說明網站
影音動畫
- Yahoo廣告AD任職智冠遊戲期間於Yahoo全站平台上架的遊戲類Flash Banner廣告。檔案大小規範相對寬鬆，主要限制在 100KB以下 。主要尺寸為: 640w x 95h ， 550w x 400h。檔案下載
- 巴哈姆特廣告AD於台灣最大遊戲網站晚間八點黃金檔期所製作的遊戲類Flash Banner廣告。檔案大小十分嚴格，幾乎都限制在 30KB以下 ，製作上是一大挑戰。主要尺寸為: 200w x 120h ， 600w x 400h。檔案下載
- 遊戲基地廣告AD於台灣遊戲基地遊戲論壇所製作的遊戲類Flash Banner廣告。檔案大小限制寬鬆， 150KB以下 即可。主要尺寸為: 200w x 215h ， 200w x 120h ， 806w x 102h。檔案下載
- Flash遊戲開發任職捷元電腦期間，與後端工程師合作使用ActionScript 3.0所開發的輪盤小遊戲，其中包括介面設計與互動特效等等。遊戲主要是給經銷商紅利抽獎使用，較為複雜的程式判斷與後端資料串接也是本專案一大挑戰。檔案下載
×
-
優樂遊戲官網任職智冠遊戲期間，部門因擴編為網頁遊戲子公司優樂遊戲。此為我為新公司所設計的新官網版型，包含Logo也是由我一手包辦。風格以橘色調搭配一點科技網格營造出活潑，熱情，科技感的形象網站。photoshopillustrator
-
紅利活動網頁主要是給捷元電腦經銷商紅利集點活動所設計的網頁。從設計到網站建置皆為我所製作，以華麗色彩搭配詼諧的主視覺並且使用動態效果來吸引使用者的目光。photoshophtml5css3jQuery
-
員購行銷活動頁捷元內部與經銷商行銷推廣申請加入公司的員購帳號。由於目標族權多為女性用戶，因此以可愛且女性化的視覺來設計，藉此期望達到最高的活動宣傳力。photoshopillustratorhtml5css3
-
-
-
-
美光SSD行銷頁此為配合美光廠商SSD促銷檔期，協助美光所製作的活動行銷網頁。主要對象為捷元經銷商，以高科技並且搭配美光主要色調藍色所設計而成。photoshophtml5css3jQuery
-
小倉餅乾行銷頁本行銷頁主要是給信箱EDM寄送所用。以日式，繽紛的風格來包裝產品期望能夠吸引日式愛好者的目光。photoshophtml5
-
-
-
普洛島角色設計此為我在智冠遊戲任職期間，為公司新代理遊戲普洛島所設計的新角色造型。該次活動主打復仇者聯盟，因此設計出鋼鐵人，美國隊長，雷神索爾，浩克等知名人物等多種造型與服裝。photoshopillustrator
-
中秋節電視牆海報我於台電大樓打工等待兵役期間，因有設計專長而被分派的工作任務。主要是替台電大樓內部所設計的電視牆上中秋節祝賀海報。photoshopillustrator
-
換機潮行銷頁公司主打的換機潮活動，利用衝浪者需要把握浪潮高起機會所延伸出的設計概念，以海灘與夏日風格所設計的EDM活動頁。photoshophtml5
-
漢之濤雜誌專刊我於智冠遊戲期間為公司新三國類遊戲漢之濤在電玩宅速配雜誌中所設計的專刊廣告頁。photoshopillustrator
-
LOGO設計總匯這裡收錄了我於智冠遊戲，個人外包，台電打工期間所設計的所有LOGO。風格十分多樣化，其中包括可愛風，女性風格，遊戲類以及企業安全形象等等。photoshopillustrator
-
華碩ROG GX5012017年華碩電競主力機台，厚度比前幾代ROG筆電都還要薄，硬體設備卻足以媲美高階電競桌電。此為我第一台電競專案，網頁中多數的區塊與複雜的動態特效對於當時的我是一大挑戰。由於是主力產品，對於網頁細節十分的要求，其中包括網頁排版，跨瀏覽器支援以及1倍2被圖切換等等。部分動態視覺特效譬如: 滾動視差，風流動態，鍵盤AuraSync也是第一次開發。psd切圖gulpbabelsassES6+jQueryparallaxlazyloadRWD1x/2x resolutionie10+
-
華碩ROG G7032017年ROG另一台主力電競筆電，市售約台幣15萬。由於G703功能眾多，網頁中的介紹區塊非常多，相對圖片使用上也更多，因而網頁負載量是本網站第一考量。此外，我也利用Particles.js套件去做火花特效，也開發了新版本的AuraSync動態。psd切圖gulpbabelsassES6+jQuerycanvasparticles.jslazyloadRWD1x/2x resolutionie10+
-
華碩ROG GM5012018年ROG GX501的改版機台，效能與硬體規格略微提升。GM501是GX501的改款，網頁是以GX501去做延伸與重製，其中重點特效譬如: 側面開蓋動畫(比照實際機台開蓋呈現)，風流動態，鍵盤AuraSync等等。此外，自本次專案後，開始把相同且類似的動態特效模組化，以利未來可以快速套用。psd切圖gulpbabelsassES6+jQueryparallaxlazyloadRWD1x/2x resolutionie10+
-
華碩ROG GL122018年ROG系列主力PC產品，硬體規格在當時皆是頂規，因而網站需營造出登峰造極，磅礡氣勢的風格。本專案首次開發Canvas光影Diffuse動態效果。我是透過Pixi.js v4版，搭配Pixi-light + Pixi-heaven等套件做開發並以WebGl模式去執行以提高網頁的效能。此外，也利用Minified的影片去呈現機台的其他特色psd切圖gulpbabelsassES6+jQuerypixi.jscanvasWebgl diffuselazyloadRWD1x/2x resolutionie10+
-
華碩Zenfone Max Plus M12017年協助手機部門所開發的ZenFone Max M1網頁。高電量與大螢幕為本產品最大賣點，因此動態特效的重點也圍繞在這兩個特色上，此外，也特別開發鏡頭組件展開動態以展示鏡頭的零件構造。psd切圖gulpbabelpugsassES6+jQueryparallaxlazyloadRWD1x/2x resolutionie10+
-
華碩StudioBook W5002019年華碩於Computex上所發表的新StudioBook W系列新產品。網頁中以高階，專業設計師為主要客群，網頁細節的要求也是不容馬虎。為了吸引目標族群的青睞，網頁中使用很多SVG繪圖動態以及我所開發的最新版風流特效，風流的呈現已相當逼真且具有不錯的網頁效能。此外，排版上也顛覆過往網頁的基本版型，採用新的設計風格與配色。psd切圖gulpbabelpugsassES6+jQuerysvgcanvaspixi.jslazyloadRWD1x/2x resolutionie10+
-
華碩ZenBook UX3312017年我所開發製作的專案，主打輕巧，時尚的設計風格且具備不錯的硬體規格。動態上特別以背景畫線來襯托出產品的金屬外殼，並加上滾動視差效果來呈現機台輕巧，超薄的特色。psd切圖gulpbabelpugsassES6+jQueryparallaxlazyloadRWD1x/2x resolutionie10+
-
華碩ZenBook UX5802018華碩ZenBook系列英雄產品，產品主打時尚，沉穩內斂的風格做設計。由於是英雄商品，對於動態呈現的要求更多，主要包含: Matrix Slider，滾動視差，Canvas放射動態，ScreenPad特色，風流特效，更首次引進聲波Ripple特效。由於舊版風流效能欠佳，因而在本次開發期間做了改版也大幅提高了風流呈現與效能。psd切圖gulpbabelpugsassES6+jQueryparallaxsvgcanvaspixi.jslazyloadRWD1x/2x resolutionie10+
-
華碩ZenBook Flip UX5622018年上市的ZenBook Flip系列以輕盈，時尚風格聞名的產品，也具備極致的窄邊框與360度螢幕旋轉等功能。網頁設計上以乾淨，清新，遼闊無邊為主要概念，因此我以湖畔水波紋搭配小鳥飛翔營造出寧靜遼闊無邊的氛圍。另外，我也特別開發邊框縮小動態來介紹窄邊框的特色。psd切圖gulpbabelpugsassES6+jQuerylazyloadRWD1x/2x resolutionie10+
-
華碩ZenBook UX5812019華碩Zenbook系列旗艦產品，最大特色為採用上下雙觸控螢幕且採用最新Nvidia繪圖晶片。為了避免圖片負載過高，並無太多新穎的特效而是把重心放在視覺設計與排版細節上。由於UX581具備Alexa語音溝通功能，特別比照真實使用情景而開發動態特效。psd切圖gulpbabelpugsassES6+jQuerylazyloadRWD1x/2x resolutionie10+
-
華碩Zenbook Edition 30th此專案為2019年華碩30週年紀念款產品，與ASUS Design Center合作設計出30周年紀念Logo，並以珍珠白為主要色系。三角形的Logo為本產品最具代表特色，設計上也大量使用情境照來襯托精品與高貴感，因此我特別利用SVG開發Logo的繪製特效並配合大量滾動視差來讓產品網頁更吸睛。psd切圖gulpbabelpugsassES6+jQuerysvgparallaxlazyloadRWD1x/2x resolutionie10+
-
Air Thermal 風流特效於華碩任職期間，因有風流特效的需求且不以影片開發的情況下，我不斷尋找適合的做法。從2016年第一版風流開始至2019最新版第四版，前後不斷嘗試與開發，最終已經可以媲美影片後製出來的動畫效果。第一版採用SVG stroke遮色背景材質，第二版改為採用canvas 2d繪製，第三版開始以ai繪製線段後搭配使用我所開發的路徑產生器 Bezier路徑座標產生器 得到x / y座標後於canvas中位移，而到了第四版大幅提升了效能並改為pixi.js引擎以Webgl方式呈現。illustratorcss3jQuerysvgcanvaswebglpixi.js
-
Bezier路徑座標產生器由於開發風流特效需求而特別開發的Bezier曲線 x/y座標產生器。主要在Ai中繪製好曲線並輸出成canvas文件 Ai外掛下載，並且透過Pixi中的graphicsData()方法轉換為座標點並搭配GSAP套件中的的bezier>功能於設定的動畫時間內紀錄並取得座標位置。illustratorhtml5css3jQuerygsappixi.js
-
iphoneX 網站特效仿製iphone X 發表後，模仿Apple網站而練習開發動態效果。主要為Scoll事件去控制Dom元素的Scale縮放。html5css3jQuery
-
CSS Sprite 連續動畫多張連續圖快速做切換以達到影片播放的流暢度。為了避免圖片切換過程中有掉圖問題，必須於網頁onLoad前做圖片preLoad。photoshophtml5css3jQuery
-
SVG指紋辨識特效SVG練習專案，以SVG stroke搭配Css做出動態效果。底部有一層漸層背景並且做重複性的位移。html5css3jQuerysvg
-
SVG文字筆畫特效同樣以SVG stroke搭配Css做出動態效果。此外，也加上了SVG中的漸層材質與光暈功能。html5css3jQuerysvg
-
SVG polygan組合特效以SVG中的Polygan搭配Css做Transform，可以做出爆炸或複雜的動態效果html5css3jQuerysvg
-
Canvas Diffuse光影特效利用Pixi.js中的Pixi-light套件開發而成。利用兩張不同色相的圖片做濾鏡處理並以滑鼠當作遮色片來產生逼真的光影動態。photoshophtml5css3jQuerycanvaspixi.js
-
Canvas Fragment特效此為Webgl練習專案，主要是動態控制uniforms中的參數回傳給Gpu做運算，藉此做出高效能且進階的網頁視覺動態。html5css3jQuerycanvaswebgl
-
SVG Morphy變形特效主要以GSAP套件中的MorphSVGPlugin去控制SVG Polygan的變形轉換。下方預覽有問題，完整請前往 Codepen 查看。illustratorhtml5css3jQuerygsapsvg
-
Cancell抗癌好夥伴除了是Side Project項目，也是創業的事業主體，Cancell抗癌好夥伴對我有著重大的意義亦是我渴望專注打造的產品。我為平台的主要CIS設計以及uiux規劃者，同時也是核心前端開發者。Cancell抗癌好夥伴為癌症醫病平台，專注於癌症領域，提供癌友間交流的管道也致力於打造遠距智慧醫療的諮詢服務，期望以社會企業的形式創業並幫助改善台灣醫療困境。更多功能介紹: https://cancell.tw/tutorialFigmaVue.jsDjangoRestful ApiRWD1x/2x resolution
-
癌友新生命協會網站2018年因緣際會下我與癌友新生命協會有了接觸。新生命協會宗旨為陪伴癌友活出新的人生，傳授很多氣功與心法幫助走出人生的低潮，然而新生命協會一直都是透過募款方式營運，因而缺乏經費建置新的官網，推廣上獲得很大的阻礙。為了協助新生命協會克服難關，我自願以志工名義免費幫忙設計與開發前端網站並與另一名後端志工合力完成新官網。協會對於癌友的付出與陪伴令人動容，也期望透過官網能夠做公益並為社會貢獻一點心力。photoshoppsd切圖html5css3jQueryRWD1x/2x resolutionie10+
-
捷元B2B購物網站B2B購物網站於2014開始開發至2015年中建置完畢，龐大的架構以及複雜的頁面對於當時的我是很大的挑戰。從網頁設計到前端開發皆為我負責的範圍，複雜的css排版與版面規劃讓我的前端技能獲得很大的提升，也吸收到很多使用者體驗相關知識與研究。整個前端網站模板大約20頁左右，從視覺設計到前端開發完成費時8個月左右。photoshoppsd切圖html5css3jQueryie10+
-
捷元B2C購物網站B2B購物網站專案完成後，緊接著公司計劃推出B2C購物網站，因而我繼續被指派主導此專案。我參考了當時主流B2C購物網的版面設計，譬如：天貓，淘寶網，momo購物網等等，視覺上與B2B網站有很大的不同。此外，由於專案時間有限，開發B2C購物網站主要是以B2B網站去做改版與延伸。photoshoppsd切圖html5css3jQueryie10+
-
捷元員購網說明網站此為我所開發的捷元員購網使用說明網頁，需求單位希望能夠有說明書翻閱的感覺，因此以書本翻頁動態來呈現。網站具有RWD，且主流瀏覽器都能支援，但是舊版IE 8無法正常顯示。photoshoppsd切圖html5css3jQueryRWD
