Details
體驗從最初階段到清晰規劃、使用 Figma 輕鬆設計、簡單清晰的發布流程以及高效管理的 CMS* 建置的整個過程。
一個易於存檔且充滿您個性的網站是您作為設計師可以擁有的另一個作品集。
*CMS(內容管理系統)是一種方便資料管理和更新的內容管理系統。
設計師Haneul Park的作品涵蓋從網站設計和實施到圖形設計的所有內容。
平面設計
網頁設計
為什麼要上這課程?
在創建作品集網站時,如果只注重可用性,網站很容易變得無趣,如果只強調視覺衝擊力,網站就會變得困難。
如果您想創建自己的網站,平衡可用性和趣味性,即易於定期更新,同時也能有吸引力地展示您的作品集,
透過友善的解釋和針對不熟悉編碼的設計師水平的三個具體練習,逐步從規劃階段到最終實施。
在本課程中,您將學習從網站設計到完成的整個過程。
第 01 部分. 使用 Figma 進行網站設計
-
使用 Figma 製作的網站設計:桌面版。 -
使用 Figma 製作的網站設計:行動版。
第02部分.最終實現的網站(從發佈到託管)
-
最後結果
* 以上結果是直接在課程中建立的實際範例。
平面設計師
Haneul Park
大家好,我是平面設計師Haneul Park。
我目前在 Studio Barton 擔任 UI 設計師,為各領域的品牌設計網站。
同時,我作為自由設計師,透過線上和線下的各種媒體進行工作,包括平面設計、展覽設計、網站設計和實施。
我們希望您不要依賴預製模板,而是創建一個完全適合您自己的內容的獨特作品集網站。

