跟著版塊做網站：用動態特效點滿視覺創意

0 seconds of 1 minute, 30 secondsVolume 0%

00:00

01:30

版塊設計 x 圖文不符上課囉

跟著版塊做網站：用動態特效點滿視覺創意

版塊帶你跟上網站設計趨勢！從團隊核心價值「動態回推設計」出發，學會設計動態特效網站！

1,098 人已購買

4.8

(28)

關於課程

課程包含

包含 1 章 12 單元、1 項作業

課程時長

2 時 13 分鐘

課程總人數

1098 位同學

觀看限制

不限觀看次數，還會附贈完課證書

課程內容

網站設計師常見的三個困擾：技能卡關、遲遲無法升等；開始彈性疲乏，對網站設計沒了熱情；想進修提升功力，卻覺得市售課程教得太淺。

「用動態特效，為你的網站作品增添新意吧！」以黑色顆粒質感背景搭配白色與橘色粗體文字，並加入水平速度線與向下尖角造型，營造鮮明的動態視覺效果。

「動態特效網站」是透過程式編寫，製作動態視覺特效的網站設計手法，能吸引目光、傳遞資訊並帶給使用者驚喜體驗，品牌與專案也開始採用此方法。

▾ 添加動態特效前的《版塊官網》

Block Studio 網站首頁介面，以地圖與河流線稿為主視覺，右側呈現「FORM 專案詢問」與「CAREER 徵人頻道」，標示 Since 2015、2018/07/17 及職缺 Web Designer 網站設計師，頁首另有 32°C 資訊。

▾ 添加動態特效後的《版塊官網》

課程聚焦動態特效網站設計，指出除了工程端技術配合，網站設計師的規劃也是成功關鍵，並將從創意思考與製作流程出發，教你設計吸睛的網站動態特效。

Block Studio 講師擅長以絢麗順暢的動態特效，打造兼具美感與互動性的網站作品，服務涵蓋知名品牌與政府機關，曾獲金點設計獎、德國設計獎、Awwwards、iF 設計獎及亞洲設計獎。

▾ 版塊作品《放視大賞》

▾ 版塊作品《顏社主場秀》

▾ 版塊作品《總統聊天室》

課程以版塊的「動態回推設計」為核心，涵蓋創意發想、動態配置與視覺呈現，從關鍵字發想、特效分類到網站 layout 與動態特效細節，搭配演練操作和案例示範。

製作前提先建立動態特效網站的基本認知，了解其優勢與潛能，再進入設計。事前評估要件分為目的、設備與資源：視覺型需主機與預算，資訊型需瀏覽器與人力，另列功能型。

創意概念發想單元介紹「視覺轉化法」：運用關鍵字發想，將專案文字需求轉化成視覺畫面，再延伸為創意，提升作品層次；流程包含想（品牌）、看（視覺）、碰（材料）、感（概念）、動（動能）。

#3 動態特效配置，透過拆解動態特效的規劃流程，整理載入、轉場、進場、代表、持續、滾動、游標、點擊、設備、回饋與離場等互動節點，掌握特效搭配與設計細節。

▾ 版塊作品《土地公文化館》首頁載入動態

▾ 版塊作品《三十還真》進場動態

▾ 版塊作品《TCCF》代表動態

第4部分「協作溝通優化」聚焦三階段管理客戶對設計的期待：釐清目標、確定視覺方向、呈現成品，透過需求確認、競業分析、關鍵字發想、demo與動態試作，提升協作和執行品質。

課程特別收錄「動態特效素材包」，整理代表、轉場、滾動、載入、持續、游標、回饋與設備動態，搭配常用素材與語法，方便測試效果並應用於網頁設計。

本課程內容無涵蓋程式技術語法。

動態特效網站課程適合已有網站設計基礎、卻覺得理解不夠深入的學習者，以及在業界數年、想擺脫既有模板框架的設計者；透過系統化學習，提升視覺創意、互動體驗、協作效率與成品成就感。

補充資訊

回覆問題、作業規劃

▹ 回覆問題

講師會固定兩週一次來回覆大家的問題，但有時候會問題量比較大，需要請大家耐心等待一下。

▹ 作業規劃

預計參照課程內容規劃讓大家可以實際練習的小練習，但因為講師能回覆的時間有限，因此會固定一段時間給予回饋，若有學生已經繳交，但尚未被回覆的人，請耐心等候。

課程內容相關說明

課程內容以實際開課為準，開課單位保有修改權利。

哪些人適合這堂課？

想突破網站設計天花板，做出更多厲害有趣的網站作品的同學。這堂課程將能幫你打破過往對網站設計的既定看法，用不同的思維設計出與眾不同的作品。

你可以學到

▹ 了解版塊團隊的設計核心價值：課程以「動態回推設計」為核心，深入剖析動態特效網站的設計流程與佈局手法。 ▹ 培養專業的動態特效設計觀念：看懂「動態特效網站」的優勢、用法和潛能，在設計實作前先奠下良好基礎。 ▹ 發想出更獨到的創意概念：利用「關鍵字發想法」，將專案的文字需求、轉化為視覺畫面，進一步擴展成厲害有層次的創意。 ▹ 了解如何配置動態特效：透過課程內容與 Codepen 輔助，掌握設計細節和各種動態特效搭配訣竅，輕鬆找到設計甜蜜點。 ▹ 優化協作溝通技能：以「設計師角度出發」分享與工程師及客戶的溝通技巧，由內而外強化協作能力，進一步提升作品品質。

上課前的準備

需要準備的工具 / 軟體（若購買課程前不清楚版本是否支援，請先留言與老師確認。）

▹ 硬體：電腦或筆電 ▹ 軟體：Codepen ▹ 其他：筆記本、筆，紀錄與發想用

需要具備的背景知識

程式語法基礎非必要，只要具備設計美感與網站設計基本常識、並對動態特效網站有興趣的你，都很適合上這堂課！

單元一覽

1 章 12 單元｜總時長 133 分鐘

全部收合

本課程無分章節

單元 1 - 課程前言｜跟著版塊設計，掌握動態特效網站的優勢