第一階段 - 平面設計
平面商業視覺設計主軸是經由設計規畫概念為主軸,創造與美學為輔助的一門UI向課程
主要課程中專案會先針對內容進行分析規劃,整合出需要用到的版型、工具、主色調分布等規格確立好目標後再經素材蒐集統整正式進入實作專案階段。
專題1《摺頁廣告》
設計前提以幾何佈局為基礎
運用將版面以方形對角切成三角對邊的設計分別展示內容區塊
考量是為金融業的摺頁廣告,故選用較為顯著的暖色系中較為激勵指標的紅色為主色調。

專題2《海報廣告》
訓練廣告設計能力並搭配logo設計、色系調適、漸層技巧
效果中針對陰影層次來提高整體廣告圖文立體質感。

專題3《網頁廣告》
針對網頁面板設計,從網頁主要架構、頁首導覽樣式、主體展示區塊到頁腳
再進行主要頁面配色及重點標示設置達到完整學習從無到有設計網頁並實際呈現的目的。

第二階段專案 - 手機介面設計
主軸目的是運用原形圖軟體將原本靜態平面設計附加了動態效果,使在與程式設計師溝通時更能直接展示出效果需求,達到有效且精確的協作目的。
專案起初會先帶同學了解符合各尺寸解析度下該如何進行設置,其中包含不同系統平台下的既有介面、使用倍率、按鈕尺寸、文字大小等詳細解說過後依照規格實行設計方針。
《手機APP介面設計》專題
購物網站從介面制定規劃到時候手機模板並且加入動態板塊效果
做出實際APP介面並可實行交互動作。
介面設計:

ICON設計:

交互實戰:

第三階段專案 - 網站設計
運用UI介面設計結合網頁代碼製作網站功能
主軸在於響應式及運用JavaScript讓網站更富互動效果。
響應式布局桌上型電腦版:

響應式布局手機端版模擬:

前端代碼設計:

響應式CSS樣式代碼:

NavBar響應交互動作JavaScript

Navbar實際呈現:

第五階段 - 3D模型設計
階段專案運用C4D立體建模創造更富真實感的產品樣機
結合PS製作產品陰影光線補強,使達到廣告產品精修的目的。
產品原圖:

產品打樣添加光澤陰影:

C4D建模專案1:

C4D建模專案2:

Kommentare