WebDesign 進階網頁設計課程總覽

網頁基礎複習及最新趨勢

網頁基礎概念複習

網頁最新設計趨勢
  1. 響應式網頁設計RWD, Responsive Web Design
  2. 大背景(全幅背景) Full-width Background
  3. 一頁式網頁One-page Web Design
  4. 固定式選單Fixed Menu
  5. 扁平化設計Flat Design
  6. 微動畫Micro Animation
  7. SVG網頁圖片向量格式
  8. 磚牆式設計
  9. 頁尾區塊Big Footer

網站企劃

以專題製作導向以及實際政府標案提案為範例,說明網站建置需求與服務建議製作與提案的做法,並應用於本課程作業,以實際體驗網站建置的真實意義與做法。

一般的標案提出需求後,約一到兩個禮拜要提出服務建議書,並於3-7天左右簡報,時程非常的緊湊,除了需提出規劃建議外,還需要提出基本的視覺規劃,包含首頁、基本模組化視覺設計等,因此多練習及累積作品是非常重要的,也期待大家在專案設計的實務練習中,能讓自己更具專業實務能力。

詳見網站企劃單元及視覺模組化製作單元|
  1. 網站企劃|專題網頁提案|
  2. 網頁視覺編輯|視覺模組化製作單元

Google Analytics|認識

Google分析(Google Analytics)是一個由Google所提供的網站流量統計服務。Google 分析(Analytics)現在是網際網路上使用最廣泛的網路分析服務。 透過在網站中埋入Google Analytics追蹤碼,網站主們可以獲取進站流量的資料,包括來源、使用者、裝置、造訪路徑等,透過Google Analytics,可以更全面的了解品牌的受眾,進而為潛在客戶優化購買、造訪流程,提高轉單意願,對於網頁入門來說是非常推薦使用的工具。

Google Analytics (GA)分析的是「使用者和網站之間的互動行為」,也就是使用者在瀏覽網站時做了哪些事情。分析使用者和網站產生的互動行為有什麼用途呢?最大的用途是可從中獲得,所謂商業上的洞見(insight)。藉由從GA獲得的洞見,可以幫助你驗證哪些是有效的行銷決策、哪些需要再調整,以及制定下一步策略。

例如, GA數據可以告訴你,怎麼樣的人是產品或網站的忠實用戶、他們為你帶來了多少商業價值等,了解這些資訊後,可以幫助你決定之後的行銷策略,是否應該要特別針對這群人操作,以及有哪些切入點。或者,GA可以讓你了解用戶在網站上的一系列行為路徑,用戶在每個頁面的操作行為(加入購物車、點擊播放影片等),或在頁面耗時多久等等,這些資訊能幫助你決定該如何優化及調整網站介面或內容。除了這些,GA也能帶你回顧及比較兩個同區間、不同時期的相對變化,例如去年第一季及今年第一季的數據差異,可用來檢視行銷策略的效果。

GA是非常強大的分析工具,能以全面性的角度審視使用者在網站上的活動,以及分析使用者的相關資料,讓你能更準確地調整網站與內容,讓使用者獲得更佳體驗的同時,一併提升商業利益。
詳見Google Analytics單元 Google Analytics | Google分析證照解析|

Google Analytics |官方網站

  1. Google Analytics (分析)官網

  2. Google Analytics (分析) 個人認證
  3. Google Analytics (分析) 個人認證測驗涵蓋 Google Analytics (分析) 的多項基礎及進階概念,包括規劃與原則、實作與資料收集、設定與管理、轉換和歸屬,以及報表、指標與維度。
  4. 好學堂|Skillshop
  5. 好學堂為有志學習的使用者整合了多種資源,讓你透過 Google 專業工具和解決方案邁向成功。

專題網站製作說明

請針對政府標案模式,找一主題|指定主題,或以專題製作方向,模擬一完整之真實網站製作:
  1. 期中報告前
    • 可組織團隊製作(也可一人製作),於第四週前繳交組員名單,並請於企劃書|服務建議書中,詳列每位成員的專長、案例及負責項目。
    • 針對主題內容及製作方向,選擇一個版型範例為視覺設計規劃方向。
    • 針對網站製作方向,撰寫企劃書|服務建議書|需含視覺規劃。
    • 以企劃書|服務建議書內容,製作提案簡報|需以規劃風格為主,具視覺美感。

  2. 期末成果
    • 針對服務建議書方向,完成一個專業RWD多頁網站|至少10頁(基本60分,並依團隊人數斟酌給分)
    • 撰寫成果報告書(包含後續推廣規劃)。
    • 以成果報告書內容,製作結案簡報|需以網站風格為主,具視覺美感|並請精簡報告。

詳見| 期中期末作業說明

 服務建議書|成果報告書|期中期末報告|學長姐範例參考


澎湖旅遊網|網站設計案

威尼斯影城|網站改版案

小叮噹科學園區|網站改版案

台灣失智症協會|網站改版案

家扶基金會|網站改版案

應用類型

  1. 畢業專題應用|RWD|多頁
    1. 流新語|入圍金點新秀設計獎|數位多媒體類|
    2. 流新語|第一版

    3. 這不是禮品店|紅點設計獎|華麗禮物背後隱藏的現實與真相,性暴力議題

    4. 盲思特|認識怪獸家長

    5. 品次方|品格教育

  2. 專案應用|多頁
    1. 中國科大視傳系網頁
    2. 金門瓊林再造歷史現場 產業創新與管理培力計畫

    3. 中國科大規劃與設計學院4E計畫成果|OnePage延伸
    4. 臺灣亞洲交流基金會
    5. 玉山論壇|亞洲創新與進步對話
    6. 台灣佛教傳道協會
    7. 京都亞洲研究國際聯盟