目前位置: 首頁 > 公開課程 > 資訊管理 > 作業系統 > 從Figma到VScode網頁切版-網頁設計實作體

從Figma到VScode網頁切版-網頁設計實作體

本課程使用系統化的教學方式, 解決初學者有了設計稿卻不知道怎麼切版或是學....

  從Figma到VScode網頁切版-網頁設計實作體驗營- Figma 是專注於介面(UI)設計的工具,是現在最熱門的 UIUX 設計軟體之一。有著友善的免費方案以及使用瀏覽器就能隨時使用,只需要連上網路立刻就可以將你的想法轉化成擬真產品。

加入收藏
收件人email:
寄件人姓名:
寄件人email:
課程代碼 2323020045
從Figma到VScode網頁切版-網頁設計實作體驗營

報名截止


課程型態/ 混成(實體+線上同步)
上課地址/ 實體:工研院產業學院 台北學習中心 (實際上課教室請依據上課通知函為準!) 線上:線上直播會議是(使用Cisco Webex Meetings,將於課前提供會議室連結)
時數/ 14小時
起迄日期/ 2023/07/18~2023/07/19
聯絡資訊/ 陳品諠 (02)2370-1111 #303
報名截止日/ 2023/06/06

--------------------------

課程介紹

  Figma 是專注於介面(UI)設計的工具,是現在最熱門的 UIUX 設計軟體之一。有著友善的免費方案以及使用瀏覽器就能隨時使用,只需要連上網路立刻就可以將你的想法轉化成擬真產品。

  Visual Studio Code(簡稱 VS Code)是一款由微軟開發且跨平台的免費原始碼編輯器。具有輕量、可擴充等特性,非常適合開發網站使用

  數位產品設計的世界中,團隊協同合作是必須的,透過 Figma 的共同樣式製作和即時同步與協作功能,隨時讓團隊成員都能參與整個設計與流程,讓開發團隊及時得到反饋,減少大量溝通成本。且從設計發想到規格交付,figma直接整合所有流程,不需切換不同工具,大幅提升工作效率。故如何在團隊中有效的溝通解決方案,這堂課程帶你掌握開發過程中所需要具備的知識和軟體運用!

  本課程使用系統化的教學方式, 解決初學者有了設計稿卻不知道怎麼切版或是學會了切版但不知道設計稿是怎麼產出的問題? 本課程協助你快速上手,在短時間內從Mockup繪製到實踐HTML與建立網站樣式CSS,讓你的設計稿變成真正的網頁。

 

標題的icon

課程效益

  1. 快速學習Figma核心基本工具邏輯與功能
  2. 使用通用設計法則,掌握 UI 與UX 的核心知識與觀念,做出美感與易用性兼顧的好介面。
  3. 進階使用管理元件、共享樣式幫助提高溝通效率,並做出可擴展、好維護的設計系統。
  4. 使用Auto Layout解決各種裝置不同尺寸的介面設計。
  5. 掌握UI設計的工作流程細節與前後端開發人員的溝通的邏輯與注意事項。
  6. 做出可供使用者及團隊測試的原型(Prototype),根據反饋調整及改善使用者易用性。
  7. 學會從 Figma 的Mockup 轉到 VS Code 撰寫 HTML與CSS。

 

標題的icon

課程對象

  對UI設計有興趣的視覺設計師、網頁設計師、程式設計師、及企劃等

 

標題的icon

講師簡介

陳講師

  • 學歷:台北大學企業管理學系
  • 現職:有識整合行銷有限公司
  • 經歷: 
    信欣旅遊-藝術指導(1999/9-2011/9)
    雄獅旅遊-視覺設計(2011/9-2014/1)
    有識整合行銷有限公司-視覺總監(2014/1-~迄今)
    財團法人資訊工業策進會數位教育研究所外聘講師(西元年/月/日~迄今)
    資展國際股份有限公司專業講師(2021/9/1~迄今)

 

標題的icon

課程大綱

課程主題

課程內容

FIGMA 介面介紹

  1. 基本工具原理與使用
  2. 如何繪製符合網站風格的圖案與圖標

網格架構與樣式建立

  1. 深入了解及認知網格系統及排版
  2. 建立高維護及高統一性的共享樣式
  3. 了解團隊合作樣式與專案元件維護與管理

元件建置與Auto layout

  1. 建立符合未來可擴充性和高維護性的元件
  2. Auto layout 加速開發效率
  3. One page web mockup設計

認識VS Code

  1. 了解VS Code 基本功能
  2. 了解網頁建置基本概念

One Page 網頁製作

  1. figma mokeup 轉到 VS Code
  2. 完成one page 網站製作

社群與Plug in的應用

  1. 了解figma社群資源應用工具
  2. 結合高效能plug in縮短整體開發製作與測試時間

註1:因應天候或不可抗力因素,主辦單位保有調整議程之權利。

 

標題的icon

價格

報名方案

費用

說明

原價(含稅、午餐、講義)

10,000/

實體台北授課/線上Webex直播

課前10日報名(早鳥優惠)

9,000/

實體台北授課/線上Webex直播

2人以上團體報名(同公司2人以上)

8,500/

實體台北授課/線上Webex直播

註1:報名各方案可選擇
註2:線上授課,線上授課會提前寄送課程講義,安排課前測試,於課程當天同步直播(建議一台上課直播、一台進行實作),本數位課程無補課機制

 

標題的icon

開課資訊

【主辦單位】:財團法人福琳工商發展基金會、工業技術研究院 產業學院
【上課日期】:2023年6月13日、6月14日,09:00~17:00;每天7小時;共計14小時
【上課地點】:工研院 產業學院 台北學習中心+Webex線上直播  (實際上課教室請依據上課通知函為準!)  
【招生人數】:本班預計20人為原則,依報名及繳費完成之順序額滿為止。(預計10人即開課)
【課程費用】:課程學費、講義(線上供國內郵寄服務)
【培訓證書】:參加本課程之學員,研習期滿,出席率超過80%(含)以上,即可獲得工研院頒發的培訓證書。
【報名方式】:線上報名
【課程洽詢】:02-2370-1111#303 陳小姐
【繳費方式】:確定開班再付款,報名時選擇信用卡線上繳費或ATM轉帳
【退費標準】:請於開課前三日以傳真或email告知主辦單位,並電話確認申請退費事宜。若未於期限內申請退費,則不得於任何因素要求退費,惟可轉讓與其他人參訓。

 

標題的icon

常見問題

  1. 為確保您的上課權益,報名後若未收到任何回覆,敬請來電洽詢方完成報名。
  2. 為配合講師時間或臨時突發事件,主辦單位有調整日期或更換講師之權利。
  3. 報名時請註明欲開立發票完整抬頭,以利開立收據;未註明者,一律開立個人抬頭,恕不接受更換發票之要求,課程開始當天不得以任何因素要求退費。
  4. 為尊重講師之智慧財產權,恕無法提供課程講義電子檔。

 

 



簡介


產業學院緣起
  依據行政院「挑戰2008:國家發展重點計畫」下之「國際創新研發基地」與「產業高值化」兩計畫,首重產業科技人才的效能。

•911216經科字第09103373120號函:經濟部將本院籌設工研院產業學院之工作,列為因應產業結構轉型,提 ... more

*請務必將下列資料填妥,資料送出後,開課單位將會主動與您聯繫。

我想知道本課程的企業包班內訓     


(重新產生)