胡晏慈
R
uby Hu POR TFO LIO
PORTFOLIO RUBY HU
【 網頁設計 | 平面設計 】
ABOUT ME
胡晏慈 Ruby 網頁設計 | 平面設計 | 插畫設計 ruby19960513@gmail.com 1996/05/13
Experiences 2019
2020
與畢啾子視覺藝術有限公司合作，
與畢啾子視覺藝術有限公司合作，
參與的案子，如下：
參與的案子，如下：
建新國際股份有限公司
慶耀工程股份有限公司
國家實驗研究所
竣盟科技股份有限公司
- 網頁視覺設計及製作
- 網頁視覺設計、Wordpress 網頁製作
- 網頁後台樣式視覺設計及製作
- PPT簡報模板設計
罧川室內設計
Fullway Acoustic
- 網頁視覺設計及製作
- 網頁視覺設計、Wordpress 網頁製作
JIM GATES R.H.C.
瑞擎數位股份有限公司
- 網頁視覺設計及製作
- 展覽背板設計
東海大學 AI 專區
科技部 Lift 海外人才橋接方案
- 網頁視覺設計及製作
- 職缺廣宣海報、背板視覺設計
科博館 探索科博尋寶趣
亮點生技有限公司 SUI
- 網頁視覺設計及製作
- 保養品摺頁設計
International Postdoctoral
東海大學企業管理學系
中華民國對外貿易發展協會
皇家寵物飼科
- EDM、Banner、YouTube字卡設計
- 展架規劃設計
Fellowship Program - 網頁視覺設計及框架製作
- 信封信紙設計、PPT簡報模板設計
PORTFOLIO RUBY HU
【 網頁設計 】
【國立自然科學博物館】 探索科博尋寶趣-網頁視覺設計及製作
#78CDC1
#2ABBAC
#1D5063
探索科博尋寶趣 HTML+ CSS：製作網頁框架與樣式 Bootstrap：規劃及製作響應式網頁 CSS Animation：部分動畫製作 Adobe Animate：部分動畫製作 Adobe Illustration：向量插畫繪製
主視覺設計
探索科博尋寶趣
|
服 務 特 色 |首 頁
探索科博尋寶趣-首頁
CSS Animation動畫效果 抓住使用者目光，降低網頁跳出率
輪播(Carousel)效果 使用者可快速查閱最新消息
圖文搭配/按鈕內部連結 抓住使用者目光，降低網頁跳出率 內部連結相互串連，優化SEO
個人解謎/協力解謎
Adobe Animate動畫效果 抓住使用者目光，降低網頁跳出率
輪播(Carousel)效果 引導使用者了解APP操作
導覽(Navs)效果 主題分類，使用者清晰易懂
互動視窗(Modal)按鈕 減少畫面文字，需深入了解點擊查閱
支援學校教育/創新科技體驗
CSS Animation動畫效果 抓住使用者目光，降低網頁跳出率
圖文搭配/按鈕內部連結 抓住使用者目光，降低網頁跳出率 內部連結相互串連，優化SEO
CSS Animation動畫效果 抓住使用者目光，降低網頁跳出率
【JIM GATES R.H.C.】 網頁視覺設計及製作
#e6ae49
#6e5220
JIM GATES R.H.C HTML+ CSS：製作網頁框架與樣式 Bootstrap：規劃及製作響應式網頁 CSS Animation：部分動畫製作 JavaScript：套用及修改部分程式 Adobe Illustration：網頁版面設計
網站首頁 多種語系視窗 依據地區分類，迅速選取語系
Hover 效果 滑鼠移入，漸入文字 減少畫面文字
輪播(Carousel)效果 首頁主題照片輪播，吸引目光
卡片式排列 使用者可快速查閱最新消息
品牌故事/專業認證 輪播(Carousel)效果 專業證照一次統整集合查閱
圖文搭配/按鈕內部連結 抓住使用者目光，降低網頁跳出率 內部連結相互串連，優化SEO
暢銷產品/銷售通路/全球市場
導覽(Navs)效果 主題分類，使用者清晰易懂
輪播(Carousel)效果 系列商品輪播，中間商品放大顯示
CSS Animation動畫效果 全球銷售商連結，各語系相互串連 抓住使用者目光，降低網頁跳出率
最新消息/聯絡我們
聯絡表單/Google驗證 表單於電子郵箱收信，快速及時 Google驗證阻擋垃圾郵件
卡片式排列 使用者可快速查閱最新消息
【建新國際股份有限公司】 網頁視覺設計及製作
#0b4978
#f8b300
建新國際股份有限公司 HTML+ CSS：製作網頁框架與樣式 Bootstrap：部分響應式網頁 JavaScript：套用及修改部分程式 Adobe Illustration：網頁版面設計
網站首頁 錯位編排設計 相互交錯排列，設計更活潑
輪播(Carousel)效果 人員資訊輪播，主要人員置中
Footer 網站地圖 導覽(Navs)效果 主題分類，使用者清晰易懂
內部連結相互串連，優化SEO
公司介紹/歷史沿革 時間軸效果 主題式卡片排列 公司特色一目了然
視覺化呈現，資訊完整
願景與使命/公司組織圖
圖文搭配 抓住使用者目光 降低網頁跳出率
圖表繪製 依客戶需求，客製精美圖表
導覽(Navs)效果 主題分類，使用者清晰易懂
員工/訓練發展
下拉式選單 節省網頁空間，留白設計
圖文搭配 抓住使用者目光 降低網頁跳出率
圖表繪製/導覽(Navs)效果 依客戶需求，客製精美圖表 主題分類，使用者清晰易懂
【慶耀工程股份有限公司】 網頁視覺設計、Wordpress網頁製作
#18499d
#e71f19
慶耀工程股份有限公司 Wordpress：整體網頁建構 Wordpress Plugin：套用及優化設定 CSS：部分網頁樣式撰寫 Adobe Illustration：網頁版面設計
網站首頁 輪播(Carousel)效果 實際案例照片輪播，達到宣傳效果
Hover 效果 滑鼠移入，漸入文字 減少畫面文字
Footer 網站地圖 內部連結相互串連，優化SEO
特定樣式製作 弧形與漸層設計，對應品牌標誌風格
Facebook 顧客聊天外掛 顧客可及時聯絡客服
關於我們/產品目錄 輪播(Carousel)效果 專業證照一次統整集合查閱
產品整合清單 後台統一管理產品 每個產品個別分頁說明
服務項目/工程實績
指定位置按鈕 按鈕可滑入指定位置，了解各服務
案例整合清單 輪播(Carousel)效果 部分技術輪播說明
後台統一管理案例 每個案例個別分頁說明
聯絡我們 圖示資訊 視覺化資訊，方便使用者閱讀
聯絡表單/Google驗證 表單於電子郵箱收信，快速及時 Google驗證阻擋垃圾郵件
【Fullway Acoustic】 網頁視覺設計、Wordpress網頁製作
#e24602
#1a1a1a
Fullway Acoustic Wordpress：整體網頁建構 Wordpress Plugin：套用及優化設定 CSS：部分網頁樣式撰寫 Adobe Illustration：網頁版面設計
網站首頁 特定樣式製作 弧形設計襯類便利貼樣式 整體柔和、印襯網頁風格
Hover 效果 滑鼠移入，漸入文字 減少畫面文字
時間軸效果 視覺化呈現，資訊完整
Footer 網站地圖 內部連結相互串連，優化SEO
音場優化/專業隔音 特定樣式製作 步驟設計，逐一亮起
不規則圖片排列 圖片編排設計更有彈性
手風琴效果 以清單樣式排列， 點選即可看完整內容
案例介紹/聲學產品
固定按鈕選單 按鈕固定於網頁右側，可供使用者及時點選
外層大項目選單 個別分類， 使用者方便查找
紀錄最近瀏覽 自動記錄， 方便客戶瀏覽
圖文搭配/按鈕內部連結 抓住使用者目光，降低網頁跳出率 內部連結相互串連，優化SEO
連絡我們 聯絡表單/Google驗證 表單於電子郵箱收信，快速及時 Google驗證阻擋垃圾郵件
PORTFOLIO RUBY HU
【 平面設計 】
【東海大學企業管理學系】 信封信紙設計
#236c94
#f3a136
直式信封
東海大學企業管理學系
電 話 ︵〇四︶二三五九〇一二一轉三五一〇〇～四
臺中市東海大學八四〇號信箱
h t t p : / / www 2. t hu . e d u . t w/ ~ba /
傳 真 ︵〇四︶二三五九四一〇七 網址
東海大學企業管理學系
電 話 ︵〇四︶二三五九〇一二一轉三五一〇〇～四
臺中市東海大學八四〇號信箱
h t t p : / / www 2. t hu . e d u . t w/ ~ba /
傳 真 ︵〇四︶二三五九四一〇七 網址
4 0 7 0 4 4 0 7 0 4
緘 緘
： ： ：
： ： ：
品 刷 印 品 刷 印
號 掛 號 掛
信 平 信 平
限 時 專 送
貼郵 票處 限 時 專 送
貼郵 票處
背面 正面 正面
橫式信封 東海大學企業管理學系 40704台中市西屯區臺灣大道四段1727號 Department of Business Administration
正面
TUNGHAI UNIVERSITY No.1727,Sec.4,Taiwan Boulevard,Xitun District, Taichung 40704,Taiwan R.O.C.
東海大學企業管理學系 40704台中市西屯區臺灣大道四段1727號 Department of Business Administration TUNGHAI UNIVERSITY
正面
背面
No.1727,Sec.4,Taiwan Boulevard,Xitun District, Taichung 40704,Taiwan R.O.C.
信紙 40704台中市西屯區台灣大道四段1727號 E-Mail: ba@thu.edu.tw | http://ba.thu.edu.tw/
Department of Business Administration TUNGHAI UNIVERSITY | Taichung,Taiwan,Republic of China | Tel:(04)23590121 ext.35100~4｜Fax:(04)23594107
【科技部 Lift 海外人才橋接方案】 職缺廣宣海報、背板視覺設計
#ef481b
#323333
背板視覺設計 客戶喜歡簡潔俐落的設計 因此運用現今流行的扁平化設計規劃整個版面 多以運用色塊區隔訊息以及重點，方便讀者閱讀
職缺廣宣海報
職缺廣宣海報
【亮點生技有限公司 SUI】 保養品摺頁設計
#119e95
#c6dfe0
保養品摺頁
0979-325-671
ruby 19960513 @gmail.com