平面設計師Haneul Park
現職) Barton Studio UI 設計師
現職) 自由設計師
查看更多歷史記錄
[參與計畫(Studio Baton)]
2022年「門面圖案」網站設計
2022 年「更多願景」網站設計
'雜誌 B' 網站設計 2022
2021年「Osulloc品牌故事與達達日常生活」網站設計
'HEIGHTS' 網站設計 2021
[參與專案(自由)]
「沒有腿行走」平面設計 2022
2022 年「看看誰在說話」網站設計和開發
2022年「Upperhouse VIP Lounge」網站設計與開發
「微笑音樂節」平面設計2022、2020
“鐘針”平面設計 2022
“Eugene Jung”網站設計開發 2022
2022年《首爾報紙互動文章》網站設計與開發
2020年「名字三月」網站設計與開發
課程特色
創建可持續的投資組合管理系統
整理你的投資組合是你總是推遲的事情。透過您的網站建立可持續且簡單的「特定於媒體的投資組合管理系統」。
甚至是編碼初學者也可以透過實踐學習生產知識。
甚至那些剛接觸程式設計或遇到程式設計障礙的人也很快就能透過遵循從規劃到最終託管的步驟來完成網站。
具有您自己身分的作品集網站
使用模板創建網站很方便,但同時,它看起來很統一,就像公寓一樣。了解如何在沒有模板的情況下創建一個像獨棟住宅一樣具有您自己的個性和結構的網站。
課程構成
學這個
-
規劃一個表達個性的網站set網站的目的和方向,並建立一個考慮到適當的可用性和個性的線框圖。 -
可以跟著一起學習的figma介紹。了解 Figma 的框架和自動佈局等主要功能的工作原理,並透過實作範例快速學習基本功能。 -
如何創建詳細的原型我們將研究有用的原型設計功能和技巧,並學習如何創建接近實際實現的網站的詳細原型。
-
響應式網站結構設計我們將研究在各種比例和大小的設備環境中靈活運作的響應式網站結構。 -
創建您自己的 WordPress 主題使用您想要的設計相對簡單地創建您自己的 WordPress 主題,無需使用建構器或主題。 -
按格式劃分的作品集內容處理方法讓我們來看看以各種格式(包括 Instagram、網站和 PDF)發布作品集時處理內容的技巧。
課程
給我看看課表
第 01 節:簡介
01.課程簡介
- 演講者介紹
- 課程簡介
- 使用的軟體簡介
第 02 節:建立作品集網站 - 準備
02. 建立網站的方法
- 探索平台、建構器和模板
- 了解如何根據您的情況進行創作
03.網站規劃與研究
- 設定目的和方向
- 線框設計與印象關鍵字導出
- 網站研究與分析
第 03 節:創建作品集網站 - 設計
04.使用Figma製作的網站設計:Figma
- Figma 檔案設定
- 了解框架結構
- 探索基本/關鍵功能
05. 用 Figma 製作的網站設計:桌面 1
- 桌面預設佈局、原型設定
06. 使用 Figma 製作的網站設計:Desktop 2
- 桌面首頁設計
07. 使用 Figma 製作的網站設計:Desktop 3
- 桌面登陸頁設計
- 桌面詳情頁設計
08. 用 Figma 製作的網站設計:手機 1
- 行動端基本佈局、原型設置
- 手機首頁設計
09. 使用 Figma 製作的網站設計:Mobile 2
- 行動端介紹頁面設計
- 行動端詳情頁設計
- 上傳原型詳細信息
第 04 節:建立作品集網站 – 實施
10、材料準備
- 準備網站實施的設計材料
- 看看Lottie動畫的創作過程
11. 設定工作環境
- 在地設定 WordPress 工作環境
- 設定VSCode工作環境
12.了解網站結構
- WordPress 主題結構概覽
- 比較設計和主題結構
13. 網站實施:發布1
- set預設檔案結構
- 了解響應式 CSS
- 頁首和頁尾設計
14. 網站實施:發布2
- 首頁 html 設計 #1
- 首頁 CSS 設計#1
15. 網站實施:發布3
- 首頁 html 設計 #2
- 主頁CSS設計#2
16. 網站實施:發布 4
- 新增介紹頁面
- 介紹頁html設計
- 介紹頁css設計
17. 網站實施:CMS1
- 新增詳情頁
- 建立自訂貼文字體
18. 網站實施:發布 5
- 詳細頁面html設計
- 詳細頁面css設計
19. 網站實施:CMS2
- 設定主頁欄位並連接到 CMS
- set登陸頁面欄位並連接到 CMS
- 詳情頁欄位設定和CMS連接
20. 網站實施:CMS3
- 增加語言切換功能
- 上傳內容
- 整理設定
21. 網站實施:託管
- 資料備份
- 託管連線
第 05 節. 結尾
22. 多種使用可能性
- 看看不同結構的網站
- 了解如何透過媒體管理您的作品集
- 按媒體處理完成的網站媒體
面試
平面設計師Haneul Park neul 想說的話
本次課程的重點是什麼?
在這一部分中,您從各個角度探索您的投資組合,並建立一個與您的投資組合相符的連續且簡單的更新系統。我也認為,能夠粗略地體驗創建網站所需的從設計到實現的整個過程,並且在不使用現成的情況下學習一種具有高度設計自由度的實現方法是很重要的一點。 - 製作模板或主題。
您認為導師的優勢或差異是什麼?
我主要從事平面設計工作,但當我碰巧擔任UI設計師時,我能夠培養出一種形式追隨功能的感覺。我相信我的優勢和差異在於設計和實現一個自始至終既可用又有趣的網站的經驗。在 Figma 的目錄中,我們想分享一個高效且免費的網站設計過程,以控制適當的可用性和樂趣。
學生能從課程中獲得什麼?
我希望你能養成不斷整理和展示你的工作過程和結果的習慣,並因此創建你自己的檔案。因為組織良好的檔案可以直接和間接地提供幫助。另外,網站設計和實施並沒有你想像的那麼困難和有趣,對吧?我希望您能了解自己是否想了解更多。
我們將指導您完成該軟體的使用。
本課程使用Figma 桌面應用程式版本 116.2.4、Visual Studio Code 1.71.1、MAMP 6.6 和 FileZilla 3.56.0進行。請安裝相應版本的軟體,以確保順利參與課程。
* 所有軟體都是免費的,可以下載最新版本。
*軟體和材料不單獨提供。
