Photo by Fotis Fotopoulos on Unsplash
「靜態」和「動態」的差異?
最簡單分辨的方式
有程式在運作「動態」；
無程式在運作「靜態」。
常常會被誤認為，網站視覺會動就是「動態」，不會動就是「靜態」。
一般這種視覺的「動」，我們稱之為「效果」，例如進場效果、滾動視差、錨點…等等。
架設網站需要那些工具?
主機空間
以年為單位續約
一般最省錢的方式是「虛擬主機」，概念就像是一棟樓裡面有很多套房，你租的套房裡面放置所有網站的內容，包含程式語法、圖片資料。
網域
以年為單位續約
你家的門牌，也就是網域，例如: https://vocus.cc/salon/shuichingdesign
SSL憑證
以年為單位續約
有憑證會顯示為 https://
無憑證只會顯示 http://，差別在 s。
沒有憑證會降低 Google 評分，也會影響排名，並且使用者在開網站時，會顯示「不安全狀態」，讓使用者對於這個網站安全性，會有疑慮。
建置網站的流程
了解需求 User story
需要解決什麼問題？達到什麼目的？
建議用「以終為始」的邏輯，要解決「問題」，前提一定要知道「目的」，才開始想怎麼解決和開發。
就像拼圖一樣，你會先看盒子的完成圖（目的），再開始拿起你第一片拼圖。
Photo by Headway on Unsplash
功能圖 Functional map
知道「問題」和「目的」後，規劃出哪些「功能」。
例如 : 購物車、會員管理、紅利點數…等等功能。
Photo by Daria Nepriakhina 🇺🇦 on Unsplash
流程圖 Flow chart
知道「功能」後，梳理出所有會發生的事件。
一般來說，一個動作或出現「成功」或「失敗」，那我們需要如何引導「使用者」做「下一步」動作，非常考驗設計流程。
Photo by Christina @ wocintechchat.com on Unsplash
線框圖 Wireframe
有了流程圖後，針對這些流程，進行每個頁面的佈局規畫（一個頁面包含很多區塊）。
例如 : 「首頁」會包含 header 、關於我們、產品輪播、訊息輪播、footer …等等區塊佈局。
Photo by Sigmund on Unsplash
樣機 Mockup
有了線框圖的區塊規劃，開始對這些區塊進行視覺化設計，賦予美美的圖面。
Photo by Tran Mau Tri Tam ✪ on Unsplash
原型 Prototype / 用戶界面 UI flow
有了 Mockup 界面設計圖後，會先用 UI 繪製軟體，做 Prototype，當你點擊這個按鈕會連到哪個頁面，或是會出現什麼提示，模擬未來網站的動線。
例如：Figma、XD...等等軟體。
以上統稱為 UI/UX ，更講究的還會針對 UX 做研究、市調分析。
前、後端 Coding 開發
UI/UX 環節定案後，前、後端工程師進行語法撰寫開發。
Photo by James Harrison on Unsplash
資訊安全
進行「源碼檢測」和「弱點掃描」，強化資訊安全。
行銷分析
SEO 基礎設定、 埋 GTM 行銷碼、Sitemap 提交給 Google 驗證、測試網站效能跑分...等等的行銷優化事項。
網管中心
DNS 指向到指定的網域，才算是完成上線。
上線後還會壓力測試、效能監控、最後才是真正的戰爭...資安攻防戰 !
上線後
網站上線只是一切的開始，要如何從茫茫的網海脫穎而出，才是最大的課題。
透過 Analytics 、 Search console 上的數據分析，不斷優化內容和注意 SEO 的規範，提升自己網站的權重、排名、能見度，相信用心經營，一定能打中自己的目標族群 (TA)，轉換訂單，公司業績長紅 !
